<!-- 代码功能和技术点详解
一、整体功能概述
这是一个基于Three.js WebGPU的屏幕空间反射（SSR）技术演示应用，主要功能包括：

1. 核心功能
展示高质量的实时屏幕空间反射效果

加载并展示一个蒸汽朋克相机3D模型

提供交互式的参数调整界面

支持实时渲染和用户交互

2. 用户交互
鼠标/触摸控制：旋转、缩放、平移相机视角

实时参数调节：通过GUI调整SSR效果的各种参数

响应式设计：自动适应不同屏幕尺寸

3. 视觉效果
基于物理的渲染（PBR）材质

动态环境光照

高质量的屏幕空间反射

抗锯齿处理

二、主要技术点详解
1. WebGPU图形API
javascript
import * as THREE from 'three/webgpu';
现代图形API：替代传统的WebGL，提供更好的性能和功能支持

异步初始化：需要await renderer.init()等待初始化完成

更低级别的GPU控制：相比WebGL更高效

2. 屏幕空间反射（SSR）
javascript
import { ssr } from 'three/addons/tsl/display/SSRNode.js';
技术原理：

屏幕空间计算：只使用当前帧的屏幕信息，不依赖预计算的立方体贴图

射线步进算法：从屏幕像素向反射方向发射射线，检测与场景的交点

深度缓冲采样：使用深度信息重建3D位置

关键参数：

maxDistance：控制反射的可见距离

thickness：射线检测的厚度，影响精度和性能

roughness：根据材质粗糙度模糊反射

3. 多重渲染目标（MRT）
javascript
scenePass.setMRT(mrt({
    output: output,
    normal: directionToColor(normalView),
    metalrough: vec2(metalness, roughness)
}));
一次渲染输出多个纹理：

颜色纹理：标准的RGB颜色输出

法线纹理：视图空间法线信息（编码为颜色）

金属度/粗糙度纹理：PBR材质参数（打包为vec2）

深度纹理：自动生成的深度信息

优势：避免多次渲染相同几何体，显著提升性能

4. Three.js Shader Language (TSL)
javascript
import { pass, mrt, output, normalView, ... } from 'three/tsl';
节点式着色器编程：

声明式语法：类似ShaderToy，但集成在JavaScript中

实时编译：在运行时编译为WebGPU着色器

类型安全：JavaScript级别的类型检查

5. 后处理管线
javascript
postProcessing = new THREE.PostProcessing(renderer);
处理流程：

场景渲染通道 → 生成MRT纹理

SSR处理通道 → 计算屏幕空间反射

颜色混合 → 将反射叠加到原始颜色

SMAA抗锯齿 → 边缘平滑处理

最终输出 → 显示到屏幕

6. PBR（基于物理的渲染）
javascript
scene.environment = pmremGenerator.fromScene(environment).texture;
关键技术：

环境贴图：使用RoomEnvironment生成室内光照

PMREM：预滤波的多级渐远环境贴图

金属度/粗糙度工作流：标准PBR材质参数

7. 性能优化技术
纹理精度优化
javascript
normalTexture.type = THREE.UnsignedByteType;
metalRoughTexture.type = THREE.UnsignedByteType;
降低带宽：8位纹理相比32位浮点纹理减少75%带宽

精度权衡：法线和材质参数不需要高精度

渲染优化
javascript
object.material.side = THREE.FrontSide;
避免过度绘制：封闭物体只渲染正面

减少片元着色器调用：提升填充率

8. 模型加载与处理
javascript
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
技术栈：

GLTF格式：Web 3D标准格式，支持PBR、动画等

Draco压缩：Google的3D网格压缩技术，减少文件大小

异步加载：不阻塞主线程

9. 交互与控制
javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Inspector } from 'three/addons/inspector/Inspector.js';
控制机制：

轨道控制器：基于鼠标/触摸的相机控制

阻尼效果：平滑的动画过渡

调试检查器：可视化参数调整界面

10. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
自适应策略：

动态宽高比：相机aspect随窗口变化

投影矩阵更新：保持正确的透视投影

渲染器尺寸同步：canvas大小与窗口匹配

三、技术架构亮点
1. 模块化设计
ES6模块化导入

清晰的关注点分离

可复用的组件结构

2. 实时编辑能力
参数实时调整

效果即时预览

调试信息可视化

3. 现代Web技术栈
WebGPU + Three.js核心

TSL着色器语言

ES6+ JavaScript特性

4. 生产级优化
带宽优化

渲染性能优化

内存管理考虑

四、应用场景
技术演示：展示SSR等高级图形技术

学习工具：理解现代实时渲染技术

原型开发：快速验证图形效果

性能测试：评估WebGPU性能表现

五、技术挑战与解决方案
挑战	解决方案
实时反射性能	SSR替代传统立方体贴图反射
WebGPU兼容性	渐进增强，提供回退方案
移动端性能	可调节的质量参数
内存带宽限制	MRT + 纹理精度优化 -->


<!DOCTYPE html>
<html lang="zh-CN">
<!-- 
    HTML5文档声明
    设置页面语言为中文（zh-CN）
-->

<head>
    <!-- 
        文档头部开始
        包含页面的元数据和链接资源
    -->
    <head>
        <!-- 页面标题：显示在浏览器标签页上 -->
        <title>Three.js WebGPU - 后处理 - 屏幕空间反射(SSR)演示</title>
        
        <!-- 字符编码设置：UTF-8确保支持中文字符 -->
        <meta charset="utf-8">
        
        <!-- 
            视口设置（Viewport）：
            - width=device-width: 宽度等于设备宽度
            - user-scalable=no: 禁止用户手动缩放页面
            - minimum-scale=1.0: 最小缩放比例为1
            - maximum-scale=1.0: 最大缩放比例为1
            确保在不同设备上保持一致的显示比例
        -->
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        
        <!-- 外部CSS样式表链接 -->
        <!-- 使用type="text/css"指定样式表类型 -->
        <!-- rel="stylesheet"定义文档与链接资源的关系 -->
        <link type="text/css" rel="stylesheet" href="example.css">
    </head>

<body>
    <!-- 
        信息展示区域
        用于显示页面标题、版权信息和其他相关说明
    -->
    <div id="info">
        <!-- 
            Three.js官方链接
            - href: 链接到Three.js官网
            - target="_blank": 在新标签页中打开链接
            - rel="noopener": 防止新页面访问原页面的window.opener属性，增强安全性
            - class="logo-link": 样式类，通常用于添加Three.js图标样式
        -->
        <a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

        <!-- 标题包装容器 -->
        <div class="title-wrapper">
            <!-- Three.js链接 -->
            <a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
            <!-- 当前演示功能名称 -->
            <span>屏幕空间反射(SSR)演示</span>
        </div>

        <!-- 详细信息区域（使用small标签表示次要信息） -->
        <small>
            <!-- 技术名称和描述 -->
            屏幕空间反射技术展示。<br />
            <!-- 
                换行标签：强制在"展示。"后换行
                通常在small标签内用于分隔不同段落
            -->
            
            <!-- 3D模型来源信息 -->
            使用的3D模型：
            <a href="https://skfb.ly/6tqYD" target="_blank" rel="noopener">蒸汽朋克相机</a>
            由
            <a href="https://sketchfab.com/lumoize" target="_blank" rel="noopener">dylanheyes</a>
            创作，遵循
            <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">知识共享署名4.0国际许可协议</a>。
            <!-- 
                版权声明：
                - 第一个链接：指向Sketchfab上的3D模型页面
                - 第二个链接：指向创作者的个人页面
                - 第三个链接：指向Creative Commons许可证详情页面
                - 所有链接都设置了target="_blank"和rel="noopener"以保证安全性和用户体验
            -->
        </small>
    </div>

    <!-- 
        Import Map配置
        ES6模块导入映射，相当于现代JavaScript的"包管理器"
        type="importmap"指定这是一个import map声明
    -->
    <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>

    <!-- 
        主JavaScript模块
        type="module"表示这是一个ES6模块，支持现代JavaScript特性
        模块内的代码有独立的作用域，不会污染全局命名空间
    -->
    <script type="module">
        // ============ 第一部分：模块导入 ============
        // 注释说明：这里导入了所有项目所需的库和模块
        // 每个import语句都对应一个特定的功能模块

        // 导入Three.js核心库（WebGPU版本）
        // THREE对象包含了Three.js的所有核心类和函数
        import * as THREE from 'three/webgpu';
        
        // 导入TSL（Three.js Shader Language）工具函数
        // 这些函数用于在JavaScript中构建着色器节点
        // pass: 创建渲染通道
        // mrt: 创建多重渲染目标配置
        // output: 输出节点
        // normalView: 视图空间法线
        // metalness: 金属度属性
        // roughness: 粗糙度属性
        // blendColor: 颜色混合节点
        // screenUV: 屏幕UV坐标
        // color: 颜色创建函数
        // sample: 纹理采样器
        // directionToColor: 方向向量转颜色
        // colorToDirection: 颜色转方向向量
        // vec2: 二维向量创建函数
        // colorSpaceToWorking: 颜色空间转换函数
        import { pass, mrt, output, normalView, metalness, roughness, blendColor, screenUV, color, sample, directionToColor, colorToDirection, vec2, colorSpaceToWorking } from 'three/tsl';
        
        // 导入SSR（屏幕空间反射）后处理节点
        // SSR是一种实时渲染技术，通过在屏幕空间计算反射效果
        import { ssr } from 'three/addons/tsl/display/SSRNode.js';
        
        // 导入SMAA（增强型子像素形态抗锯齿）后处理节点
        // SMAA是一种高质量的抗锯齿技术，比传统的MSAA更高效
        import { smaa } from 'three/addons/tsl/display/SMAANode.js';

        // 导入模型加载器和工具类
        // DRACOLoader: 用于加载Google Draco压缩格式的3D模型
        // Draco是Google开发的一种3D图形压缩格式，可以显著减小文件大小
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
        
        // GLTFLoader: GLTF（GL传输格式）加载器
        // GLTF是Khronos Group制定的3D模型标准格式，类似于3D界的JPEG
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        
        // OrbitControls: 轨道控制器
        // 提供鼠标/触摸交互，用于旋转、缩放和平移相机
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        
        // RoomEnvironment: 室内环境生成器
        // 用于快速创建室内场景的环境光照和反射
        import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
        
        // Inspector: 调试检查器
        // 提供可视化界面用于调试和调整渲染参数
        import { Inspector } from 'three/addons/inspector/Inspector.js';

        // ============ 第二部分：参数配置对象 ============
        // 注释说明：这个对象存储了SSR效果的所有可调参数
        // 这些参数可以通过GUI界面实时调整，方便调试和效果预览
        
        // params对象：存储所有可配置参数
        const params = {
            quality: 0.5,           // SSR渲染质量，范围0-1，值越高效果越好但性能消耗越大
            blurQuality: 2,         // 模糊质量，范围1-3，整数，影响反射的柔和程度
            maxDistance: 0.5,       // 最大反射距离，范围0-1，控制反射可见的最大深度
            opacity: 1,             // 反射不透明度，范围0-1，0完全透明，1完全不透明
            thickness: 0.015,       // 射线步进厚度，范围0-0.05，影响反射的精度和性能
            roughness: 1,           // 模型粗糙度，范围0-1，影响反射的清晰程度
            enabled: true           // SSR效果开关，true启用，false禁用
        };

        // ============ 第三部分：全局变量声明 ============
        // 注释说明：这些变量在整个应用中共享使用
        // 使用let声明而不是const，因为它们的值会在运行时改变
        
        // 渲染相关变量
        let camera;      // 相机对象，控制观察视角
        let scene;       // 场景对象，包含所有3D物体和光源
        let model;       // 加载的3D模型对象
        let renderer;    // 渲染器，负责将3D场景绘制到2D画布
        let postProcessing; // 后处理管理器，管理所有后处理效果
        let ssrPass;     // SSR后处理通道实例
        
        // 交互控制变量
        let controls;    // 轨道控制器实例

        // ============ 第四部分：初始化函数调用 ============
        // 注释说明：程序入口点，启动整个应用
        init(); // 调用初始化函数

        // ============ 第五部分：异步初始化函数 ============
        // 注释说明：这个函数初始化所有Three.js组件和资源
        // 使用async关键字，因为其中包含异步操作（如加载模型）
        async function init() {
            // ---------- 子部分1：相机设置 ----------
            // 创建透视相机（Perspective Camera）
            // 参数说明：
            // 35 - 视野角度（Field of View），单位度，控制可见范围大小
            // window.innerWidth / window.innerHeight - 宽高比，根据窗口尺寸动态计算
            // 0.1 - 近裁剪面（Near Clip Plane），距离相机多近的物体开始渲染
            // 50 - 远裁剪面（Far Clip Plane），距离相机多远的物体停止渲染
            camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 50);
            
            // 设置相机初始位置
            // 参数说明：set(x, y, z)
            // x=3: 水平方向偏移
            // y=2: 垂直方向高度
            // z=3: 深度方向距离
            camera.position.set(3, 2, 3);

            // ---------- 子部分2：场景设置 ----------
            // 创建3D场景对象
            // 场景是所有3D对象的容器，包括模型、灯光、相机等
            scene = new THREE.Scene();
            
            // 设置场景背景（使用TSL节点编程方式）
            // 这是一个渐变色背景，从中心向边缘渐变
            // screenUV.distance(.5): 计算每个像素到屏幕中心(0.5,0.5)的距离
            // .remap(0, 0.5): 将距离值重新映射到0-1范围
            // .mix(color(0x888877), color(0x776666)): 混合两种颜色
            // 最终效果：中心是浅灰色(0x888877)，边缘是深灰色(0x776666)
            scene.backgroundNode = screenUV.distance(.5).remap(0, 0.5).mix(color(0x888877), color(0x776666));

            // ---------- 子部分3：模型加载 ----------
            // 配置Draco加载器
            // Draco是Google开发的一种3D模型压缩格式，可以显著减小文件大小
            const dracoLoader = new DRACOLoader();
            dracoLoader.setDecoderPath('jsm/libs/draco/'); // 设置解码器文件路径
            dracoLoader.setDecoderConfig({ type: 'js' });   // 使用JavaScript解码器（而非WebAssembly）

            // 配置GLTF加载器
            // GLTF是当前Web 3D的标准格式，支持PBR材质、动画等高级特性
            const loader = new GLTFLoader();
            loader.setDRACOLoader(dracoLoader); // 关联Draco加载器，自动处理压缩模型

            // 异步加载蒸汽朋克相机模型
            // 'models/gltf/steampunk_camera.glb' - 模型文件路径（GLB是GLTF的二进制格式）
            // 回调函数在模型加载完成后执行
            loader.load('models/gltf/steampunk_camera.glb', function (gltf) {
                // gltf.scene包含加载的3D场景
                model = gltf.scene; // 获取主场景对象

                // 遍历模型中的所有对象
                // traverse()方法递归访问场景中的每个对象
                model.traverse(function (object) {
                    // 检查对象是否有材质
                    if (object.material) {
                        // 特殊处理：镜头外壳材质
                        // 根据材质名称识别镜头外壳
                        if (object.material.name === 'Lense_Casing') {
                            object.material.transparent = true; // 启用透明渲染
                        }

                        // 性能优化：避免过度绘制（Overdraw）
                        // 设置材质只渲染正面，背面不渲染
                        // 对于封闭物体（如相机模型），通常只需要渲染正面
                        object.material.side = THREE.FrontSide;
                    }
                });

                // 调整模型位置
                // 将模型在Y轴上稍微抬高，避免与地平面重合
                model.position.y = 0.1;
                
                // 将模型添加到场景中
                scene.add(model);
            });

            // ---------- 子部分4：渲染器设置 ----------
            // 创建WebGPU渲染器
            // WebGPU是新一代图形API，相比WebGL提供更好的性能和功能
            renderer = new THREE.WebGPURenderer();
            
            // 设置设备像素比（注释状态）
            // 通常用于高DPI屏幕（如Retina显示屏）
            // renderer.setPixelRatio(window.devicePixelRatio);
            
            // 设置渲染器尺寸为窗口大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            
            // 设置动画循环回调函数
            // animate函数会在每一帧被调用
            renderer.setAnimationLoop(animate);
            
            // 设置色调映射（Tone Mapping）
            // ACESFilmic是电影行业标准，提供更自然的颜色响应
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            
            // 初始化调试检查器
            // 检查器提供GUI界面用于调试渲染参数
            renderer.inspector = new Inspector();
            
            // 将渲染器的canvas元素添加到页面body中
            document.body.appendChild(renderer.domElement);

            // 初始化WebGPU渲染器（异步操作）
            // WebGPU需要异步初始化，因为需要请求设备权限
            await renderer.init();

            // ---------- 子部分5：环境光设置 ----------
            // 创建室内环境
            // RoomEnvironment预定义了一个简单的室内环境
            const environment = new RoomEnvironment();
            
            // 创建PMREM（预滤波环境贴图）生成器
            // PMREM用于实时环境映射，预计算不同粗糙度的环境反射
            const pmremGenerator = new THREE.PMREMGenerator(renderer);

            // 设置场景环境贴图
            // fromScene()从环境场景生成环境贴图
            scene.environment = pmremGenerator.fromScene(environment).texture;
            
            // 设置环境光强度
            // 控制环境贴图的亮度，1.25表示稍微增强
            scene.environmentIntensity = 1.25;
            
            // 释放PMREM生成器资源
            // 生成器在完成任务后可以释放，节省内存
            pmremGenerator.dispose();

            // ---------- 子部分6：后处理管道设置 ----------
            // 创建后处理管理器
            // PostProcessing类管理多个后处理效果的应用顺序
            postProcessing = new THREE.PostProcessing(renderer);

            // 创建场景渲染通道
            // pass()函数创建一个渲染通道，包含场景和相机信息
            const scenePass = pass(scene, camera);
            
            // 设置MRT（多重渲染目标）
            // MRT允许在一次渲染中输出多个纹理（颜色、法线、深度等）
            scenePass.setMRT(mrt({
                output: output, // 颜色输出 - 存储最终的RGB颜色
                normal: directionToColor(normalView), // 法线信息 - 将方向向量编码为颜色
                metalrough: vec2(metalness, roughness) // 金属度和粗糙度 - 打包到单个vec2纹理中
            }));

            // 获取各个渲染目标的纹理节点，并注册到检查器
            // 这些节点可以在着色器中进行采样和处理
            
            // 颜色纹理节点
            const scenePassColor = scenePass.getTextureNode('output').toInspector('颜色');
            
            // 法线纹理节点（需要颜色空间转换）
            const scenePassNormal = scenePass.getTextureNode('normal').toInspector('法线', (node) => {
                // 将SRGB颜色空间转换到线性工作空间
                // SRGB是非线性的，而着色器计算需要线性颜色
                return colorSpaceToWorking(node, THREE.SRGBColorSpace);
            });
            
            // 深度纹理节点（转换为线性深度）
            const scenePassDepth = scenePass.getTextureNode('depth').toInspector('深度', () => {
                // 获取线性深度值
                // 透视投影的深度是非线性的，需要转换为线性深度用于计算
                return scenePass.getLinearDepthNode();
            });
            
            // 金属度/粗糙度纹理节点
            const scenePassMetalRough = scenePass.getTextureNode('metalrough').toInspector('金属度-粗糙度');

            // ---------- 子部分7：性能优化 ----------
            // 优化：降低纹理精度以减少带宽占用
            // WebGPU中，带宽是性能瓶颈之一
            
            // 法线纹理使用8位无符号整型
            // 精度足够表示法线方向，同时节省带宽
            const normalTexture = scenePass.getTexture('normal');
            normalTexture.type = THREE.UnsignedByteType;
            
            // 金属度/粗糙度纹理也使用8位无符号整型
            const metalRoughTexture = scenePass.getTexture('metalrough');
            metalRoughTexture.type = THREE.UnsignedByteType;

            // 从颜色纹理中重建法线向量
            // 使用采样器函数处理法线纹理
            const sceneNormal = sample((uv) => {
                // colorToDirection将编码的颜色转换回方向向量
                return colorToDirection(scenePassNormal.sample(uv));
            });

            // ---------- 子部分8：SSR效果设置 ----------
            // 创建SSR（屏幕空间反射）效果节点
            // 参数说明：
            // scenePassColor - 颜色纹理，用于采样反射颜色
            // scenePassDepth - 深度纹理，用于计算反射射线
            // sceneNormal - 法线纹理，决定反射方向
            // scenePassMetalRough.r - 金属度，控制反射强度
            // scenePassMetalRough.g - 粗糙度，控制反射模糊程度
            ssrPass = ssr(
                scenePassColor,
                scenePassDepth,
                sceneNormal,
                scenePassMetalRough.r,
                scenePassMetalRough.g
            ).toInspector('SSR效果'); // 注册到检查器，便于调试

            // ---------- 子部分9：最终输出合成 ----------
            // 将SSR效果与原始场景颜色混合
            // blendColor()混合两个颜色节点
            // smaa()应用抗锯齿处理
            const outputNode = smaa(blendColor(scenePassColor, ssrPass));
            
            // 设置后处理管道的最终输出节点
            postProcessing.outputNode = outputNode;

            // ---------- 子部分10：交互控制器设置 ----------
            // 创建轨道控制器
            // 参数：相机对象和渲染器的DOM元素
            controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true; // 启用阻尼效果，使交互更平滑
            controls.update(); // 初始更新控制器状态

            // ---------- 子部分11：窗口事件监听 ----------
            // 监听窗口大小变化事件
            // 当用户调整浏览器窗口大小时，重新调整渲染尺寸
            window.addEventListener('resize', onWindowResize);

            // ---------- 子部分12：GUI调试界面创建 ----------
            // 使用检查器创建参数控制面板
            
            // 创建主设置面板
            const gui = renderer.inspector.createParameters('设置');
            
            // 创建SSR参数文件夹
            const ssrFolder = gui.addFolder('SSR参数');
            
            // 添加质量滑块控件
            ssrFolder.add(params, 'quality', 0, 1)
                .onChange(updateParameters); // 值改变时调用更新函数
            
            // 添加模糊质量滑块控件（步长为1的整数）
            ssrFolder.add(params, 'blurQuality', 1, 3, 1)
                .onChange(updateParameters);
            
            // 添加最大距离滑块控件
            ssrFolder.add(params, 'maxDistance', 0, 1)
                .onChange(updateParameters);
            
            // 添加不透明度滑块控件
            ssrFolder.add(params, 'opacity', 0, 1)
                .onChange(updateParameters);
            
            // 添加厚度滑块控件
            ssrFolder.add(params, 'thickness', 0, 0.05)
                .onChange(updateParameters);
            
            // 添加SSR开关控件
            ssrFolder.add(params, 'enabled')
                .onChange(() => {
                    if (params.enabled === true) {
                        // 启用SSR：使用包含SSR的输出节点
                        postProcessing.outputNode = outputNode;
                    } else {
                        // 禁用SSR：直接输出原始场景
                        postProcessing.outputNode = scenePass;
                    }
                    // 标记后处理管道需要更新
                    postProcessing.needsUpdate = true;
                });
            
            // 创建模型参数文件夹
            const modelFolder = gui.addFolder('模型参数');
            
            // 添加粗糙度滑块控件
            modelFolder.add(params, 'roughness', 0, 1)
                .onChange((value) => {
                    // 遍历模型中的所有材质，更新粗糙度
                    model.traverse(function (object) {
                        if (object.material) {
                            object.material.roughness = value;
                        }
                    });
                });

            // ---------- 子部分13：初始化参数 ----------
            // 调用参数更新函数，将初始参数应用到SSR效果
            updateParameters();
        }

        // ============ 第六部分：参数更新函数 ============
        // 注释说明：这个函数将params对象中的值同步到SSR效果节点
        // 当GUI控件值改变时，这个函数被调用
        function updateParameters() {
            // 将params中的每个值赋给SSR节点的对应属性
            ssrPass.quality.value = params.quality;         // 更新质量参数
            ssrPass.blurQuality.value = params.blurQuality; // 更新模糊质量
            ssrPass.maxDistance.value = params.maxDistance; // 更新最大距离
            ssrPass.opacity.value = params.opacity;         // 更新不透明度
            ssrPass.thickness.value = params.thickness;     // 更新厚度参数
        }

        // ============ 第七部分：窗口大小调整处理函数 ============
        // 注释说明：当浏览器窗口大小改变时，重新调整渲染设置
        function onWindowResize() {
            // 更新相机的宽高比
            // 宽高比 = 窗口宽度 / 窗口高度
            camera.aspect = window.innerWidth / window.innerHeight;
            
            // 更新相机的投影矩阵
            // 投影矩阵定义了3D空间到2D屏幕的转换规则
            // 当相机参数改变后，必须调用此方法更新内部矩阵
            camera.updateProjectionMatrix();
            
            // 更新渲染器尺寸
            // 使渲染画布与窗口尺寸保持一致
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // ============ 第八部分：动画循环函数 ============
        // 注释说明：这是渲染循环的核心函数，每帧都会被调用
        // 负责更新控制器状态并触发渲染
        function animate() {
            // 更新轨道控制器
            // 处理用户输入（鼠标/触摸）并更新相机位置
            controls.update();
            
            // 执行后处理渲染
            // 这会触发整个渲染管道：场景渲染 -> 后处理效果 -> 屏幕输出
            postProcessing.render();
        }
    </script>
</body>

</html>