<!-- Three.js WebGPU 水面效果示例 - 功能描述与技术分析
🎯 项目概述
这是一个基于Three.js WebGPU后端的交互式3D场景，展示了一个具有高级水面效果的虚拟环境。场景包含浮动冰球、动画人物和动态水面，实现了逼真的折射、焦散和深度效果。

🌊 核心功能
1. 动态水面系统
实时折射效果：水面根据视角和深度折射水下物体

Worley噪声波纹：使用程序化噪声生成自然的水面波动

深度感知渲染：根据水深调整颜色和透明度

焦散效果：模拟水下光线聚焦效果

2. 场景元素
浮动冰球阵列：100个冰球以网格排列，每个都有独立的浮动动画

3D动画人物：加载GLTF模型并播放骨骼动画

圆柱形地面：作为场景的基础平台

动态环境：天空渐变背景和雾效增加深度感

3. 交互功能
轨道控制器：鼠标拖拽旋转、滚轮缩放

自动旋转：场景自动缓慢旋转展示

实时参数调整：通过调试面板调整水面和地面参数

响应式布局：适应不同屏幕尺寸

4. 视觉效果增强
多光源系统：方向光（太阳）、半球光（环境光）

实时阴影：高质量方向光阴影

后处理效果：高斯模糊、暗角效果、深度感知模糊

动态背景：基于法线方向的天空渐变

🔬 核心技术要点
1. WebGPU渲染管道
javascript
// WebGPU特有的渲染器初始化
renderer = new THREE.WebGPURenderer();
硬件加速：利用现代GPU的并行计算能力

显存管理：更高效的内存使用和缓冲区管理

异步操作：支持现代GPU的异步计算模式

2. TSL着色器语言
javascript
// 使用TSL节点式着色器编程
const waterColor = waterIntensity.mul(1.4).mix(
    color(0x0487e2),
    color(0x74ccf4)
);
节点式编程：可视化着色器构建方式

类型安全：编译时类型检查

可组合性：易于复用和组合着色器片段

3. 水面折射算法
关键技术：

深度缓冲区采样：比较水面深度和场景深度

UV偏移折射：基于水面法线和高度偏移采样坐标

菲涅尔效应：视线与水面夹角影响透明度

深度衰减：远处折射效果减弱

javascript
// 折射UV计算
const refractionUV = screenUV.add(vec2(0, waterIntensity.mul(.1)));
// 深度测试避免看到水面后物体
const depthTest = linearDepth(viewportDepthTexture(refractionUV)).sub(depth);
4. 程序化纹理生成
Worley噪声应用：

细胞状图案：适合模拟水面波纹

多层叠加：不同尺度的噪声混合增加细节

时间动画：随时间移动噪声图案

GPU计算：实时在着色器中生成

5. 后处理管道
javascript
// 后处理节点链
postProcessing.outputNode = waterMask.select(
    scenePassColorBlurred,
    scenePassColorBlurred.mul(color(0x74ccf4)).mul(vignette)
);
处理流程：

场景渲染通道：捕获原始3D场景

高斯模糊：根据深度调整模糊强度

水面遮罩：区分水面和非水面区域

颜色分级：非水面区域添加蓝色调

暗角效果：边缘变暗，聚焦中心

6. 深度缓冲技术
多深度系统：

线性深度：均匀的深度表示，便于计算

视口深度：当前渲染像素的深度

水面深度：水面平面的深度值

深度比较：判断物体在水上还是水下

7. 光照与阴影
多光源配置：

方向光（太阳）：主光源，投射高质量阴影

半球光（环境）：模拟天空和环境反射

阴影优化：阴影偏移、分辨率调整、视锥体优化

8. 动画系统
分层动画控制：

GLTF骨骼动画：使用AnimationMixer播放

程序化动画：冰球的正弦波浮动

时间同步：Clock对象统一管理时间

🛠️ 性能优化策略
GPU优化
批处理渲染：冰球使用相同几何体和材质

纹理复用：共享纹理减少显存占用

着色器优化：TSL编译器自动优化节点

深度预计算：避免重复深度计算

内存管理
几何体复用：所有冰球共享同一个几何体

材质实例化：相同材质参数的共享实例

纹理压缩：自动Mipmap生成

对象池：大量相似对象的高效管理

渲染优化
视锥体裁剪：相机视野外的物体不渲染

LOD准备：虽然未实现，但架构支持

异步加载：模型和纹理异步加载不阻塞

增量渲染：后处理效果按需应用

📊 技术架构层次
text
┌─────────────────────────┐
│   用户交互层            │ ← 鼠标/触摸输入
├─────────────────────────┤
│   控制器层              │ ← OrbitControls
├─────────────────────────┤
│   动画管理层            │ ← Clock, AnimationMixer
├─────────────────────────┤
│   场景管理层            │ ← Scene, Objects, Lights
├─────────────────────────┤
│   渲染管道层            │ ← WebGPURenderer
├─────────────────────────┤
│   着色器层（TSL）       │ ← 水面、材质、后处理节点
├─────────────────────────┤
│   后处理层              │ ← PostProcessing, GaussianBlur
├─────────────────────────┤
│   WebGPU API层          │ ← 底层图形API调用
└─────────────────────────┘
🎨 视觉艺术效果
色彩设计
蓝色主色调：从深蓝(#0487e2)到浅蓝(#74ccf4)的渐变

暖色点缀：太阳光的暖黄色(#FFE499)形成对比

深度色彩：远处物体偏蓝，增加空间感

动态效果
水面波动：自然的不规则波纹

光线变化：水面折射随视角变化

浮动节奏：冰球异步浮动增加自然感

雾效渐变：远处物体融入背景

🔮 技术扩展可能性
短期增强
交互式水面：点击产生涟漪

天气系统：雨雪效果叠加

昼夜循环：动态光照变化

水下视角：进入水下的视觉效果

长期扩展
物理模拟：真实的流体动力学

光线追踪：WebGPU的光追支持

AI生成内容：动态生成场景元素

多人在线：共享虚拟水域

📈 性能指标
目标帧率：60 FPS @ 1080p

显存占用：约100-200MB

CPU负载：< 10%（动画计算）

GPU负载：中等（取决于水面复杂度）

🏆 技术亮点总结
现代化渲染：全面采用WebGPU，面向未来

高质量水面：工业级水面效果实现

可视化编程：TSL降低着色器开发难度

完整生态系统：Three.js完整功能栈应用

生产就绪：包含调试、优化、响应式设计 -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面标题：显示为中文，描述示例内容 -->
    <title>Three.js WebGPU 示例 - 背景水面效果</title>
    
    <!-- 字符编码设置：使用UTF-8支持中文 -->
    <meta charset="utf-8">
    
    <!-- 视口设置：针对移动设备优化，禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    
    <!-- 外部CSS样式表：用于页面基础样式 -->
    <link type="text/css" rel="stylesheet" href="example.css">
</head>
<body>

    <!-- 信息展示区域：包含示例标题、描述和控制链接 -->
    <div id="info">
        <!-- Three.js官方网站链接 -->
        <a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
            <!-- 这里通常是一个logo图片，通过CSS背景图实现 -->
        </a>

        <!-- 标题容器：包含主标题和副标题 -->
        <div class="title-wrapper">
            <!-- 主标题链接到Three.js官网 -->
            <a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
            <!-- 副标题：当前示例名称 -->
            <span>背景水面效果演示</span>
        </div>

        <!-- 示例详细描述 -->
        <small>实现带有深度效果的水面折射渲染技术</small>
        
    </div>

    <!-- 模块导入映射配置：告诉浏览器如何解析模块导入路径 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.webgpu.js",
                "three/webgpu": "../build/three.webgpu.js",
                "three/tsl": "../build/three.tsl.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <script type="module">
        // ==================== 导入模块 ====================
        // 导入Three.js核心库（WebGPU版本）
        import * as THREE from 'three/webgpu';
        
        // 导入Three.js着色器语言（TSL）的各种功能节点
        // 这些节点允许我们在着色器中进行复杂的数学和图形运算
        import {
            color,           // 颜色节点：用于创建和操作颜色
            vec2,           // 二维向量节点：用于UV坐标等
            pass,           // 渲染通道节点：用于后处理
            linearDepth,    // 线性深度节点：获取线性深度值
            normalWorld,    // 世界空间法线节点
            triplanarTexture, // 三平面纹理映射：解决UV拉伸问题
            texture,        // 纹理节点：加载和应用纹理
            objectPosition, // 对象位置节点
            screenUV,       // 屏幕UV坐标：0到1范围的屏幕坐标
            viewportLinearDepth, // 视口线性深度
            viewportDepthTexture, // 视口深度纹理
            viewportSharedTexture, // 视口共享纹理
            mx_worley_noise_float, // Worley噪声生成器
            positionWorld,  // 世界空间位置
            time            // 时间节点：用于动画
        } from 'three/tsl';
        
        // 导入高斯模糊后处理节点：用于创建模糊效果
        import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
        
        // 导入调试器：用于实时调整参数和查看效果
        import { Inspector } from 'three/addons/inspector/Inspector.js';
        
        // 导入GLTF模型加载器：用于加载3D模型
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        
        // 导入轨道控制器：允许用户用鼠标控制相机
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // ==================== 全局变量声明 ====================
        let camera;      // 相机对象：定义观察视角
        let scene;       // 场景对象：包含所有3D对象
        let renderer;    // 渲染器：负责将3D场景渲染到2D屏幕
        
        let mixer;       // 动画混合器：管理模型动画
        let objects;     // 物体组：包含多个浮动的冰球
        let clock;       // 时钟：用于时间相关计算和动画
        
        let model;       // 加载的3D人物模型
        let floor;       // 地面对象
        let floorPosition; // 地面位置控制变量
        
        let postProcessing; // 后处理效果对象
        let controls;       // 用户交互控制器

        // ==================== 初始化函数 ====================
        // 程序入口点：当页面加载完成后调用
        init();

        function init() {
            // -------------------- 创建相机 --------------------
            // 使用透视相机模拟人眼视角
            camera = new THREE.PerspectiveCamera(
                50,                           // 视野角度（FOV）：50度，角度越大看到的范围越广
                window.innerWidth / window.innerHeight, // 宽高比：根据窗口大小动态计算
                0.25,                         // 近裁剪面：距离相机0.25单位以内的物体不显示
                30                            // 远裁剪面：距离相机30单位以外的物体不显示
            );
            camera.position.set(3, 2, 4);     // 设置相机初始位置：(x=3, y=2, z=4)

            // -------------------- 创建场景 --------------------
            scene = new THREE.Scene();
            
            // 添加雾效：模拟大气透视，增加场景深度感
            scene.fog = new THREE.Fog(
                0x0487e2,  // 雾的颜色：浅蓝色
                7,         // 近雾距离：距离相机7单位开始有雾
                25         // 远雾距离：距离相机25单位完全被雾覆盖
            );
            
            // 设置动态背景：基于法线方向的渐变背景
            // normalWorld.y是法线的y分量，在上方为1，下方为-1
            // mix函数根据这个值在两种蓝色之间插值
            scene.backgroundNode = normalWorld.y.mix(
                color(0x0487e2),  // 上方的颜色：亮蓝色
                color(0x0066ff)   // 下方的颜色：深蓝色
            );
            
            camera.lookAt(0, 1, 0);  // 相机看向场景中心偏上位置(0,1,0)

            // -------------------- 创建光照系统 --------------------
            
            // 1. 主方向光：模拟太阳光
            const sunLight = new THREE.DirectionalLight(0xFFE499, 5);
            sunLight.castShadow = true;  // 启用阴影投射
            
            // 配置阴影相机：定义阴影计算的视锥体
            sunLight.shadow.camera.near = .1;      // 阴影近平面
            sunLight.shadow.camera.far = 5;        // 阴影远平面
            sunLight.shadow.camera.right = 2;      // 右侧边界
            sunLight.shadow.camera.left = -2;      // 左侧边界
            sunLight.shadow.camera.top = 1;        // 上侧边界
            sunLight.shadow.camera.bottom = -2;    // 下侧边界
            
            // 阴影贴图分辨率：影响阴影质量
            sunLight.shadow.mapSize.width = 2048;   // 宽度2048像素
            sunLight.shadow.mapSize.height = 2048;  // 高度2048像素
            
            sunLight.shadow.bias = -0.001;  // 阴影偏移：解决阴影痤疮问题
            sunLight.position.set(.5, 3, .5);  // 光源位置

            // 2. 半球光：模拟水环境的环境光照
            // HemisphereLight接收天空颜色和地面颜色，在两者之间插值
            const waterAmbientLight = new THREE.HemisphereLight(
                0x333366,  // 天空颜色：深蓝色
                0x74ccf4,  // 地面颜色：浅蓝色
                5          // 光照强度
            );
            
            // 3. 天空环境光：照亮场景顶部
            const skyAmbientLight = new THREE.HemisphereLight(
                0x74ccf4,  // 天空颜色：浅蓝色
                0,         // 地面颜色：黑色
                1          // 光照强度
            );

            // 将所有光源添加到场景
            scene.add(sunLight);
            scene.add(skyAmbientLight);
            scene.add(waterAmbientLight);

            // 创建时钟对象：用于精确的时间管理和动画控制
            clock = new THREE.Clock();

            // -------------------- 加载3D人物模型 --------------------
            const loader = new GLTFLoader();
            // 加载Michelle模型（GLTF格式）
            loader.load('models/gltf/Michelle.glb', function (gltf) {
                model = gltf.scene;  // 获取模型场景
                
                // 启用模型的阴影投射：模型的第一层第一个子对象会投射阴影
                model.children[0].children[0].castShadow = true;

                // 创建动画混合器：用于控制模型动画
                mixer = new THREE.AnimationMixer(model);

                // 获取并播放第一个动画剪辑
                const action = mixer.clipAction(gltf.animations[0]);
                action.play();

                // 将模型添加到场景
                scene.add(model);
            });

            // -------------------- 创建浮动的冰球对象 --------------------
            const textureLoader = new THREE.TextureLoader();
            
            // 加载水/冰纹理贴图
            const iceDiffuse = textureLoader.load('./textures/water.jpg');
            iceDiffuse.wrapS = THREE.RepeatWrapping;  // 水平方向重复
            iceDiffuse.wrapT = THREE.RepeatWrapping;  // 垂直方向重复
            iceDiffuse.colorSpace = THREE.NoColorSpace;  // 不进行颜色空间转换（保持原始）

            // 创建三平面纹理映射：解决球体UV拉伸问题
            // triplanarTexture根据法线方向从三个平面投影纹理
            const iceColorNode = triplanarTexture(texture(iceDiffuse))
                .add(color(0x0066ff))  // 添加蓝色色调
                .mul(.8);              // 稍微变暗

            // 创建二十面体几何体：球体的低多边形近似
            const geometry = new THREE.IcosahedronGeometry(1, 3);  // 半径1，细分级别3
            
            // 创建标准网格材质，使用自定义颜色节点
            const material = new THREE.MeshStandardNodeMaterial({
                colorNode: iceColorNode  // 使用上面创建的复杂颜色节点
            });

            // 创建多个冰球
            const count = 100;      // 总共100个冰球
            const scale = 3.5;      // 冰球之间的间距
            const column = 10;      // 每行10个冰球

            // 创建组对象：方便统一管理多个冰球
            objects = new THREE.Group();

            // 排列冰球：网格布局
            for (let i = 0; i < count; i++) {
                const x = i % column;    // 计算列位置：0到9
                const y = Math.floor(i / column); // 计算行位置

                const mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(x * scale, 0, y * scale);  // 设置位置
                mesh.rotation.set(  // 随机旋转
                    Math.random() * Math.PI,
                    Math.random() * Math.PI,
                    Math.random() * Math.PI
                );
                objects.add(mesh);
            }

            // 调整整体位置使其居中显示
            objects.position.set(
                ((column - 1) * scale) * -.5,  // 水平居中
                -1,                            // 整体下移1单位
                ((count / column) * scale) * -.5  // 垂直居中
            );

            scene.add(objects);

            // -------------------- 创建水面效果 --------------------
            // 时间变量：用于动画，乘以0.8减慢速度
            const timer = time.mul(.8);
            
            // 使用世界位置的x和z分量作为UV坐标（忽略y轴）
            const floorUV = positionWorld.xzy;

            // 生成两层Worley噪声：用于模拟水面波纹
            // Worley噪声生成细胞状图案，适合模拟水面
            const waterLayer0 = mx_worley_noise_float(
                floorUV.mul(4).add(timer)  // 缩放4倍并随时间移动
            );
            const waterLayer1 = mx_worley_noise_float(
                floorUV.mul(2).add(timer)  // 缩放2倍并随时间移动
            );

            // 混合两层噪声：相乘可以得到更复杂的效果
            const waterIntensity = waterLayer0.mul(waterLayer1);
            
            // 根据噪声强度混合两种蓝色
            const waterColor = waterIntensity.mul(1.4).mix(
                color(0x0487e2),  // 深水色
                color(0x74ccf4)   // 浅水色
            );

            // -------------------- 深度效果计算 --------------------
            // 获取水面本身的线性深度值（距离相机的距离）
            const depth = linearDepth();
            
            // 计算视口深度与水面深度的差值
            // viewportLinearDepth是当前像素的深度
            const depthWater = viewportLinearDepth.sub(depth)
                .toInspector('水面 / 深度', (node) => node.oneMinus());  // 反转并添加到调试器
            
            // 重新映射深度差值到0-1范围，用于控制效果强度
            const depthEffect = depthWater.remapClamp(-.002, .04);

            // -------------------- 折射效果 --------------------
            // 创建折射UV：基于屏幕UV和水面强度进行垂直偏移
            const refractionUV = screenUV.add(
                vec2(0, waterIntensity.mul(.1))  // y方向偏移，模拟折射
            ).toInspector('水面 / 折射UV');

            // 测试折射UV处的深度：避免看到水面后面的物体
            // 如果折射点在水面后面，就不应该显示
            const depthTestForRefraction = linearDepth(
                viewportDepthTexture(refractionUV)  // 在折射UV处采样深度纹理
            ).sub(depth);  // 减去水面深度

            // 为折射效果重新映射深度值
            const depthRefraction = depthTestForRefraction.remapClamp(0, .1);

            // 最终UV选择逻辑：
            // 如果深度测试失败（折射点在水面后面），使用原始UV
            // 否则使用折射UV
            const finalUV = depthTestForRefraction.lessThan(0)
                .select(screenUV, refractionUV);

            // 使用最终UV采样场景纹理
            const viewportTexture = viewportSharedTexture(finalUV)
                .toInspector('水面 / 视口纹理 + 折射UV');

            // -------------------- 创建水面材质 --------------------
            const waterMaterial = new THREE.MeshBasicNodeMaterial();
            waterMaterial.colorNode = waterColor.toInspector('水面 / 颜色');
            
            // 设置背景混合节点：
            // 根据深度效果混合原始场景和折射场景
            waterMaterial.backdropNode = depthEffect.mix(
                viewportSharedTexture(),  // 原始场景
                viewportTexture.mul(      // 折射场景
                    depthRefraction.mix(1, waterColor)  // 根据深度混合颜色
                )
            );
            
            // 设置背景透明度：折射越强，透明度越高
            waterMaterial.backdropAlphaNode = depthRefraction.oneMinus();
            waterMaterial.transparent = true;  // 启用透明度

            // 创建水面网格：一个非常薄的盒子
            const water = new THREE.Mesh(
                new THREE.BoxGeometry(50, .001, 50),  // 宽50，高0.001，深50
                waterMaterial
            );
            water.position.set(0, 0, 0);  // 放在场景中心
            scene.add(water);

            // -------------------- 创建地面 --------------------
            floor = new THREE.Mesh(
                new THREE.CylinderGeometry(1.1, 1.1, 10),  // 圆柱体：上下半径1.1，高10
                new THREE.MeshStandardNodeMaterial({
                    colorNode: iceColorNode  // 使用与冰球相同的材质
                })
            );
            floor.position.set(0, -5, 0);  // 放在水面下方
            scene.add(floor);

            // -------------------- 焦散效果 --------------------
            // 计算当前点相对于水面的垂直位置
            const waterPosY = positionWorld.y.sub(water.position.y);

            // 计算水面附近的过渡效果：
            // 水面以下时，根据距离水面的远近渐变
            // 水面上方时，根据法线方向渐变（模拟水面上的物体）
            let transition = waterPosY.add(.1)  // 加0.1的偏移
                .saturate()    // 限制在0-1范围
                .oneMinus();   // 反转
                
            transition = waterPosY.lessThan(0)  // 判断是否在水面以下
                .select(transition,  // 水面以下：使用计算的过渡
                        normalWorld.y.mix(transition, 0))  // 水面上：根据法线混合
                .toVar();  // 转换为变量，方便后续使用

            // 创建焦散颜色节点：混合基础颜色和水面效果
            const colorNode = transition.mix(
                material.colorNode,           // 基础材质颜色
                material.colorNode.add(waterLayer0)  // 添加水波效果
            );

            // 应用焦散效果到地面（注释掉了冰球的应用）
            floor.material.colorNode = colorNode;

            // -------------------- 创建渲染器 --------------------
            renderer = new THREE.WebGPURenderer();
            renderer.setPixelRatio(window.devicePixelRatio);  // 支持高DPI屏幕
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setAnimationLoop(animate);  // 设置渲染循环
            renderer.inspector = new Inspector();  // 关联调试器
            document.body.appendChild(renderer.domElement);  // 将canvas添加到页面

            // -------------------- 创建用户交互控制器 --------------------
            controls = new OrbitControls(camera, renderer.domElement);
            controls.minDistance = 1;      // 最近缩放距离
            controls.maxDistance = 10;     // 最远缩放距离
            controls.maxPolarAngle = Math.PI * 0.9;  // 最大俯仰角（防止相机翻转）
            controls.autoRotate = true;    // 启用自动旋转
            controls.autoRotateSpeed = 1;  // 旋转速度
            controls.target.set(0, .2, 0); // 旋转中心点
            controls.update();             // 初始化控制器

            // -------------------- 创建调试GUI --------------------
            const gui = renderer.inspector.createParameters('设置面板');

            // 创建地板位置控制向量
            floorPosition = new THREE.Vector3(0, .2, 0);

            // 添加地板高度控制滑块
            gui.add(floorPosition, 'y', -1, 1, .001)
                .name('地板高度');

            // -------------------- 后处理效果 --------------------
            
            // 1. 创建场景渲染通道
            const scenePass = pass(scene, camera);
            
            // 2. 获取颜色和深度信息
            const scenePassColor = scenePass.getTextureNode();
            const scenePassDepth = scenePass.getLinearDepthNode()
                .remapClamp(.3, .5);  // 重新映射深度范围

            // 3. 创建水面遮罩：基于屏幕空间判断哪些像素属于水面
            const waterMask = objectPosition(camera).y
                .greaterThan(screenUV.y.sub(.5).mul(camera.near))
                .toInspector('后处理 / 水面遮罩');

            // 4. 创建高斯模糊效果
            const scenePassColorBlurred = gaussianBlur(scenePassColor);
            
            // 5. 基于水面遮罩和深度控制模糊强度
            scenePassColorBlurred.directionNode = waterMask
                .select(
                    scenePassDepth,  // 水面区域：使用原始深度控制模糊
                    scenePass.getLinearDepthNode().mul(5)  // 非水面区域：增强模糊
                )
                .toInspector('后处理 / 模糊强度 [基于深度]', 
                    (node) => node.toFloat());

            // 6. 创建暗角效果：边缘变暗，中心明亮
            const vignette = screenUV.distance(.5)  // 计算到屏幕中心的距离
                .mul(1.35)    // 缩放距离值
                .clamp()      // 限制在0-1范围
                .oneMinus()   // 反转：中心为1，边缘为0
                .toInspector('后处理 / 暗角效果');

            // 7. 创建后处理对象
            postProcessing = new THREE.PostProcessing(renderer);
            
            // 8. 设置最终输出：
            //    - 水面区域：直接显示模糊后的场景
            //    - 非水面区域：添加蓝色调并应用暗角
            postProcessing.outputNode = waterMask.select(
                scenePassColorBlurred,  // 水面区域
                scenePassColorBlurred.mul(color(0x74ccf4)).mul(vignette)  // 非水面区域
            );

            // -------------------- 事件监听器 --------------------
            // 窗口大小变化时调整渲染
            window.addEventListener('resize', onWindowResize);
            
            // 添加键盘快捷键提示
            console.log('提示：按F12打开开发者工具，查看调试面板');
            console.log('提示：右侧调试面板可以实时调整参数');
        }

        // ==================== 窗口大小变化处理函数 ====================
        function onWindowResize() {
            // 更新相机宽高比
            camera.aspect = window.innerWidth / window.innerHeight;
            
            // 更新相机投影矩阵（必须调用）
            camera.updateProjectionMatrix();
            
            // 更新渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 如果是响应式设计，这里可能还需要更新其他UI元素
            console.log('窗口大小已调整：', window.innerWidth, 'x', window.innerHeight);
        }

        // ==================== 动画循环函数 ====================
        // 每一帧都会调用此函数
        function animate() {
            // 更新控制器状态（处理用户输入）
            controls.update();

            // 获取上一帧到这一帧的时间差（秒）
            const delta = clock.getDelta();

            // 更新地板位置：根据GUI控制值调整
            floor.position.y = floorPosition.y - 5;

            // 更新模型动画
            if (model) {
                mixer.update(delta);           // 更新动画混合器
                model.position.y = floorPosition.y;  // 同步模型高度
            }

            // 更新所有冰球的动画
            // 每个冰球都有独立的正弦波运动和旋转
            for (const object of objects.children) {
                // 正弦波浮动：每个物体有不同的相位（基于object.id）
                object.position.y = Math.sin(clock.elapsedTime + object.id) * .3;
                
                // 持续旋转
                object.rotation.y += delta * .3;
            }

            // 渲染后处理效果（最终输出到屏幕）
            postProcessing.render();
            
            // 可以在这里添加性能监控
            // const fps = 1 / delta;
            // if (fps < 30) console.warn('帧率较低：', fps.toFixed(1), 'FPS');
        }
        
        // ==================== 性能优化建议 ====================
        // 1. 减少冰球数量可以提升性能
        // 2. 降低阴影贴图分辨率可以提升性能
        // 3. 简化水面着色器可以减少GPU负载
        // 4. 使用LOD（细节层次）系统：远距离使用简单模型
        
        // ==================== 扩展功能建议 ====================
        // 1. 添加交互：点击水面产生涟漪
        // 2. 天气系统：雨雪效果
        // 3. 昼夜循环：动态光照变化
        // 4. 水下视角：添加水下模糊和气泡效果
        // 5. 反射效果：真实水面反射
    </script>
</body>
</html>