<!-- Three.js WebGPU环境光遮蔽(AO)示例 - 代码功能与技术点详解
一、整体功能概述
这是一个基于Three.js WebGPU后端的高质量实时渲染演示，重点展示了GTAO环境光遮蔽技术在现代Web图形应用中的实现。该示例通过一个现代简约卧室场景，演示了如何利用WebGPU的强大性能和先进的渲染技术，实现接近离线渲染质量的实时环境光遮蔽效果。

核心功能：
实时环境光遮蔽渲染：基于GTAO算法的高质量AO效果

交互式3D查看器：支持旋转、缩放、平移的相机控制

参数实时调节：所有渲染参数可通过GUI即时调整

高级抗锯齿：TRA时间抗锯齿技术

透明物体支持：测试透明材质与AO的交互效果

性能监控与调试：内置调试器面板

二、主要技术点详解
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer();
技术说明：使用WebGPU而非传统的WebGL

优势：

更现代的图形API设计

更好的多线程支持

更低的CPU开销

支持计算着色器等高级特性

兼容性：需要较新的浏览器（Chrome 113+，Edge 113+）

2. GTAO环境光遮蔽
javascript
import { ao } from 'three/addons/tsl/display/GTAONode.js';
GTAO全称：Ground Truth Ambient Occlusion（真实环境光遮蔽）

技术特点：

屏幕空间算法：基于深度缓冲计算，无需预处理

多采样策略：每个像素进行多次半球采样（可调节）

距离衰减：考虑空间距离的遮蔽效果

时间滤波：减少采样噪声和闪烁

关键参数：

samples：采样次数（4-32，影响质量/性能）

radius：AO计算半径（0.1-1.0）

distanceFallOff：距离衰减系数

3. 多渲染目标(MRT)预渲染通道
javascript
prePass.setMRT(mrt({
    output: directionToColor(normalView),
    velocity: velocity
}));
目的：一次性生成多个渲染目标，供后续通道使用

生成的数据：

法线图：视图空间法线（编码为颜色）

深度图：线性深度信息

速度图：像素运动向量（用于TRA）

优化：使用UnsignedByteType减少带宽

4. TRA时间抗锯齿
javascript
import { traa } from 'three/addons/tsl/display/TRAANode.js';
traaPass = traa(scenePass, prePassDepth, prePassVelocity, camera);
TRA全称：Temporal Reprojection Anti-Aliasing（时间重投影抗锯齿）

工作原理：

存储前一帧的颜色和运动信息

当前帧将像素重新投影到前一帧

混合当前帧和前一帧的像素

减少锯齿和闪烁

优势：相比MSAA/SSAA，性能开销更小，质量更高

5. TSL着色器语言系统
javascript
import { sample, pass, mrt, screenUV, normalView, velocity } from 'three/tsl';
TSL全称：Three.js Shader Language

设计理念：声明式着色器编程

特点：

节点化：将着色器操作封装为节点

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

自动优化：节点图自动优化和编译

易调试：可在JavaScript中调试着色器逻辑

6. 渲染管线架构
javascript
// 完整的渲染管线
postProcessing.outputNode = traaPass;
渲染流程：

text
1. 初始化阶段
   ├── 创建WebGPU渲染器
   ├── 加载GLTF模型
   └── 设置环境光照

2. 每帧渲染管线
   ├── 预渲染通道（生成法线、深度、速度）
   ├── GTAO通道（计算环境光遮蔽）
   ├── 场景渲染通道（应用AO到漫反射）
   ├── TRA通道（时间抗锯齿）
   └── 最终输出到屏幕

3. 后期处理
   ├── 可选：仅显示AO通道
   └── 实时参数更新
7. 性能优化策略
半分辨率AO计算：resolutionScale = 0.5

AO对分辨率不敏感，半分辨率足够

性能提升约4倍（像素数减少4倍）

时间滤波：useTemporalFiltering = true

累积多帧信息，减少采样噪声

允许使用更少的采样次数

纹理格式优化：

javascript
normalTexture.type = THREE.UnsignedByteType;
8位纹理 vs 32位浮点纹理

减少75%的显存占用和带宽

8. 交互与调试系统
OrbitControls轨道控制器

鼠标左键：旋转视角

鼠标右键：平移视角

鼠标滚轮：缩放视角

Inspector调试器

实时查看渲染中间结果

动态调节所有参数

性能分析工具

GUI参数面板

10+个可调节参数

实时反馈效果变化

支持预设保存/加载

三、技术亮点
1. 现代渲染架构
完全基于节点化的后处理系统

可组合的渲染通道设计

支持实时热更新着色器

2. 视觉质量
高质量AO：接近光线追踪的遮蔽效果

时间稳定性：TRA减少闪烁和抖动

透明物体支持：正确处理透明材质的AO

3. 性能平衡
可调节质量等级：从性能优先到质量优先

智能降采样：在不同阶段使用不同分辨率

异步加载：不阻塞主线程的资源加载

4. 开发体验
完整的调试支持：可查看每个渲染阶段的结果

实时参数调节：即时看到效果变化

模块化代码结构：易于扩展和修改

四、应用场景
1. 实时可视化
建筑可视化

产品展示

室内设计预览

2. 游戏开发
高质量Web游戏渲染

实时全局光照预演

后期效果测试平台

3. 教育培训
计算机图形学教学

实时渲染技术演示

WebGPU API学习

4. 技术研究
新渲染算法原型开发

性能对比测试

跨平台图形技术验证 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元信息 -->
		<!-- 
			title标签：定义网页标题，显示在浏览器标签页上
			这里是Three.js WebGPU环境光遮蔽示例的中文标题
		-->
		<title>Three.js WebGPU - 环境光遮蔽(AO)示例</title>
		
		<!-- 
			charset属性：指定文档的字符编码为UTF-8
			UTF-8支持中文等多国语言字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			viewport设置：控制移动设备上的视口行为
			width=device-width：视口宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放（保持固定比例）
			minimum-scale=1.0：最小缩放比例为1.0（不缩小）
			maximum-scale=1.0：最大缩放比例为1.0（不放大）
			这个设置确保网页在移动设备上正确显示，不会出现缩放问题
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			link标签：引入外部CSS样式表
			type="text/css"：指定链接资源的MIME类型为CSS
			rel="stylesheet"：定义当前文档与链接资源的关系为样式表
			href="example.css"：指定样式表文件的路径
			这个样式表定义了页面中各种元素的样式，如#info区域的样式
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			id="info"的div容器：显示信息和说明的面板
			这个区域通常用于显示技术信息、版权说明、操作提示等
		-->
		<div id="info">
			<!-- 
				第一个链接：Three.js官方网站的logo链接
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全设置，防止新页面通过window.opener访问原页面
				class="logo-link"：CSS类名，用于样式控制，可能是一个背景图片的logo
				这个链接通常是一个Three.js的logo，点击跳转到官网
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				标题包装器：包含主标题和副标题
				class="title-wrapper"：CSS类名，用于样式控制
			-->
			<div class="title-wrapper">
				<!-- 
					主标题链接：同样指向Three.js官网
					这个链接显示"Three.js"文字，而不是图片logo
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				
				<!-- 
					副标题：显示当前示例的主题"AO"
					AO是Ambient Occlusion（环境光遮蔽）的缩写
					环境光遮蔽是一种渲染技术，用于模拟物体间相互遮挡造成的阴影效果
				-->
				<span>环境光遮蔽(AO)演示</span>
			</div>

			<!-- 
				small标签：用于显示较小的文字，通常用于说明、版权信息等
				这里包含了技术说明和模型版权信息
			-->
			<small>
				<!-- 
					第一行：技术说明
					说明本示例使用的环境光遮蔽技术基于GTAO算法
					GTAO = Ground Truth Ambient Occlusion（真实环境光遮蔽）
					这是一种高质量的环境光遮蔽实现方式
				-->
				本示例展示基于GTAO算法的环境光遮蔽技术。<br />
				
				<!-- 
					第二行：模型来源信息
					1. 模型名称链接：点击跳转到模型的原始页面
					2. 作者链接：点击跳转到作者的个人页面
					3. 授权协议链接：点击查看具体的授权协议
				-->
				<!-- 使用的中文翻译说明 -->
				场景模型：<a href="https://skfb.ly/oCnNx" target="_blank" rel="noopener">现代简约卧室</a>，
				由 <a href="https://sketchfab.com/dylanheyes" target="_blank" rel="noopener">Dylan Heyes</a> 创作，
				采用 <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">知识共享署名4.0国际许可协议</a> 授权。
				<br>
				
				<em>提示：调整"采样次数"参数会影响性能，数值越高效果越好但帧率可能下降。</em>
			</small>
		</div>

		<!-- 
			importmap脚本：定义JavaScript模块的导入映射
			这是ES6模块系统的特性，允许为模块指定别名或自定义路径
			type="importmap"：指定脚本类型为导入映射
			这个配置告诉浏览器如何解析import语句中的模块标识符
		-->
		<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模块
			模块中的代码使用严格模式，有自己的作用域
			可以导入其他模块，不会污染全局命名空间
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 导入Three.js WebGPU核心库
			// THREE对象包含Three.js的所有核心功能：场景、相机、几何体、材质等
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）相关模块
			// TSL用于声明式着色器编程，可以在JavaScript中构建着色器节点图
			// - sample: 纹理采样节点
			// - pass: 渲染通道节点
			// - mrt: 多渲染目标配置
			// - screenUV: 屏幕UV坐标节点
			// - normalView: 视图空间法线节点
			// - velocity: 运动向量节点（用于时间抗锯齿）
			// - vec3, vec4: 向量构造函数节点
			// - directionToColor/colorToDirection: 方向与颜色相互转换
			// - colorSpaceToWorking: 颜色空间转换
			// - builtinAOContext: 内置AO上下文节点
			import { sample, pass, mrt, screenUV, normalView, velocity, vec3, vec4, directionToColor, colorToDirection, colorSpaceToWorking, builtinAOContext } from 'three/tsl';
			
			// 导入GTAO（Ground Truth Ambient Occlusion）后处理节点
			// GTAO是一种高质量的环境光遮蔽实现
			import { ao } from 'three/addons/tsl/display/GTAONode.js';
			
			// 导入TRA（Temporal Reprojection Anti-Aliasing）后处理节点
			// TRA是一种时间抗锯齿技术，利用多帧信息减少锯齿
			import { traa } from 'three/addons/tsl/display/TRAANode.js';

			// 导入Three.js插件和工具
			// - OrbitControls: 轨道控制器，用于用鼠标控制相机
			// - DRACOLoader: Draco压缩格式加载器，用于加载压缩的3D模型
			// - RoomEnvironment: 房间环境生成器，用于创建室内光照环境
			// - GLTFLoader: GLTF格式加载器，用于加载glTF 3D模型
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			// 导入调试器（Inspector）
			// Inspector提供了一个GUI界面，用于调试和调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ==================== 全局变量声明 ====================
			// 这些变量在整个模块中共享，存储Three.js的核心对象
			let camera, scene, renderer, postProcessing, controls;
			// 专门用于后处理的变量
			let aoPass, traaPass, transparentMesh;

			// ==================== GTAO参数配置对象 ====================
			// 这个对象存储了GTAO算法的所有可调参数
			// 这些参数可以通过GUI界面实时调整
			const params = {
				samples: 16,          // 采样次数：每个像素采样多少次，影响AO质量和性能
				distanceExponent: 1,  // 距离指数：控制AO随距离衰减的速度
				distanceFallOff: 1,   // 距离衰减：AO效果的最大距离
				radius: 0.25,         // AO半径：计算AO时考虑的周围区域大小
				scale: 1,             // 缩放系数：整体AO效果的强度
				thickness: 1,         // 厚度参数：用于处理薄表面和背面
				aoOnly: false,        // 是否只显示AO通道（不显示颜色）
				transparentOpacity: 0.3 // 透明网格的不透明度
			};

			// ==================== 初始化入口 ====================
			// 调用初始化函数，启动整个应用
			init();

			// ==================== 主初始化函数 ====================
			// async关键字：这是一个异步函数，可以内部使用await
			// 异步函数使得代码可以等待Promise完成，而不阻塞主线程
			async function init() {

				// 1. 创建相机（Camera）
				// PerspectiveCamera：透视相机，模拟人眼视角
				// 参数：视野角度(FOV)、宽高比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 50);
				// 设置相机初始位置 (x, y, z)
				camera.position.set(1, 1.3, 5);

				// 2. 创建场景（Scene）
				// Scene是3D对象的容器，包含所有要渲染的物体、灯光等
				scene = new THREE.Scene();

				// 3. 创建WebGPU渲染器
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				// WebGPU是新一代图形API，比WebGL更高效，支持更多现代GPU特性
				renderer = new THREE.WebGPURenderer();
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数，每帧调用animate函数
				renderer.setAnimationLoop(animate);
				// 创建调试器实例并附加到渲染器
				renderer.inspector = new Inspector();
				// 将渲染器的canvas元素添加到页面body中
				// domElement是渲染器创建的<canvas>元素
				document.body.appendChild(renderer.domElement);

				// 4. 初始化WebGPU渲染器（异步操作）
				// WebGPU需要异步初始化，因为需要请求GPU设备
				// await会等待Promise完成，确保渲染器完全初始化后再继续
				await renderer.init();

				// 5. 创建轨道控制器（OrbitControls）
				// 允许用户用鼠标拖拽、滚轮缩放来交互式控制相机
				controls = new OrbitControls(camera, renderer.domElement);
				// 设置控制器的目标点（相机围绕这个点旋转）
				controls.target.set(0, 0.5, -1);
				// 立即应用目标点设置
				controls.update();
				// 禁用平移功能（只能旋转和缩放）
				controls.enablePan = false;
				// 启用阻尼效果（惯性），使相机移动更平滑
				controls.enableDamping = true;
				// 设置相机到目标点的最小距离（限制缩放）
				controls.minDistance = 2;
				// 设置相机到目标点的最大距离（限制缩放）
				controls.maxDistance = 8;

				// 6. 设置环境光照
				// RoomEnvironment创建一个简单的室内光照环境
				const environment = new RoomEnvironment();
				// PMREMGenerator用于生成预过滤的环境贴图
				// PMREM = Prefiltered Mipmapped Radiance Environment Map
				// 这种贴图可以用于基于图像的照明（IBL）
				const pmremGenerator = new THREE.PMREMGenerator(renderer);

				// 设置场景背景色为灰色
				scene.background = new THREE.Color(0x666666);
				// 从RoomEnvironment生成环境贴图，并应用到场景
				// 这会影响所有使用StandardMaterial或PhysicalMaterial的物体
				scene.environment = pmremGenerator.fromScene(environment).texture;
				// 释放环境资源，避免内存泄漏
				environment.dispose();
				// 释放PMREM生成器资源
				pmremGenerator.dispose();

				// 7. 创建后处理系统
				// PostProcessing是Three.js的后处理框架
				// 允许将多个渲染通道组合起来，实现复杂的效果
				postProcessing = new THREE.PostProcessing(renderer);

				// 8. 创建预渲染通道（Pre-Pass）
				// 预渲染通道用于生成后续处理需要的数据
				// 这里主要生成法线图和深度图
				const prePass = pass(scene, camera)
					// 将预渲染通道添加到调试器，命名为"Normal"
					// 第二个参数是转换函数，将法线从线性空间转换到sRGB空间用于显示
					.toInspector('Normal', (inspectNode) => colorSpaceToWorking(inspectNode, THREE.SRGBColorSpace));
				prePass.name = 'Pre-Pass';  // 设置通道名称
				prePass.transparent = false; // 禁用透明渲染，提高性能

				// 设置多渲染目标（MRT）
				// MRT允许在一次渲染中输出多个纹理
				prePass.setMRT(mrt({
					// 输出：将视图空间法线转换为颜色存储
					// 法线是三维向量(x,y,z)，颜色是四维(r,g,b,a)，需要转换
					output: directionToColor(normalView),
					// 速度：存储像素的运动向量，用于时间抗锯齿
					velocity: velocity
				}));

				// 从预渲染通道获取法线数据
				// sample节点用于纹理采样，这里采样预渲染通道的法线纹理
				// uv参数是纹理坐标，screenUV提供全屏纹理坐标
				const prePassNormal = sample((uv) => {
					// 将颜色值转换回法线方向
					return colorToDirection(prePass.getTextureNode().sample(uv));
				});

				// 获取深度纹理并添加到调试器
				// getTextureNode('depth')获取深度纹理节点
				// toInspector将纹理添加到调试器面板
				// 第二个参数是回调函数，返回线性深度值用于显示
				const prePassDepth = prePass.getTextureNode('depth')
					.toInspector('Depth', () => prePass.getLinearDepthNode());
				
				// 获取速度纹理并添加到调试器
				const prePassVelocity = prePass.getTextureNode('velocity')
					.toInspector('Velocity');

				// 9. 预渲染通道带宽优化
				// 将法线纹理类型设置为UnsignedByteType（8位无符号整数）
				// 这样可以减少显存占用和带宽使用，提高性能
				const normalTexture = prePass.getTexture('output');
				normalTexture.type = THREE.UnsignedByteType;

				// 10. 创建场景主渲染通道
				// 这个通道渲染最终的颜色图像
				const scenePass = pass(scene, camera).toInspector('Color');

				// 11. 创建GTAO（环境光遮蔽）通道
				// ao()函数创建GTAO节点，需要深度、法线和相机信息
				aoPass = ao(prePassDepth, prePassNormal, camera)
					// 将AO通道添加到调试器，命名为"GTAO"
					// AO是单通道值（灰度），这里取红色通道显示
					.toInspector('GTAO', (inspectNode) => inspectNode.r);
				
				// AO通道配置
				aoPass.resolutionScale = 0.5; // 以半分辨率运行AO计算
				// 半分辨率策略：在性能和视觉质量间取得平衡
				// AO效果对分辨率不太敏感，半分辨率通常足够
				aoPass.useTemporalFiltering = true; // 启用时间滤波，减少AO闪烁

				// 获取AO通道的输出纹理节点
				const aoPassOutput = aoPass.getTextureNode();

				// 12. 设置场景渲染上下文，应用AO效果
				// builtinAOContext创建一个内置的AO上下文
				// 这个上下文会将AO效果应用到场景的漫反射光照中
				// screenUV提供全屏纹理坐标，用于采样AO纹理
				// .r取红色通道值（AO是灰度图，存储在红色通道）
				scenePass.contextNode = builtinAOContext(aoPassOutput.sample(screenUV).r);

				// 13. 创建最终输出通道（包含时间抗锯齿）
				// traa()函数创建时间重投影抗锯齿节点
				// 输入：场景颜色、深度、速度和相机
				// 输出：经过抗锯齿处理的最终图像
				traaPass = traa(scenePass, prePassDepth, prePassVelocity, camera);
				traaPass.useSubpixelCorrection = false; // 禁用子像素校正

				// 14. 设置后处理系统的最终输出节点
				postProcessing.outputNode = traaPass;

				// 15. 加载3D模型
				// 创建DRACO加载器（用于加载压缩的3D模型）
				const dracoLoader = new DRACOLoader();
				// 设置DRACO解码器的路径
				dracoLoader.setDecoderPath('jsm/libs/draco/');
				// 设置解码器配置为JavaScript版本
				dracoLoader.setDecoderConfig({ type: 'js' });
				
				// 创建GLTF加载器
				const loader = new GLTFLoader();
				// 设置GLTF加载器使用DRACO加载器处理压缩的几何体
				loader.setDRACOLoader(dracoLoader);
				// 设置模型文件的基础路径
				loader.setPath('models/gltf/');

				// 异步加载GLTF模型文件
				// await会等待模型加载完成
				// 'minimalistic_modern_bedroom.glb'是模型文件名
				// GLB是GLTF的二进制格式，包含模型、材质、纹理等所有数据
				const gltf = await loader.loadAsync('minimalistic_modern_bedroom.glb');

				// 获取加载的模型场景
				// gltf.scene包含模型的所有网格、灯光、相机等
				const model = gltf.scene;
				// 设置模型位置（x, y, z）
				model.position.set(0, 1, 0);
				// 将模型添加到主场景中
				scene.add(model);

				// 16. 创建透明测试网格
				// 这个网格用于测试透明物体的AO效果
				// PlaneGeometry：平面几何体，参数是宽度和高度
				transparentMesh = new THREE.Mesh(
					new THREE.PlaneGeometry(1.8, 2),
					// MeshStandardNodeMaterial：基于物理的节点材质
					// 支持透明度，使用节点系统定义材质属性
					new THREE.MeshStandardNodeMaterial({ 
						transparent: true, 
						opacity: params.transparentOpacity 
					})
				);
				// 设置透明网格的位置
				transparentMesh.position.z = 0;
				transparentMesh.position.y = 0.5;
				transparentMesh.visible = false; // 初始状态为隐藏
				// 将透明网格添加到场景
				scene.add(transparentMesh);

				// 17. 事件监听器
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener('resize', onWindowResize);

				// 18. 创建GUI参数控制面板
				// 通过调试器创建参数控制面板
				const gui = renderer.inspector.createParameters('设置');
				
				// 添加各种参数控制滑块和开关
				// 参数格式：对象，参数名，最小值，最大值，步长
				// onChange：参数变化时的回调函数
				gui.add(params, 'samples', 4, 32, 1)
					.name('采样次数')
					.onChange(updateParameters);
				gui.add(params, 'distanceExponent', 1, 2)
					.name('距离指数')
					.onChange(updateParameters);
				gui.add(params, 'distanceFallOff', 0.01, 1)
					.name('距离衰减')
					.onChange(updateParameters);
				gui.add(params, 'radius', 0.1, 1)
					.name('AO半径')
					.onChange(updateParameters);
				gui.add(params, 'scale', 0.01, 2)
					.name('强度缩放')
					.onChange(updateParameters);
				gui.add(params, 'thickness', 0.01, 2)
					.name('表面厚度')
					.onChange(updateParameters);
				gui.add(aoPass, 'useTemporalFiltering')
					.name('时间滤波')
					.onChange(() => postProcessing.needsUpdate = true);
				gui.add(transparentMesh, 'visible')
					.name('显示透明网格');
				gui.add(params, 'transparentOpacity', 0, 1, 0.01)
					.name('透明不透明度')
					.onChange(updateParameters);
				gui.add(params, 'aoOnly')
					.name('仅显示AO')
					.onChange((value) => {
						if (value === true) {
							// 如果勾选"仅显示AO"，输出纯AO效果
							// vec3(aoPass.r)创建灰度颜色，vec4添加alpha通道
							postProcessing.outputNode = vec4(vec3(aoPass.r), 1);
						} else {
							// 否则输出完整的渲染结果（包含TRA抗锯齿）
							postProcessing.outputNode = traaPass;
						}
						// 标记后处理需要更新节点图
						postProcessing.needsUpdate = true;
					});

			}

			// ==================== 更新参数函数 ====================
			// 当GUI参数变化时调用这个函数
			// 将params对象中的值同步到aoPass的对应属性
			function updateParameters() {
				// 更新AO通道的所有参数
				// .value是TSL节点的值属性，设置后会触发重新编译着色器
				aoPass.samples.value = params.samples;
				aoPass.distanceExponent.value = params.distanceExponent;
				aoPass.distanceFallOff.value = params.distanceFallOff;
				aoPass.radius.value = params.radius;
				aoPass.scale.value = params.scale;
				aoPass.thickness.value = params.thickness;

				// 更新透明网格材质的不透明度
				transparentMesh.material.opacity = params.transparentOpacity;
			}

			// ==================== 窗口大小变化处理函数 ====================
			function onWindowResize() {
				// 获取当前窗口的宽度和高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机宽高比
				// 宽高比 = 宽度 / 高度
				// 如果不更新，渲染的图像会被拉伸或压缩
				camera.aspect = width / height;
				// 更新相机的投影矩阵
				// 当相机参数变化后，必须调用这个函数重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 这会重新设置渲染器canvas元素的大小
				renderer.setSize(width, height);
				
				// 注意：后处理系统可能需要额外的尺寸更新
				// 但PostProcessing类通常会自动处理
			}

			// ==================== 动画循环函数 ====================
			// 这个函数在每一帧被调用（通常60次/秒）
			// 它负责更新场景状态和渲染新的一帧
			function animate() {
				// 更新轨道控制器
				// 这个函数会处理鼠标输入，更新相机位置和朝向
				// 如果启用了阻尼效果，这里会计算平滑的相机移动
				controls.update();

				// 执行后处理渲染
				// 这会执行整个后处理节点图：
				// 1. 预渲染通道（生成法线、深度、速度）
				// 2. GTAO通道（计算环境光遮蔽）
				// 3. 场景渲染通道（渲染颜色，应用AO）
				// 4. TRA通道（时间抗锯齿）
				// 5. 输出到屏幕
				postProcessing.render();
			}

		</script>
	</body>
</html>