<!-- 视觉特效链接粒子系统 - 功能描述与技术详解
🎯 核心功能描述
这是一个基于GPU计算的高性能粒子系统，创建了一个动态、交互式的视觉效果演示。系统模拟了8192个相互连接的粒子，它们在一个虚拟的湍流场中流动，并根据用户的鼠标交互实时生成新的粒子。

主要视觉表现：
动态粒子流：粒子在分形噪声生成的湍流场中自然流动，形成有机的运动轨迹

智能连接网络：每个粒子自动寻找两个最近的邻居，形成动态变化的连接线网络

鼠标交互生成：跟随鼠标位置实时生成新粒子，粒子在鼠标移动轨迹上分布

生命周期管理：粒子有完整的"生老病死"循环，新生粒子充满活力，逐渐衰减消失

视觉增强效果：包括泛光效果、颜色脉动、动态照明等，增强视觉冲击力

🔧 主要技术架构
1. WebGPU 图形API
现代GPU接口：替代传统的WebGL，提供更底层的GPU访问

计算着色器支持：在GPU上执行通用计算，极大提升粒子计算性能

显式内存管理：精细控制GPU内存分配和数据传输

2. TSL (Three.js Shading Language)
声明式着色器编程：在JavaScript中编写类型安全的着色器代码

GPU计算节点：将计算任务编译为高效的GPU指令

实时参数绑定：JavaScript变量与GPU着色器变量的无缝连接

3. GPU计算管道
javascript
// 主要计算阶段：
1. 粒子位置更新计算
2. 最近邻居搜索计算
3. 连接线几何生成计算
4. 颜色和透明度计算
4. 数据存储架构
存储缓冲区 (Storage Buffers)：
粒子位置缓冲区：存储8192个粒子的xyzw坐标（w分量存储生命周期）

粒子速度缓冲区：存储每个粒子的速度向量

连接线顶点缓冲区：存储连接线的几何数据

连接线颜色缓冲区：存储连接线的颜色和透明度

实例化属性：
实例化位置：通过存储缓冲区直接传递给顶点着色器

动态实例矩阵：设置为动态使用模式，支持频繁更新

⚡ 关键技术实现
1. 并行粒子更新系统
javascript
// 计算着色器中的关键算法：
updateParticles = Fn(() => {
    // 每个GPU线程处理一个粒子
    const position = particlePositions.element(instanceIndex);
    const velocity = particleVelocities.element(instanceIndex);
    
    // 1. 湍流场计算（基于分形噪声）
    const turbVelocity = mx_fractal_noise_vec3(position);
    
    // 2. 物理模拟
    velocity.addAssign(turbVelocity);
    velocity.mulAssign(friction);
    position.addAssign(velocity * dt);
    
    // 3. 生命周期衰减
    life.subAssign(dt / lifetime);
});
2. 高效最近邻居搜索
javascript
// 优化策略：
// 使用平方距离避免开方运算
const distSq = position.sub(otherPosition).lengthSq();

// 维护两个最近邻居（双缓存策略）
if (distSq < closestDist1) {
    // 更新最近邻居1
} else if (distSq < closestDist2) {
    // 更新最近邻居2
}

// 所有粒子并行搜索（8192个GPU线程同时执行）
3. 连接线几何生成
带状四边形：使用两个三角形组成带状连接线

动态宽度：通过顶点偏移实现可调节的线宽

渐变透明度：基于两个连接粒子的生命周期计算透明度

连续四边形：每个粒子生成两个连接线，共8个顶点

4. 分形噪声系统
javascript
// 多八度分形噪声参数：
mx_fractal_noise_vec3(
    position * frequency,  // 输入位置（乘以频率控制精细度）
    octaves,               // 八度数（噪声层数，控制细节）
    lacunarity,            // 间隙度（每层频率倍增因子）
    gain,                  // 增益（每层振幅衰减因子）
    amplitude              // 总体振幅
)
5. 视觉渲染管道
后期处理管线：
text
原始场景渲染 → Bloom泛光提取 → 场景+泛光混合 → 最终输出
粒子渲染优化：
圆形遮罩：在片段着色器中使用距离函数创建圆形粒子

加法混合：增强光效和叠加效果

面向运动方向：根据速度向量旋转粒子四边形

6. 交互系统
射线投射：将2D屏幕坐标转换为3D场景坐标

平滑插值：粒子生成位置平滑跟随鼠标移动

轨迹分布：在鼠标移动路径上均匀分布新粒子

🚀 性能优化技术
1. GPU并行计算优化
大规模并行：8192个GPU线程同时计算

内存访问优化：合并内存访问，减少带宽消耗

寄存器重用：最大化寄存器使用率

2. 渲染性能优化
实例化渲染：单次绘制调用渲染8192个粒子

视锥体剔除禁用：避免不必要的CPU计算

深度测试优化：透明物体深度处理策略

3. 算法优化
平方距离计算：避免昂贵的平方根运算

早期退出：死亡粒子不参与计算循环

循环展开：编译器优化友好的循环结构

🎨 视觉效果系统
1. 颜色系统
分形噪声颜色变化：每个粒子有独特的颜色偏移

时间旋转：颜色随时间整体旋转变化

脉动效果：正弦波驱动的颜色强度变化

2. 透明度系统
生命周期驱动：透明度随粒子年龄衰减

幂曲线控制：非线性透明度衰减曲线

连接线混合：基于两个粒子的最小生命周期

3. 照明与反射
动态点光源：在场景中移动的光源

金属材质背景：反向二十面体提供环境反射

高光效果：通过材质粗糙度和金属度控制

📊 技术规格
系统资源：
粒子数量：8192个（2¹³）

连接线数量：16384条（2×粒子数）

顶点数量：65536个（8×粒子数）

三角形数量：98304个（12×粒子数）

性能特性：
GPU计算：所有粒子更新在GPU上并行执行

60FPS目标：稳定帧率下的实时交互

内存效率：优化存储布局减少内存占用

🔍 调试与调节系统
实时参数调节：
粒子参数：大小、寿命、生成速率

湍流参数：频率、振幅、八度数、摩擦力

视觉效果：泛光阈值、强度、半径

交互控制：相机自动旋转、速度

调试工具：
Inspector面板：实时参数调整界面

性能监控：内置Three.js调试功能

WebGPU调试：浏览器开发者工具支持

🌐 浏览器兼容性
要求：
WebGPU支持：Chrome 113+、Edge 113+

现代浏览器：需要较新的浏览器版本

硬件加速：需要支持WebGPU的GPU

降级策略：
兼容性检测：自动检测WebGPU支持

错误提示：不支持的浏览器显示友好提示

渐进增强：基于浏览器能力选择渲染路径 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：three.js WebGPU版本 - 视觉特效链接粒子系统 -->
		<title>three.js WebGPU - 视觉特效链接粒子系统</title>
		<!-- 字符编码设置为UTF-8，支持多语言字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：
			 width=device-width：视口宽度等于设备宽度
			 user-scalable=no：禁止用户手动缩放
			 minimum-scale=1.0：最小缩放比例为1
			 maximum-scale=1.0：最大缩放比例为1
			 确保页面在移动设备上以固定比例显示 -->
		<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链接，点击跳转到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</a>
				<!-- 副标题：当前演示的名称 -->
				<span>视觉特效链接粒子系统</span>
			</div>

			<!-- 版权信息和参考来源说明（小字号显示） -->
			<small>
				<!-- 基于Christophe Choffel的实验项目 -->
				基于 <a href="https://github.com/ULuIQ12/webgpu-tsl-linkedparticles" target="_blank" rel="noopener">这个实验项目</a> by Christophe Choffel.
			</small>
		</div>

		<!-- 导入映射(Import Map)：
			 现代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模块：使用type="module"表示这是一个ES6模块 -->
		<script type="module">

			// ==================== 导入部分 ====================
			// 从three.js WebGPU版本导入所有功能，命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 从TSL（Three.js Shading Language）导入着色器函数
			// 这些函数将在GPU着色器中运行
			import { 
				atan,    // 反正切函数，用于计算角度
				cos,     // 余弦函数
				float,   // 浮点数类型
				max,     // 最大值函数
				min,     // 最小值函数
				mix,     // 线性插值函数（类似lerp）
				PI,      // 圆周率π
				TWO_PI,  // 2π
				sin,     // 正弦函数
				vec2,    // 2维向量
				vec3,    // 3维向量
				color,   // 颜色类型
				Fn,      // 函数定义器
				hash,    // 哈希函数，生成伪随机数
				hue,     // 色调函数
				If,      // 条件语句
				instanceIndex, // 实例索引（在计算着色器中表示当前处理的元素）
				Loop,    // 循环语句
				mx_fractal_noise_float,  // 分形噪声函数（返回浮点数）
				mx_fractal_noise_vec3,   // 分形噪声函数（返回三维向量）
				pass,    // 渲染通道
				pcurve,  // 曲线函数
				storage, // 存储缓冲区
				deltaTime, // 增量时间（帧间隔时间）
				time,    // 总运行时间
				uv,      // UV坐标
				uniform, // uniform变量包装器
				step     // 阶跃函数
			} from 'three/tsl';
			
			// 导入泛光(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';
			
			// 导入WebGPU兼容性检查模块
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// ==================== 全局变量声明 ====================
			// 核心Three.js对象
			let camera,        // 相机：决定视角和投影
				scene,         // 场景：包含所有3D对象
				renderer,      // 渲染器：负责将3D场景渲染到2D画布
				postProcessing, // 后期处理器：处理渲染后的图像效果
				controls,      // 控制器：用户交互控制
				timer,         // 计时器：管理时间相关逻辑
				light;         // 光源：场景照明

			// TSL计算节点：在GPU上执行的函数
			let updateParticles, // 更新粒子状态的计算着色器
				spawnParticles;  // 生成新粒子的计算着色器
			
			// TSL函数：获取实例颜色的函数
			let getInstanceColor;

			// 鼠标交互相关变量
			const screenPointer = new THREE.Vector2();  // 屏幕坐标（归一化到[-1,1]范围）
			const scenePointer = new THREE.Vector3();   // 场景中的3D坐标（鼠标位置对应的3D点）
			const raycastPlane = new THREE.Plane(       // 射线检测平面（用于将2D屏幕坐标转换为3D场景坐标）
				new THREE.Vector3(0, 0, 1),  // 平面法线（Z轴方向）
				0                            // 平面常数（平面到原点的距离）
			);
			const raycaster = new THREE.Raycaster();    // 射线检测器

			// 粒子数量：2的13次方 = 8192个粒子
			// 使用2的幂次方便GPU内存对齐和处理
			const nbParticles = Math.pow(2, 13);

			// ==================== 可调节参数（使用uniform包装） ====================
			// uniform变量可以在运行时通过JavaScript修改，并传递给GPU着色器
			
			// 时间控制参数
			const timeScale = uniform(1.0);        // 时间缩放因子：控制整体动画速度
			const particleLifetime = uniform(0.5); // 粒子寿命：粒子从生成到消失的时间
			
			// 视觉效果参数
			const particleSize = uniform(1.0);     // 粒子大小：每个粒子的显示尺寸
			const linksWidth = uniform(0.005);     // 连接线宽度：粒子间连接线的粗细
			
			// 颜色控制参数
			const colorOffset = uniform(0.0);      // 颜色偏移：用于颜色旋转效果的基础偏移值
			const colorVariance = uniform(2.0);    // 颜色变化强度：控制颜色变化的幅度
			const colorRotationSpeed = uniform(1.0); // 颜色旋转速度：控制颜色随时间变化的速度
			
			// 粒子生成参数
			const spawnIndex = uniform(0);         // 生成索引：下一个要生成的粒子的位置索引
			const nbToSpawn = uniform(5);          // 生成数量：每帧生成的粒子数量
			const spawnPosition = uniform(vec3(0.0));      // 生成位置：当前鼠标位置对应的3D坐标
			const previousSpawnPosition = uniform(vec3(0.0)); // 上一帧生成位置：用于平滑插值
			
			// 湍流场参数（控制粒子运动）
			const turbFrequency = uniform(0.5);    // 湍流频率：控制噪声场的精细程度
			const turbAmplitude = uniform(0.5);    // 湍流振幅：控制噪声场的影响强度
			const turbOctaves = uniform(2);        // 湍流八度数：控制噪声的层次细节
			const turbLacunarity = uniform(2.0);   // 湍流间隙度：控制每层噪声的频率倍增
			const turbGain = uniform(0.5);         // 湍流增益：控制每层噪声的振幅衰减
			const turbFriction = uniform(0.01);    // 湍流摩擦力：控制粒子速度的衰减

			// ==================== 初始化函数 ====================
			init();

			async function init() {
				// 检查WebGPU支持性
				// WebGPU是现代图形API，比WebGL更高效，但需要较新的浏览器支持
				if (WebGPU.isAvailable() === false) {
					// 如果WebGPU不可用，显示错误信息并抛出异常
					document.body.appendChild(WebGPU.getErrorMessage());
					throw new Error('不支持WebGPU');
				}

				// 创建透视相机
				// 参数：视野角度60度，宽高比，近裁剪面0.1，远裁剪面200
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200);
				camera.position.set(0, 0, 10); // 设置相机初始位置

				// 创建3D场景
				scene = new THREE.Scene();

				// 创建计时器
				// 计时器用于管理动画时间，可以获取增量时间和总运行时间
				timer = new THREE.Timer();
				timer.connect(document); // 连接到文档，开始计时

				// ==================== 创建渲染器 ====================
				renderer = new THREE.WebGPURenderer({ 
					antialias: true // 启用抗锯齿，使边缘更平滑
				});
				
				// 设置渲染器属性
				renderer.setClearColor(0x14171a); // 设置清除颜色（背景色）
				renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比
				renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸
				renderer.setAnimationLoop(animate); // 设置动画循环回调函数
				renderer.inspector = new Inspector(); // 创建调试面板实例
				renderer.toneMapping = THREE.ACESFilmicToneMapping; // 设置色调映射算法
				
				// 将渲染器的canvas元素添加到页面中
				document.body.appendChild(renderer.domElement);

				// 异步初始化渲染器（WebGPU需要异步初始化）
				await renderer.init();

				// ==================== 定义TSL函数：获取实例颜色 ====================
				// 这个函数将在GPU着色器中运行，根据粒子索引生成颜色
				getInstanceColor = Fn(([i]) => {
					// 使用分形噪声创建颜色变化
					// 1. 基于粒子索引计算噪声值（乘以0.1减小变化幅度）
					// 2. 使用分形噪声生成随机但连续的数值
					// 3. 将噪声值添加到颜色偏移中
					// 4. 使用hue函数从基础蓝色生成最终颜色
					return hue(
						color(0x0000ff), // 基础颜色：蓝色
						colorOffset.add(
							mx_fractal_noise_float(
								i.toFloat().mul(.1), // 输入值：粒子索引 × 0.1
								2,       // 八度数：噪声层数
								2.0,     // 间隙度：每层频率倍增
								0.5,     // 增益：每层振幅衰减
								colorVariance // 颜色变化强度
							)
						)
					);
				});

				// ==================== 创建粒子系统 ====================
				
				// 创建存储缓冲区：粒子位置
				// StorageBuffer用于在GPU计算着色器中读写数据
				const particlePositions = storage(
					new THREE.StorageInstancedBufferAttribute(nbParticles, 4), // 创建存储属性：8192个粒子，每个4个float
					'vec4',  // 数据类型：4维向量（xyzw）
					nbParticles // 元素数量
				);
				
				// 创建存储缓冲区：粒子速度
				const particleVelocities = storage(
					new THREE.StorageInstancedBufferAttribute(nbParticles, 4),
					'vec4',
					nbParticles
				);

				// 初始化粒子缓冲区
				// 在GPU上执行计算着色器，将所有粒子初始化为"死亡"状态
				renderer.compute(Fn(() => {
					// 将粒子位置设置到远离相机的地方（坐标10000,10000,10000）
					particlePositions.element(instanceIndex).xyz.assign(vec3(10000.0));
					// 将粒子生命周期设置为-1（负数表示粒子死亡）
					particlePositions.element(instanceIndex).w.assign(vec3(-1.0));
				})().compute(nbParticles)); // 执行8192次，初始化所有粒子

				// ==================== 创建粒子渲染几何体 ====================
				const particleQuadSize = 0.05; // 粒子四边形的大小
				const particleGeom = new THREE.PlaneGeometry(particleQuadSize, particleQuadSize); // 创建平面几何体

				// 创建粒子材质（使用SpriteNodeMaterial支持TSL节点）
				const particleMaterial = new THREE.SpriteNodeMaterial();
				particleMaterial.blending = THREE.AdditiveBlending; // 设置混合模式为加法混合（增强光效）
				particleMaterial.depthWrite = false; // 禁用深度写入（避免透明物体深度问题）
				
				// 设置材质节点（TSL语法）
				particleMaterial.positionNode = particlePositions.toAttribute(); // 位置来自存储缓冲区
				particleMaterial.scaleNode = vec2(particleSize); // 大小可调节
				// 根据速度方向旋转粒子（atan计算速度向量的角度）
				particleMaterial.rotationNode = atan(
					particleVelocities.toAttribute().y,
					particleVelocities.toAttribute().x
				);

				// 粒子颜色节点
				particleMaterial.colorNode = Fn(() => {
					// 获取粒子的生命周期（存储在位置向量的w分量中）
					const life = particlePositions.toAttribute().w;
					
					// 对生命周期应用曲线，使粒子在生命周期结束时快速消失
					// oneMinus()将生命周期反转（从1到0）
					// pcurve应用幂曲线，控制透明度变化曲线
					const modLife = pcurve(life.oneMinus(), 8.0, 1.0);
					
					// 创建脉动效果
					// 1. hash(instanceIndex)：基于实例索引生成伪随机数
					// 2. 乘以2π得到随机相位
					// 3. 加上随时间变化的相位
					// 4. 计算正弦值并转换到[0,1]范围
					// 5. 应用pcurve增强脉动效果
					// 6. 乘以10并加1增强脉动幅度
					const pulse = pcurve(
						sin(
							hash(instanceIndex).mul(TWO_PI) // 随机相位
								.add(time.mul(0.5).mul(TWO_PI)) // 随时间变化的相位
						).mul(0.5).add(0.5), // 转换到[0,1]范围
						0.25, // 曲线参数
						0.25
					).mul(10.0).add(1.0);

					// 最终颜色 = 基础颜色 × 脉动效果 × 生命周期
					return getInstanceColor(instanceIndex).mul(pulse.mul(modLife));
				})();

				// 粒子透明度节点
				particleMaterial.opacityNode = Fn(() => {
					// 创建圆形遮罩：从UV中心计算距离，小于0.5的部分为1，其余为0
					const circle = step(
						uv().xy.sub(0.5).length(), // 计算当前像素到UV中心的距离
						0.5 // 阈值
					);
					
					// 获取粒子生命周期
					const life = particlePositions.toAttribute().w;
					
					// 最终透明度 = 圆形遮罩 × 生命周期
					return circle.mul(life);
				})();

				// 创建实例化网格（高效渲染大量相同几何体）
				const particleMesh = new THREE.InstancedMesh(
					particleGeom,      // 几何体
					particleMaterial,  // 材质
					nbParticles       // 实例数量
				);
				particleMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // 设置使用模式为动态绘制
				particleMesh.frustumCulled = false; // 禁用视锥体剔除（确保所有粒子都被渲染）
				scene.add(particleMesh); // 将粒子网格添加到场景

				// ==================== 创建粒子连接线系统 ====================
				
				// 创建连接线的索引数组
				// 每个粒子连接到两个最近的粒子，每个连接用两个三角形（一个四边形）表示
				const linksIndices = [];
				for (let i = 0; i < nbParticles; i++) {
					const baseIndex = i * 8; // 每个粒子占用8个顶点（两个四边形）
					for (let j = 0; j < 2; j++) {
						const offset = baseIndex + j * 4;
						// 第一个三角形：顶点0,1,2
						linksIndices.push(offset, offset + 1, offset + 2);
						// 第二个三角形：顶点0,2,3
						linksIndices.push(offset, offset + 2, offset + 3);
					}
				}

				// 创建连接线的存储缓冲区
				const nbVertices = nbParticles * 8; // 总顶点数 = 粒子数 × 8
				const linksVerticesSBA = new THREE.StorageBufferAttribute(nbVertices, 4); // 顶点位置
				const linksColorsSBA = new THREE.StorageBufferAttribute(nbVertices, 4);   // 顶点颜色和透明度

				// 创建连接线几何体
				const linksGeom = new THREE.BufferGeometry();
				linksGeom.setAttribute('position', linksVerticesSBA); // 设置顶点位置属性
				linksGeom.setAttribute('color', linksColorsSBA);     // 设置顶点颜色属性
				linksGeom.setIndex(linksIndices);                    // 设置索引

				// 创建连接线材质
				const linksMaterial = new THREE.MeshBasicNodeMaterial();
				linksMaterial.vertexColors = true;      // 使用顶点颜色（每个顶点可以有不同的颜色）
				linksMaterial.side = THREE.DoubleSide;  // 双面渲染（从两面都能看到）
				linksMaterial.transparent = true;       // 启用透明度
				linksMaterial.depthWrite = false;       // 禁用深度写入
				linksMaterial.depthTest = false;        // 禁用深度测试（始终显示在最前面）
				linksMaterial.blending = THREE.AdditiveBlending; // 加法混合模式
				
				// 透明度来自颜色缓冲区的w分量
				linksMaterial.opacityNode = storage(linksColorsSBA, 'vec4', linksColorsSBA.count).toAttribute().w;

				// 创建连接线网格
				const linksMesh = new THREE.Mesh(linksGeom, linksMaterial);
				linksMesh.frustumCulled = false; // 禁用视锥体剔除
				scene.add(linksMesh); // 添加到场景

				// ==================== 创建计算着色器：更新粒子 ====================
				updateParticles = Fn(() => {
					// 获取当前处理的粒子的数据
					const position = particlePositions.element(instanceIndex).xyz; // 位置
					const life = particlePositions.element(instanceIndex).w;      // 生命周期
					const velocity = particleVelocities.element(instanceIndex).xyz; // 速度
					
					// 计算增量时间，考虑时间缩放因子
					// deltaTime是帧间隔时间，乘以0.1减小运动速度，乘以timeScale允许用户控制整体速度
					const dt = deltaTime.mul(0.1).mul(timeScale);

					// 如果粒子还活着（生命周期 > 0）
					If(life.greaterThan(0.0), () => {
						// 1. 更新粒子运动
						// 计算湍流速度：基于粒子位置生成分形噪声
						const localVel = mx_fractal_noise_vec3(
							position.mul(turbFrequency), // 输入位置乘以频率
							turbOctaves,                 // 八度数
							turbLacunarity,              // 间隙度
							turbGain,                    // 增益
							turbAmplitude                // 振幅
						).mul(life.add(.01)); // 乘以生命周期（越老的粒子受湍流影响越小）
						
						// 更新速度：添加湍流速度，然后应用摩擦力
						velocity.addAssign(localVel);             // 添加湍流速度
						velocity.mulAssign(turbFriction.oneMinus()); // 应用摩擦力（速度乘以(1-摩擦系数)）
						
						// 更新位置：位置 = 位置 + 速度 × 时间
						position.addAssign(velocity.mul(dt));

						// 2. 减少生命周期
						// 生命周期减少量 = 时间 × (1/寿命)
						// 这样无论粒子寿命设置为多少，都会在指定时间内消失
						life.subAssign(dt.mul(particleLifetime.reciprocal()));

						// 3. 查找两个最近的粒子
						// 初始化变量：存储最近两个粒子的信息
						const closestDist1 = float(10000.0).toVar(); // 最近距离1（初始化为大数）
						const closestPos1 = vec3(0.0).toVar();      // 最近位置1
						const closestLife1 = float(0.0).toVar();    // 最近生命周期1
						const closestDist2 = float(10000.0).toVar(); // 最近距离2
						const closestPos2 = vec3(0.0).toVar();      // 最近位置2
						const closestLife2 = float(0.0).toVar();    // 最近生命周期2

						// 遍历所有粒子，查找最近的两个
						Loop(nbParticles, ({ i }) => {
							const otherPart = particlePositions.element(i); // 获取其他粒子的数据

							// 条件：不是自身（i ≠ instanceIndex）且对方粒子还活着
							If(i.notEqual(instanceIndex).and(otherPart.w.greaterThan(0.0)), () => {
								const otherPosition = otherPart.xyz; // 对方粒子位置
								
								// 计算距离平方（比计算距离更快，因为不需要开方）
								const dist = position.sub(otherPosition).lengthSq();
								const moreThanZero = dist.greaterThan(0.0); // 确保距离大于0

								// 如果距离比当前最近距离1更近
								If(dist.lessThan(closestDist1).and(moreThanZero), () => {
									// 更新最近距离1的信息
									closestDist1.assign(dist);
									closestPos1.assign(otherPosition.xyz);
									closestLife1.assign(otherPart.w);
								}).ElseIf(dist.lessThan(closestDist2).and(moreThanZero), () => {
									// 如果距离比当前最近距离2更近
									closestDist2.assign(dist);
									closestPos2.assign(otherPosition.xyz);
									closestLife2.assign(otherPart.w);
								});
							});
						});

						// 4. 更新连接线
						// 获取连接线存储缓冲区的引用
						const linksPositions = storage(linksVerticesSBA, 'vec4', linksVerticesSBA.count);
						const linksColors = storage(linksColorsSBA, 'vec4', linksColorsSBA.count);
						
						// 计算当前粒子连接线的起始索引
						// 每个粒子有两个连接线，每个连接线4个顶点，共8个顶点
						const firstLinkIndex = instanceIndex.mul(8);      // 第一个连接线起始索引
						const secondLinkIndex = firstLinkIndex.add(4);    // 第二个连接线起始索引

						// 设置第一个连接线的四个顶点位置
						// 连接线是一个带状四边形，连接当前粒子和最近粒子1
						linksPositions.element(firstLinkIndex).xyz.assign(position);
						linksPositions.element(firstLinkIndex).y.addAssign(linksWidth); // 上边缘
						
						linksPositions.element(firstLinkIndex.add(1)).xyz.assign(position);
						linksPositions.element(firstLinkIndex.add(1)).y.addAssign(linksWidth.negate()); // 下边缘
						
						linksPositions.element(firstLinkIndex.add(2)).xyz.assign(closestPos1);
						linksPositions.element(firstLinkIndex.add(2)).y.addAssign(linksWidth.negate());
						
						linksPositions.element(firstLinkIndex.add(3)).xyz.assign(closestPos1);
						linksPositions.element(firstLinkIndex.add(3)).y.addAssign(linksWidth);

						// 设置第二个连接线的四个顶点位置
						// 连接当前粒子和最近粒子2
						linksPositions.element(secondLinkIndex).xyz.assign(position);
						linksPositions.element(secondLinkIndex).y.addAssign(linksWidth);
						
						linksPositions.element(secondLinkIndex.add(1)).xyz.assign(position);
						linksPositions.element(secondLinkIndex.add(1)).y.addAssign(linksWidth.negate());
						
						linksPositions.element(secondLinkIndex.add(2)).xyz.assign(closestPos2);
						linksPositions.element(secondLinkIndex.add(2)).y.addAssign(linksWidth.negate());
						
						linksPositions.element(secondLinkIndex.add(3)).xyz.assign(closestPos2);
						linksPositions.element(secondLinkIndex.add(3)).y.addAssign(linksWidth);

						// 设置连接线颜色
						const linkColor = getInstanceColor(instanceIndex); // 使用粒子颜色

						// 计算连接线透明度
						// 透明度基于两个连接粒子中较小的生命周期
						// 使用幂函数(0.8)使透明度变化更自然
						const l1 = max(0.0, min(closestLife1, life)).pow(0.8); // 第一个连接线透明度
						const l2 = max(0.0, min(closestLife2, life)).pow(0.8); // 第二个连接线透明度

						// 为两个连接线的所有顶点设置颜色和透明度
						Loop(4, ({ i }) => {
							// 第一个连接线的4个顶点
							linksColors.element(firstLinkIndex.add(i)).xyz.assign(linkColor);
							linksColors.element(firstLinkIndex.add(i)).w.assign(l1);
							
							// 第二个连接线的4个顶点
							linksColors.element(secondLinkIndex.add(i)).xyz.assign(linkColor);
							linksColors.element(secondLinkIndex.add(i)).w.assign(l2);
						});
					});
				})().compute(nbParticles).setName('Update Particles'); // 执行8192次，为所有粒子更新

				// ==================== 创建计算着色器：生成新粒子 ====================
				spawnParticles = Fn(() => {
					// 计算要生成的粒子索引（循环使用粒子数组）
					// spawnIndex是起始索引，instanceIndex是当前计算实例的索引
					const particleIndex = spawnIndex.add(instanceIndex).mod(nbParticles).toInt();
					
					// 获取粒子数据
					const position = particlePositions.element(particleIndex).xyz;
					const life = particlePositions.element(particleIndex).w;
					const velocity = particleVelocities.element(particleIndex).xyz;

					// 设置粒子为活着状态（生命周期=1）
					life.assign(1.0);

					// 生成随机球面方向（用于初始位置和速度的随机偏移）
					const rRange = float(0.01); // 随机范围
					
					// 使用哈希函数生成随机角度
					const rTheta = hash(particleIndex).mul(TWO_PI);    // 随机经度角 [0, 2π]
					const rPhi = hash(particleIndex.add(1)).mul(PI);   // 随机纬度角 [0, π]
					
					// 将球面坐标转换为笛卡尔坐标
					const rx = sin(rTheta).mul(cos(rPhi));
					const ry = sin(rTheta).mul(sin(rPhi));
					const rz = cos(rTheta);
					const rDir = vec3(rx, ry, rz); // 随机方向向量

					// 计算生成位置
					// 在上一帧生成位置和当前生成位置之间插值
					// 这样可以使新生成的粒子在鼠标移动轨迹上分布
					const pos = mix(
						previousSpawnPosition, // 上一帧生成位置
						spawnPosition,         // 当前生成位置
						instanceIndex.toFloat().div(nbToSpawn.sub(1).toFloat()).clamp() // 插值因子
					);
					
					// 最终位置 = 插值位置 + 随机方向 × 随机范围
					position.assign(pos.add(rDir.mul(rRange)));

					// 设置初始速度：随机方向 × 5.0
					velocity.assign(rDir.mul(5.0));
				})().compute(nbToSpawn.value).setName('Spawn Particles'); // 每帧生成指定数量的新粒子

				// ==================== 创建背景几何体 ====================
				// 创建一个反向的二十面体作为背景，用于反射和环境效果
				const backgroundGeom = new THREE.IcosahedronGeometry(100, 5) // 创建二十面体，半径100，细分5级
					.applyMatrix4(new THREE.Matrix4().makeScale(-1, 1, 1)); // 反转X轴，使内表面可见
				
				// 创建背景材质
				const backgroundMaterial = new THREE.MeshStandardNodeMaterial();
				backgroundMaterial.roughness = 0.4;    // 粗糙度：控制表面光滑程度
				backgroundMaterial.metalness = 0.9;    // 金属度：控制金属感
				backgroundMaterial.flatShading = true; // 平面着色：每个面单独着色
				backgroundMaterial.colorNode = color(0x0); // 颜色：黑色

				// 创建背景网格
				const backgroundMesh = new THREE.Mesh(backgroundGeom, backgroundMaterial);
				scene.add(backgroundMesh); // 添加到场景

				// ==================== 创建光源 ====================
				light = new THREE.PointLight(0xffffff, 3000); // 创建点光源，颜色白色，强度3000
				scene.add(light); // 添加到场景

				// ==================== 创建后期处理效果 ====================
				postProcessing = new THREE.PostProcessing(renderer); // 创建后期处理器

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

				// 创建泛光效果
				// 参数：输入纹理，阈值0.75，强度0.1，半径0.5
				const bloomPass = bloom(scenePassColor, 0.75, 0.1, 0.5);

				// 最终输出 = 原始场景 + 泛光效果（加法混合）
				postProcessing.outputNode = scenePassColor.add(bloomPass);

				// ==================== 创建控制器 ====================
				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true;   // 启用阻尼效果（惯性）
				controls.autoRotate = true;      // 启用自动旋转
				controls.maxDistance = 75;       // 设置最大缩放距离
				
				// 监听窗口大小变化事件
				window.addEventListener('resize', onWindowResize);

				// ==================== 监听指针移动事件 ====================
				window.addEventListener('pointermove', onPointerMove);

				// ==================== 创建调试面板GUI ====================
				const gui = renderer.inspector.createParameters('参数'); // 创建参数面板，标题为"参数"

				// 控制器参数
				gui.add(controls, 'autoRotate').name('自动旋转'); // 添加自动旋转开关
				gui.add(controls, 'autoRotateSpeed', -10.0, 10.0, 0.01).name('自动旋转速度'); // 旋转速度滑块

				// 粒子参数文件夹
				const partFolder = gui.addFolder('粒子参数'); // 创建折叠面板
				partFolder.add(timeScale, 'value', 0.0, 4.0, 0.01).name('时间缩放');
				partFolder.add(nbToSpawn, 'value', 1, 100, 1).name('生成速率');
				partFolder.add(particleSize, 'value', 0.01, 3.0, 0.01).name('粒子大小');
				partFolder.add(particleLifetime, 'value', 0.01, 2.0, 0.01).name('粒子寿命');
				partFolder.add(linksWidth, 'value', 0.001, 0.1, 0.001).name('连接线宽度');
				partFolder.add(colorVariance, 'value', 0.0, 10.0, 0.01).name('颜色变化');
				partFolder.add(colorRotationSpeed, 'value', 0.0, 5.0, 0.01).name('颜色旋转速度');

				// 湍流参数文件夹
				const turbFolder = gui.addFolder('湍流参数');
				turbFolder.add(turbFriction, 'value', 0.0, 0.3, 0.01).name('摩擦力');
				turbFolder.add(turbFrequency, 'value', 0.0, 1.0, 0.01).name('频率');
				turbFolder.add(turbAmplitude, 'value', 0.0, 10.0, 0.01).name('振幅');
				turbFolder.add(turbOctaves, 'value', 1, 9, 1).name('八度数');
				turbFolder.add(turbLacunarity, 'value', 1.0, 5.0, 0.01).name('间隙度');
				turbFolder.add(turbGain, 'value', 0.0, 1.0, 0.01).name('增益');

				// 泛光效果文件夹
				const bloomFolder = gui.addFolder('泛光效果');
				bloomFolder.add(bloomPass.threshold, 'value', 0, 2.0, 0.01).name('阈值');
				bloomFolder.add(bloomPass.strength, 'value', 0, 10, 0.01).name('强度');
				bloomFolder.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);
			}

			// ==================== 指针移动事件处理函数 ====================
			function onPointerMove(e) {
				// 将屏幕坐标转换为归一化设备坐标（NDC）
				// NDC范围：x从-1（左）到1（右），y从-1（下）到1（上）
				screenPointer.x = (e.clientX / window.innerWidth) * 2 - 1;  // 水平方向
				screenPointer.y = -(e.clientY / window.innerHeight) * 2 + 1; // 垂直方向（Y轴反转）
			}

			// ==================== 更新指针在场景中的位置 ====================
			function updatePointer() {
				// 从相机和屏幕坐标创建射线
				raycaster.setFromCamera(screenPointer, camera);
				
				// 计算射线与平面的交点
				// raycastPlane是XY平面，交点为scenePointer
				raycaster.ray.intersectPlane(raycastPlane, scenePointer);
			}

			// ==================== 动画循环函数 ====================
			function animate() {
				// 更新计时器
				timer.update();

				// 执行计算着色器
				renderer.compute(updateParticles); // 更新现有粒子的状态
				renderer.compute(spawnParticles);  // 生成新粒子

				// 更新生成索引
				// 循环使用粒子数组：新索引 = (当前索引 + 生成数量) % 总粒子数
				spawnIndex.value = (spawnIndex.value + nbToSpawn.value) % nbParticles;

				// 更新射线检测平面使其面向相机
				// 将平面的法线设置为相机的朝向
				raycastPlane.normal.applyEuler(camera.rotation);
				
				// 更新指针在场景中的位置
				updatePointer();

				// 平滑插值生成位置
				// 保存当前位置为上一帧位置
				previousSpawnPosition.value.copy(spawnPosition.value);
				
				// 当前生成位置向鼠标位置平滑移动（插值因子0.1）
				// 这样粒子生成位置不会立即跳到鼠标位置，而是平滑跟随
				spawnPosition.value.lerp(scenePointer, 0.1);

				// 更新颜色偏移（实现颜色旋转效果）
				// 增量时间 × 颜色旋转速度 × 时间缩放因子
				colorOffset.value += timer.getDelta() * colorRotationSpeed.value * timeScale.value;

				// 移动光源位置（创建动态照明效果）
				const elapsedTime = timer.getElapsed(); // 获取总运行时间
				light.position.set(
					Math.sin(elapsedTime * 0.5) * 30, // X轴：正弦运动
					Math.cos(elapsedTime * 0.3) * 30, // Y轴：余弦运动
					Math.sin(elapsedTime * 0.2) * 30, // Z轴：正弦运动（频率不同）
				);

				// 更新控制器（处理用户输入）
				controls.update();

				// 渲染后期处理效果
				postProcessing.render();
			}

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