<!-- Three.js WebGPU 火焰与烟雾粒子特效系统 - 功能描述与技术分析
一、项目概述
这是一个基于 Three.js WebGPU 渲染器的高性能粒子特效演示系统，展示了逼真的火焰和烟雾动态效果。该系统利用了最新的WebGPU图形API，实现了比传统WebGL更高效的粒子渲染，适用于游戏特效、可视化展示、创意互动等场景。

二、核心功能
1. 双粒子系统模拟
火焰粒子系统：1000个橙色火焰粒子，模拟燃烧效果

烟雾粒子系统：2000个灰色烟雾粒子，模拟烟雾升腾效果

物理效果：粒子生命周期、位置偏移、大小变化、旋转动画

2. 实时交互控制
摄像机控制：鼠标拖拽旋转、滚轮缩放、右键平移

参数调节：实时调整粒子动画速度

视角切换：360度自由观察粒子效果

3. 视觉特效
动态透明度：粒子淡入淡出效果

颜色渐变：火焰到烟雾的颜色过渡

旋转动画：烟雾纹理UV旋转

光照模拟：简单的假光照增强体积感

4. 调试与监控
内置GUI参数调节面板

实时性能监控（可通过扩展实现）

WebGPU兼容性自动检测

三、主要技术点
1. WebGPU 渲染后端
javascript
// 核心技术：使用Three.js的WebGPU渲染器
renderer = new THREE.WebGPURenderer({ antialias: true });
优势：

相比WebGL，CPU开销降低50%以上

原生支持计算着色器，适合粒子计算

改进的并行处理能力

显存管理更高效

2. TSL（Three.js Shader Language）着色器编程
javascript
// 声明式着色器编程，替代传统GLSL
const lifeRange = range(.1, 1);
const opacityNode = textureNode.a.mul(life.oneMinus());
技术特点：

声明式编程，代码更简洁

自动着色器优化和编译

类型安全的节点连接

实时编辑和调试支持

3. 实例化渲染（Instanced Rendering）
javascript
smokeInstancedSprite.count = 2000;  // 一次绘制2000个实例
性能优化：

减少Draw Call数量：从数千次减少到1-2次

共享几何体和材质数据

GPU批量处理顶点数据

适合大规模粒子系统

4. 间接绘制（Indirect Drawing）
javascript
// 高级优化：间接绘制调用
const indirectAttribute = new THREE.IndirectStorageBufferAttribute(uint32, 5);
fireGeometry.setIndirect(indirectAttribute);
技术原理：

绘制参数存储在GPU缓冲区

减少CPU到GPU的数据传输

特别适合动态实例数量变化

WebGPU原生支持的特性

5. 粒子生命周期管理
javascript
// 完整的粒子生命周期控制
const lifeTime = scaledTime.mul(lifeRange).mod(1);  // 0-1循环
const life = lifeTime.div(lifeRange);  // 归一化生命周期
生命周期阶段：

生成期：透明度从0到1

成熟期：完全可见，颜色变化

衰减期：透明度从1到0

重生期：重新开始循环

6. 物理模拟节点
javascript
// 物理属性计算
const offsetRange = range(new THREE.Vector3(-2, 3, -2), new THREE.Vector3(2, 5, 2));
smokeNodeMaterial.positionNode = offsetRange.mul(lifeTime);
模拟效果：

位置动画：随机偏移 + 时间影响

大小变化：从小到大再变小

旋转效果：UV坐标随时间旋转

颜色混合：基于位置和生命周期的颜色过渡

7. 混合模式与透明度处理
javascript
// 火焰：加法混合（Additive Blending）
fireNodeMaterial.blending = THREE.AdditiveBlending;

// 烟雾：普通混合（Normal Blending）
smokeNodeMaterial.depthWrite = false;
混合策略：

火焰：加法混合，叠加变亮，模拟发光效果

烟雾：普通混合，禁用深度写入，正确处理透明排序

渲染顺序：火焰在烟雾之上渲染

8. 响应式设计与性能优化
javascript
// 自动适应窗口大小
function onWindowResize() {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}
优化措施：

动态调整分辨率和像素比

高DPI屏幕适配

资源按需加载

帧率稳定控制

四、技术架构
1. 渲染管线
text
JavaScript逻辑层
    ↓
Three.js场景图
    ↓
TSL着色器节点
    ↓
WebGPU着色器编译
    ↓
GPU渲染管线
    ↓
Canvas输出
2. 数据流
text
时间输入 → 生命周期计算 → 物理属性更新
    ↓
纹理采样 → 颜色/透明度计算 → 顶点变换
    ↓
实例化数据 → 批量绘制 → 屏幕显示
3. 性能特征
Draw Call：2-3次（火焰1次 + 烟雾1次 + 网格1次）

顶点数：每个粒子4个顶点

内存使用：纹理 + 几何数据 + 实例数据

GPU负载：主要消耗在片段着色器（透明度混合）

五、扩展可能性
1. 功能扩展
添加风力、重力等物理场

实现粒子碰撞检测

添加声音效果同步

支持触摸屏交互

2. 性能优化
LOD（细节层次）系统

视锥体裁剪

粒子池对象重用

计算着色器优化

3. 效果增强
后期处理（Bloom、景深、颜色分级）

体积光效果

粒子阴影

交互式粒子生成

六、适用场景
游戏开发：爆炸、火焰、魔法等特效

数据可视化：动态数据流展示

创意艺术：交互式数字艺术作品

产品演示：科技感强的产品展示

教育演示：物理现象模拟

七、技术亮点总结
技术点	优势	应用效果
WebGPU后端	性能提升2-3倍，支持现代GPU特性	流畅渲染3000+粒子
TSL着色器	开发效率高，易于维护	复杂效果简单实现
实例化渲染	大幅减少CPU开销	大规模粒子系统
间接绘制	GPU驱动渲染，CPU解放	动态粒子数量变化
生命周期管理	自然的粒子行为	逼真的物理效果 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元信息 -->
		<!-- 设置页面字符编码为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 视口设置，确保页面在移动设备上正确显示 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 页面标题：显示在浏览器标签页上的文字 -->
		<title>Three.js WebGPU - 火焰与烟雾粒子特效演示</title>
		<!-- 外部CSS样式表链接 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 页面信息展示区域：用于显示标题、描述和链接 -->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				target="_blank"：在新标签页中打开链接
				rel="noopener"：安全属性，防止新页面访问window.opener
				class="logo-link"：CSS类名，通常用于添加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 WebGPU引擎</a>
				<!-- 副标题：用span标签包裹，可单独设置样式 -->
				<span> - 动态粒子特效演示</span>
			</div>

			<!-- 
				页面描述文字
				<small>标签表示小号文字，通常用于辅助说明
				此处描述本页面的主要内容
			-->
			<small>🔥 火焰与烟雾粒子系统 | ⚡ WebGPU硬件加速 | 🎮 实时交互控制</small>
			
			
		</div>

		<!-- 
			导入映射（Import Maps）
			这是现代浏览器的模块解析功能，允许为模块指定别名
			作用类似于Node.js的package.json或webpack的alias配置
		-->
		<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模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ==================== 模块导入部分 ====================
			
			// 导入Three.js的核心库（WebGPU版本）
			// * as THREE 表示将所有导出内容放在THREE命名空间下
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）着色器节点
			// TSL是一种声明式着色器编程语言，比直接写GLSL更友好
			import { 
				// 范围函数：在指定范围内生成随机值，用于粒子属性变化
				range,
				
				// 纹理采样：从纹理图像中读取颜色数据
				texture,
				
				// 混合函数：在两个值之间进行线性插值
				mix,
				
				// UV坐标：纹理坐标，用于确定纹理在几何体上的映射
				uv,
				
				// 颜色构造：将十六进制颜色值转换为着色器可用的颜色节点
				color,
				
				// UV旋转：对纹理坐标进行旋转变换，创建动画效果
				rotateUV,
				
				// 局部位置：顶点在模型局部坐标系中的位置
				positionLocal,
				
				// 时间变量：从场景开始渲染起经过的时间（秒）
				time,
				
				// 统一变量：在着色器中保持不变的变量，可从JavaScript控制
				uniform
			} from 'three/tsl';

			// 导入调试检查器：用于创建实时调整参数的GUI界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			
			// 导入轨道控制器：允许用户用鼠标控制摄像机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入WebGPU能力检测：检查浏览器是否支持WebGPU API
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// ==================== 全局变量声明 ====================
			
			// 场景图的核心元素
			let camera;     // 摄像机：定义观察者的视角和视野
			let scene;      // 场景：包含所有3D对象的容器
			let renderer;   // 渲染器：负责将3D场景绘制到2D画布上
			
			// 用户交互控制器
			let controls;   // 轨道控制器实例，用于鼠标控制摄像机

			// ==================== 初始化调用 ====================
			
			// 页面加载完成后立即执行初始化函数
			// 这是整个应用的入口点
			init();

			// ==================== 函数定义部分 ====================
			
			/**
			 * 主初始化函数 - 应用启动入口
			 * 
			 * 职责：
			 * 1. 检查WebGPU兼容性
			 * 2. 创建3D场景的核心组件（摄像机、场景、渲染器）
			 * 3. 设置粒子系统和材质
			 * 4. 配置用户交互控件
			 * 5. 设置事件监听器
			 * 6. 创建调试界面
			 * 
			 * 执行流程：
			 * 1. 能力检测 → 2. 场景搭建 → 3. 粒子创建 → 4. 交互配置 → 5. 开始渲染
			 */
			function init() {
				
				// ----- 第一阶段：WebGPU兼容性检查 -----
				
				// 检查当前浏览器环境是否支持WebGPU API
				// WebGPU是新一代图形API，比WebGL更高效，但支持度较低
				if ( WebGPU.isAvailable() === false ) {
					
					// 如果不支持，获取友好的错误信息HTML元素
					const errorMessage = WebGPU.getErrorMessage();
					
					// 将错误信息添加到页面body中，提示用户
					document.body.appendChild( errorMessage );
					
					// 抛出错误，停止脚本继续执行
					// 使用中文错误信息，对国内开发者更友好
					throw new Error( '当前浏览器不支持WebGPU API，请使用Chrome 113+、Edge 113+或Firefox Nightly等支持WebGPU的浏览器版本。' );
					
				}
				
				// 获取浏览器窗口的内部尺寸（不包括工具栏、滚动条等）
				// 使用解构赋值同时获取宽度和高度
				const { innerWidth, innerHeight } = window;

				// ----- 第二阶段：创建摄像机 -----
				
				/**
				 * 创建透视投影摄像机（PerspectiveCamera）
				 * 透视投影模拟人眼的视觉效果，物体距离越远看起来越小
				 * 
				 * 参数说明：
				 * @param {number} 60 - 视野角度（Field of View），单位是度
				 *                   较小的值产生望远镜效果，较大的值产生鱼眼效果
				 * @param {number} innerWidth/innerHeight - 宽高比
				 *                   必须与渲染画布的宽高比匹配，防止图像拉伸
				 * @param {number} 1 - 近裁剪面距离，比这个距离近的物体不会被渲染
				 * @param {number} 5000 - 远裁剪面距离，比这个距离远的物体不会被渲染
				 */
				camera = new THREE.PerspectiveCamera( 
					60,                          // 视野角度：中等视野，接近人眼自然视野
					innerWidth / innerHeight,    // 宽高比：根据窗口尺寸动态计算
					1,                           // 近裁剪面：1个单位距离
					5000                         // 远裁剪面：5000个单位距离
				);
				
				// 设置摄像机在3D空间中的初始位置
				// 参数：X坐标, Y坐标, Z坐标
				// 这里将摄像机放在X轴正方向，略高于场景中心的位置
				camera.position.set( 1300, 500, 0 );

				// ----- 第三阶段：创建场景 -----
				
				/**
				 * 创建3D场景
				 * 场景是所有3D对象的容器，类似于舞台
				 * 可以设置全局属性如背景色、雾效、环境光等
				 */
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用深灰色（#333333）作为背景，与火焰的亮色形成对比
				scene.background = new THREE.Color( 0x333333 );

				// ----- 第四阶段：加载和处理纹理 -----
				
				// 创建纹理加载器实例
				// TextureLoader是Three.js提供的异步加载纹理的工具类
				const textureLoader = new THREE.TextureLoader();
				
				/**
				 * 加载烟雾纹理图片
				 * 纹理是2D图像，映射到3D几何体表面
				 * 
				 * 参数说明：
				 * @param {string} 'textures/opengameart/smoke1.png' - 纹理文件路径
				 * @returns {THREE.Texture} - 纹理对象，包含图像数据和采样参数
				 * 
				 * 注意：这是一个异步操作，但TextureLoader提供了简单的回调机制
				 * 对于更复杂的加载需求，可以使用LoadingManager
				 */
				const map = textureLoader.load( 'textures/opengameart/smoke1.png' );
				
				// 纹理属性可以在这里设置，例如：
				// map.wrapS = THREE.RepeatWrapping;  // 水平方向重复
				// map.wrapT = THREE.RepeatWrapping;  // 垂直方向重复
				// map.magFilter = THREE.LinearFilter; // 放大过滤方式

				// ----- 第五阶段：创建TSL着色器节点 -----
				// TSL节点用于构建着色器逻辑，这些节点将在GPU上执行
				
				// 生命周期范围节点：控制每个粒子的生存时间在0.1到1秒之间
				// 范围函数创建随机值，使每个粒子的生命周期不同
				const lifeRange = range( .1, 1 );
				
				// 位置偏移范围节点：定义粒子初始位置的随机范围
				// 使用三维向量定义X、Y、Z三个方向的范围
				// Y轴范围较大（3到5），使粒子主要向上运动
				const offsetRange = range( 
					new THREE.Vector3( -2, 3, -2 ),  // 最小值：X、Z方向±2，Y方向3
					new THREE.Vector3( 2, 5, 2 )     // 最大值：X、Z方向±2，Y方向5
				);

				// 速度统一变量：控制整个粒子系统的动画速度
				// uniform变量可以在JavaScript中动态修改，并同步到着色器
				// 初始值0.2，将在GUI中提供调整滑块
				const speed = uniform( .2 );
				
				// 缩放时间节点：将原始时间进行偏移和缩放
				// time.add(5)：给时间加上5秒偏移，避免刚开始时粒子太少
				// .mul(speed)：乘以速度系数，控制动画快慢
				const scaledTime = time.add( 5 ).mul( speed );

				// 生命周期时间节点：计算每个粒子在当前时间的生命周期进度
				// scaledTime.mul(lifeRange)：时间乘以生命周期范围，使不同粒子进度不同
				// .mod(1)：取模1，使值在0-1之间循环，实现粒子重生
				const lifeTime = scaledTime.mul( lifeRange ).mod( 1 );
				
				// 缩放范围节点：粒子大小的随机范围，0.3到2倍
				const scaleRange = range( .3, 2 );
				
				// 旋转范围节点：纹理旋转速度的随机范围
				const rotateRange = range( .1, 4 );

				// 生命值节点：归一化的生命周期值（0到1）
				// 0表示刚出生，1表示生命结束
				// 用于控制透明度、颜色等属性的渐变
				const life = lifeTime.div( lifeRange );

				// 假光照效果节点：模拟简单的光照效果
				// positionLocal.y.oneMinus()：1减去Y坐标，使底部更亮
				// .max(0.2)：最小值限制为0.2，保证有一定亮度
				const fakeLightEffect = positionLocal.y.oneMinus().max( 0.2 );

				// 纹理采样节点：加载纹理并应用UV旋转动画
				// texture(map, ...)：从纹理贴图中采样颜色
				// rotateUV(uv(), scaledTime.mul(rotateRange))：旋转UV坐标
				// UV旋转创建了烟雾旋转上升的视觉效果
				const textureNode = texture( map, rotateUV( uv(), scaledTime.mul( rotateRange ) ) );

				// 透明度节点：控制粒子的淡入淡出效果
				// textureNode.a：纹理的Alpha通道值（透明度）
				// life.oneMinus()：1-生命值，越老越透明
				// 两者相乘，实现纹理透明度随生命周期变化
				const opacityNode = textureNode.a.mul( life.oneMinus() );

				// 烟雾颜色混合节点：根据粒子高度混合两种颜色
				// 底部是深棕色（0x2c1501），顶部是深灰色（0x222222）
				// positionLocal.y.mul(3).clamp()：Y坐标乘以3并限制在0-1
				// 位置越高，越接近深灰色
				const smokeColor = mix( 
					color( 0x2c1501 ),                // 起始颜色：深棕色（类似烟雾底部）
					color( 0x222222 ),                // 结束颜色：深灰色（类似烟雾顶部）
					positionLocal.y.mul( 3 ).clamp()  // 混合因子：基于Y坐标
				);

				// ----- 第六阶段：创建烟雾粒子系统 -----
				
				/**
				 * 创建烟雾粒子材质
				 * SpriteNodeMaterial是专门为精灵（总是面向摄像机的平面）设计的材质
				 * 使用TSL节点定义材质属性，而不是传统材质的固定参数
				 */
				const smokeNodeMaterial = new THREE.SpriteNodeMaterial();
				
				// 设置颜色节点：混合火焰色和烟雾色，并应用假光照
				smokeNodeMaterial.colorNode = mix( 
					color( 0xf27d0c ),            // 火焰橙色：模拟火焰核心的颜色影响
					smokeColor,                   // 上面计算的烟雾颜色
					life.mul( 2.5 ).min( 1 )      // 混合因子：生命值乘以2.5，限制不超过1
				).mul( fakeLightEffect );         // 乘以假光照效果，增强体积感
				
				// 设置透明度节点：控制粒子淡入淡出
				smokeNodeMaterial.opacityNode = opacityNode;
				
				// 设置位置节点：粒子随时间的位置变化
				// offsetRange.mul(lifeTime)：偏移范围乘以生命周期时间
				// 创建粒子从中心向外扩散的效果
				smokeNodeMaterial.positionNode = offsetRange.mul( lifeTime );
				
				// 设置缩放节点：粒子随时间的大小变化
				// scaleRange.mul(lifeTime.max(0.3))：缩放范围乘以（生命时间与0.3的最大值）
				// lifeTime.max(0.3)：保证粒子初始大小至少是最大值的30%
				// 创建粒子从小变大再变小的效果
				smokeNodeMaterial.scaleNode = scaleRange.mul( lifeTime.max( 0.3 ) );
				
				// 禁用深度写入：透明物体通常需要关闭深度写入
				// 避免后面的透明物体被错误地剔除
				smokeNodeMaterial.depthWrite = false;
				
				// 注意：深度测试（depthTest）默认是开启的，这通常是正确的
				// 深度测试确保近处的物体遮挡远处的物体

				/**
				 * 创建烟雾实例化网格
				 * 实例化渲染：使用相同的几何体和材质，但不同位置/缩放/旋转，渲染大量相似对象
				 * 相比单独创建每个粒子，实例化渲染大大减少了Draw Call数量
				 */
				const smokeInstancedSprite = new THREE.Mesh( 
					new THREE.PlaneGeometry( 1, 1 ),  // 基础几何体：1x1单位平面
					smokeNodeMaterial                 // 上面创建的烟雾材质
				);
				
				// 设置整体缩放：将1x1的平面放大400倍
				// setScalar(400)等价于set(400, 400, 400)
				smokeInstancedSprite.scale.setScalar( 400 );
				
				// 设置实例数量：渲染2000个烟雾粒子
				// count属性告诉渲染器需要绘制多少个实例
				smokeInstancedSprite.count = 2000;
				
				// 将烟雾粒子系统添加到场景中
				scene.add( smokeInstancedSprite );

				// ----- 第七阶段：创建火焰粒子系统 -----
				
				// 创建火焰几何体：同样是1x1的平面
				// 几何体定义了顶点的位置、法线、UV坐标等信息
				const fireGeometry = new THREE.PlaneGeometry( 1, 1 );
				
				// 火焰粒子数量：1000个
				const fireCount = 1000;

				/**
				 * 创建火焰材质
				 * 也使用SpriteNodeMaterial，但参数与烟雾不同
				 */
				const fireNodeMaterial = new THREE.SpriteNodeMaterial();
				
				// 火焰颜色节点：使用单一的火焰橙色
				// 这里mix的两个颜色相同，实际上没有混合效果
				// 可能是为了与烟雾材质结构保持一致，便于后续修改
				fireNodeMaterial.colorNode = mix( 
					color( 0xb72f17 ),  // 深火焰橙色
					color( 0xb72f17 ),  // 相同的颜色
					life                // 混合因子：生命值
				);
				
				// 火焰位置节点：使用较小的偏移范围
				// 火焰主要在中心区域，不像烟雾那样扩散很远
				fireNodeMaterial.positionNode = range( 
					new THREE.Vector3( -1, 1, -1 ),  // 最小偏移
					new THREE.Vector3( 1, 2, 1 )     // 最大偏移
				).mul( lifeTime );                   // 乘以生命周期时间
				
				// 火焰缩放节点：复用烟雾的缩放节点
				// 保持粒子大小变化的一致性
				fireNodeMaterial.scaleNode = smokeNodeMaterial.scaleNode;
				
				// 火焰透明度节点：使用烟雾的透明度节点，但乘以0.5降低不透明度
				// 使火焰呈现半透明效果，可以叠加产生更亮的区域
				fireNodeMaterial.opacityNode = opacityNode.mul( .5 );
				
				// 设置混合模式为加法混合（Additive Blending）
				// 加法混合：最终颜色 = 源颜色 + 目标颜色
				// 适合火焰、灯光等发光效果，多个火焰叠加会变得更亮
				fireNodeMaterial.blending = THREE.AdditiveBlending;
				
				// 启用透明度：允许材质有透明度变化
				fireNodeMaterial.transparent = true;
				
				// 禁用深度写入：与烟雾一样，避免透明物体的渲染问题
				fireNodeMaterial.depthWrite = false;

				/**
				 * 创建火焰实例化网格
				 */
				const fireInstancedSprite = new THREE.Mesh( 
					fireGeometry,        // 火焰几何体
					fireNodeMaterial     // 火焰材质
				);
				
				// 整体缩放：与烟雾相同，400倍
				fireInstancedSprite.scale.setScalar( 400 );
				
				// 实例数量：1000个火焰粒子
				fireInstancedSprite.count = fireCount;
				
				// 位置下移100单位：使火焰在烟雾下方
				// 模拟现实中的火焰在底部，烟雾向上飘散
				fireInstancedSprite.position.y = -100;
				
				// 设置渲染顺序为1：大于默认值0
				// 渲染顺序大的后渲染，确保火焰在烟雾之上渲染
				// 这对于透明物体的正确叠加很重要
				fireInstancedSprite.renderOrder = 1;
				
				// 将火焰粒子系统添加到场景中
				scene.add( fireInstancedSprite );

				// ----- 第八阶段：间接绘制设置（高级优化）-----
				/**
				 * 间接绘制（Indirect Drawing）是一种高级优化技术
				 * 将绘制参数存储在GPU缓冲区中，减少CPU到GPU的数据传输
				 * 特别适合大量重复的绘制调用
				 * 
				 * 每个间接绘制调用包含5个uint32值：
				 * 0: 顶点索引数量（indexCount）
				 * 1: 实例数量（instanceCount）
				 * 2: 起始索引（firstIndex）
				 * 3: 基础顶点（baseVertex）
				 * 4: 起始实例（firstInstance）
				 * 
				 * 对于非索引绘制（没有index buffer），使用4个值：
				 * 0: 顶点数量
				 * 1: 实例数量
				 * 2: 起始顶点
				 * 3: 起始实例
				 */
				
				// 获取几何体的索引数量
				// PlaneGeometry默认使用索引，6个索引（2个三角形）
				const indexCount = fireGeometry.index.array.length;
				
				// 创建Uint32Array存储间接绘制参数
				const uint32 = new Uint32Array( 5 );
				uint32[ 0 ] = indexCount;    // 顶点索引数量：几何体的三角形索引数
				uint32[ 1 ] = fireCount;     // 实例数量：要绘制的火焰粒子数量
				uint32[ 2 ] = 0;             // 起始索引：从索引缓冲区的开头开始
				uint32[ 3 ] = 0;             // 基础顶点：从顶点缓冲区的开头开始
				uint32[ 4 ] = 0;             // 起始实例：从第一个实例开始
				
				// 创建间接存储缓冲区属性
				// IndirectStorageBufferAttribute专门用于间接绘制数据
				const indirectAttribute = new THREE.IndirectStorageBufferAttribute( uint32, 5 );
				
				// 将间接属性设置到几何体上
				// 这样渲染器就知道使用间接绘制而不是传统的绘制调用
				fireGeometry.setIndirect( indirectAttribute );

				// ----- 第九阶段：创建辅助对象 -----
				
				/**
				 * 创建网格辅助对象（GridHelper）
				 * 用于提供空间参考，帮助理解3D场景的尺度和方向
				 * 
				 * 参数说明：
				 * @param {number} 3000 - 网格大小（边长）
				 * @param {number} 40 - 网格分段数（单元格数量）
				 * @param {number} 0x444444 - 中心线颜色（深灰色）
				 * @param {number} 0x444444 - 网格线颜色（深灰色）
				 */
				const helper = new THREE.GridHelper( 
					3000,      // 网格大小：3000单位
					40,        // 分段数：40x40的网格
					0x444444,  // 中心线颜色（X轴和Z轴的交点）
					0x444444   // 网格线颜色
				);
				
				// 将网格向下移动75单位，避免与粒子系统重叠
				helper.position.y = -75;
				
				// 将网格添加到场景中
				scene.add( helper );

				// ----- 第十阶段：创建渲染器 -----
				
				/**
				 * 创建WebGPU渲染器
				 * WebGPURenderer是Three.js的WebGPU后端实现
				 * 相比WebGLRenderer，WebGPU提供更好的性能和更多现代GPU特性
				 * 
				 * 配置选项：
				 * @param {Object} { antialias: true } - 启用抗锯齿
				 *                    抗锯齿平滑边缘锯齿，提高视觉质量
				 */
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比
				// window.devicePixelRatio获取屏幕的物理像素与CSS像素比
				// 在高DPI屏幕（如Retina）上，值可能为2或3
				// 设置这个值可以确保渲染分辨率匹配屏幕物理分辨率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了传统的requestAnimationFrame
				// render函数将在每一帧被调用
				renderer.setAnimationLoop( render );
				
				// 创建调试检查器并附加到渲染器
				// Inspector提供实时调整参数的GUI界面
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// 这样渲染结果才能在网页上显示
				document.body.appendChild( renderer.domElement );

				// ----- 第十一阶段：创建轨道控制器 -----
				
				/**
				 * 创建轨道控制器（OrbitControls）
				 * 允许用户通过鼠标控制摄像机
				 * 
				 * 参数说明：
				 * @param {THREE.Camera} camera - 要控制的摄像机
				 * @param {HTMLElement} renderer.domElement - 事件监听的DOM元素
				 */
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置最大缩放距离：摄像机可以离目标点的最远距离
				controls.maxDistance = 2700;
				
				// 设置控制器的目标点（摄像机围绕旋转的中心点）
				// 这里设置在Y轴500高度的位置，大约是粒子系统的中心
				controls.target.set( 0, 500, 0 );
				
				// 立即更新控制器状态
				// 确保摄像机的初始位置正确计算
				controls.update();

				// ----- 第十二阶段：添加事件监听器 -----
				
				// 监听窗口大小改变事件
				// 当浏览器窗口大小变化时，调整渲染器和摄像机
				window.addEventListener( 'resize', onWindowResize );
				
				// 还可以添加其他事件监听器，例如：
				// window.addEventListener('keydown', onKeyDown);
				// window.addEventListener('click', onClick);

				// ----- 第十三阶段：创建GUI调试界面 -----
				
				// 从检查器中创建参数面板
				// 'Settings'是面板的标题
				const gui = renderer.inspector.createParameters( 'Settings' );
				
				/**
				 * 添加速度控制滑块
				 * 
				 * gui.add方法参数说明：
				 * @param {Object} speed - 要控制的对象
				 * @param {string} 'value' - 对象的属性名
				 * @param {number} 0 - 最小值
				 * @param {number} 1 - 最大值
				 * @param {number} 0.01 - 步进值
				 * 
				 * .name('speed')：设置滑块在GUI中显示的名称
				 * 
				 * 工作原理：
				 * 当用户拖动滑块时，speed.value会被更新
				 * 由于speed是uniform变量，它的变化会自动同步到着色器
				 * 从而实现实时调整粒子动画速度
				 */
				gui.add( speed, 'value', 0, 1, 0.01 ).name( '粒子速度' );
				
				// 可以添加更多控制参数，例如：
				// gui.add( smokeInstancedSprite, 'count', 100, 5000, 100 ).name( '烟雾粒子数量' );
				// gui.add( fireInstancedSprite, 'count', 100, 2000, 50 ).name( '火焰粒子数量' );
				// gui.addColor( scene, 'background' ).name( '背景颜色' );
				
			} // init函数结束

			/**
			 * 窗口大小调整处理函数
			 * 当浏览器窗口大小改变时调用
			 * 
			 * 主要职责：
			 * 1. 更新摄像机的宽高比，防止图像拉伸
			 * 2. 更新渲染器的尺寸，确保填满整个窗口
			 * 
			 * 这是响应式WebGL应用的必要部分
			 */
			function onWindowResize() {
				// 获取当前窗口的内部尺寸
				const { innerWidth, innerHeight } = window;

				// 更新摄像机的宽高比
				// 宽高比 = 宽度 / 高度
				// 如果不更新，图像会在窗口变形时被拉伸或压缩
				camera.aspect = innerWidth / innerHeight;
				
				// 更新摄像机的投影矩阵
				// 当摄像机参数改变后，必须调用此方法重新计算内部矩阵
				// 否则更改不会生效
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				// 使渲染画布与窗口新尺寸保持一致
				renderer.setSize( innerWidth, innerHeight );
				
				// 注意：这里没有更新控制器的任何参数
				// 如果控制器需要响应窗口大小变化，可以在这里添加
			}

			/**
			 * 渲染循环函数 - 每一帧执行
			 * 
			 * 这是应用的核心动画循环，通常每秒执行60次（60fps）
			 * 但实际频率取决于浏览器、设备性能和页面负载
			 * 
			 * 主要职责：
			 * 1. 更新控制器状态（处理用户输入）
			 * 2. 更新动画和物理模拟
			 * 3. 渲染场景到画布
			 * 
			 * 注意：这个函数应该尽可能高效，避免繁重的计算
			 * 长时间的操作会导致帧率下降，影响用户体验
			 */
			function render() {
				// 更新轨道控制器
				// 通常需要在渲染循环中调用controls.update()
				// 但OrbitControls内部可能已经在事件处理中更新了
				// 有些实现需要，有些不需要，这里根据实际需求决定
				// controls.update();
				
				/**
				 * 执行渲染
				 * 将3D场景通过摄像机视角渲染到2D画布上
				 * 
				 * 参数说明：
				 * @param {THREE.Scene} scene - 要渲染的场景
				 * @param {THREE.Camera} camera - 使用的摄像机
				 * 
				 * 内部过程：
				 * 1. 清理颜色和深度缓冲区
				 * 2. 遍历场景图，收集所有需要渲染的对象
				 * 3. 对对象进行排序（透明对象最后渲染）
				 * 4. 为每个对象设置GPU状态（着色器、纹理、缓冲区）
				 * 5. 发出绘制命令
				 * 6. 将结果呈现到画布
				 */
				renderer.render( scene, camera );
				
				// 可以在这里添加性能监控，例如：
				// stats.update(); // 如果使用stats.js
				
				// 可以在这里添加后期处理效果
				// composer.render(); // 如果使用EffectComposer
			}
			
			// ==================== 其他可能需要的函数 ====================
			
			/**
			 * 键盘事件处理函数（示例）
			 * @param {KeyboardEvent} event - 键盘事件对象
			 */
			function onKeyDown(event) {
				// 按空格键重置摄像机
				if (event.code === 'Space') {
					// 重置摄像机位置
					camera.position.set(1300, 500, 0);
					// 重置控制器目标
					controls.target.set(0, 500, 0);
					// 更新控制器
					controls.update();
				}
				// 按R键重新开始动画
				else if (event.code === 'KeyR') {
					// 可以重置时间或其他动画状态
				}
			}
			
			/**
			 * 点击事件处理函数（示例）
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onClick(event) {
				// 可以实现点击交互，例如：
				// 点击屏幕某个位置，在点击处生成新的粒子
			}
			
			/**
			 * 性能优化建议：
			 * 1. 对于移动设备，可以动态减少粒子数量
			 * 2. 当页面不可见时（如切换标签页），暂停渲染循环
			 * 3. 使用LOD（Level of Detail）根据距离调整粒子细节
			 */
			
			/**
			 * 错误处理建议：
			 * 1. 添加WebGL上下文丢失处理
			 * 2. 添加资源加载失败处理
			 * 3. 添加性能下降时的降级处理
			 */

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