<!-- Three.js WebGPU 水效果演示 - 功能描述与技术分析
🌟 一、项目概述
这是一个基于 Three.js WebGPU 版本 的高质量实时水效果交互演示。项目模拟了一个夜晚游泳池场景，展示了先进的水面渲染技术、HDR环境照明和现代化的后处理效果链。

🏊 二、主要功能模块
1. 场景构建
HDR环境系统：使用高动态范围图像作为天空盒和环境光

游泳池模型：加载并显示高精度的3D游泳池模型

水面效果：动态、可交互的物理级水材质

周边环境：创建了四面环绕的地面，构成完整的场景包围

2. 交互功能
相机控制：支持鼠标拖拽旋转、滚轮缩放、右键平移

实时参数调节：可通过GUI面板调整水的颜色、波纹大小、流动方向

响应式设计：自动适应浏览器窗口大小变化

3. 视觉效果
动态水波纹：使用法线贴图动画模拟真实水波

环境反射：水面反射HDR环境贴图

泛光效果：亮部区域产生光晕，增强视觉效果

抗锯齿：FXAA后处理抗锯齿，消除边缘锯齿

🔧 三、核心技术点
1. WebGPU渲染架构
技术点	说明	优势
Three.js WebGPU后端	使用新一代图形API替代WebGL	更高性能，支持更多现代特性
TSL着色器语言	Three.js Shader Language节点系统	可视化着色器编辑，更易维护
多渲染目标（MRT）	单次渲染输出多个纹理（颜色、自发光等）	提升后处理效率
2. 水效果实现技术
javascript
// 核心水效果配置
WaterMesh(geometry, {
    color: '#99e0ff',              // 基础颜色
    scale: 2,                      // 波纹缩放
    flowDirection: Vector2(1, 1),  // 流动方向
    normalMap0: texture1,          // 法线贴图1
    normalMap1: texture2           // 法线贴图2（动画混合）
})
技术实现原理：

双法线贴图混合：使用两个法线贴图交叉混合，产生动态波纹效果

物理反射模型：基于PBR（物理基于渲染）计算水面反射

流动向量控制：通过方向向量控制水面流动动画

3. 后处理管线
text
渲染流程：
1. 场景渲染 → [主颜色纹理] + [自发光纹理]
2. 泛光效果 → 基于自发光纹理生成光晕
3. 颜色合并 → 主颜色 + 泛光效果
4. FXAA抗锯齿 → 消除边缘锯齿
5. 最终输出 → 显示到屏幕
关键技术：

Bloom泛光：提取亮部区域，应用高斯模糊产生光晕

FXAA：快速近似抗锯齿，性能友好的抗锯齿方案

色调映射：ACES Filmic色调映射，电影级色彩效果

4. 资源加载与优化
javascript
// 并行加载策略
Promise.all([
    gltfLoader.loadAsync('pool.glb'),      // 3D模型
    textureLoader.loadAsync('normal1.jpg'), // 纹理1
    textureLoader.loadAsync('normal2.jpg')  // 纹理2
])
优化措施：

Draco压缩：3D模型使用Draco格式压缩，减少文件大小

异步并行加载：同时加载所有资源，缩短等待时间

HDR环境映射：单张HDR贴图同时用作背景和环境光

5. 调试与性能工具
Three.js Inspector：内置调试工具，实时查看场景结构

GUI参数控制：动态调整水效果参数，实时预览变化

资源清理机制：页面卸载时自动释放GPU内存

📊 四、技术架构图
text
┌─────────────────────────────────────────────┐
│             应用程序层 (Application)         │
├─────────────────────────────────────────────┤
│  • 场景管理 (Scene Management)              │
│  • 用户交互 (User Interaction)              │
│  • GUI控制面板 (Control Panel)              │
├─────────────────────────────────────────────┤
│            Three.js框架层 (Framework)       │
├─────────────────────────────────────────────┤
│  • WebGPU渲染器 (WebGPU Renderer)           │
│  • 几何体/材质系统 (Geometry/Material)      │
│  • 相机/灯光系统 (Camera/Lighting)          │
│  • 加载器系统 (Loader System)               │
├─────────────────────────────────────────────┤
│           渲染管线层 (Rendering Pipeline)   │
├─────────────────────────────────────────────┤
│  • 顶点处理 (Vertex Processing)             │
│  • 片元着色 (Fragment Shading)              │
│  • 后处理链 (Post-Processing Chain)         │
│    ├─ Bloom (泛光效果)                      │
│    └─ FXAA (抗锯齿)                         │
├─────────────────────────────────────────────┤
│            WebGPU API层 (GPU Interface)     │
├─────────────────────────────────────────────┤
│  • 命令缓冲区 (Command Buffers)             │
│  • 着色器模块 (Shader Modules)              │
│  • 管线状态 (Pipeline States)               │
└─────────────────────────────────────────────┘
🎨 五、视觉效果技术解析
1. 水材质特性
菲涅尔效应：水面的反射强度随观察角度变化

波纹动画：通过时间偏移法线贴图UV坐标实现

深度感知：模拟浅水和深水的颜色变化

镜面高光：水面上的亮点反射

2. 光照与反射
HDR环境光：提供真实的环境光照和反射

IBL（基于图像的照明）：使用HDR贴图进行全局照明

动态反射：水面实时反射周围环境

3. 后处理效果参数
javascript
// 关键后处理参数
renderer.toneMapping = THREE.ACESFilmicToneMapping;  // 电影级色调映射
renderer.toneMappingExposure = 0.5;                   // 中等曝光
bloom(emissivePass, 2);                               // 泛光强度为2
⚡ 六、性能优化策略
1. 渲染优化
渲染顺序管理：水面的renderOrder = Infinity确保正确透明渲染

视锥体裁剪：自动剔除视野外的物体

GPU实例化：相同材质的地面复用几何体

2. 内存管理
纹理复用：HDR贴图同时用于背景和环境

几何体共享：地面使用相同的几何体和材质

资源清理：页面卸载时释放所有GPU资源

3. 加载优化
并行加载：同时加载所有资源文件

格式压缩：使用Draco压缩3D模型

渐进式加载：显示加载进度（可扩展） -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面元数据设置 -->
    <!-- 页面标题：Three.js WebGPU 水效果演示 -->
    <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>

    <!-- Three.js渲染器输出画布的容器 -->
    <div id="container"></div>

    <!-- 页面信息展示区域 -->
    <div id="info">
        <!-- Three.js官方网站链接（显示为徽标） -->
        <a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link" title="访问Three.js官网"></a>

        <!-- 标题包装器 -->
        <div class="title-wrapper">
            <!-- Three.js链接 -->
            <a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
            <!-- 当前示例名称 -->
            <span>水效果演示</span>
        </div>

        <!-- 版权和许可信息 -->
        <small>
            <!-- 模型来源信息 -->
            3D模型：
            <a href="https://skfb.ly/6WOOR" target="_blank" rel="noopener">夜晚泳池</a> 
            由
            <a href="https://sketchfab.com/syntheticplants" target="_blank" rel="noopener">Synthetic Plants</a> 
            创作
            <!-- 许可协议信息 -->
            采用
            <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">知识共享署名 4.0 国际许可协议</a>
            授权
        </small>
    </div>

    <!-- 导入映射配置：定义ES模块的路径别名 -->
    <!-- 作用：简化模块导入路径，让浏览器知道从哪里加载各个模块 -->
    <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>

    <!-- 主应用程序脚本模块 -->
    <!-- type="module"表示这是一个ES6模块，支持模块化导入 -->
    <script type="module">
    // ============ 模块导入部分 ============
    
    // 导入Three.js WebGPU版本的核心库
    // * as THREE表示将整个模块作为THREE对象导入，包含所有Three.js核心功能
    import * as THREE from 'three/webgpu';

    // 导入Three.js着色器语言（TSL）相关功能
    // TSL是Three.js的着色器节点系统，用于构建复杂的着色器效果
    import { 
        pass,      // 渲染通道节点：定义渲染步骤
        mrt,       // 多渲染目标节点：支持同时渲染到多个纹理
        output,    // 输出节点：定义主颜色输出
        emissive,  // 自发光节点：用于自发光效果
        renderOutput // 渲染输出节点：最终输出到屏幕
    } from 'three/tsl';
    
    // 导入后处理效果节点
    // 这些是基于节点的后处理效果，可以在TSL中使用
    import { bloom } from 'three/addons/tsl/display/BloomNode.js';  // 泛光效果：模拟亮部光晕
    import { fxaa } from 'three/addons/tsl/display/FXAANode.js';    // FXAA抗锯齿：快速近似抗锯齿
    
    // 导入调试工具
    import { Inspector } from 'three/addons/inspector/Inspector.js';  // Three.js场景调试器
    
    // 导入控制器
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';  // 轨道控制器：鼠标控制相机旋转和平移
    
    // 导入加载器
    import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';  // HDR图像加载器：支持高动态范围图像
    import { WaterMesh } from 'three/addons/objects/Water2Mesh.js';           // 水网格对象：专门的水效果组件
    import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';        // Draco加载器：加载Draco压缩的3D模型
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';          // GLTF加载器：加载GLTF/GLB格式的3D模型

    // ============ 全局变量声明 ============
    // 这些变量在整个应用程序中共享使用
    let scene;           // Three.js场景对象：包含所有3D对象、灯光等
    let camera;          // 相机对象：定义观察视角
    let renderer;        // 渲染器对象：负责将3D场景渲染到2D画布
    let water;           // 水网格对象：表示水面效果
    let postProcessing;  // 后处理对象：管理后处理效果链
    let controls;        // 控制器对象：用户交互控制

    // ============ 水效果参数配置 ============
    // 这些参数可以通过GUI动态调整
    const params = {
        color: '#99e0ff',  // 水的颜色：十六进制颜色值，浅蓝色
        scale: 2,          // 水波纹的缩放系数：控制波纹大小
        flowX: 1,          // X方向流动速度：控制水面在X方向的流动
        flowY: 1           // Y方向流动速度：控制水面在Y方向的流动
    };

    // ============ 应用程序初始化 ============
    // 立即调用init函数开始应用程序
    init();

    // 主初始化函数（异步函数）
    // async关键字表示函数内部可以使用await进行异步操作
    async function init() {
        console.log("开始初始化Three.js WebGPU水效果演示...");
        
        // ------------ 1. 创建场景 ------------
        // 场景是所有3D对象的容器，类似于一个舞台
        scene = new THREE.Scene();
        console.log("场景创建完成");

        // ------------ 2. 加载HDR环境贴图 ------------
        // HDR（高动态范围）图像提供更真实的光照和反射
        const hdrLoader = new UltraHDRLoader();
        console.log("开始加载HDR环境贴图...");
        
        hdrLoader.load('textures/equirectangular/moonless_golf_2k.hdr.jpg', function (texture) {
            console.log("HDR环境贴图加载完成");
            
            // 设置贴图映射方式为等距圆柱投影（球形环境贴图）
            // 这种映射方式将2D图像包裹在球体上，用于环境反射
            texture.mapping = THREE.EquirectangularReflectionMapping;
            
            // 标记纹理需要更新（重要：告知渲染器纹理已改变）
            texture.needsUpdate = true;

            // 设置场景的背景为HDR图像
            // 背景：相机看不到任何物体时显示的内容
            scene.background = texture;
            
            // 设置场景的环境贴图
            // 环境贴图：用于物体的环境反射和光照计算
            scene.environment = texture;
            
            console.log("HDR贴图已设置为场景背景和环境贴图");
        }, undefined, function (error) {
            console.error("HDR环境贴图加载失败:", error);
        });

        // ------------ 3. 创建相机 ------------
        // 透视相机：模拟人眼视角，物体近大远小
        // 参数说明：
        // - 45: 视野角度（FOV），单位度，45度是常用值
        // - window.innerWidth / window.innerHeight: 宽高比，根据窗口尺寸计算
        // - 0.1: 近裁剪面距离，小于此距离的物体不渲染
        // - 200: 远裁剪面距离，大于此距离的物体不渲染
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
        
        // 设置相机初始位置：X: -20（左）, Y: 6（上）, Z: -30（后）
        // 在Three.js中：X向右为正，Y向上为正，Z向屏幕外为正
        camera.position.set(-20, 6, -30);
        console.log("相机创建完成，位置:", camera.position);

        // ------------ 4. 异步加载所有资源 ------------
        console.log("开始异步加载3D模型和纹理...");
        
        // 创建Draco加载器（用于加载Draco压缩的3D模型）
        // Draco是Google开发的3D模型压缩格式，可显著减小文件大小
        const dracoLoader = new DRACOLoader();
        dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');  // 设置Draco解码器文件路径

        // 创建GLTF加载器（用于加载glTF格式的3D模型）
        // glTF是Three.js推荐的3D模型格式，支持PBR材质、动画等
        const gltfLoader = new GLTFLoader();
        gltfLoader.setDRACOLoader(dracoLoader);  // 为GLTF加载器配置Draco支持

        // 创建纹理加载器（用于加载2D纹理图像）
        const textureLoader = new THREE.TextureLoader();

        // 使用Promise.all并行加载所有资源
        // 这种方式比顺序加载更快，因为可以同时进行多个网络请求
        const [gltf, normalMap0, normalMap1] = await Promise.all([
            // 加载游泳池GLTF模型
            gltfLoader.loadAsync('models/gltf/pool.glb'),
            
            // 加载第一个水法线贴图
            // 法线贴图：用于模拟表面细节而不增加几何复杂度
            textureLoader.loadAsync('textures/water/Water_1_M_Normal.jpg'),
            
            // 加载第二个水法线贴图（用于动画混合）
            textureLoader.loadAsync('textures/water/Water_2_M_Normal.jpg')
        ]);
        
        console.log("所有资源加载完成");

        // ------------ 5. 处理加载的游泳池模型 ------------
        // gltf.scene包含整个模型场景
        gltf.scene.position.z = 2;        // 沿Z轴向前移动2个单位
        gltf.scene.scale.setScalar(0.1);  // 将模型缩放到原始大小的10%
        scene.add(gltf.scene);            // 将模型添加到场景中
        console.log("游泳池模型已添加到场景");

        // ------------ 6. 创建水效果 ------------
        console.log("开始创建水效果...");
        
        // 设置法线贴图的包裹模式
        // RepeatWrapping表示纹理在UV坐标超出[0,1]范围时重复平铺
        normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
        normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;
        console.log("法线贴图包裹模式设置为重复平铺");

        // 创建水面的几何体
        // PlaneGeometry：平面几何体，参数为宽度和高度
        const waterGeometry = new THREE.PlaneGeometry(30, 40);
        console.log("水面几何体创建完成，尺寸: 30x40");

        // 创建水网格对象（Water2Mesh）
        // Water2Mesh是Three.js的高级水效果组件，基于物理的水材质
        water = new WaterMesh(waterGeometry, {
            color: params.color,                              // 水的基础颜色
            scale: params.scale,                              // 波纹缩放系数
            flowDirection: new THREE.Vector2(params.flowX, params.flowY),  // 水流方向向量
            normalMap0: normalMap0,                           // 第一个法线贴图
            normalMap1: normalMap1                            // 第二个法线贴图（用于动画混合）
        });
        console.log("水网格对象创建完成");

        // 设置水的位置和旋转
        water.position.set(0, 0.2, -2);           // 设置位置：X:0, Y:0.2（略高于地面）, Z:-2
        water.rotation.x = Math.PI * -0.5;        // 绕X轴旋转-90度，使平面水平（原本是垂直的）
        water.renderOrder = Infinity;             // 渲染顺序设为无限大，确保最后渲染（处理透明物体）
        scene.add(water);                         // 将水添加到场景
        console.log("水已添加到场景，位置:", water.position);

        // ------------ 7. 创建地面（游泳池周围） ------------
        console.log("开始创建游泳池周围地面...");
        
        // 创建地面几何体
        const floorGeometry = new THREE.PlaneGeometry(1, 1);  // 基础尺寸为1x1
        floorGeometry.rotateX(-Math.PI * 0.5);  // 绕X轴旋转-90度，使平面水平

        // 创建地面材质（物理基于渲染材质）
        const floorMaterial = new THREE.MeshStandardMaterial({
            color: 0x444444,      // 材质颜色：深灰色（十六进制）
            roughness: 1,          // 粗糙度：1表示完全粗糙（无光泽）
            metalness: 0,          // 金属度：0表示非金属材质
            side: THREE.DoubleSide // 双面渲染：平面两面都渲染
        });

        // 创建四个地面板块围绕游泳池
        // 使用代码块{}为每个地面创建独立的作用域
        
        // 右侧地面
        {
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.set(20, 0, 0);      // 位置：右侧20个单位
            floor.scale.set(15, 1, 80);        // 缩放：X:15（宽度）, Y:1（厚度）, Z:80（深度）
            scene.add(floor);
            console.log("右侧地面创建完成");
        }

        // 左侧地面
        {
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.set(-20, 0, 0);     // 位置：左侧20个单位
            floor.scale.set(15, 1, 80);        // 缩放与右侧对称
            scene.add(floor);
            console.log("左侧地面创建完成");
        }

        // 后方地面（相对于相机）
        {
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.set(0, 0, 30);      // 位置：后方30个单位
            floor.scale.set(30, 1, 20);        // 缩放：覆盖后方区域
            scene.add(floor);
            console.log("后方地面创建完成");
        }

        // 前方地面（相对于相机）
        {
            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.set(0, 0, -30);     // 位置：前方30个单位
            floor.scale.set(30, 1, 20);        // 缩放：覆盖前方区域
            scene.add(floor);
            console.log("前方地面创建完成");
        }

        // ------------ 8. 创建WebGPU渲染器 ------------
        console.log("开始创建WebGPU渲染器...");
        
        // 创建Three.js的WebGPU渲染器
        // WebGPU是下一代图形API，比WebGL更高效、功能更强大
        renderer = new THREE.WebGPURenderer();
        
        // 设置渲染器尺寸为窗口尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        
        // 设置设备像素比（处理高DPI屏幕）
        // window.devicePixelRatio表示物理像素与CSS像素的比例
        renderer.setPixelRatio(window.devicePixelRatio);
        
        // 设置动画循环回调函数
        // setAnimationLoop类似于requestAnimationFrame，但由Three.js管理
        renderer.setAnimationLoop(animate);
        
        // 设置色调映射
        // 色调映射：将HDR（高动态范围）颜色转换为屏幕可显示的LDR（低动态范围）颜色
        renderer.toneMapping = THREE.ACESFilmicToneMapping;  // ACES电影级色调映射算法
        renderer.toneMappingExposure = 0.5;                   // 曝光度：0.5表示中等曝光
        
        // 初始化调试器
        renderer.inspector = new Inspector();
        
        // 将渲染器的DOM元素（canvas画布）添加到页面
        document.body.appendChild(renderer.domElement);
        console.log("WebGPU渲染器创建完成，画布已添加到页面");

        // ------------ 9. 设置后处理管线 ------------
        console.log("开始设置后处理管线...");
        
        // 创建后处理对象
        // PostProcessing管理后处理效果的链式应用
        postProcessing = new THREE.PostProcessing(renderer);
        postProcessing.outputColorTransform = false;  // 禁用输出颜色变换（保持原始颜色）
        
        // 创建场景渲染通道
        // pass函数创建一个渲染通道，将场景和相机渲染到纹理
        const scenePass = pass(scene, camera);
        
        // 设置多渲染目标（MRT）
        // MRT允许一次渲染输出到多个纹理（颜色、法线、深度、自发光等）
        scenePass.setMRT(mrt({
            output,      // 主颜色输出（RGB颜色）
            emissive     // 自发光输出（用于泛光效果）
        }));
        
        console.log("场景渲染通道设置完成，启用了多渲染目标");

        // 获取渲染纹理节点
        const beautyPass = scenePass.getTextureNode();           // 获取主颜色纹理节点
        const emissivePass = scenePass.getTextureNode('emissive'); // 获取自发光纹理节点
        
        console.log("获取到主颜色和自发光纹理节点");

        // 创建泛光效果（Bloom）
        // Bloom模拟亮部溢出效果，使亮区域有光晕
        const bloomPass = bloom(emissivePass, 2);  // 参数2表示泛光强度
        console.log("泛光效果节点创建完成");

        // 合并主颜色和泛光效果
        // add方法将两个纹理相加合并
        const outputPass = renderOutput(beautyPass.add(bloomPass));
        console.log("颜色和泛光效果合并完成");

        // 应用FXAA抗锯齿
        // FXAA（Fast Approximate Anti-Aliasing）是一种后处理抗锯齿技术
        const fxaaPass = fxaa(outputPass);
        postProcessing.outputNode = fxaaPass;  // 设置后处理的最终输出节点
        console.log("后处理管线设置完成，包含泛光和抗锯齿效果");

        // ------------ 10. 创建GUI控制面板 ------------
        console.log("开始创建GUI控制面板...");
        
        // 使用Three.js Inspector创建参数面板
        const gui = renderer.inspector.createParameters('水效果控制');
        
        // 获取水的材质着色器节点（用于实时更新参数）
        const waterNode = water.material.colorNode;
        console.log("获取到水材质着色器节点");

        // 添加颜色控制
        gui.addColor(params, 'color')
            .name('水颜色')  // 中文标签
            .onChange(function (value) {
                console.log("水颜色更新为:", value);
                waterNode.color.value.set(value);  // 更新水的颜色值
            });

        // 添加波纹缩放控制
        gui.add(params, 'scale', 1, 10)
            .name('波纹大小')  // 中文标签
            .step(0.1)  // 调整步长
            .onChange(function (value) {
                console.log("波纹缩放更新为:", value);
                waterNode.scale.value = value;  // 更新波纹缩放系数
            });

        // 添加X方向流动控制
        gui.add(params, 'flowX', -1, 1, 0.01)
            .name('X方向流动')  // 中文标签
            .onChange(function (value) {
                console.log("X方向流动速度更新为:", value);
                waterNode.flowDirection.value.x = value;  // 更新X方向流动速度
                waterNode.flowDirection.value.normalize();  // 标准化方向向量（保持长度为1）
            });

        // 添加Y方向流动控制
        gui.add(params, 'flowY', -1, 1, 0.01)
            .name('Y方向流动')  // 中文标签
            .onChange(function (value) {
                console.log("Y方向流动速度更新为:", value);
                waterNode.flowDirection.value.y = value;  // 更新Y方向流动速度
                waterNode.flowDirection.value.normalize();  // 标准化方向向量
            });
        
        console.log("GUI控制面板创建完成");

        // ------------ 11. 创建轨道控制器 ------------
        console.log("开始创建轨道控制器...");
        
        // 创建OrbitControls（轨道控制器）
        // 允许用户通过鼠标拖拽、滚轮缩放来控制相机
        controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;    // 启用阻尼效果（惯性），使移动更平滑
        controls.dampingFactor = 0.05;    // 阻尼系数（默认值）
        controls.target.set(0, 0, -5);    // 设置控制的目标点（相机围绕此点旋转）
        controls.update();                // 立即更新控制器状态
        console.log("轨道控制器创建完成，目标点:", controls.target);

        // ------------ 12. 监听窗口大小变化 ------------
        // 当浏览器窗口大小改变时，需要更新相机和渲染器
        window.addEventListener('resize', onWindowResize);
        console.log("窗口大小变化监听器已添加");

        // 初始化完成
        console.log("Three.js WebGPU水效果演示初始化完成！");
        console.log("使用说明：");
        console.log("1. 鼠标左键拖拽：旋转视角");
        console.log("2. 鼠标右键拖拽：平移视角");
        console.log("3. 鼠标滚轮：缩放视角");
        console.log("4. 查看右侧控制面板调整水效果参数");
    }

    // ============ 窗口大小变化处理函数 ============
    /**
     * 当浏览器窗口大小改变时调用此函数
     * 需要更新相机宽高比和渲染器尺寸
     */
    function onWindowResize() {
        console.log("窗口大小变化，新尺寸:", window.innerWidth, "x", window.innerHeight);
        
        // 更新相机的宽高比
        // 宽高比 = 窗口宽度 / 窗口高度
        camera.aspect = window.innerWidth / window.innerHeight;
        
        // 更新相机的投影矩阵
        // 当相机参数改变后，必须调用此方法更新内部矩阵
        camera.updateProjectionMatrix();
        console.log("相机宽高比已更新为:", camera.aspect);
        
        // 更新渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        console.log("渲染器尺寸已更新");
    }

    // ============ 动画循环函数 ============
    /**
     * 每一帧都会被调用的函数
     * 这是Three.js应用程序的核心循环
     */
    function animate() {
        // 性能优化：只在需要时输出日志
        // if (performance.now() % 1000 < 16) { // 大约每秒一次
        //     console.log("动画帧渲染中...");
        // }
        
        // 更新轨道控制器状态
        // 即使没有用户输入，也需要调用update()来处理阻尼效果
        controls.update();
        
        // 渲染后处理效果
        // 这会触发整个渲染管线：场景渲染 -> 后处理效果 -> 输出到屏幕
        postProcessing.render();
        
        // 注意：这里没有调用renderer.render()，因为后处理对象接管了渲染
        // postProcessing.render()内部会处理所有渲染步骤
    }

    // ============ 错误处理 ============
    // 全局错误处理（可选）
    window.addEventListener('error', function(event) {
        console.error("应用程序发生错误:", event.error);
        // 可以在这里添加用户友好的错误提示
    });

    // ============ 页面卸载处理 ============
    // 当页面关闭或刷新时清理资源
    window.addEventListener('beforeunload', function() {
        console.log("清理Three.js资源...");
        
        // 停止动画循环
        if (renderer) {
            renderer.setAnimationLoop(null);
        }
        
        // 释放GPU内存
        if (scene) {
            // 遍历场景中所有对象并释放资源
            scene.traverse(function(object) {
                if (object.geometry) {
                    object.geometry.dispose();
                }
                if (object.material) {
                    if (Array.isArray(object.material)) {
                        object.material.forEach(material => material.dispose());
                    } else {
                        object.material.dispose();
                    }
                }
                if (object.texture) {
                    object.texture.dispose();
                }
            });
        }
        
        console.log("资源清理完成");
    });
    </script>
</body>
</html>