<!-- Three.js WebGPU 体积光照系统 - 详细功能与技术分析
🎯 核心功能概述
这是一个基于Three.js和WebGPU的实时体积光照渲染系统，模拟光线在雾、烟等介质中的散射效果（俗称"光轴"或"上帝之光"）。系统通过先进的光线步进技术、动态3D噪声和后处理合成，创造出逼真的大气效果。

📊 主要功能模块
1. 3D体积雾渲染
动态烟雾模拟：使用Perlin噪声生成随时间变化的3D烟雾密度场

光线散射计算：模拟光线在烟雾中的吸收和散射物理过程

体积遮挡：基于场景深度正确遮挡体积雾（烟雾不会出现在物体前方）

2. 多光源支持
点光源体积散射：暖色调点光源产生球形光雾效果

聚光灯光轴效果：带有彩色纹理的聚光灯产生圆锥形光柱

阴影集成：体积光照与Three.js原生阴影系统无缝结合

3. 交互式控制
相机控制：OrbitControls实现6自由度相机控制

实时参数调节：通过GUI面板调整所有视觉效果参数

动画系统：自动化的光源运动和物体旋转

4. 性能优化系统
分级渲染：体积效果以低分辨率渲染后升级

智能降噪：高斯模糊减少低分辨率渲染的块状伪影

抖动抗锯齿：拜耳矩阵减少光线步进的条带效应

🔧 核心技术点详解
1. WebGPU渲染管线
javascript
// 现代图形API，相比WebGL有显著性能优势
const renderer = new THREE.WebGPURenderer();
优势：直接访问现代GPU功能、更好的多线程支持、更低的CPU开销

特点：支持计算着色器，适合体积渲染等计算密集型任务

2. 光线步进算法
javascript
volumetricMaterial.steps = 12; // 光线步进次数
原理：将光线路径分成多个小段，在每个段采样烟雾密度

精度控制：步数越多效果越精细，但性能消耗越大

优化技巧：使用距离场或自适应步长提升效率

3. 3D噪声纹理系统
javascript
const noiseTexture3D = createTexture3D(); // 128x128x128 3D纹理
Perlin噪声：产生连续、自然的随机图案

多尺度采样：结合不同频率的噪声创造丰富细节

javascript
// 三级噪声混合：基础+中频+高频
let density = sampleGrain(.1);
density = density.mul(sampleGrain(.05, 1));
density = density.mul(sampleGrain(.02, 2));
动态动画：随时间移动采样坐标实现烟雾飘动

4. 分层渲染架构
javascript
const LAYER_VOLUMETRIC_LIGHTING = 10;
分离渲染：体积效果与场景物体在不同渲染层处理

合成阶段：后处理中将各层效果叠加

优势：允许不同分辨率和质量设置，优化性能

5. 后处理合成系统
javascript
const postProcessing = new THREE.PostProcessing(renderer);
多通道渲染：

主场景通道（全分辨率）

体积光照通道（1/4分辨率）

降噪通道（高斯模糊）

合成通道（最终输出）

深度合成：使用深度缓冲区正确混合体积效果

6. 抖动与降噪技术
javascript
// 拜耳抖动减少条带伪影
volumetricMaterial.offsetNode = bayer16(screenCoordinate);

// 高斯模糊降噪
const blurredVolumetricPass = gaussianBlur(volumetricPass, denoiseStrength);
条带伪影原因：低步数光线步进产生的离散化效应

抖动解决方案：添加亚像素偏移打散条带

降噪必要性：低分辨率渲染会产生块状伪影

7. 物理光照模型
散射系数：控制光线在介质中的散射强度

吸收系数：模拟光线被介质吸收的效果

相位函数：定义散射方向分布（本例使用各向同性近似）

8. 性能优化策略
优化技术	性能提升	视觉影响
分辨率缩放 (0.25x)	~4倍速度	轻微模糊，通过降噪补偿
可控步进次数	线性关系	步数越少噪声越明显
分层渲染	避免重复计算	无质量损失
早期深度测试	GPU优化	完全透明
🎨 视觉效果实现
1. 动态烟雾效果
时变噪声：三轴独立时间偏移创造自然飘动

密度变化：可调节的烟雾浓度和分布

光源交互：烟雾密度影响光线的可见度和颜色

2. 光轴效果
体积阴影：烟雾在光照下产生柔和阴影

颜色衰减：光线在烟雾中传播时的颜色变化

边缘柔化：光柱边缘自然渐变

3. 场景集成
材质兼容：与StandardMaterial、阴影系统完全兼容

动态光照：支持移动光源和动画物体

实时更新：所有参数可实时调节无延迟

📱 交互功能
1. 参数实时调节
渲染质量：分辨率缩放、步进次数、降噪强度

视觉效果：雾强度、烟雾密度、光源强度

场景控制：光源位置、物体动画

2. 用户界面
javascript
const gui = renderer.inspector.createParameters('体积光照效果');
分类面板：光线步进、光照、场景等分类

实时反馈：参数调整立即反映在渲染中

预设保存：Inspector支持状态保存/加载

🚀 性能与兼容性
1. 性能指标
目标帧率：60 FPS（现代中端GPU）

内存使用：3D纹理~2MB，帧缓冲区~屏幕分辨率

GPU负载：体积渲染占主要开销

2. 硬件要求
必需：支持WebGPU的浏览器（Chrome 113+、Edge 113+）

推荐：独立显卡，4GB+ VRAM

最低：集成显卡，WebGL 2.0回退支持

3. 扩展可能性
更多介质：火焰、云层、水下焦散

高级散射：米氏散射、瑞利散射物理模型

交互应用：游戏天气系统、建筑可视化、影视特效预览

📈 技术架构图
text
用户交互 → OrbitControls/GUI
     ↓
相机系统 → PerspectiveCamera + Layers
     ↓
渲染管线 → WebGPURenderer
     ├── 主场景通道 (全分辨率)
     ├── 体积通道 (1/4分辨率 + 光线步进)
     └── 后处理合成
           ├── 高斯降噪
           ├── 深度合成
           └── 色调映射
     ↓
屏幕输出 → Canvas元素 -->


<!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">
		<!-- 引入样式表，用于页面布局和美观 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>

		<!-- 页面顶部信息区域，包含logo、标题和描述 -->
		<div id="info">
			<!-- Three.js官方Logo链接，点击跳转到官网 -->
			<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>
				这是一个基于WebGPU的实时体积光照演示。使用光线步进技术模拟烟雾/雾效，
				通过后处理通道与原生灯光和阴影系统无缝集成。
				支持动态噪声、可调节参数和实时交互。
			</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>

		<!-- 主JavaScript模块，使用ES6模块语法 -->
		<script type="module">

			// ========== 模块导入区域 ==========
			// 导入Three.js核心库（WebGPU版本）
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色语言（TSL）的核心节点
			// vec3: 三维向量操作
			// Fn: 自定义函数节点
			// time: 时间节点（自动更新）
			// texture3D: 3D纹理采样节点
			// screenUV: 屏幕UV坐标节点
			// uniform: 统一变量节点（可在着色器外部修改）
			// screenCoordinate: 屏幕坐标节点
			// pass: 渲染通道节点
			import { vec3, Fn, time, texture3D, screenUV, uniform, screenCoordinate, pass } from 'three/tsl';

			// 导入调试工具：Inspector（允许在运行时调整参数）
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器：允许用户用鼠标控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入改进的Perlin噪声生成器：用于创建自然的3D噪声
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
			
			// 导入茶壶几何体：经典的3D图形测试模型
			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

			// 导入TSL扩展功能
			// bayer16: 16x16拜耳矩阵，用于有序抖动（减少条带伪影）
			import { bayer16 } from 'three/addons/tsl/math/Bayer.js';
			
			// gaussianBlur: 高斯模糊节点，用于后处理降噪
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			// ========== 全局变量声明 ==========
			// 核心Three.js对象
			let renderer, scene, camera;
			
			// 场景中的关键物体
			let volumetricMesh; // 体积雾网格
			let teapot;         // 茶壶模型（测试物体）
			let pointLight;     // 点光源（暖色调）
			let spotLight;      // 聚光灯（带彩色纹理）
			
			// 后处理系统
			let postProcessing; // 后处理管理器

			// 初始化函数调用：程序入口点
			init();

			/**
			 * 创建3D噪声纹理函数
			 * 目的：生成用于体积雾密度变化的3D噪声纹理
			 * 原理：使用Perlin噪声算法在128x128x128的3D网格中生成随机值
			 * 应用：这个纹理将在光线步进中采样，决定每个位置的雾密度
			 */
			function createTexture3D() {

				let i = 0; // 数据数组索引，从0开始递增

				// 定义纹理尺寸：128x128x128个体素（体积像素）
				// 尺寸选择平衡：太小则细节不足，太大则内存消耗高
				const size = 128;
				
				// 创建Uint8Array存储纹理数据，每个体素占1字节（0-255）
				const data = new Uint8Array( size * size * size );

				// Perlin噪声参数
				const scale = 10;           // 噪声频率缩放因子
				const perlin = new ImprovedNoise(); // 创建Perlin噪声实例
				const repeatFactor = 5.0;   // 纹理重复因子，使噪声在空间中有更多变化

				// 三重循环遍历3D纹理的所有体素
				// 顺序：先Z轴，再Y轴，最后X轴（内存布局优化）
				for ( let z = 0; z < size; z ++ ) {
					for ( let y = 0; y < size; y ++ ) {
						for ( let x = 0; x < size; x ++ ) {

							// 将整数坐标转换为归一化的[0,1]范围，然后乘以重复因子
							// 这样可以使纹理在空间中重复，避免明显的平铺感
							const nx = ( x / size ) * repeatFactor;
							const ny = ( y / size ) * repeatFactor;
							const nz = ( z / size ) * repeatFactor;

							// 计算Perlin噪声值，范围大约在[-1, 1]
							// Perlin噪声具有连续性，适合模拟自然现象
							const noiseValue = perlin.noise( nx * scale, ny * scale, nz * scale );

							// 将[-1,1]的噪声值映射到[0,255]的8位整数
							// 128 + 128 * noiseValue 将范围转换为[0, 256]
							data[ i ] = ( 128 + 128 * noiseValue );

							i ++; // 移动到下一个数据位置

						}
					}
				}

				// 创建Three.js的3D纹理对象
				const texture = new THREE.Data3DTexture( data, size, size, size );
				
				// 纹理格式：只使用红色通道（灰度图），因为密度是单通道信息
				texture.format = THREE.RedFormat;
				
				// 过滤方式：线性过滤，使采样时产生平滑过渡
				texture.minFilter = THREE.LinearFilter;
				texture.magFilter = THREE.LinearFilter;
				
				// 包裹模式：重复包裹，确保纹理可以无缝重复
				texture.wrapS = THREE.RepeatWrapping;
				texture.wrapT = THREE.RepeatWrapping;
				
				// 内存对齐：设置为1字节对齐，这是Uint8Array的标准对齐
				texture.unpackAlignment = 1;
				
				// 标记纹理需要更新，Three.js会将数据上传到GPU
				texture.needsUpdate = true;

				return texture; // 返回创建好的3D纹理

			}

			/**
			 * 主初始化函数
			 * 功能：设置整个Three.js应用程序的所有组件
			 * 包括：渲染器、场景、相机、灯光、物体、后处理和GUI
			 */
			function init() {

				// ========== 1. 层定义 ==========
				// 定义体积光照的渲染层为第10层
				// 使用层系统可以分离渲染，让体积效果单独渲染后再合成
				const LAYER_VOLUMETRIC_LIGHTING = 10;

				// ========== 2. 渲染器设置 ==========
				// 创建WebGPURenderer实例（使用现代WebGPU API）
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比：匹配显示器的物理像素与CSS像素比例
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数为animate，每帧自动调用
				renderer.setAnimationLoop( animate );
				
				// 色调映射设置：将HDR值映射到显示器的LDR范围
				renderer.toneMapping = THREE.NeutralToneMapping; // 中性色调映射（自然效果）
				renderer.toneMappingExposure = 2; // 曝光值：2表示正常曝光
				
				// 启用阴影映射系统
				renderer.shadowMap.enabled = true;
				
				// 创建Inspector实例（调试工具），并附加到渲染器
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ========== 3. 场景创建 ==========
				// 创建主场景，所有3D对象都将添加到这个场景中
				scene = new THREE.Scene();

				// ========== 4. 相机设置 ==========
				// 创建透视相机：模拟人眼视角
				// 参数：视野角60度，宽高比，近裁剪面0.1单位，远裁剪面100单位
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置：X=-8, Y=1, Z=-6
				camera.position.set( - 8, 1, - 6 );

				// ========== 5. 用户交互控制 ==========
				// 创建轨道控制器，连接相机和渲染器的DOM元素
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.maxDistance = 40; // 最大缩放距离：相机最远可以拉多远
				controls.minDistance = 2;  // 最小缩放距离：相机最近可以推多近

				// ========== 6. 体积雾材质和网格 ==========
				// 创建3D噪声纹理，用于体积雾的密度变化
				const noiseTexture3D = createTexture3D();

				// 创建统一变量节点：烟雾密度，初始值2，可以在GUI中调整
				const smokeAmount = uniform( 2 );

				// 创建体积节点材质：专门用于体积渲染的特殊材质
				const volumetricMaterial = new THREE.VolumeNodeMaterial();
				
				// 设置光线步进次数：12步（平衡质量和性能）
				volumetricMaterial.steps = 12;
				
				// 添加抖动偏移：使用16x16拜耳矩阵减少条带伪影
				// 条带伪影是光线步进中常见的视觉问题，抖动可以打散这些条带
				volumetricMaterial.offsetNode = bayer16( screenCoordinate );
				
				// 定义散射节点：计算光线在体积中的散射效果
				volumetricMaterial.scatteringNode = Fn( ( { positionRay } ) => {
					// positionRay是当前光线步进位置的3D坐标
					// 这个函数返回该位置的散射系数（雾密度）

					// 创建时间向量，用于动画效果
					// 不同分量使用不同时间缩放，创造更自然的运动
					const timeScaled = vec3( time, 0, time.mul( .3 ) );

					// 定义采样函数：在不同尺度和时间下采样3D噪声
					// 参数：scale - 采样缩放，timeScale - 时间动画速度
					const sampleGrain = ( scale, timeScale = 1 ) => 
						texture3D( 
							noiseTexture3D, // 3D噪声纹理
							positionRay                     // 当前位置
								.add( timeScaled.mul( timeScale ) ) // 加上时间偏移（动画）
								.mul( scale )                       // 应用缩放
								.mod( 1 ),                          // 取模1确保在[0,1]范围
							0 // 细节级别
						).r.add( .5 ); // 采样红色通道并加0.5（调整到合适范围）

					// 多尺度噪声采样：结合不同频率的噪声创造更自然的效果
					// 1. 采样基础噪声（频率0.1）
					let density = sampleGrain( .1 );
					
					// 2. 乘以中频噪声（频率0.05，时间缩放1）
					density = density.mul( sampleGrain( .05, 1 ) );
					
					// 3. 乘以高频噪声（频率0.02，时间缩放2）
					density = density.mul( sampleGrain( .02, 2 ) );

					// 混合烟雾密度：将计算出的噪声密度与烟雾量参数混合
					// mix函数执行线性插值：smokeAmount=0时返回1，smokeAmount=1时返回density
					return smokeAmount.mix( 1, density );

				} );

				// 创建体积雾的网格：一个20x10x20的盒子
				// 这个盒子定义了体积雾存在的空间范围
				volumetricMesh = new THREE.Mesh( 
					new THREE.BoxGeometry( 20, 10, 20 ), // 几何体
					volumetricMaterial                   // 材质
				);
				
				volumetricMesh.receiveShadow = true;   // 网格可以接收阴影
				volumetricMesh.position.y = 2;         // 向上移动2个单位
				
				// 层管理：只启用体积光照层（第10层）
				// 这样体积雾可以单独渲染，不与主场景混合
				volumetricMesh.layers.disableAll();     // 先禁用所有层
				volumetricMesh.layers.enable( LAYER_VOLUMETRIC_LIGHTING ); // 只启用第10层
				
				scene.add( volumetricMesh ); // 将体积雾网格添加到场景

				// ========== 7. 场景物体创建 ==========
				// 创建茶壶模型：经典的3D图形测试对象
				teapot = new THREE.Mesh( 
					new TeapotGeometry( .8, 18 ), // 茶壶几何体，半径0.8，细分18
					new THREE.MeshStandardMaterial( { 
						color: 0xffffff, // 白色
						side: THREE.DoubleSide // 双面渲染
					} ) 
				);
				teapot.castShadow = true; // 茶壶投射阴影
				scene.add( teapot ); // 添加到场景

				// 创建地板平面：作为地面参考
				const floor = new THREE.Mesh( 
					new THREE.PlaneGeometry( 100, 100 ), // 100x100的平面
					new THREE.MeshStandardMaterial( { color: 0xffffff } ) // 白色材质
				);
				floor.rotation.x = - Math.PI / 2; // 绕X轴旋转-90度，使平面水平
				floor.position.y = - 3;           // 向下移动3个单位
				floor.receiveShadow = true;       // 地板接收阴影
				scene.add( floor ); // 添加到场景

				// ========== 8. 光源设置 ==========
				// 创建点光源：暖色调（0xf9bb50是橙色），强度3，照射距离100
				pointLight = new THREE.PointLight( 0xf9bb50, 3, 100 );
				pointLight.castShadow = true; // 点光源投射阴影
				pointLight.position.set( 0, 1.4, 0 ); // 设置初始位置
				
				// 点光源也启用体积光照层
				// 这样当体积雾渲染时，点光源会参与体积散射计算
				pointLight.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
				scene.add( pointLight ); // 添加到场景

				// 创建聚光灯：白色，强度100，带彩色纹理
				spotLight = new THREE.SpotLight( 0xffffff, 100 );
				spotLight.position.set( 2.5, 5, 2.5 ); // 初始位置
				spotLight.angle = Math.PI / 6;          // 光照角度30度（弧度π/6）
				spotLight.penumbra = 1;                 // 半影区大小（边缘柔和度）
				spotLight.decay = 2;                    // 衰减系数（物理正确）
				spotLight.distance = 0;                 // 0表示无限距离
				
				// 加载彩色纹理作为聚光灯的颜色贴图
				spotLight.map = new THREE.TextureLoader()
					.setPath( 'textures/' ) // 设置纹理路径
					.load( 'colors.png' );  // 加载colors.png文件
				
				spotLight.castShadow = true; // 聚光灯投射阴影
				spotLight.shadow.intensity = .98; // 阴影强度（稍微减弱）
				
				// 阴影贴图尺寸：1024x1024，更高的分辨率产生更清晰的阴影
				spotLight.shadow.mapSize.width = 1024;
				spotLight.shadow.mapSize.height = 1024;
				
				// 阴影相机参数：定义阴影计算的视锥体
				spotLight.shadow.camera.near = 1;  // 近裁剪面
				spotLight.shadow.camera.far = 15;  // 远裁剪面
				spotLight.shadow.focus = 1;        // 阴影聚焦点
				spotLight.shadow.bias = - .003;    // 阴影偏移，减少阴影伪影
				
				// 聚光灯也启用体积光照层
				spotLight.layers.enable( LAYER_VOLUMETRIC_LIGHTING );
				scene.add( spotLight ); // 添加到场景

				// ========== 9. 后处理系统初始化 ==========
				// 创建后处理实例，传入渲染器
				postProcessing = new THREE.PostProcessing( renderer );

				// ========== 10. 分层渲染设置 ==========
				// 创建体积光照强度统一变量，初始值1
				// 这个变量控制体积效果的强度，可以在GUI中调整
				const volumetricLightingIntensity = uniform( 1 );

				// 创建层管理器，专门管理体积光照层
				const volumetricLayer = new THREE.Layers();
				volumetricLayer.disableAll(); // 先禁用所有层
				volumetricLayer.enable( LAYER_VOLUMETRIC_LIGHTING ); // 只启用第10层

				// 创建主场景渲染通道
				// 这个通道渲染整个场景（除了体积雾，因为体积雾在单独层）
				const scenePass = pass( scene, camera );
				
				// 从场景通道获取深度纹理节点
				// 深度纹理存储每个像素的深度值（距离相机的距离）
				const sceneDepth = scenePass.getTextureNode( 'depth' );

				// ========== 11. 体积材质深度处理 ==========
				// 将场景深度应用到体积材质
				// 这样体积雾会根据场景深度被正确遮挡（不会出现在物体前面）
				volumetricMaterial.depthNode = sceneDepth.sample( screenUV );

				// ========== 12. 体积光照渲染通道 ==========
				// 创建专门的体积光照渲染通道
				// depthBuffer: false - 不写入深度缓冲区（避免深度冲突）
				const volumetricPass = pass( scene, camera, { depthBuffer: false } );
				volumetricPass.name = 'Volumetric Lighting'; // 通道名称（调试用）
				
				// 设置渲染层：只渲染体积光照层的内容
				volumetricPass.setLayers( volumetricLayer );
				
				// 设置分辨率缩放：0.25表示以1/4分辨率渲染体积效果
				// 这是重要的性能优化，因为体积渲染计算密集
				volumetricPass.setResolutionScale( .25 );

				// ========== 13. 后处理合成与降噪 ==========
				// 创建降噪强度统一变量，初始值0.6
				const denoiseStrength = uniform( .6 );

				// 对体积光照通道应用高斯模糊降噪
				// 因为体积效果以低分辨率渲染，会有明显的块状伪影
				// 高斯模糊可以平滑这些伪影，但会损失一些细节
				const blurredVolumetricPass = gaussianBlur( volumetricPass, denoiseStrength );

				// 合成最终图像：将降噪后的体积效果添加到主场景
				// volumetricPass.mul(volumetricLightingIntensity): 应用强度控制
				// scenePass.add(...): 将体积效果叠加到场景上
				const scenePassColor = scenePass.add( blurredVolumetricPass.mul( volumetricLightingIntensity ) );

				// 设置后处理的最终输出节点
				postProcessing.outputNode = scenePassColor;

				// ========== 14. GUI调试界面设置 ==========
				// 定义GUI参数对象
				const params = {
					resolution: volumetricPass.getResolutionScale(), // 体积渲染分辨率
					denoise: true // 是否启用降噪
				};

				// 创建GUI面板，标题为"体积光照效果"
				const gui = renderer.inspector.createParameters( '体积光照效果' );

				// 创建"光线步进设置"折叠面板
				const rayMarching = gui.addFolder( '光线步进设置' );
				
				// 分辨率滑块：控制体积渲染的分辨率缩放
				rayMarching.add( params, 'resolution', .1, .5 )
					.name( '渲染分辨率' )
					.onChange( ( resolution ) => {
						// 当滑块变化时，更新体积通道的分辨率
						volumetricPass.setResolutionScale( resolution );
					} );
				
				// 步进次数滑块：控制光线步进的精细度
				rayMarching.add( volumetricMaterial, 'steps', 2, 12 )
					.name( '步进次数' )
					.step( 1 ); // 整数步长
				
				// 降噪强度滑块：控制高斯模糊的程度
				rayMarching.add( denoiseStrength, 'value', 0, 1 )
					.name( '降噪强度' );
				
				// 降噪开关：启用/禁用降噪效果
				rayMarching.add( params, 'denoise' )
					.name( '启用降噪' )
					.onChange( ( denoise ) => {
						// 根据开关状态选择使用哪个体积效果
						const volumetric = denoise ? blurredVolumetricPass : volumetricPass;
						
						// 重新合成场景
						const scenePassColor = scenePass.add( volumetric.mul( volumetricLightingIntensity ) );
						
						// 更新后处理输出节点
						postProcessing.outputNode = scenePassColor;
						
						// 标记后处理需要更新
						postProcessing.needsUpdate = true;
					} );

				// 创建"光照与场景"折叠面板
				const lighting = gui.addFolder( '光照与场景设置' );
				
				// 点光源强度滑块
				lighting.add( pointLight, 'intensity', 0, 6 )
					.name( '点光源强度' );
				
				// 聚光灯强度滑块
				lighting.add( spotLight, 'intensity', 0, 200 )
					.name( '聚光灯强度' );
				
				// 体积雾强度滑块
				lighting.add( volumetricLightingIntensity, 'value', 0, 2 )
					.name( '体积雾强度' );
				
				// 烟雾密度滑块
				lighting.add( smokeAmount, 'value', 0, 3 )
					.name( '烟雾密度' );

				// ========== 15. 窗口大小变化监听 ==========
				// 当浏览器窗口大小变化时，调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化响应函数
			 * 功能：当用户调整浏览器窗口大小时，重新计算相机和渲染器参数
			 */
			function onWindowResize() {

				// 更新相机纵横比：窗口宽高比可能已改变
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵（必须调用此方法使更改生效）
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸，匹配新窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 功能：每帧调用，更新动态元素并渲染场景
			 * 这是Three.js渲染循环的核心
			 */
			function animate() {

				// 获取当前时间（秒），用于动画计算
				// performance.now()返回高精度时间戳（毫秒），乘以0.001转换为秒
				const time = performance.now() * 0.001;
				
				// 运动幅度缩放因子
				const scale = 2.4;

				// 更新点光源位置：使其在3D空间中做圆周运动
				// 使用不同的时间乘数（0.7, 0.5, 0.3）使运动轨迹更复杂
				pointLight.position.x = Math.sin( time * 0.7 ) * scale;
				pointLight.position.y = Math.cos( time * 0.5 ) * scale;
				pointLight.position.z = Math.cos( time * 0.3 ) * scale;

				// 更新聚光灯位置：也在3D空间中运动
				spotLight.position.x = Math.cos( time * 0.3 ) * scale;
				
				// 使聚光灯始终看向原点(0,0,0)
				// 这创建了聚光灯在场景中扫描的效果
				spotLight.lookAt( 0, 0, 0 );

				// 旋转茶壶：绕Y轴缓慢旋转
				// time * 0.2 控制旋转速度
				teapot.rotation.y = time * 0.2;

				// 执行后处理渲染
				// 这是关键调用：触发整个渲染管线
				// 1. 渲染主场景（不含体积雾）
				// 2. 渲染体积光照层（低分辨率）
				// 3. 应用降噪（如果启用）
				// 4. 合成最终图像
				// 5. 显示到屏幕
				postProcessing.render();

			}

		</script>

	</body>
</html>