<!-- Three.js GPGPU原行星盘模拟系统 - 代码功能与技术点详解
🎯 一、项目概述
1.1 核心功能
这是一个基于WebGL GPGPU技术的原行星盘演化模拟系统，模拟宇宙尘埃在引力作用下聚集形成行星的过程。系统展示了：

N体引力相互作用：模拟4096个粒子间的万有引力

碰撞与合并机制：粒子碰撞后根据动量守恒合并

动态演化过程：从均匀分布的尘埃盘到行星胚胎的形成

实时参数调节：用户可动态调整物理参数观察不同演化路径

1.2 应用场景
天文教育：可视化行星形成过程

物理模拟教学：展示引力相互作用和碰撞动力学

GPU计算演示：展示GPGPU在科学计算中的应用

交互式科学可视化

🔧 二、核心技术架构
2.1 GPGPU（通用GPU计算）架构
2.1.1 数据存储策略
javascript
// 使用纹理作为数据存储介质
纹理结构：
- 位置纹理：RGBA32F格式，64×64分辨率
  - R通道：X坐标
  - G通道：Y坐标  
  - B通道：Z坐标
  - A通道：保留位（固定1.0）
  
- 速度纹理：RGBA32F格式，64×64分辨率
  - R通道：X方向速度
  - G通道：Y方向速度
  - B通道：Z方向速度
  - A通道：粒子质量
2.1.2 计算管线
text
JavaScript控制层
    ↓
GPU计算渲染器（GPUComputationRenderer）
    ↓
计算着色器（Compute Shaders）
    ├── 位置计算着色器：pos_new = pos_old + vel * Δt
    └── 速度计算着色器：N体引力 + 碰撞检测
    ↓
数据纹理更新（双缓冲）
    ↓  
渲染着色器（Render Shaders）
    ├── 顶点着色器：纹理采样 + 透视缩放
    └── 片段着色器：圆形点渲染
    ↓
屏幕渲染输出
2.2 物理模拟核心算法
2.2.1 N体引力计算（O(n²)复杂度）
glsl
// GPU并行化实现，每个粒子独立计算
for (所有其他粒子j) {
    vec3 dPos = pos_j - pos_i;
    float distance = length(dPos);
    
    // 牛顿万有引力：F = G * m_i * m_j / r²
    float gravityField = gravityConstant * mass_j / (distance * distance);
    
    // 加速度累加
    acceleration += gravityField * normalize(dPos);
}
2.2.2 碰撞检测与处理
glsl
// 条件：距离 < 半径1 + 半径2
if (distance < radius_i + radius_j) {
    // 确定性合并策略：ID小的粒子吸收ID大的粒子
    if (id_i < id_j) {
        // 动量守恒：v_new = (m1*v1 + m2*v2)/(m1+m2)
        vel_i = (vel_i * mass_i + vel_j * mass_j) / (mass_i + mass_j);
        mass_i += mass_j;  // 质量合并
    } else {
        // 被吸收的粒子标记为"死亡"
        mass_i = 0.0;
        vel_i = vec3(0.0);
    }
}
2.2.3 数值积分方法
glsl
// 显式欧拉积分法（简单但有时不稳定）
位置更新：pos += velocity * deltaTime;
速度更新：velocity += acceleration * deltaTime;

// 时间步长固定为1/60秒（60FPS）
#define delta (1.0 / 60.0)
2.3 渲染系统
2.3.1 点精灵技术
glsl
// 顶点着色器：计算粒子大小
gl_PointSize = radius * cameraConstant / (-mvPosition.z);

// 片段着色器：圆形裁剪
float f = length(gl_PointCoord - vec2(0.5, 0.5));
if (f > 0.5) discard;  // 丢弃方形区域外的像素
2.3.2 视觉编码
glsl
// 颜色映射：质量 → 颜色
// 红色(1.0, 0.0, 0.0)：小质量粒子
// 黄色(1.0, 1.0, 0.0)：大质量粒子
vColor = vec4(1.0, mass / 250.0, 0.0, 1.0);
💡 三、关键技术实现细节
3.1 GPU并行计算优化
3.1.1 纹理作为计算缓冲区
javascript
// 创建浮点纹理用于计算
const texture = gpuCompute.createTexture();
// 每个纹素对应一个粒子，RGBA四个通道存储不同物理量
3.1.2 双缓冲技术（Ping-Pong Buffering）
javascript
// 每个计算变量有两个渲染目标
velocityVariable.renderTargets[0]  // 读取缓冲区
velocityVariable.renderTargets[1]  // 写入缓冲区

// 每帧交换角色，避免读写冲突
3.1.3 循环展开与优化
glsl
// GPU上的O(n²)循环，但高度并行化
for (float y = 0.0; y < height; y++) {
    for (float x = 0.0; x < width; x++) {
        // 每个GPU线程处理一个粒子，同时计算所有相互作用
    }
}
3.2 初始条件生成算法
3.2.1 圆盘内均匀分布
javascript
// 拒绝采样法生成单位圆内均匀分布
do {
    x = Math.random() * 2 - 1;
    z = Math.random() * 2 - 1;
    rr = x*x + z*z;
} while (rr > 1);  // 拒绝圆外的点
3.2.2 指数分布控制
javascript
// 半径分布：r = R * rr^exponent
const rExp = radius * Math.pow(rr, exponent);
// exponent控制分布形态：
// exponent < 1：粒子聚集在边缘
// exponent = 1：均匀分布
// exponent > 1：粒子聚集在中心
3.2.3 轨道速度配置
javascript
// 模拟开普勒运动：v ∝ r^(-1/2)
// 这里使用更一般的指数：v = V_max * rr^velocityExponent
const vel = maxVel * Math.pow(rr, velocityExponent);
3.3 用户交互系统
3.3.1 参数分类管理
javascript
effectController = {
    // 动态参数（实时生效）
    gravityConstant: 100.0,  // 引力常数
    density: 0.45,           // 粒子密度
    
    // 静态参数（需重启模拟）
    radius: 300,             // 初始分布半径
    height: 8,               // 垂直分布范围
    exponent: 0.4,           // 径向分布指数
    // ... 更多参数
};
3.3.2 GUI控制面板
javascript
// 使用lil-gui库创建交互界面
const gui = new GUI({ width: 280 });
const folder1 = gui.addFolder('动态参数');
folder1.add(effectController, 'gravityConstant', 0.0, 1000.0, 0.05)
    .onChange(dynamicValuesChanger);
🚀 四、性能优化技术
4.1 GPU计算优化
4.1.1 纹理尺寸选择
javascript
const WIDTH = 64;  // 选择2的幂次方（64=2^6）
// 优势：
// 1. GPU处理效率高
// 2. 内存对齐优化
// 3. 粒子数量适中：64×64=4096个
4.1.2 数据打包策略
glsl
// 充分利用RGBA四个通道
// 位置纹理：xyz位置 + 保留位
// 速度纹理：xyz速度 + 质量
4.1.3 数值稳定性控制
glsl
// 引力场强度限制
gravityField = min(gravityField, 1000.0);
// 防止近距离时数值爆炸
4.2 渲染优化
4.2.1 粒子剔除
glsl
// 质量为0的粒子不渲染
if (mass == 0.0) {
    gl_PointSize = 0.0;  // 点大小为0
}
4.2.2 批次渲染
javascript
// 使用Points一次性渲染所有粒子
const particles = new THREE.Points(geometry, material);
// 比单个渲染Sprite效率高数百倍
4.2.3 矩阵优化
javascript
// 禁用不必要的矩阵更新
particles.matrixAutoUpdate = false;
// 粒子位置由着色器控制，不需要每帧更新模型矩阵
📊 五、物理参数与效果
5.1 关键物理参数
参数	物理意义	取值范围	对模拟的影响
gravityConstant	引力常数G	0.0-1000.0	控制引力强度，值越大聚集越快
density	粒子密度ρ	0.0-10.0	影响粒子半径，值越大半径越小
radius	初始分布半径	10.0-1000.0	系统初始尺度，值越大演化越慢
exponent	半径分布指数	0.0-2.0	控制粒子初始空间分布
velocity	轨道速度	0.0-150.0	离心力与引力的平衡
5.2 典型演化阶段
初始阶段：均匀分布的尘埃粒子

引力聚集：局部密度波动引发引力不稳定

团块形成：粒子碰撞合并形成较大团块

行星胚胎：少数大质量团块主导系统

稳定状态：剩余粒子被大质量体吸收或进入稳定轨道

🔍 六、技术亮点总结
6.1 创新点
完全在浏览器中运行的GPU加速N体模拟

实时交互式参数调整与可视化

物理精确的碰撞与合并算法

高效的纹理数据存储与计算架构

6.2 教育价值
直观展示引力相互作用

演示数值模拟的基本原理

体现GPU并行计算的优势

天文现象的交互式探索

6.3 技术挑战与解决方案
挑战	解决方案
O(n²)计算复杂度	GPU并行化，4096×4096同时计算
数值稳定性	固定时间步长，引力场限制
读写冲突	双缓冲纹理技术
浏览器性能	WebGL 2.0 + Three.js优化
📈 七、扩展可能性
7.1 功能扩展
多物理场耦合：添加电磁力、流体力学

更多碰撞模型：弹性碰撞、碎裂效果

可视化增强：轨迹显示、密度云图

数据导出：模拟结果保存与分析

7.2 性能优化
层次化算法：Barnes-Hut树算法（O(n log n)）

精度提升：高阶数值积分方法

规模扩展：WebGL 2.0 Compute Shaders

多GPU支持：WebGPU技术

7.3 应用拓展
科学教育平台：集成更多物理模拟

研究工具：参数扫描与统计分析

艺术可视化：参数音乐与视觉联动

游戏开发：基于物理的粒子系统

🎓 八、学习价值
这个项目完美展示了：

现代Web技术能力：浏览器已能运行复杂科学计算

GPU计算范式：数据并行与SIMD架构

物理模拟基础：数值方法与稳定性考虑

可视化设计：数据到视觉的有效映射

交互设计：用户与复杂系统的有效互动 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Three.js GPGPU模拟 - 原行星盘形成与碰撞演化</title>
		<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="main.css">
	</head>
	<body>

		<!-- 页面顶部信息显示区域：显示项目信息和当前状态 -->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 
			<span id="protoplanets">原行星盘模拟系统</span> - 
			基于WebGL GPGPU技术的宇宙尘埃碰撞演化仿真
			<br>
			<small>模拟粒子数量：4096个 | 使用GPU并行计算进行N体引力模拟</small>
		</div>

		<!-- 
			第一部分：计算着色器 - 位置更新
			作用：计算每个粒子下一帧的位置
			原理：基于当前位置和速度，使用欧拉积分法更新位置
			技术细节：
			1. 这是一个片段着色器，但在GPGPU中被用作计算内核
			2. 每个片段对应一个粒子的计算
			3. 使用纹理作为数据存储介质
		-->
		<script id="computeShaderPosition" type="x-shader/x-fragment">
			// 定义时间步长（delta time）
			// 使用固定时间步长：1/60秒 ≈ 0.0167秒（60FPS）
			// 固定时间步长有利于数值稳定性，避免因帧率变化导致的模拟不一致
			#define delta ( 1.0 / 60.0 )

			void main() {
				// 计算当前片段的纹理坐标（UV坐标）
				// gl_FragCoord.xy：当前片段在屏幕空间中的坐标（像素）
				// resolution.xy：计算纹理的分辨率（这里为64×64）
				// UV坐标范围：[0, 1]，用于在纹理中采样
				vec2 uv = gl_FragCoord.xy / resolution.xy;

				// 从位置纹理中读取当前帧的位置数据
				// texture2D：纹理采样函数
				// texturePosition：存储所有粒子位置数据的纹理
				// uv：采样坐标
				// 纹理格式：RGBA浮点纹理
				// R：x位置，G：y位置，B：z位置，A：未使用（固定为1.0）
				vec4 tmpPos = texture2D( texturePosition, uv );
				vec3 pos = tmpPos.xyz;  // 提取三维位置向量

				// 从速度纹理中读取当前帧的速度和质量数据
				// 速度纹理格式：RGBA浮点纹理
				// R：x方向速度，G：y方向速度，B：z方向速度，A：粒子质量
				vec4 tmpVel = texture2D( textureVelocity, uv );
				vec3 vel = tmpVel.xyz;  // 提取速度向量
				float mass = tmpVel.w;  // 提取质量（存储在Alpha通道）

				// 质量检查：质量为0表示该粒子已被其他粒子吸收（碰撞合并）
				// 被吸收的粒子不再运动，速度设为0
				if ( mass == 0.0 ) {
					vel = vec3( 0.0 );  // 将速度向量的三个分量都设为0
				}

				// 动力学计算：使用欧拉积分法更新位置
				// 位置更新公式：pos_new = pos_old + velocity * delta_time
				// 这是最简单的数值积分方法，适用于实时模拟
				pos += vel * delta;

				// 输出新的位置数据到位置纹理
				// 这个输出将成为下一帧计算的位置输入
				// 注意：这里使用双缓冲技术避免读写冲突
				gl_FragColor = vec4( pos, 1.0 );
			}
		</script>

		<!-- 
			第二部分：计算着色器 - 速度更新
			作用：计算每个粒子下一帧的速度，包括引力计算和碰撞处理
			原理：基于牛顿万有引力定律和动量守恒定律
			复杂度：O(n²)的N体问题，但通过GPU并行化实现高效计算
			关键技术：使用双重循环遍历所有粒子对
		-->
		<script id="computeShaderVelocity" type="x-shader/x-fragment">
			// 包含Three.js的公共着色器库
			// 这里主要使用其中的PI常量定义
			#include <common>

			// 时间步长定义（与位置着色器保持一致）
			#define delta ( 1.0 / 60.0 )

			// Uniform变量：由JavaScript代码传入的全局参数
			uniform float gravityConstant; // 引力常数G，控制引力强度
			uniform float density;         // 粒子密度ρ，用于计算粒子半径

			// 常量定义：计算纹理的尺寸
			// 这些值在着色器编译时确定，不会改变
			const float width = resolution.x;   // 纹理宽度 = 64
			const float height = resolution.y;  // 纹理高度 = 64

			/**
			 * 根据质量和密度计算粒子半径的函数
			 * 物理原理：球体体积公式 V = (4/3)πr³
			 * 密度定义：ρ = m/V
			 * 推导：r = ³√[ (3m) / (4πρ) ]
			 * @param {float} mass - 粒子质量
			 * @return {float} 粒子半径
			 */
			float radiusFromMass( float mass ) {
				// 计算半径公式：r = cube_root( (3/(4π)) * m/ρ )
				return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 );
			}

			/**
			 * 主函数：计算粒子速度和质量变化
			 * 主要任务：
			 * 1. 计算所有粒子对之间的引力相互作用
			 * 2. 检测和处理粒子碰撞
			 * 3. 更新粒子速度
			 */
			void main() {
				// 计算当前粒子的UV坐标和唯一标识符
				vec2 uv = gl_FragCoord.xy / resolution.xy;
				// 计算粒子ID：将二维纹理坐标转换为一维索引
				// 公式：id = y * width + x
				// 作用：用于碰撞处理时决定哪个粒子吸收哪个
				float idParticle = uv.y * resolution.x + uv.x;

				// 读取当前位置和速度/质量数据
				vec4 tmpPos = texture2D( texturePosition, uv );
				vec3 pos = tmpPos.xyz;  // 当前位置

				vec4 tmpVel = texture2D( textureVelocity, uv );
				vec3 vel = tmpVel.xyz;  // 当前速度
				float mass = tmpVel.w;  // 当前质量

				// 只有质量大于0的粒子才参与物理计算
				// 质量为0表示该粒子已被吸收，不再更新
				if ( mass > 0.0 ) {
					// 根据当前质量和密度计算粒子半径
					// 半径用于碰撞检测和视觉渲染
					float radius = radiusFromMass( mass );
					
					// 初始化加速度向量为0
					// 加速度将通过累加所有其他粒子的引力贡献得到
					vec3 acceleration = vec3( 0.0 );

					// N体引力计算：双重循环遍历所有粒子
					// 外层循环：遍历纹理的每一行
					for ( float y = 0.0; y < height; y++ ) {
						// 内层循环：遍历纹理的每一列
						for ( float x = 0.0; x < width; x++ ) {
							// 计算另一个粒子的纹理坐标
							// 注意：+0.5是为了采样纹理中心，避免精度问题
							vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
							
							// 读取另一个粒子的位置
							vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
							
							// 读取另一个粒子的速度和质量
							vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
							vec3 vel2 = velTemp2.xyz;  // 另一个粒子的速度
							float mass2 = velTemp2.w;  // 另一个粒子的质量
							
							// 计算另一个粒子的ID
							float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;

							// 跳过自相互作用：粒子不与自身产生引力
							if ( idParticle == idParticle2 ) {
								continue;  // 继续下一个粒子
							}

							// 跳过质量为0的粒子（已被吸收的粒子）
							if ( mass2 == 0.0 ) {
								continue;
							}

							// 计算两个粒子之间的相对位置向量
							vec3 dPos = pos2 - pos;  // 从当前粒子指向另一个粒子的向量
							float distance = length( dPos );  // 两个粒子之间的距离
							
							// 计算另一个粒子的半径
							float radius2 = radiusFromMass( mass2 );

							// 防止除零错误：如果距离为0（不应该发生），跳过计算
							if ( distance == 0.0 ) {
								continue;
							}

							/*********************** 碰撞检测与处理 ***********************/
							// 碰撞条件：两个粒子的距离小于它们的半径之和
							if ( distance < radius + radius2 ) {
								// 碰撞处理策略：通过比较粒子ID决定哪个粒子吸收哪个
								// 总是让ID较小的粒子吸收ID较大的粒子
								// 这样可以确保碰撞处理是确定性的，避免竞争条件
								
								if ( idParticle < idParticle2 ) {
									// 当前粒子（ID较小）吸收另一个粒子（ID较大）
									
									// 动量守恒计算合并后的速度：
									// v_new = (m1*v1 + m2*v2) / (m1 + m2)
									// 这是完全非弹性碰撞，碰撞后两个粒子合并为一个
									vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
									
									// 质量相加：合并后的质量等于两个粒子质量之和
									mass += mass2;
									
									// 更新半径：根据新的质量重新计算半径
									radius = radiusFromMass( mass );
								}
								else {
									// 当前粒子（ID较大）被另一个粒子吸收
									
									// 将当前粒子标记为"死亡"
									mass = 0.0;      // 质量设为0（表示已被吸收）
									radius = 0.0;    // 半径设为0
									vel = vec3( 0.0 ); // 速度设为0
									
									// 跳出内层循环，因为当前粒子已不存在
									break;
								}
							}

							/*********************** 引力计算 ***********************/
							// 牛顿万有引力定律：F = G * (m1 * m2) / r²
							// 这里计算的是引力场强度（加速度）：a = F/m1 = G * m2 / r²
							float distanceSq = distance * distance;  // 距离平方
							
							// 计算引力加速度大小
							// 注意：这里只计算了m2对m1的引力，所以除以的是m1的质量
							// 但实际上是除以了m1，所以得到的是加速度
							float gravityField = gravityConstant * mass2 / distanceSq;
							
							// 限制最大引力场强度，防止数值不稳定
							// 当两个粒子非常接近时，引力会变得非常大，可能导致模拟爆炸
							gravityField = min( gravityField, 1000.0 );
							
							// 累加引力加速度
							// normalize(dPos)：单位方向向量，指向另一个粒子
							// gravityField * normalize(dPos)：引力加速度向量
							acceleration += gravityField * normalize( dPos );
						}

						// 如果当前粒子已被吸收（质量=0），提前结束外层循环
						if ( mass == 0.0 ) {
							break;
						}
					}

					// 动力学计算：更新速度
					// 速度更新公式：v_new = v_old + a * delta_time
					// 这是欧拉积分法，简单但有时不够精确
					// 对于实时模拟，这种精度通常可以接受
					vel += delta * acceleration;
				}

				// 输出新的速度和质量数据
				// 这个输出将成为下一帧计算的速度输入
				gl_FragColor = vec4( vel, mass );
			}
		</script>

		<!-- 
			第三部分：顶点着色器 - 粒子渲染
			作用：将计算得到的位置数据转换为屏幕空间坐标
			并计算每个粒子在屏幕上的大小
			技术：使用点精灵（Point Sprites）技术渲染粒子
		-->
		<script type="x-shader/x-vertex" id="particleVertexShader">
			// 包含公共函数库
			#include <common>

			// Uniform变量：由JavaScript代码传入
			uniform sampler2D texturePosition; // 位置纹理（来自计算着色器）
			uniform sampler2D textureVelocity; // 速度纹理（来自计算着色器）
			uniform float cameraConstant;      // 相机常数，用于计算粒子大小
			uniform float density;             // 粒子密度，用于计算半径

			// 输出变量：传递给片段着色器的颜色
			varying vec4 vColor;

			/**
			 * 根据质量和密度计算粒子半径（与计算着色器中的函数相同）
			 * 保持一致性非常重要，否则渲染和计算会不匹配
			 */
			float radiusFromMass( float mass ) {
				return pow( ( 3.0 / ( 4.0 * PI ) ) * mass / density, 1.0 / 3.0 );
			}

			/**
			 * 主函数：计算粒子的屏幕空间位置和大小
			 */
			void main() {
				// 从纹理中读取当前粒子的位置数据
				// uv：顶点属性，在几何体初始化时设置
				// 每个粒子的UV坐标对应纹理中存储该粒子数据的纹素
				vec4 posTemp = texture2D( texturePosition, uv );
				vec3 pos = posTemp.xyz;  // 三维位置

				// 从纹理中读取当前粒子的速度和质量数据
				vec4 velTemp = texture2D( textureVelocity, uv );
				vec3 vel = velTemp.xyz;  // 速度（渲染中未使用）
				float mass = velTemp.w;  // 质量

				// 根据质量设置粒子颜色
				// 颜色方案：RGBA
				// R：红色分量固定为1.0（完全红色）
				// G：绿色分量 = mass / 250.0（质量越大越绿）
				// B：蓝色分量固定为0.0
				// A：Alpha分量固定为1.0（完全不透明）
				// 这样，质量小的粒子显示为红色，质量大的粒子显示为黄色（红+绿）
				vColor = vec4( 1.0, mass / 250.0, 0.0, 1.0 );

				// 将世界空间位置转换到视图空间（相机空间）
				// modelViewMatrix：模型视图矩阵 = 视图矩阵 × 模型矩阵
				// 作用：将世界坐标转换为相机坐标
				vec4 mvPosition = modelViewMatrix * vec4( pos, 1.0 );

				// 根据质量计算粒子半径
				float radius = radiusFromMass( mass );

				// 计算粒子在屏幕上的大小（像素）
				if ( mass == 0.0 ) {
					// 质量为0的粒子不显示（点大小为0）
					gl_PointSize = 0.0;
				}
				else {
					// 粒子大小计算公式：size = radius * cameraConstant / (-z)
					// radius：粒子实际半径（世界单位）
					// cameraConstant：相机常数，将世界单位转换为像素
					// -mvPosition.z：粒子在相机空间中的深度（负值，取负得到正值）
					// 这个公式实现了透视缩放：远处的粒子看起来更小
					// 原理：物体在视网膜上的投影大小与距离成反比
					gl_PointSize = radius * cameraConstant / ( - mvPosition.z );
				}

				// 将视图空间位置转换到裁剪空间（屏幕空间）
				// projectionMatrix：投影矩阵（透视投影或正交投影）
				// 作用：将3D视图坐标转换为2D屏幕坐标
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>

		<!-- 
			第四部分：片段着色器 - 粒子渲染
			作用：为每个粒子片段（像素）着色
			技术：使用圆形点精灵，丢弃方形区域外的片段
		-->
		<script type="x-shader/x-fragment" id="particleFragmentShader">
			// 输入变量：从顶点着色器传递过来的颜色
			varying vec4 vColor;

			void main() {
				// 颜色检查：如果绿色分量为0（即质量为0），丢弃该片段
				// 这样可以避免渲染已被吸收的粒子
				if ( vColor.y == 0.0 ) discard;

				// 计算当前片段到粒子中心的距离
				// gl_PointCoord：点在点精灵内的坐标，范围[0, 1]
				// 点精灵是方形的，中心在(0.5, 0.5)
				// length(gl_PointCoord - vec2(0.5, 0.5))：到中心的距离
				float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) );
				
				// 丢弃圆形区域外的片段
				// 如果距离大于0.5（半径），说明在圆形外部
				// discard：立即丢弃当前片段，不进行后续处理
				// 这比使用Alpha混合更高效，因为避免了过度绘制
				if ( f > 0.5 ) {
					discard;
				}
				
				// 输出最终颜色
				// 对于圆形区域内的片段，使用从顶点着色器传来的颜色
				gl_FragColor = vColor;
			}
		</script>

		<!-- 
			importmap：模块导入映射表
			作用：告诉浏览器如何解析模块导入路径
			这是ES6模块系统的特性，现代浏览器支持
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			第五部分：主JavaScript代码
			作用：初始化Three.js场景、设置GPGPU模拟、处理用户交互
			技术：使用ES6模块化，现代JavaScript特性
		-->
		<script type="module">
			// 导入Three.js核心库
			// 使用ES6模块化语法，现代浏览器原生支持
			import * as THREE from 'three';

			// 导入性能统计模块：显示FPS、渲染时间等性能指标
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入GUI库：创建交互式控制面板
			// lil-gui是一个轻量级的GUI库，专为Three.js设计
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入轨道控制器：允许用户用鼠标控制相机
			// 功能：旋转、缩放、平移视图
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GPU计算渲染器：核心GPGPU组件
			// 这个类封装了在GPU上执行通用计算的功能
			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';

			// 常量定义：纹理宽度（决定粒子总数）
			// 纹理尺寸：64×64 = 4096个粒子
			// 选择64的原因：
			// 1. 2的幂次方（64=2^6），GPU处理效率高
			// 2. 粒子数量适中：足够演示效果，又不至于性能过低
			// 3. 纹理内存：64×64×4(RGBA)×4(字节/浮点数)×2(双缓冲) ≈ 128KB
			const WIDTH = 64;

			// 全局变量声明
			let container;     // 页面容器div
			let stats;         // 性能统计对象
			let camera;        // 相机对象
			let scene;         // 场景对象
			let renderer;      // 渲染器对象
			let geometry;      // 粒子几何体

			// 粒子总数计算：纹理宽度×高度
			const PARTICLES = WIDTH * WIDTH;

			// GPU计算相关变量
			let gpuCompute;          // GPU计算渲染器实例
			let velocityVariable;    // 速度计算变量
			let positionVariable;    // 位置计算变量
			let velocityUniforms;    // 速度计算着色器的uniforms
			let particleUniforms;    // 粒子渲染着色器的uniforms
			let effectController;    // 效果控制器（存储所有模拟参数）

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

			/**
			 * 主初始化函数
			 * 任务：初始化所有Three.js组件、设置场景、启动模拟
			 * 调用顺序严格按照依赖关系
			 */
			function init() {
				// 1. 创建页面容器
				container = document.createElement('div');
				document.body.appendChild(container);

				// 2. 创建透视相机
				// 参数说明：
				// 75：视野角度（Field of View），单位度，越大看到的范围越广
				// window.innerWidth/window.innerHeight：宽高比
				// 5：近裁剪面距离，小于此距离的物体不被渲染
				// 15000：远裁剪面距离，大于此距离的物体不被渲染
				camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 5, 15000);
				camera.position.y = 120;   // 设置相机Y轴位置（高度）
				camera.position.z = 400;   // 设置相机Z轴位置（向后距离）

				// 3. 创建场景
				// 场景是所有3D对象的容器，包含相机、灯光、物体等
				scene = new THREE.Scene();

				// 4. 创建WebGL渲染器
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：适应高DPI屏幕（Retina显示屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器大小为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数
				// 与requestAnimationFrame不同，setAnimationLoop会自动处理暂停/继续
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到容器中
				container.appendChild(renderer.domElement);

				// 5. 创建轨道控制器
				// 允许用户通过鼠标交互控制相机
				const controls = new OrbitControls(camera, renderer.domElement);
				controls.minDistance = 100;   // 最小缩放距离（防止相机进入物体内部）
				controls.maxDistance = 1000;  // 最大缩放距离

				// 6. 初始化效果控制器（模拟参数集合）
				// 这些参数可以通过GUI界面实时调整
				effectController = {
					// ========== 动态参数：修改后立即生效，无需重启模拟 ==========
					gravityConstant: 100.0,  // 引力常数G
					// 物理意义：控制引力强度
					// 取值范围：[0.0, 1000.0]
					// 实际影响：值越大，粒子间引力越强，聚集速度越快
					
					density: 0.45,           // 粒子密度ρ
					// 物理意义：单位体积的质量
					// 取值范围：[0.0, 10.0]
					// 实际影响：值越大，相同质量的粒子半径越小，碰撞概率降低

					// ========== 静态参数：修改后需要重启模拟才能生效 ==========
					radius: 300,             // 初始分布半径
					// 物理意义：粒子初始分布区域的半径
					// 取值范围：[10.0, 1000.0]
					// 实际影响：值越大，粒子初始分布越分散，聚集时间越长
					
					height: 8,               // 初始分布高度
					// 物理意义：粒子在Y轴方向的分布范围
					// 取值范围：[0.0, 50.0]
					// 实际影响：值越大，粒子在垂直方向越分散
					
					exponent: 0.4,           // 半径分布指数
					// 数学意义：控制粒子在半径方向分布的概率密度函数指数
					// 取值范围：[0.0, 2.0]
					// 实际影响：值越小，粒子越倾向于分布在边缘；值越大，分布越均匀
					
					maxMass: 15.0,           // 最大初始质量
					// 物理意义：粒子初始质量的最大值
					// 取值范围：[1.0, 50.0]
					// 实际影响：值越大，初始粒子质量差异越大，模拟结果变化越快
					// 注意：实际质量会按比例缩放：maxMass * 1024 / PARTICLES
					
					velocity: 70,            // 初始轨道速度
					// 物理意义：粒子绕中心旋转的初始速度
					// 取值范围：[0.0, 150.0]
					// 实际影响：值越大，粒子轨道速度越快，离心力越大，越难聚集
					
					velocityExponent: 0.2,   // 速度分布指数
					// 数学意义：控制速度随半径变化的指数
					// 取值范围：[0.0, 1.0]
					// 物理意义：模拟开普勒定律（行星轨道速度随距离变化）
					// 实际影响：值越大，内外速度差异越大
					
					randVelocity: 0.001      // 随机速度分量
					// 物理意义：给每个粒子添加的随机速度大小
					// 取值范围：[0.0, 50.0]
					// 实际影响：值越大，系统初始越混乱，但有助于打破对称性
				};

				// 7. 初始化GPU计算渲染器
				// 这是GPGPU模拟的核心组件
				initComputeRenderer();

				// 8. 初始化性能统计显示
				// Stats.js会在左上角显示FPS、渲染时间等性能指标
				stats = new Stats();
				container.appendChild(stats.dom);

				// 9. 添加窗口大小调整事件监听
				// 当用户改变浏览器窗口大小时，自动调整渲染
				window.addEventListener('resize', onWindowResize);

				// 10. 初始化GUI控制面板
				// 创建交互式参数控制界面
				initGUI();

				// 11. 初始化原行星系统
				// 创建粒子几何体和着色器材质
				initProtoplanets();

				// 12. 初始化动态值修改器
				// 将初始参数值传递给着色器
				dynamicValuesChanger();
			}

			/**
			 * 初始化GPU计算渲染器
			 * 核心任务：设置GPGPU计算管线
			 * 技术原理：
			 * 1. 使用纹理作为数据存储介质
			 * 2. 使用片段着色器作为计算内核
			 * 3. 使用双缓冲技术避免读写冲突
			 */
			function initComputeRenderer() {
				// 创建GPU计算渲染器实例
				// 参数：纹理宽度，纹理高度，WebGL渲染器
				gpuCompute = new GPUComputationRenderer(WIDTH, WIDTH, renderer);

				// 创建两个数据纹理，用于存储粒子状态
				// 纹理类型：浮点纹理（RGBA32F），每个通道32位浮点数
				// 纹理尺寸：WIDTH×WIDTH（64×64）
				// 每个纹素存储一个粒子的状态数据
				const dtPosition = gpuCompute.createTexture();  // 位置纹理
				const dtVelocity = gpuCompute.createTexture();  // 速度纹理

				// 用初始数据填充纹理
				// 根据effectController中的参数生成初始粒子分布
				fillTextures(dtPosition, dtVelocity);

				// 添加计算变量：速度计算
				// 参数说明：
				// 1. 'textureVelocity'：变量名称，用于内部引用
				// 2. 计算着色器源码：从script标签中获取
				// 3. dtVelocity：初始数据纹理
				velocityVariable = gpuCompute.addVariable(
					'textureVelocity',
					document.getElementById('computeShaderVelocity').textContent,
					dtVelocity
				);
				
				// 添加计算变量：位置计算
				positionVariable = gpuCompute.addVariable(
					'texturePosition',
					document.getElementById('computeShaderPosition').textContent,
					dtPosition
				);

				// 设置变量依赖关系（重要！）
				// 定义计算顺序和数据流
				// 速度计算依赖于：位置纹理和速度纹理
				// 这是因为速度计算需要当前位置（用于引力计算）和当前速度（用于更新）
				gpuCompute.setVariableDependencies(velocityVariable, [positionVariable, velocityVariable]);
				
				// 位置计算依赖于：位置纹理和速度纹理
				// 这是因为位置计算需要当前位置和当前速度
				gpuCompute.setVariableDependencies(positionVariable, [positionVariable, velocityVariable]);

				// 获取速度着色器的uniforms对象
				// uniforms是着色器中的全局变量，可以由JavaScript代码动态修改
				velocityUniforms = velocityVariable.material.uniforms;

				// 初始化uniforms值
				// 注意：这里只是设置初始值，实际值会在dynamicValuesChanger()中更新
				velocityUniforms['gravityConstant'] = { value: 0.0 };
				velocityUniforms['density'] = { value: 0.0 };

				// 初始化GPU计算系统
				// 这个调用会：
				// 1. 编译着色器
				// 2. 创建帧缓冲对象（FBO）
				// 3. 设置渲染目标
				// 4. 检查错误
				const error = gpuCompute.init();
				
				// 错误处理：如果初始化失败，输出错误信息
				if (error !== null) {
					console.error('GPU计算渲染器初始化失败：', error);
				}
			}

			/**
			 * 重启模拟函数
			 * 功能：使用新的参数重新开始模拟
			 * 应用场景：当用户修改了"静态参数"后调用
			 */
			function restartSimulation() {
				// 创建新的数据纹理
				const dtPosition = gpuCompute.createTexture();
				const dtVelocity = gpuCompute.createTexture();

				// 使用当前参数填充纹理（生成新的初始状态）
				fillTextures(dtPosition, dtVelocity);

				// 将新数据渲染到计算纹理中
				// 注意：这里使用了双缓冲技术，每个变量有两个渲染目标
				// 渲染目标[0]和[1]交替作为读取和写入目标
				
				// 更新位置纹理的两个渲染目标
				gpuCompute.renderTexture(dtPosition, positionVariable.renderTargets[0]);
				gpuCompute.renderTexture(dtPosition, positionVariable.renderTargets[1]);
				
				// 更新速度纹理的两个渲染目标
				gpuCompute.renderTexture(dtVelocity, velocityVariable.renderTargets[0]);
				gpuCompute.renderTexture(dtVelocity, velocityVariable.renderTargets[1]);
			}

			/**
			 * 初始化原行星系统
			 * 功能：创建用于渲染的粒子系统
			 * 技术：使用BufferGeometry和ShaderMaterial
			 */
			function initProtoplanets() {
				// 创建缓冲几何体
				// BufferGeometry比Geometry更高效，直接操作二进制数据
				geometry = new THREE.BufferGeometry();

				// 创建位置缓冲区
				// 数据类型：Float32Array，每个粒子3个浮点数（x, y, z）
				// 大小：粒子数 × 3
				const positions = new Float32Array(PARTICLES * 3);
				let p = 0;  // 数组索引指针

				// 初始化位置数据
				// 注意：这里的初始位置只是占位符
				// 实际位置数据来自计算纹理，由着色器动态更新
				for (let i = 0; i < PARTICLES; i++) {
					positions[p++] = (Math.random() * 2 - 1) * effectController.radius;  // X坐标：[-radius, radius]
					positions[p++] = 0;  // Y坐标：初始在平面上（Z=0平面）
					positions[p++] = (Math.random() * 2 - 1) * effectController.radius;  // Z坐标：[-radius, radius]
				}

				// 创建UV坐标缓冲区
				// UV坐标用于在着色器中采样计算纹理
				// 每个粒子需要2个浮点数（u, v）
				const uvs = new Float32Array(PARTICLES * 2);
				p = 0;  // 重置索引指针

				// 设置UV坐标
				// UV坐标范围：[0, 1]，对应纹理上的位置
				// 每个粒子的UV坐标对应计算纹理中存储该粒子数据的纹素
				for (let j = 0; j < WIDTH; j++) {
					for (let i = 0; i < WIDTH; i++) {
						uvs[p++] = i / (WIDTH - 1);  // u坐标：从0到1
						uvs[p++] = j / (WIDTH - 1);  // v坐标：从0到1
					}
				}

				// 将缓冲区添加到几何体
				// BufferAttribute将JavaScript数组转换为GPU缓冲区
				geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
				geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, 2));

				// 创建粒子着色器的uniforms对象
				// uniforms是着色器与JavaScript通信的桥梁
				particleUniforms = {
					'texturePosition': { value: null },      // 位置纹理（从计算着色器来）
					'textureVelocity': { value: null },      // 速度纹理（从计算着色器来）
					'cameraConstant': { value: getCameraConstant(camera) },  // 相机常数
					'density': { value: 0.0 }                // 密度（需要与计算着色器一致）
				};

				// 创建自定义着色器材质
				// ShaderMaterial允许完全控制顶点和片段着色器
				const material = new THREE.ShaderMaterial({
					uniforms: particleUniforms,  // 传入uniforms对象
					vertexShader: document.getElementById('particleVertexShader').textContent,
					fragmentShader: document.getElementById('particleFragmentShader').textContent
				});

				// 创建点云（粒子系统）
				// Points是Three.js中用于渲染大量粒子的高效方式
				const particles = new THREE.Points(geometry, material);
				
				// 禁用自动矩阵更新
				// 因为粒子位置由着色器控制，不需要每帧更新模型矩阵
				particles.matrixAutoUpdate = false;
				
				// 更新一次矩阵（初始状态）
				particles.updateMatrix();

				// 将粒子系统添加到场景
				scene.add(particles);
			}

			/**
			 * 填充纹理数据函数
			 * 功能：根据模拟参数生成粒子的初始状态
			 * 物理原理：模拟原行星盘（protoplanetary disk）的初始状态
			 * @param {THREE.DataTexture} texturePosition - 位置纹理
			 * @param {THREE.DataTexture} textureVelocity - 速度纹理
			 */
			function fillTextures(texturePosition, textureVelocity) {
				// 获取纹理的数据数组
				// 数据格式：RGBA，每个通道32位浮点数
				// 长度：WIDTH × WIDTH × 4 = 64×64×4 = 16384
				const posArray = texturePosition.image.data;
				const velArray = textureVelocity.image.data;

				// 从效果控制器获取所有参数
				const radius = effectController.radius;
				const height = effectController.height;
				const exponent = effectController.exponent;
				const maxMass = effectController.maxMass * 1024 / PARTICLES;  // 质量缩放
				const maxVel = effectController.velocity;
				const velExponent = effectController.velocityExponent;
				const randVel = effectController.randVelocity;

				// 遍历所有粒子（每次迭代处理一个粒子）
				// 步长为4（因为每个粒子占用4个数组元素：RGBA）
				for (let k = 0, kl = posArray.length; k < kl; k += 4) {
					/*********************** 生成随机位置（在圆盘内） ***********************/
					// 目标：在半径为1的圆盘内生成均匀分布的随机点
					let x, z, rr;  // x,z坐标和半径平方
					
					// 使用拒绝采样法（rejection sampling）
					// 原理：在正方形内生成随机点，只接受落在圆内的点
					do {
						// 生成[-1, 1]范围内的随机数
						x = (Math.random() * 2 - 1);
						z = (Math.random() * 2 - 1);
						// 计算到原点的距离平方
						rr = x * x + z * z;
					} while (rr > 1);  // 如果点在圆外，重新生成
					
					// 计算实际半径
					rr = Math.sqrt(rr);

					/*********************** 应用半径分布指数 ***********************/
					// 公式：r_actual = radius × rr^exponent
					// 当exponent=1时：均匀分布
					// 当exponent<1时：粒子更倾向于分布在边缘
					// 当exponent>1时：粒子更倾向于分布在中心
					const rExp = radius * Math.pow(rr, exponent);

					/*********************** 计算初始轨道速度 ***********************/
					// 模拟开普勒运动：轨道速度随半径变化
					// 公式：v = maxVel × rr^velExponent
					const vel = maxVel * Math.pow(rr, velExponent);
					
					// 速度方向：垂直于位置向量（实现圆周运动）
					// 物理原理：离心力与引力平衡时，粒子做圆周运动
					// 对于位置(x,z)，垂直方向是(z,-x)或(-z,x)
					// 这里使用(z,-x)实现逆时针旋转
					const vx = vel * z + (Math.random() * 2 - 1) * randVel;  // 主要速度分量+随机扰动
					const vy = (Math.random() * 2 - 1) * randVel * 0.05;     // 垂直方向小扰动
					const vz = -vel * x + (Math.random() * 2 - 1) * randVel; // 主要速度分量+随机扰动

					/*********************** 计算最终位置 ***********************/
					// 将归一化坐标映射到实际半径
					x *= rExp;
					z *= rExp;
					// Y坐标：在[-height/2, height/2]范围内随机分布
					const y = (Math.random() * 2 - 1) * height;

					/*********************** 分配随机质量 ***********************/
					// 质量范围：[1, maxMass]
					// 均匀分布
					const mass = Math.random() * maxMass + 1;

					/*********************** 填充位置纹理数据 ***********************/
					// 位置纹理格式：RGBA
					posArray[k + 0] = x;   // R通道：X坐标
					posArray[k + 1] = y;   // G通道：Y坐标
					posArray[k + 2] = z;   // B通道：Z坐标
					posArray[k + 3] = 1;   // A通道：未使用，固定为1.0

					/*********************** 填充速度纹理数据 ***********************/
					// 速度纹理格式：RGBA
					velArray[k + 0] = vx;     // R通道：X方向速度
					velArray[k + 1] = vy;     // G通道：Y方向速度
					velArray[k + 2] = vz;     // B通道：Z方向速度
					velArray[k + 3] = mass;   // A通道：粒子质量
				}
			}

			/**
			 * 窗口大小调整事件处理函数
			 * 功能：响应浏览器窗口大小变化，重新调整渲染
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// 宽高比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 必须调用此方法，否则渲染会变形
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 使渲染器填充整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 更新相机常数
				// 相机常数影响粒子在屏幕上的大小
				// 窗口大小变化时，需要重新计算
				particleUniforms['cameraConstant'].value = getCameraConstant(camera);
			}

			/**
			 * 动态更新uniform值函数
			 * 功能：将JavaScript中的参数值传递给着色器
			 * 调用时机：当用户通过GUI修改参数时
			 */
			function dynamicValuesChanger() {
				// 更新计算着色器的uniforms
				// 这些值会在下一帧计算时生效
				velocityUniforms['gravityConstant'].value = effectController.gravityConstant;
				velocityUniforms['density'].value = effectController.density;
				
				// 更新渲染着色器的uniforms
				// 这些值会在下一帧渲染时生效
				particleUniforms['density'].value = effectController.density;
			}

			/**
			 * 初始化GUI控制面板函数
			 * 功能：创建交互式参数控制界面
			 * 使用库：lil-gui（轻量级GUI库）
			 */
			function initGUI() {
				// 创建GUI实例
				// 参数：配置对象，width设置面板宽度
				const gui = new GUI({ width: 280 });

				// ==================== 第一个文件夹：动态参数 ====================
				// 动态参数：修改后立即生效，无需重启模拟
				const folder1 = gui.addFolder('动态参数（实时生效）');
				
				// 添加引力常数控制器
				folder1.add(effectController, 'gravityConstant', 0.0, 1000.0, 0.05)
					.name('引力常数')  // 显示名称
					.onChange(dynamicValuesChanger);  // 值改变时的回调函数
				
				// 添加密度控制器
				folder1.add(effectController, 'density', 0.0, 10.0, 0.001)
					.name('粒子密度')
					.onChange(dynamicValuesChanger);

				// ==================== 第二个文件夹：静态参数 ====================
				// 静态参数：修改后需要重启模拟才能生效
				const folder2 = gui.addFolder('静态参数（需重启）');
				
				// 添加各种静态参数控制器
				folder2.add(effectController, 'radius', 10.0, 1000.0, 1.0)
					.name('分布半径');
				folder2.add(effectController, 'height', 0.0, 50.0, 0.01)
					.name('分布高度');
				folder2.add(effectController, 'exponent', 0.0, 2.0, 0.001)
					.name('半径分布指数');
				folder2.add(effectController, 'maxMass', 1.0, 50.0, 0.1)
					.name('最大初始质量');
				folder2.add(effectController, 'velocity', 0.0, 150.0, 0.1)
					.name('初始轨道速度');
				folder2.add(effectController, 'velocityExponent', 0.0, 1.0, 0.01)
					.name('速度分布指数');
				folder2.add(effectController, 'randVelocity', 0.0, 50.0, 0.1)
					.name('随机速度分量');

				// ==================== 重启模拟按钮 ====================
				// 创建一个包含重启函数的对象
				const buttonRestart = {
					restartSimulation: function() {
						restartSimulation();
					}
				};

				// 添加重启按钮
				folder2.add(buttonRestart, 'restartSimulation')
					.name('重启模拟');

				// 默认打开两个文件夹（展开状态）
				folder1.open();
				folder2.open();
			}

			/**
			 * 计算相机常数函数
			 * 功能：计算将3D世界中的尺寸转换为屏幕像素尺寸的常数
			 * 物理原理：透视投影中的尺寸计算
			 * @param {THREE.PerspectiveCamera} camera - 相机对象
			 * @returns {number} 相机常数
			 */
			function getCameraConstant(camera) {
				// 相机常数计算公式：
				// constant = window.innerHeight / (tan(FOV/2) / zoom)
				// 推导过程：
				// 1. 在透视投影中，物体在屏幕上的大小与其到相机的距离成反比
				// 2. tan(FOV/2) 表示半视角的正切值
				// 3. 除以zoom考虑相机的缩放
				// 4. 乘以window.innerHeight将归一化坐标转换为像素坐标
				return window.innerHeight / (Math.tan(THREE.MathUtils.DEG2RAD * 0.5 * camera.fov) / camera.zoom);
			}

			/**
			 * 动画循环函数
			 * 功能：每一帧调用，驱动整个模拟和渲染循环
			 * 技术：使用渲染器的setAnimationLoop方法
			 */
			function animate() {
				// 1. 调用渲染函数
				render();
				
				// 2. 更新性能统计显示
				// stats.update()会更新FPS、帧时间等统计信息
				stats.update();
			}

			/**
			 * 渲染函数
			 * 功能：执行一帧的GPGPU计算和3D渲染
			 * 流程：先计算，后渲染
			 */
			function render() {
				// 第一步：执行GPU计算
				// gpuCompute.compute()会：
				// 1. 交换渲染目标（双缓冲）
				// 2. 运行计算着色器
				// 3. 更新位置和速度纹理
				gpuCompute.compute();

				// 第二步：将计算结果传递给渲染着色器
				// 从GPU计算渲染器获取当前帧的计算结果纹理
				particleUniforms['texturePosition'].value = gpuCompute.getCurrentRenderTarget(positionVariable).texture;
				particleUniforms['textureVelocity'].value = gpuCompute.getCurrentRenderTarget(velocityVariable).texture;

				// 第三步：渲染3D场景
				// 使用当前相机渲染整个场景
				// 粒子着色器会使用上一步传入的纹理数据
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>