<!-- Three.js WebGPU 火焰特效代码功能和技术点详解
一、总体功能概述
这是一个基于 Three.js WebGPU 和 TSL（Three.js着色器语言） 实现的实时火焰视觉特效演示。代码创建了两个不同风格的火焰效果，展示了现代Web图形编程的强大能力。

主要功能：
实时火焰模拟：使用GPU着色器创建逼真的火焰动画

交互式3D场景：用户可通过鼠标控制视角

双火焰对比展示：展示两种不同的火焰生成技术

WebGPU渲染：利用最新的WebGPU API实现高性能渲染

实时调试支持：集成Three.js Inspector调试工具

二、主要技术点详解
1. WebGPU 渲染技术
新一代图形API：替代WebGL，提供更好的性能和更现代的API设计

异步计算：更好的CPU-GPU并行处理

多线程支持：更高效的资源管理

显式内存控制：开发者对GPU内存有更多控制权

2. TSL（Three.js着色器语言）
声明式着色器编程：类似GLSL但更友好的语法

节点化编程模型：将着色器操作表示为节点图

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

自动优化：Three.js自动优化着色器代码

3. 火焰效果核心技术
3.1 UV坐标变换系统
javascript
// 核心变换链：
// 1. 球面化 -> 2. 拉伸 -> 3. 缩放偏移
mainUv.assign( spherizeUV( mainUv, 10 ).mul( 0.6 ).add( 0.2 ) );
mainUv.assign( mainUv.pow( vec2( 1, 2 ) ) );
mainUv.assign( mainUv.mul( 2, 1 ).sub( vec2( 0.5, 0 ) ) );
技术原理：

球面化：将2D平面坐标映射到球面，创建火焰的基础体积感

幂函数拉伸：pow(vec2(1, 2))使Y轴变化更剧烈，形成火焰向上延伸的效果

非均匀缩放：X轴缩放更多，形成椭圆形火焰形状

3.2 多层噪声系统
噪声类型	用途	特点
Perlin噪声	基础流动	自然、连续，模拟火焰的平滑波动
Voronoi噪声	细节纹理	细胞状结构，模拟火焰中的破碎细节
位移噪声	复杂变形	噪声的噪声，创建更自然的扰动
噪声应用技巧：

javascript
// 位移噪声：两层噪声叠加
const displacementPerlinUv = mainUv.mul(0.5).add(vec2(0, time.negate().mul(0.25)));
const displacedPerlinUv = mainUv.add(vec2(0, time.negate().mul(0.5))).add(displacementPerlinNoise);
3.3 时间动态系统
javascript
// 核心时间变量
time.mul(10)                    // 加速时间
time.negate().mul(0.5)          // 反向时间流
sin(time.mul(10).sub(mainUv.y.mul(TWO_PI).mul(2)))  // 基于位置的时间偏移
时间效应：

UV滚动：add(vec2(0, time.negate())) 创建火焰向上流动的错觉

正弦波动：基于时间的正弦波创建摇摆效果

速度差异：不同噪声层使用不同速度，增加视觉复杂性

3.4 颜色渐变系统
javascript
// 火焰颜色渐变（从底部到顶部）：
'#090033', // 深蓝色 - 低温区
'#5f1f93', // 紫色 - 升温区
'#e02e96', // 粉红色 - 高温区
'#ffbd80', // 橙色 - 核心高温区
'#fff0db'  // 浅黄色 - 最热区域
颜色映射原理：

物理模拟：模拟真实火焰温度分布（蓝->紫->粉->橙->黄白）

一维纹理：使用128×1像素的纹理高效存储渐变

实时采样：根据形状值动态采样颜色

3.5 形状生成算法
火焰1（渐变火焰）：

javascript
// 核心形状算法
const shape = mainUv.sub(0.5).mul(vec2(3,2)).length().oneMinus();
shape.assign(shape.sub(cellularNoise));  // 减去噪声形成细节
火焰2（粒子状火焰）：

javascript
const shape = step(mainUv.sub(0.5).mul(vec2(6,1)).length(), 0.5);
shape.assign(shape.mul(cellularNoise));  // 乘以噪声形成颗粒感
关键技术函数：

.length()：计算到中心的距离

.oneMinus()：反转值（1-x）

.smoothstep()：平滑阈值化

.step()：硬边缘阈值化

4. 广告牌技术（Billboarding）
javascript
flame1Material.vertexNode = billboarding();
工作原理：

始终面向相机：无论相机如何移动，Sprite始终正面朝向

顶点着色器修改：在顶点着色器中计算旋转矩阵

2D效果优化：适合火焰、烟雾、粒子等效果

5. 两种火焰的对比设计
特性	火焰1（渐变火焰）	火焰2（粒子火焰）
颜色	多色渐变（蓝到白）	纯白色
形状	连续、平滑	破碎、颗粒状
透明度	平滑渐变边缘	硬边缘颗粒
噪声应用	从形状中减去噪声	形状与噪声相乘
视觉效果	传统火焰，热浪感	蒸汽/烟雾感，更现代
6. 性能优化技术
6.1 纹理优化
小尺寸纹理：使用256×256噪声纹理，足够细节且内存占用小

一维渐变纹理：128×1像素，极低内存占用

纹理重复：使用.mod(1)实现无缝平铺

6.2 计算优化
预计算UV：避免重复计算相同UV变换

函数复用：TSL自动优化重复计算

GPU并行：所有片元独立计算，充分利用GPU并行能力

6.3 渲染优化
Sprite渲染：比3D网格更高效

WebGPU特性：比WebGL更少的CPU-GPU通信开销

自动批处理：Three.js自动合并相似绘制调用

7. 交互系统
7.1 OrbitControls轨道控制
javascript
controls.enableDamping = true;      // 启用惯性阻尼
controls.minDistance = 0.1;         // 防止相机穿模
controls.maxDistance = 50;          // 限制最远视角
交互功能：

左键拖拽：旋转视角

右键拖拽：平移场景

滚轮：缩放视角

阻尼效果：平滑的惯性运动

7.2 调试工具
javascript
renderer.inspector = new Inspector();  // 按F9打开
调试功能：

场景树查看：查看所有3D对象

材质编辑：实时修改材质参数

性能分析：帧率监控和性能分析

8. 响应式设计
javascript
window.addEventListener('resize', onWindowResize);
响应式特性：

自适应分辨率：自动匹配窗口大小

DPI感知：setPixelRatio(devicePixelRatio)支持高DPI屏幕

比例保持：更新相机宽高比防止拉伸

三、技术栈总结
核心框架
Three.js：WebGL/WebGPU 3D引擎

WebGPU：下一代Web图形API

TSL：Three.js着色器语言

关键技术
过程化生成：完全代码生成的火焰，无需预渲染纹理

实时着色器：GPU加速的每帧计算

多层噪声合成：复杂但可控的视觉效果

物理模拟简化：用数学近似替代复杂的物理模拟 -->


<!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>

		<!-- 页面信息区域：显示项目信息和操作提示 -->
		<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">
				<!-- 项目名称链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 项目副标题 -->
				<span>火焰视觉特效演示</span>
			</div>

			<!-- 项目描述和灵感来源 -->
			<small>
				<!-- 这是一个行内文本元素，用于显示较小的文字 -->
				这是一个基于WebGPU的实时火焰特效演示。<br>
				<!-- 换行分隔不同信息 -->
				使用Three.js的TSL（Three.js着色器语言）实现。<br>
				<!-- 灵感来源标注 -->
				灵感来源：<a href="https://x.com/cmzw_/status/1799648702338158747" target="_blank" rel="noopener">@cmzw_的Twitter作品</a>。<br>
				<!-- 操作提示 -->
				<strong>操作提示：</strong>鼠标拖动旋转视角，滚轮缩放，右键拖动画移动场景。
			</small>
		</div>

		<!-- 导入映射配置：定义JavaScript模块的导入路径 -->
		<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模块：包含所有Three.js代码和特效逻辑 -->
		<script type="module">

			// ============================ 模块导入部分 ============================
			// 从three/webgpu模块导入所有功能并命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 从three/tsl模块导入TSL着色器语言的各种函数和常量
			// TSL提供了一种声明式的方式来编写着色器代码
			import { 
				TWO_PI,        // 数学常量：2π（约6.28318），用于圆周计算
				oneMinus,      // 函数：计算1-x，常用于反向操作
				spherizeUV,    // 函数：将UV坐标进行球面化变换，使平面纹理在球面上变形
				sin,           // 三角函数：正弦函数，用于创建波浪效果
				step,          // 函数：阶跃函数，根据阈值返回0或1，用于创建硬边缘
				texture,       // 函数：纹理采样函数，从纹理中读取颜色值
				time,          // 变量：着色器时间变量，随渲染帧自动更新，用于动画
				Fn,            // 函数：TSL函数定义器，用于创建自定义着色器函数
				uv,            // 变量：当前片元的UV坐标（0到1范围）
				vec2,          // 函数：创建二维向量，用于表示坐标、纹理坐标等
				vec3,          // 函数：创建三维向量，用于表示颜色、位置等
				vec4,          // 函数：创建四维向量，用于表示RGBA颜色等
				mix,           // 函数：线性插值函数，用于在两个值之间平滑过渡
				billboarding   // 函数：广告牌效果，使平面始终面向相机
			} from 'three/tsl';

			// 导入Three.js的轨道控制器：允许用户用鼠标控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入Three.js的调试器/检视器：用于调试场景中的对象
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ============================ 全局变量声明 ============================
			// 这些变量将在init函数中初始化，并在整个程序中共享
			let camera;     // Three.js相机对象：定义观察者的视角
			let scene;      // Three.js场景对象：包含所有3D对象、灯光等
			let renderer;   // Three.js渲染器对象：负责将3D场景渲染到2D画布
			let controls;   // 轨道控制器对象：处理用户交互

			// ============================ 初始化函数调用 ============================
			// 页面加载完成后立即执行初始化
			init();

			// ============================ 初始化函数定义 ============================
			/**
			 * init - 初始化Three.js场景、相机、渲染器、材质和对象
			 * 这是程序的入口点，负责设置所有必要组件
			 */
			function init() {

				// ==================== 相机设置 ====================
				// 创建透视投影相机
				// 参数解释：
				// 25 - 视野角度（FOV）：垂直方向能看到的角度范围，单位是度
				// window.innerWidth / window.innerHeight - 宽高比：渲染区域的宽高比
				// 0.1 - 近裁剪面：离相机最近的可渲染距离
				// 100 - 远裁剪面：离相机最远的可渲染距离
				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置
				// 参数：x坐标, y坐标, z坐标
				// 这里将相机放置在(1, 1, 3)位置，即向右1单位，向上1单位，向后3单位
				camera.position.set( 1, 1, 3 );

				// ==================== 场景设置 ====================
				// 创建3D场景对象，所有3D对象、灯光等都将添加到场景中
				scene = new THREE.Scene();
				
				// 设置场景背景颜色
				// 使用十六进制颜色值：0x201919是深灰色，接近黑色，作为火焰的对比背景
				scene.background = new THREE.Color( 0x201919 );

				// ==================== 纹理加载 ====================
				// 创建纹理加载器实例，用于加载图像文件作为纹理
				const textureLoader = new THREE.TextureLoader();

				// 加载细胞噪声（Voronoi噪声）纹理
				// Voronoi噪声产生类似细胞或晶格的结构，用于模拟火焰中的细节
				// 这是一个256x256像素的灰度图像（每个像素只有亮度值）
				const cellularTexture = textureLoader.load( './textures/noises/voronoi/grayscale-256x256.png' );
				
				// 加载Perlin噪声纹理
				// Perlin噪声产生自然、连续的随机图案，用于模拟火焰的流动
				// 这是一个256x256像素的RGB图像（每个像素有颜色值）
				const perlinTexture = textureLoader.load( './textures/noises/perlin/rgb-256x256.png' );

				// ==================== 渐变纹理创建 ====================
				// 创建一个Canvas渐变纹理，用于控制火焰的颜色渐变
				const gradient = {};
				
				// 创建Canvas DOM元素
				gradient.element = document.createElement( 'canvas' );
				
				// 设置Canvas尺寸：128像素宽，1像素高（一维纹理）
				// 一维纹理足够表示从火焰底部到顶部的颜色渐变
				gradient.element.width = 128;
				gradient.element.height = 1;
				
				// 获取Canvas的2D绘图上下文
				gradient.context = gradient.element.getContext( '2d' );

				// 定义火焰的颜色渐变序列（从火焰底部到顶部）
				// 火焰颜色的典型变化：深蓝色（冷）-> 紫色 -> 粉红色 -> 橙色 -> 浅黄色（热）
				gradient.colors = [
					'#090033', // 深蓝色：火焰最底部，温度最低的部分
					'#5f1f93', // 紫色：温度开始升高
					'#e02e96', // 粉红色：高温区域
					'#ffbd80', // 橙色：火焰核心高温区
					'#fff0db', // 浅黄色/白色：火焰最热的部分
				];

				// 将Canvas转换为Three.js纹理
				gradient.texture = new THREE.CanvasTexture( gradient.element );
				
				// 设置纹理颜色空间为sRGB
				// sRGB颜色空间更接近人类视觉感知，使颜色显示更自然
				gradient.texture.colorSpace = THREE.SRGBColorSpace;

				// 定义更新渐变纹理的函数
				gradient.update = () => {
					
					// 在Canvas上创建线性渐变
					// 参数：起始x, 起始y, 结束x, 结束y
					// 这里创建水平方向从左到右的渐变
					const fillGradient = gradient.context.createLinearGradient( 0, 0, gradient.element.width, 0 );

					// 遍历颜色数组，为每个颜色在渐变中添加一个颜色停止点
					for ( let i = 0; i < gradient.colors.length; i++ ) {
						
						// 计算颜色停止点的位置（0到1之间）
						// 第一个颜色在0位置，最后一个颜色在1位置，中间颜色均匀分布
						const progress = i / ( gradient.colors.length - 1 );
						
						// 获取颜色值
						const color = gradient.colors[ i ];
						
						// 将颜色停止点添加到渐变中
						fillGradient.addColorStop( progress, color );
					}

					// 将渐变设置为Canvas的填充样式
					gradient.context.fillStyle = fillGradient;
					
					// 使用渐变填充整个Canvas
					gradient.context.fillRect( 0, 0, gradient.element.width, gradient.element.height );

					// 标记纹理需要更新（Three.js会在下一次渲染时更新纹理）
					gradient.texture.needsUpdate = true;
				};

				// 调用函数，首次创建渐变纹理
				gradient.update();

				// ==================== 火焰材质1创建 ====================
				// 创建第一个火焰的材质，使用SpriteNodeMaterial（支持TSL着色器语言的Sprite材质）
				// Sprite是始终面向相机的2D平面，适合制作粒子效果、火焰等
				const flame1Material = new THREE.SpriteNodeMaterial( { 
					side: THREE.DoubleSide // 设置材质为双面渲染（两面都可见）
				} );

				// 使用TSL定义火焰1的颜色节点（片元着色器逻辑）
				// Fn()函数用于创建TSL着色器函数
				flame1Material.colorNode = Fn( () => {
					
					// 获取当前片元的UV坐标并转换为变量（可以在后续修改）
					// UV坐标是纹理坐标，范围从(0,0)到(1,1)
					const mainUv = uv().toVar();
					
					// -------- UV坐标变换步骤 --------
					// 这些变换将标准UV坐标转换为火焰形状的坐标
					
					// 1. 球面化UV坐标
					// spherizeUV()使UV在球面上变形，第二个参数控制变形强度
					// mul(0.6).add(0.2)将范围从[0,1]映射到[0.2,0.8]，为后续变换留出空间
					mainUv.assign( spherizeUV( mainUv, 10 ).mul( 0.6 ).add( 0.2 ) );
					
					// 2. 拉伸UV坐标，使火焰在Y轴方向更长
					// pow()函数进行幂运算：x^1, y^2，使Y轴变化更剧烈
					mainUv.assign( mainUv.pow( vec2( 1, 2 ) ) );
					
					// 3. 缩放并偏移UV坐标
					// mul(2,1)：X轴放大2倍，Y轴保持不变
					// sub(vec2(0.5,0))：X轴向左偏移0.5，使火焰居中
					mainUv.assign( mainUv.mul( 2, 1 ).sub( vec2( 0.5, 0 ) ) );

					// -------- 创建动态波浪效果 --------
					// 使用正弦函数创建随时间变化的波浪
					
					// gradient1：基于时间和Y坐标的正弦波
					// time.mul(10)：时间乘以10，加快波浪变化速度
					// mainUv.y.mul(TWO_PI).mul(2)：将Y坐标映射到[0, 4π]范围
					// sin()：计算正弦值，产生-1到1之间的波浪
					const gradient1 = sin( time.mul( 10 ).sub( mainUv.y.mul( TWO_PI ).mul( 2 ) ) ).toVar();
					
					// gradient2：Y坐标的平滑过渡（从0到1）
					// smoothstep(0,1)：将Y坐标从[0,1]映射到[0,1]，但边缘更平滑
					const gradient2 = mainUv.y.smoothstep( 0, 1 ).toVar();
					
					// 将波浪效果应用到X坐标
					// gradient1 * gradient2 * 0.2：波浪幅度随高度增加而增强，然后乘以0.2减小影响
					mainUv.x.addAssign( gradient1.mul( gradient2 ).mul( 0.2 ) );

					// -------- 细胞噪声处理 --------
					// 使用细胞噪声增加火焰的细节和复杂性
					
					// cellularUv：创建随时间滚动的UV坐标（向下滚动）
					// mainUv.mul(0.5)：缩小UV坐标，使噪声图案更大
					// time.negate().mul(0.5)：负时间乘以0.5，控制滚动速度
					// .mod(1)：取模运算，确保UV在[0,1]范围内（平铺纹理）
					const cellularUv = mainUv.mul( 0.5 ).add( vec2( 0, time.negate().mul( 0.5 ) ) ).mod( 1 );
					
					// cellularNoise：采样细胞噪声纹理并处理
					// texture(cellularTexture, cellularUv, 0)：采样噪声纹理，0表示mipmap级别
					// .r：只取红色通道（灰度纹理所有通道值相同）
					// .oneMinus()：1-原值，反转黑白（细胞噪声通常是白底黑细胞）
					// .smoothstep(0,0.5)：平滑阈值化，保留0到0.5之间的值
					// .oneMinus()：再次反转，得到黑底白细胞的图案
					const cellularNoise = texture( cellularTexture, cellularUv, 0 ).r.oneMinus().smoothstep( 0, 0.5 ).oneMinus();
					
					// 将噪声与Y轴渐变相乘：使噪声在火焰底部较弱，顶部较强
					cellularNoise.mulAssign( gradient2 );

					// -------- 火焰基本形状 --------
					// 创建火焰的基本圆形/椭圆形形状
					
					// shape：计算从中心(0.5,0.5)到当前点的距离
					// mainUv.sub(0.5)：将坐标原点移到中心
					// .mul(vec2(3,2))：X轴放大3倍，Y轴放大2倍，形成椭圆形
					// .length()：计算到中心的距离
					// .oneMinus()：1-距离，中心为1，边缘为0
					const shape = mainUv.sub( 0.5 ).mul( vec2( 3, 2 ) ).length().oneMinus().toVar();
					
					// 从基本形状中减去细胞噪声：在火焰中"挖出"噪声图案
					shape.assign( shape.sub( cellularNoise ) );

					// -------- 颜色采样 --------
					// 根据形状值（火焰强度）从渐变纹理中采样颜色
					
					// gradientColor：从渐变纹理采样颜色
					// shape.remap(0,1,0,1)：将形状值从[0,1]重新映射到[0,1]（这里实际上没变化）
					// vec2(..., 0)：一维纹理，V坐标始终为0
					const gradientColor = texture( gradient.texture, vec2( shape.remap( 0, 1, 0, 1 ), 0 ) );

					// -------- 最终输出 --------
					
					// 颜色混合：火焰主体使用渐变颜色，最亮的部分（shape>0.8）混合白色
					// mix(gradientColor, vec3(1), shape.step(0.8))：
					// 当shape<0.8时使用gradientColor，当shape>=0.8时混合白色
					// shape.step(0.8)：返回0（当shape<0.8）或1（当shape>=0.8）
					const color = mix( gradientColor, vec3( 1 ), shape.step( 0.8 ) );
					
					// 透明度计算：火焰边缘透明过渡
					// shape.smoothstep(0,0.3)：将shape从[0,0.3]平滑映射到[0,1]
					// 火焰中心（shape>0.3）完全不透明，边缘逐渐透明
					const alpha = shape.smoothstep( 0, 0.3 );
					
					// 返回最终颜色：RGB颜色加上透明度通道
					return vec4( color.rgb, alpha );
				} )();

				// ==================== 火焰材质2创建 ====================
				// 创建第二个火焰材质，使用不同的噪声和效果
				const flame2Material = new THREE.SpriteNodeMaterial( { side: THREE.DoubleSide } );

				// 使用TSL定义火焰2的颜色节点
				flame2Material.colorNode = Fn( () => {
					
					// 获取并变换UV坐标（步骤与火焰1类似但参数不同）
					const mainUv = uv().toVar();
					
					// 1. 球面化UV（与火焰1相同）
					mainUv.assign( spherizeUV( mainUv, 10 ).mul( 0.6 ).add( 0.2 ) );
					
					// 2. 更强的Y轴拉伸：使用pow(vec2(1,3))，Y轴变化更剧烈
					// 使用abs()取绝对值，然后乘回符号，保持方向
					mainUv.assign( mainUv.abs().pow( vec2( 1, 3 ) ).mul( mainUv.sign() ) );
					
					// 3. 缩放并偏移（与火焰1相同）
					mainUv.assign( mainUv.mul( 2, 1 ).sub( vec2( 0.5, 0 ) ) );

					// -------- Perlin噪声基础流动 --------
					
					// 创建随时间向下滚动的UV用于Perlin噪声
					const perlinUv = mainUv.add( vec2( 0, time.negate().mul( 1 ) ) ).mod( 1 );
					
					// 采样Perlin噪声并调整范围
					// .sub(0.5)：从[0,1]映射到[-0.5,0.5]
					// .mul(1)：乘以1（保持原值，可以调整幅度）
					const perlinNoise = texture( perlinTexture, perlinUv, 0 ).sub( 0.5 ).mul( 1 );
					
					// 用Perlin噪声的X分量偏移UV的X坐标，创建左右摇摆效果
					mainUv.x.addAssign( perlinNoise.x.mul( 0.5 ) );

					// -------- 多层级渐变效果 --------
					
					// gradient1：基于时间和Y坐标的正弦波（与火焰1类似）
					const gradient1 = sin( time.mul( 10 ).sub( mainUv.y.mul( TWO_PI ).mul( 2 ) ) );
					
					// gradient2：Y坐标的平滑过渡（从0到1）
					const gradient2 = mainUv.y.smoothstep( 0, 1 );
					
					// gradient3：从顶部到底部的渐变（1-Y坐标的平滑过渡）
					// 用于控制火焰顶部的透明衰减
					const gradient3 = oneMinus( mainUv.y ).smoothstep( 0, 0.3 );
					
					// 应用波浪效果（与火焰1类似）
					mainUv.x.addAssign( gradient1.mul( gradient2 ).mul( 0.2 ) );

					// -------- 位移Perlin噪声（更复杂的流动效果）--------
					
					// 第一层Perlin噪声：用于位移
					const displacementPerlinUv = mainUv.mul( 0.5 ).add( vec2( 0, time.negate().mul( 0.25 ) ) ).mod( 1 );
					const displacementPerlinNoise = texture( perlinTexture, displacementPerlinUv, 0 ).sub( 0.5 ).mul( 1 );
					
					// 使用第一层噪声位移后的UV采样第二层噪声
					const displacedPerlinUv = mainUv.add( vec2( 0, time.negate().mul( 0.5 ) ) ).add( displacementPerlinNoise ).mod( 1 );
					const displacedPerlinNoise = texture( perlinTexture, displacedPerlinUv, 0 ).sub( 0.5 ).mul( 1 );
					
					// 应用第二层噪声偏移
					mainUv.x.addAssign( displacedPerlinNoise.mul( 0.5 ) );

					// -------- 细胞噪声处理 --------
					
					// 细胞噪声（与火焰1类似但速度不同）
					const cellularUv = mainUv.add( vec2( 0, time.negate().mul( 1.5 ) ) ).mod( 1 );
					
					// 采样并处理细胞噪声
					// smoothstep(0.25, 1)：只保留大于0.25的值，产生稀疏的细胞图案
					const cellularNoise = texture( cellularTexture, cellularUv, 0 ).r.oneMinus().smoothstep( 0.25, 1 );

					// -------- 火焰形状定义 --------
					
					// 创建基本形状：椭圆形（X轴更宽）
					// step(distance, 0.5)：当距离<=0.5时返回1，否则返回0
					// 这创建一个硬边缘的椭圆
					const shape = step( mainUv.sub( 0.5 ).mul( vec2( 6, 1 ) ).length(), 0.5 );
					
					// 将形状与细胞噪声相乘：只在噪声位置显示火焰
					shape.assign( shape.mul( cellularNoise ) );
					
					// 应用顶部透明渐变：使火焰顶部逐渐消失
					shape.mulAssign( gradient3 );
					
					// 阈值化：只保留大于0.01的值，去除微小噪声
					shape.assign( step( 0.01, shape ) );

					// -------- 最终输出 --------
					// 火焰2使用纯白色，透明度由形状决定
					// 这是一种不同的风格，更像是烟或蒸汽
					return vec4( vec3( 1 ), shape );
				} )();

				// ==================== 广告牌效果设置 ====================
				// 为两个材质设置广告牌顶点着色器
				// billboarding()函数使Sprite始终面向相机，无论相机如何移动
				flame1Material.vertexNode = billboarding();
				flame2Material.vertexNode = billboarding();

				// ==================== 创建火焰对象 ====================
				
				// 创建第一个火焰Sprite对象
				const flame1 = new THREE.Sprite( flame1Material );
				
				// 设置Sprite的中心点（影响旋转中心）
				// (0.5, 0)表示中心在Sprite的底部中心
				flame1.center.set( 0.5, 0 );
				
				// 设置X轴缩放（可选）：使火焰变窄
				flame1.scale.x = 0.5;
				
				// 设置火焰位置：向左偏移0.5个单位
				flame1.position.x = -0.5;
				
				// 将火焰添加到场景中
				scene.add( flame1 );

				// 创建第二个火焰Sprite对象
				const flame2 = new THREE.Sprite( flame2Material );
				
				// 设置中心点（与火焰1相同）
				flame2.center.set( 0.5, 0 );
				
				// 设置火焰位置：向右偏移0.5个单位
				flame2.position.x = 0.5;
				
				// 将火焰添加到场景中
				scene.add( flame2 );

				// ==================== 渲染器设置 ====================
				// 创建WebGPU渲染器
				// WebGPU是新一代图形API，比WebGL性能更好，功能更强大
				renderer = new THREE.WebGPURenderer( { 
					antialias: true // 启用抗锯齿，平滑边缘锯齿
				} );
				
				// 设置设备像素比：匹配屏幕的物理像素和CSS像素比例
				// 在高DPI屏幕（如Retina显示屏）上提供更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：指定animate函数为每一帧调用的函数
				renderer.setAnimationLoop( animate );
				
				// 添加调试器/检视器：按F9可以打开调试界面
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ==================== 控制器设置 ====================
				// 创建轨道控制器，连接相机和渲染器的DOM元素
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 启用阻尼效果：相机移动时有惯性，停止鼠标后还会缓慢移动
				controls.enableDamping = true;
				
				// 设置相机与目标点的最小距离：防止相机穿过物体
				controls.minDistance = 0.1;
				
				// 设置相机与目标点的最大距离：防止相机离得太远
				controls.maxDistance = 50;

				// ==================== 事件监听器设置 ====================
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );
			}

			// ============================ 窗口大小变化处理函数 ============================
			/**
			 * onWindowResize - 处理浏览器窗口大小变化
			 * 当窗口大小改变时，需要更新相机和渲染器的设置
			 */
			function onWindowResize() {
				
				// 更新相机宽高比：使用新的窗口宽高比
				// 如果不更新，渲染的图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵：应用新的宽高比设置
				// 在Three.js中，修改相机参数后必须调用此方法
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸：使渲染区域匹配新窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ============================ 动画循环函数 ============================
			/**
			 * animate - 动画循环函数
			 * 每一帧都会被调用，用于更新场景和渲染
			 * async关键字表示这是一个异步函数（虽然这里没有异步操作）
			 */
			async function animate() {
				
				// 更新轨道控制器：处理用户输入，更新相机位置和方向
				// 如果启用了阻尼效果，这里会计算并应用阻尼
				controls.update();
				
				// 渲染场景：将3D场景绘制到2D画布上
				// 参数：要渲染的场景，使用的相机
				renderer.render( scene, camera );
			}

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