<!-- 代码功能和技术点详解
一、核心功能概述
这是一个基于Three.js WebGPU的龙卷风视觉特效演示，通过先进的GPU编程技术实时渲染一个动态的、具有复杂细节的龙卷风效果。主要功能包括：

1. 动态龙卷风生成
创建逼真的旋转龙卷风形状

实时动画效果（随时间变化的旋转和扭曲）

多层结构（内层发光体+外层阴影）增加立体感

2. 交互式体验
鼠标/触摸控制视角旋转、缩放和平移

实时参数调整界面，可自定义龙卷风外观

响应式设计，适应不同屏幕尺寸

3. 视觉增强效果
Bloom辉光特效，增强明亮区域的光晕效果

专业级色调映射，提升画面质感

平滑的透明度过渡和边缘淡出

二、主要技术点详解
1. WebGPU渲染引擎
javascript
// 使用下一代图形API
renderer = new THREE.WebGPURenderer({ antialias: true });
优势：相比WebGL，WebGPU提供更直接的GPU访问、更好的多线程支持和更高的性能

功能：支持计算着色器、更高效的资源管理等高级特性

2. TSL（Three.js Shading Language）着色器编程
javascript
import { Fn, uniform, time, positionLocal, uv, vec3 } from 'three/tsl';
声明式编程：类似GLSL但更友好，直接在JavaScript中编写着色器代码

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

优势：避免字符串拼接，提供类型检查和更好的开发体验

3. 基于物理的抛物线变形算法
javascript
const twistedCylinder = Fn(([position, parabolStrength, parabolOffset, parabolAmplitude, time]) => {
    // 抛物线方程：radius = parabolStrength * (y - offset)² + amplitude
    const radius = parabolStrength.mul(position.y.sub(parabolOffset)).pow(2).add(parabolAmplitude);
});
数学原理：使用抛物线函数控制龙卷风半径随高度的变化

参数控制：可通过GUI实时调整抛物线形状

4. 多层噪声纹理混合技术
javascript
// 使用Perlin噪声的三个通道分别采样
const noise1 = texture(perlinTexture, noise1Uv, 1).r.remap(0.45, 0.7);
const noise2 = texture(perlinTexture, noise2Uv, 1).g.remap(0.45, 0.7);
const noise3 = texture(perlinTexture, noise3Uv, 1).b.remap(0.45, 0.7);
多通道利用：RGB三通道存储不同的噪声图案，节省纹理资源

重映射技术：调整噪声值范围，优化视觉效果

时间动画：噪声UV随时间变化，产生动态流动效果

5. 径向UV映射系统
javascript
const toRadialUv = Fn(([uv, multiplier, rotation, offset]) => {
    const centeredUv = uv.sub(0.5);
    const distanceToCenter = centeredUv.length();
    const angle = atan(centeredUv.y, centeredUv.x);
    return vec2(angle.add(PI).div(TWO_PI), distanceToCenter);
});
坐标转换：将矩形UV转换为极坐标（半径+角度）

应用场景：创建旋转对称的环形效果

动态参数：支持旋转和偏移动画

6. 顶点变形动画
javascript
emissiveMaterial.positionNode = twistedCylinder(positionLocal, ...);
GPU计算：直接在着色器中计算顶点位置，CPU零负担

实时更新：每帧重新计算所有顶点位置，实现流畅动画

复合效果：结合抛物线变形+正弦波湍流

7. Bloom后处理效果
javascript
import { bloom } from 'three/addons/tsl/display/BloomNode.js';
const bloomPass = bloom(scenePassColor, 1, 0.1, 1);
postProcessing.outputNode = scenePassColor.add(bloomPass);
技术流程：

提取高亮度区域

进行高斯模糊

与原图叠加

参数控制：强度、半径、阈值可调

8. 实时调试系统
javascript
import { Inspector } from 'three/addons/inspector/Inspector.js';
const gui = renderer.inspector.createParameters('参数');
可视化界面：无需修改代码即可调整参数

实时反馈：参数变化立即反映在渲染结果中

分类管理：参数分组显示，便于管理

9. 响应式渲染
javascript
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自动适配：根据窗口大小调整渲染分辨率和相机参数

保持比例：确保3D场景在不同设备上显示一致

三、关键技术亮点
1. 性能优化
GPU驱动：所有复杂计算都在着色器中完成

实例化渲染：多个龙卷风层使用相同几何体

智能后处理：只在需要时应用Bloom效果

2. 视觉效果创新
双层叠加：内层（橙色发光）+ 外层（黑色阴影）模拟真实体积光

边缘淡化：使用smoothstep函数实现平滑过渡

动态湍流：基于时间的正弦波增加表面细节

3. 开发体验提升
模块化设计：TSL函数可重用和组合

实时调试：所见即所得的参数调整

文档化代码：详细的注释和结构化的代码组织

四、应用场景
教育演示：展示GPU编程和实时图形技术

艺术创作：动态视觉艺术作品

游戏开发：特效参考和实现方案

技术研究：WebGPU和TSL的学习案例

五、技术架构图
text
用户交互层
    ├── 轨道控制器 (鼠标/触摸)
    └── 调试面板 (GUI参数调整)
        │
渲染引擎层
    ├── WebGPU渲染器
    ├── TSL着色器编译器
    └── 后处理管线
        │
效果实现层
    ├── 几何变形系统 (抛物线扭曲)
    ├── 纹理系统 (多层噪声混合)
    ├── 动画系统 (时间驱动)
    └── 光照系统 (自发光+Bloom)
        │
资源管理层
    ├── 纹理加载 (Perlin噪声)
    ├── 几何缓存 (圆柱体复用)
    └── 着色器缓存 (TSL编译结果) -->


<!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">
		<!-- 引入外部CSS样式表：用于页面样式美化 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- Three.js 官方徽标链接 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 徽标显示区域（实际图片通过CSS的background-image属性设置） -->
			</a>

			<!-- 标题包装器：包含主标题和副标题 -->
			<div class="title-wrapper">
				<!-- Three.js 官方链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 页面副标题：描述当前演示内容 -->
				<span>龙卷风视觉特效演示</span>
			</div>

			<!-- 说明文字区域：展示项目来源和参考信息 -->
			<small>
				<!-- 基于Three.js Journey课程的说明 -->
				本演示基于 <a href="https://threejs-journey.com/lessons/galaxy-generator" target="_blank" rel="noopener">Three.js Journey</a> 课程内容。
				<br>
				<!-- 技术说明：展示使用的核心技术 -->
				使用 WebGPU 渲染器 + TSL 着色器语言实现。
			</small>

			<!-- 操作提示区域：告知用户如何与演示交互 -->
			<div class="instructions">
				<small>
					<!-- 鼠标/触摸操作提示 -->
					🖱️ 鼠标左键拖动：旋转视角 &nbsp;&nbsp;|&nbsp;&nbsp;
					🖱️ 鼠标滚轮：缩放视角 &nbsp;&nbsp;|&nbsp;&nbsp;
					🖱️ 鼠标右键拖动：平移视角
					<br>
					<!-- 调试界面提示 -->
					🔧 点击右上角调试图标可调整参数
				</small>
			</div>
		</div>

		<!-- ImportMap 配置：现代浏览器中的模块映射系统 -->
		<!-- 作用：将导入语句中的模块名映射到实际的JS文件路径 -->
		<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后端）
			// WebGPU是新一代图形API，相比WebGL有更好的性能和功能
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shading Language）函数
			// TSL是一种着色器语言，用于编写GPU着色器代码
			// 导入的函数说明：
			// luminance: 计算颜色亮度
			// cos/sin: 三角函数
			// min: 取最小值
			// time: 着色器运行时间
			// atan: 反正切函数
			// uniform: 声明统一变量（可在CPU端修改）
			// pass: 创建渲染通道
			// PI/TWO_PI: 数学常量π和2π
			// color: 颜色构造函数
			// positionLocal: 模型局部空间坐标
			// texture: 纹理采样函数
			// Fn: 定义TSL函数
			// uv: UV坐标
			// vec2/vec3/vec4: 2/3/4维向量构造函数
			import { luminance, cos, min, time, atan, uniform, pass, PI, TWO_PI, color, positionLocal, sin, texture, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
			
			// 导入Bloom（辉光）后处理效果节点
			// Bloom效果使明亮区域产生光晕，增强视觉冲击力
			import { bloom } from 'three/addons/tsl/display/BloomNode.js';

			// 导入轨道控制器
			// 允许用户通过鼠标/触摸控制相机视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试器/检视器
			// 提供可视化界面调整场景参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 全局变量声明
			let camera;      // 相机：定义观察场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：将3D场景渲染到2D画布
			let postProcessing; // 后处理：对渲染结果进行额外处理（如Bloom）
			let controls;    // 控制器：用户交互控制

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

			/**
			 * 初始化函数：设置Three.js场景的所有组件
			 * 包括：相机、场景、几何体、材质、光照、渲染器等
			 */
			function init() {

				// ==================== 相机设置 ====================
				// 创建透视相机：模拟人眼视角，近大远小
				camera = new THREE.PerspectiveCamera( 
					25,                     // 视野角度（FOV）：25度，角度越小视野越窄
					window.innerWidth / window.innerHeight, // 宽高比：根据窗口尺寸动态计算
					0.1,                    // 近裁剪面：距离相机0.1单位以内的物体不显示
					50                      // 远裁剪面：距离相机50单位以外的物体不显示
				);
				// 设置相机初始位置：x=1, y=1, z=3
				// 这个位置提供了一个斜上方的视角，便于观察龙卷风
				camera.position.set( 1, 1, 3 );

				// ==================== 场景创建 ====================
				// 创建场景对象：所有3D对象的容器
				scene = new THREE.Scene();

				// ==================== 纹理加载 ====================
				// 创建纹理加载器实例：用于加载图片作为纹理
				const textureLoader = new THREE.TextureLoader();
				// 加载Perlin噪声纹理
				// Perlin噪声是一种梯度噪声，常用于生成自然效果的纹理
				// 这个纹理包含RGB三个通道，每个通道存储不同的噪声图案
				const perlinTexture = textureLoader.load( './textures/noises/perlin/rgb-256x256.png' );
				// 设置纹理包装模式为重复
				// 当UV坐标超过[0,1]范围时，纹理会重复显示
				perlinTexture.wrapS = THREE.RepeatWrapping;  // 水平方向重复
				perlinTexture.wrapT = THREE.RepeatWrapping;  // 垂直方向重复

				// ==================== TSL自定义函数定义 ====================
				// 这些函数将在GPU着色器中执行，用于计算顶点位置和颜色

				/**
				 * 将标准UV坐标转换为径向UV坐标
				 * 用于创建环形/旋转效果
				 * @param {vec2} uv - 标准UV坐标（范围[0,1]）
				 * @param {vec2} multiplier - 缩放乘数（控制径向和轴向缩放）
				 * @param {float} rotation - 旋转角度（随时间变化产生旋转动画）
				 * @param {float} offset - 偏移量（随时间变化产生移动动画）
				 * @returns {vec2} 径向UV坐标
				 */
				const toRadialUv = Fn( ( [ uv, multiplier, rotation, offset ] ) => {

					// 将UV坐标中心化：从[0,1]转换为[-0.5, 0.5]
					// 这样坐标原点在纹理中心，便于径向计算
					const centeredUv = uv.sub( 0.5 ).toVar();
					
					// 计算到中心的距离：使用向量长度公式
					// 这是径向坐标的半径分量
					const distanceToCenter = centeredUv.length();
					
					// 计算角度：使用atan2函数（注意TSL中atan参数顺序是y,x）
					// 这是径向坐标的角度分量
					const angle = atan( centeredUv.y, centeredUv.x );
					
					// 转换为径向UV坐标系统：
					// x分量：角度（归一化到[0,1]范围）
					// y分量：半径（距离中心点的距离）
					const radialUv = vec2( 
						angle.add( PI ).div( TWO_PI ),  // 角度归一化：[0, 2π] → [0, 1]
						distanceToCenter               // 半径
					).toVar();
					
					// 应用乘数缩放：控制径向图案的密度
					radialUv.mulAssign( multiplier );
					
					// 添加旋转：随时间变化的旋转效果
					radialUv.x.addAssign( rotation );
					
					// 添加偏移：随时间变化的径向移动
					radialUv.y.addAssign( offset );

					return radialUv;

				} );

				/**
				 * 将UV坐标转换为倾斜UV坐标
				 * 用于创建扭曲、拉伸的纹理效果
				 * @param {vec2} uv - 输入UV坐标
				 * @param {vec2} skew - 倾斜参数
				 *                    skew.x: y坐标对x坐标的影响因子
				 *                    skew.y: x坐标对y坐标的影响因子
				 * @returns {vec2} 倾斜后的UV坐标
				 */
				const toSkewedUv = Fn( ( [ uv, skew ] ) => {

					// 倾斜变换公式：
					// newUv.x = uv.x + uv.y * skew.x
					// newUv.y = uv.y + uv.x * skew.y
					// 这会使纹理在特定方向上拉伸，产生扭曲效果
					return vec2(
						uv.x.add( uv.y.mul( skew.x ) ),  // x坐标受y坐标影响
						uv.y.add( uv.x.mul( skew.y ) )   // y坐标受x坐标影响
					);

				} );

				/**
				 * 创建扭曲的圆柱体形状
				 * 这是龙卷风主体的核心形状函数
				 * @param {vec3} position - 原始顶点位置（局部坐标）
				 * @param {float} parabolStrength - 抛物线强度：控制龙卷风弯曲程度
				 * @param {float} parabolOffset - 抛物线偏移：控制龙卷风底部位置
				 * @param {float} parabolAmplitude - 抛物线振幅：控制龙卷风半径大小
				 * @param {float} time - 当前时间：用于动画效果
				 * @returns {vec3} 扭曲后的顶点位置
				 */
				const twistedCylinder = Fn( ( [ position, parabolStrength, parabolOffset, parabolAmplitude, time ] ) => {

					// 计算水平角度：atan(z, x)得到绕Y轴的角度
					// 这是圆柱体表面的角度坐标
					const angle = atan( position.z, position.x ).toVar();
					
					// 获取高度：Y坐标作为垂直坐标
					const elevation = position.y;

					// 计算抛物线半径：创建龙卷风形状
					// 公式：radius = parabolStrength * (y - parabolOffset)^2 + parabolAmplitude
					// 这是一个抛物线方程，使龙卷风从底部到顶部逐渐变宽
					const radius = parabolStrength
						.mul( position.y.sub( parabolOffset ) )  // (y - offset)
						.pow( 2 )                               // 平方
						.add( parabolAmplitude )                // 加上基础振幅
						.toVar();

					// 添加湍流效果：使表面产生波动
					// 公式：sin(elevation * 20 - time * 20 + angle * 2) * 0.05
					// 这是一个复合正弦波，产生随高度、时间和角度变化的波动
					radius.addAssign( 
						sin( elevation.sub( time ).mul( 20 ).add( angle.mul( 2 ) ) )
						.mul( 0.05 )  // 波动幅度
					);

					// 根据角度和半径计算新的3D位置
					// 这是从圆柱坐标（角度、半径、高度）转换回笛卡尔坐标
					const twistedPosition = vec3(
						cos( angle ).mul( radius ),  // x = cos(角度) * 半径
						elevation,                   // y 保持不变
						sin( angle ).mul( radius )   // z = sin(角度) * 半径
					);

					return twistedPosition;

				} );

				// ==================== 统一变量定义 ====================
				// 统一变量：在着色器中声明，可在JavaScript中动态修改
				// 这些变量会在调试面板中显示为可调节参数

				// 自发光颜色：龙卷风的主要颜色
				// 初始值为橙色 (#ff8b4d)
				const emissiveColor = uniform( color( '#ff8b4d' ) );
				
				// 时间缩放因子：控制动画速度
				// 值越大动画越快，负值会使动画反向播放
				const timeScale = uniform( 0.2 );
				
				// 抛物线强度：控制龙卷风形状的弯曲程度
				// 值越大，底部到顶部的宽度变化越明显
				const parabolStrength = uniform( 1 );
				
				// 抛物线偏移：控制龙卷风底部位置
				// 影响抛物线的最低点位置
				const parabolOffset = uniform( 0.3 );
				
				// 抛物线振幅：控制龙卷风的最小半径
				// 值越大，龙卷风整体越粗
				const parabolAmplitude = uniform( 0.2 );

				// ==================== 龙卷风地面效果 ====================
				// 创建地面材质：透明、非线框的基础材质
				const floorMaterial = new THREE.MeshBasicNodeMaterial( { 
					transparent: true,   // 启用透明度
					wireframe: false     // 不使用线框模式（显示实体表面）
				} );

				// 设置材质输出节点：定义材质的颜色和透明度计算
				floorMaterial.outputNode = Fn( () => {

					// 计算缩放后的时间：用于所有时间相关动画
					const scaledTime = time.mul( timeScale );

					// ---------- 第一层噪声 ----------
					// 用途：创建龙卷风底部的旋转纹理
					const noise1Uv = toRadialUv(
						uv(),                       // 标准UV坐标
						vec2( 0.5, 0.5 ),           // 缩放乘数：x方向0.5倍，y方向0.5倍
						scaledTime,                 // 旋转：随时间旋转
						scaledTime                  // 偏移：随时间径向移动
					);
					// 应用倾斜变换：增加纹理的扭曲感
					noise1Uv.assign( toSkewedUv(
						noise1Uv,
						vec2( -1, 0 )  // 倾斜参数：y坐标影响x坐标，产生水平拉伸
					) );
					// 进一步缩放：增强纹理细节
					noise1Uv.mulAssign( vec2( 4, 1 ) );
					// 从Perlin纹理的红色通道采样，并重映射数值范围
					// remap(0.45, 0.7)：将[0.45, 0.7]范围映射到[0, 1]
					const noise1 = texture( perlinTexture, noise1Uv, 1 ).r.remap( 0.45, 0.7 );

					// ---------- 第二层噪声 ----------
					// 用途：添加更多细节和复杂性
					const noise2Uv = toRadialUv(
						uv(),
						vec2( 2, 8 ),               // 不同缩放：产生不同频率的图案
						scaledTime.mul( 2 ),        // 更快的旋转速度
						scaledTime.mul( 8 )         // 更快的偏移速度
					);
					noise2Uv.assign( toSkewedUv(
						noise2Uv,
						vec2( -0.25, 0 )  // 不同的倾斜参数
					) );
					noise2Uv.mulAssign( vec2( 2, 0.25 ) );
					// 从蓝色通道采样，使用不同的噪声图案
					const noise2 = texture( perlinTexture, noise2Uv, 1 ).b.remap( 0.45, 0.7 );

					// ---------- 外部淡出效果 ----------
					// 用途：使效果在边缘处平滑淡出，避免硬边界
					const distanceToCenter = uv().sub( 0.5 ).toVar();
					const outerFade = min(
						// 内部淡出：从中心到0.5距离处保持不透明，0.5到0.9逐渐透明
						distanceToCenter.length().oneMinus().smoothstep( 0.5, 0.9 ),
						// 外部淡出：从0到0.2距离处逐渐不透明
						distanceToCenter.length().smoothstep( 0, 0.2 )
					);

					// ---------- 合并效果 ----------
					// 将两层噪声相乘（混合），再乘以淡出系数
					const effect = noise1.mul( noise2 ).mul( outerFade ).toVar();

					// ---------- 最终输出 ----------
					// 返回RGBA向量：RGB为颜色，A为透明度
					return vec4(
						// RGB颜色：
						// 1. 使用自发光颜色
						// 2. step(0.2)：阈值化，effect>0.2的部分显示颜色
						// 3. mul(3)：增强亮度
						emissiveColor.mul( effect.step( 0.2 ) ).mul( 3 ),
						// Alpha透明度：
						// smoothstep(0, 0.01)：在effect的[0, 0.01]范围内平滑过渡
						effect.smoothstep( 0, 0.01 )
					);

				} )();

				// 创建地面网格：使用平面几何体
				const floor = new THREE.Mesh( 
					new THREE.PlaneGeometry( 2, 2 ), // 平面几何体：宽度2，高度2
					floorMaterial                    // 应用上面定义的材质
				);
				// 旋转平面：使其水平放置（Three.js中默认平面是垂直的）
				floor.rotation.x = - Math.PI * 0.5; // 旋转-90度（绕X轴）
				// 将地面添加到场景中
				scene.add( floor );

				// ==================== 龙卷风圆柱几何体 ====================
				// 创建基础圆柱几何体：作为龙卷风的主体形状
				// 参数说明：
				// 1, 1: 顶部半径和底部半径（相同值=圆柱体）
				// 1: 高度
				// 20, 20: 水平分段数和垂直分段数（控制几何体精度）
				// true: 包含端面（顶部和底部）
				const cylinderGeometry = new THREE.CylinderGeometry( 1, 1, 1, 20, 20, true );
				// 平移几何体：使圆柱体底部位于原点
				// 这样在应用扭曲时，底部位置固定
				cylinderGeometry.translate( 0, 0.5, 0 );

				// ==================== 龙卷风自发光圆柱体（内层） ====================
				// 创建自发光材质：透明、双面显示、非线框
				const emissiveMaterial = new THREE.MeshBasicNodeMaterial( { 
					transparent: true,        // 启用透明度
					side: THREE.DoubleSide,   // 双面显示（里外都能看到）
					wireframe: false          // 实体显示
				} );

				// 设置顶点位置节点：应用扭曲圆柱体变换
				// 这是龙卷风动画的核心，每个顶点都会根据时间变化位置
				emissiveMaterial.positionNode = twistedCylinder( 
					positionLocal,                     // 原始顶点位置
					parabolStrength,                   // 抛物线强度
					parabolOffset,                     // 抛物线偏移
					parabolAmplitude.sub( 0.05 ),      // 抛物线振幅（比外层小0.05，使内层更细）
					time.mul( timeScale )              // 当前时间（缩放后）
				);

				// 设置材质输出节点：定义内层龙卷风的颜色和透明度
				emissiveMaterial.outputNode = Fn( () => {

					const scaledTime = time.mul( timeScale );

					// ---------- 第一层噪声 ----------
					// 使用不同的UV动画参数，产生螺旋上升的纹理
					const noise1Uv = uv().add( vec2( scaledTime, scaledTime.negate() ) ).toVar();
					noise1Uv.assign( toSkewedUv(
						noise1Uv,
						vec2( -1, 0 )
					) );
					noise1Uv.mulAssign( vec2( 2, 0.25 ) );
					const noise1 = texture( perlinTexture, noise1Uv, 1 ).r.remap( 0.45, 0.7 );

					// ---------- 第二层噪声 ----------
					const noise2Uv = uv().add( vec2( scaledTime.mul( 0.5 ), scaledTime.negate() ) ).toVar();
					noise2Uv.assign( toSkewedUv(
						noise2Uv,
						vec2( -1, 0 )
					) );
					noise2Uv.mulAssign( vec2( 5, 1 ) );
					const noise2 = texture( perlinTexture, noise2Uv, 1 ).g.remap( 0.45, 0.7 );

					// ---------- 垂直方向淡出 ----------
					// 使龙卷风在顶部和底部逐渐淡出
					const outerFade = min(
						uv().y.smoothstep( 0, 0.1 ),           // 底部淡入
						uv().y.oneMinus().smoothstep( 0, 0.4 ) // 顶部淡出
					);

					// ---------- 合并效果 ----------
					const effect = noise1.mul( noise2 ).mul( outerFade );

					// ---------- 颜色亮度归一化 ----------
					// 计算自发光颜色的亮度，用于颜色归一化
					// 确保调整颜色参数时，亮度变化不会影响最终显示效果
					const emissiveColorLuminance = luminance( emissiveColor );

					// ---------- 最终输出 ----------
					return vec4(
						// RGB颜色：自发光颜色增强并归一化
						// mul(1.2)：增强20%亮度
						// div(emissiveColorLuminance)：除以亮度，保持颜色鲜艳度
						emissiveColor.mul( 1.2 ).div( emissiveColorLuminance ),
						// Alpha透明度：在effect的[0, 0.1]范围内平滑过渡
						effect.smoothstep( 0, 0.1 )
					);

				} )();

				// 创建自发光圆柱体网格
				const emissive = new THREE.Mesh( cylinderGeometry, emissiveMaterial );
				emissive.scale.set( 1, 1, 1 );  // 设置缩放（默认大小）
				scene.add( emissive );

				// ==================== 龙卷风暗色圆柱体（外层） ====================
				// 用途：创建龙卷风的暗色外层，增加深度感和体积感
				const darkMaterial = new THREE.MeshBasicNodeMaterial( { 
					transparent: true, 
					side: THREE.DoubleSide, 
					wireframe: false 
				} );

				// 设置顶点位置节点：与外层使用相同的扭曲函数
				// 但振幅参数不同，使外层比内层稍粗
				darkMaterial.positionNode = twistedCylinder( 
					positionLocal, 
					parabolStrength, 
					parabolOffset, 
					parabolAmplitude,  // 没有减0.05，所以外层更粗
					time.mul( timeScale ) 
				);

				// 设置材质输出节点：产生黑色半透明效果
				darkMaterial.outputNode = Fn( () => {

					// 时间偏移：使外层动画与内层不同步，增加复杂性
					const scaledTime = time.mul( timeScale ).add( 123.4 );

					// ---------- 第一层噪声 ----------
					const noise1Uv = uv().add( vec2( scaledTime, scaledTime.negate() ) ).toVar();
					noise1Uv.assign( toSkewedUv(
						noise1Uv,
						vec2( -1, 0 )
					) );
					noise1Uv.mulAssign( vec2( 2, 0.25 ) );
					// 从绿色通道采样，使用不同的噪声图案
					const noise1 = texture( perlinTexture, noise1Uv, 1 ).g.remap( 0.45, 0.7 );

					// ---------- 第二层噪声 ----------
					const noise2Uv = uv().add( vec2( scaledTime.mul( 0.5 ), scaledTime.negate() ) ).toVar();
					noise2Uv.assign( toSkewedUv(
						noise2Uv,
						vec2( -1, 0 )
					) );
					noise2Uv.mulAssign( vec2( 5, 1 ) );
					// 从蓝色通道采样
					const noise2 = texture( perlinTexture, noise2Uv, 1 ).b.remap( 0.45, 0.7 );

					// ---------- 垂直方向淡出 ----------
					// 使用不同的淡出参数
					const outerFade = min(
						uv().y.smoothstep( 0, 0.2 ),
						uv().y.oneMinus().smoothstep( 0, 0.4 )
					);

					// ---------- 合并效果 ----------
					const effect = noise1.mul( noise2 ).mul( outerFade );

					// ---------- 最终输出 ----------
					// 外层龙卷风是黑色的，只提供阴影和深度感
					return vec4(
						vec3( 0 ),  // RGB：纯黑色
						effect.smoothstep( 0, 0.01 )  // Alpha：透明度
					);

				} )();

				// 创建暗色圆柱体网格
				const dark = new THREE.Mesh( cylinderGeometry, darkMaterial );
				dark.scale.set( 1, 1, 1 );
				scene.add( dark );

				// ==================== 渲染器设置 ====================
				// 创建WebGPU渲染器
				// WebGPU是下一代Web图形API，提供更好的性能和更底层的GPU控制
				renderer = new THREE.WebGPURenderer( { 
					antialias: true  // 启用抗锯齿：平滑边缘锯齿
				} );
				
				// 设置清除颜色：场景背景色
				// 0x201919是深棕灰色，为龙卷风提供对比背景
				renderer.setClearColor( 0x201919 );
				
				// 设置设备像素比：支持高DPI显示设备
				// window.devicePixelRatio获取设备的物理像素与CSS像素比值
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸：与浏览器窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环：传入animate函数，每帧自动调用
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射：模拟人眼对亮度的感知
				// ACESFilmic是一种电影级色调映射算法，提供更自然的颜色和对比度
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 初始化调试器：用于创建参数调整面板
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				// renderer.domElement是HTMLCanvasElement
				document.body.appendChild( renderer.domElement );

				// ==================== 后处理设置 ====================
				// 创建后处理对象：对渲染结果进行额外的图像处理
				postProcessing = new THREE.PostProcessing( renderer );

				// 创建场景渲染通道：将场景渲染到纹理
				const scenePass = pass( scene, camera );
				
				// 获取场景通道的输出纹理节点
				const scenePassColor = scenePass.getTextureNode( 'output' );

				// 创建Bloom（辉光）效果
				// 参数说明：
				// scenePassColor: 输入纹理（场景渲染结果）
				// 1: 强度（strength） - 辉光强度
				// 0.1: 半径（radius） - 辉光扩散半径
				// 1: 阈值（threshold） - 亮度超过此值的区域会产生辉光
				const bloomPass = bloom( scenePassColor, 1, 0.1, 1 );

				// 设置后处理输出节点：原始场景颜色 + Bloom效果
				// 这种加法混合使明亮区域产生光晕
				postProcessing.outputNode = scenePassColor.add( bloomPass );

				// ==================== 控制器设置 ====================
				// 创建轨道控制器：绑定相机和渲染器的DOM元素
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 设置控制目标点：相机围绕此点旋转
				controls.target.y = 0.4;  // Y轴偏移，使相机焦点略高于地面
				
				// 启用阻尼：使相机移动有惯性效果，操作更自然
				controls.enableDamping = true;
				
				// 设置最小和最大缩放距离：限制相机与目标点的距离
				controls.minDistance = 0.1;   // 最小距离：防止相机穿入物体内部
				controls.maxDistance = 50;    // 最大距离：防止相机过远

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

				// ==================== 调试界面设置 ====================
				// 在调试器中创建参数面板，标题为"参数"
				const gui = renderer.inspector.createParameters( '参数' );

				// 添加颜色选择器：控制自发光颜色
				gui.addColor( 
					{ 
						color: emissiveColor.value.getHexString( THREE.SRGBColorSpace ) 
					}, 
					'color' 
				)
				.onChange( value => emissiveColor.value.set( value ) )  // 颜色改变时的回调函数
				.name( '自发光颜色' );  // 在面板中显示的名称

				// 添加时间缩放滑块
				gui.add( timeScale, 'value', -1, 1, 0.01 )
					.name( '时间缩放' );

				// 添加抛物线强度滑块
				gui.add( parabolStrength, 'value', 0, 2, 0.01 )
					.name( '抛物线强度' );

				// 添加抛物线偏移滑块
				gui.add( parabolOffset, 'value', 0, 1, 0.01 )
					.name( '抛物线偏移' );

				// 添加抛物线振幅滑块
				gui.add( parabolAmplitude, 'value', 0, 2, 0.01 )
					.name( '抛物线振幅' );

				// 创建Bloom参数子面板
				const bloomGui = gui.addFolder( '辉光效果' );
				
				// 添加Bloom强度滑块
				bloomGui.add( bloomPass.strength, 'value', 0, 10, 0.01 )
					.name( '辉光强度' );
				
				// 添加Bloom半径滑块
				bloomGui.add( bloomPass.radius, 'value', 0, 1, 0.01 )
					.name( '辉光半径' );

			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器
			 */
			function onWindowResize() {

				// 更新相机宽高比：根据新的窗口尺寸计算
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 必须调用此函数，否则相机不会应用新的宽高比
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸：使其与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 每帧自动调用，更新场景状态并渲染
			 */
			async function animate() {

				// 更新轨道控制器：处理用户输入，更新相机位置
				// 如果启用了阻尼，这里会计算惯性效果
				controls.update();

				// 渲染后处理效果
				// postProcessing.render()会执行以下步骤：
				// 1. 渲染原始场景到纹理
				// 2. 对纹理应用Bloom效果
				// 3. 将最终结果渲染到屏幕
				postProcessing.render();

			}

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