<!-- Three.js WebGPU 计算粒子系统 - 功能描述与技术分析
🎯 整体功能概述
这是一个基于WebGPU的高性能粒子系统演示，实现了20万粒子的实时物理模拟与渲染。系统展示了粒子在重力、碰撞、摩擦等物理作用下的自然运动，并支持用户交互影响粒子行为。

✨ 核心功能特性
1. 大规模粒子物理模拟
初始状态：粒子以网格形式整齐排列在XZ平面

物理行为：

重力作用：粒子受重力影响自然下落

地面碰撞：粒子接触地面时发生反弹

能量衰减：碰撞后保留部分能量（弹力系数）

摩擦力：空气摩擦和地面摩擦分别模拟

持续更新：每帧计算所有粒子的新位置和速度

2. 交互式影响系统
鼠标悬停效果：鼠标移动时对附近粒子施加推力

距离衰减：距离鼠标越近的粒子受影响越大

随机性添加：每个粒子的响应略有不同，增加真实感

交互与控制器分离：避免鼠标交互与相机控制冲突

3. 可视化渲染效果
圆形粒子：使用圆形精灵，边缘平滑透明

多彩显示：每个粒子具有独特的随机颜色

尺寸统一：所有粒子大小一致但可动态调整

抗锯齿处理：使用alpha-to-coverage技术优化边缘

4. 用户控制界面
3D导航：支持旋转、缩放、平移的轨道相机控制

实时参数调节：GUI面板动态调整物理参数

响应式设计：自动适应窗口尺寸变化

🔧 主要技术点分析
1. WebGPU计算管线
javascript
// 关键技术特征
- 使用WebGPU计算着色器进行大规模并行计算
- 每个粒子独立计算，GPU并行处理20万个实例
- 计算与渲染分离，提高性能
2. Three.js着色器语言(TSL)
javascript
// TSL声明式计算着色器
const computeUpdate = Fn(() => {
  // GPU端代码，使用类JavaScript语法
  position.addAssign(velocity);
  velocity.addAssign(vec3(0, gravity, 0));
});
TSL优势：

使用JavaScript语法编写GPU着色器

类型安全，编译时错误检查

易于与Three.js场景集成

支持自动Uniform绑定

3. 实例化数据存储
javascript
// 实例化数组存储粒子数据
const positions = instancedArray(particleCount, 'vec3');
const velocities = instancedArray(particleCount, 'vec3');
const colors = instancedArray(particleCount, 'vec3');

// 在计算着色器中访问
const position = positions.element(instanceIndex);
数据结构：

位置数组：每个粒子的3D坐标

速度数组：每个粒子的运动向量

颜色数组：每个粒子的颜色值

所有数据存储在GPU内存中

4. 物理模拟算法
javascript
// 简化版的物理更新步骤
1. velocity += gravity;          // 应用重力
2. position += velocity;         // 更新位置
3. velocity *= friction;         // 应用空气摩擦
4. if(position.y < 0) {          // 碰撞检测
     position.y = 0;             // 位置修正
     velocity.y *= -bounce;      // 反弹计算
     velocity.xz *= 0.9;         // 地面摩擦
   }
5. 交互检测机制
javascript
// 交互处理流程
1. 鼠标坐标 → 归一化设备坐标(NDC)
2. NDC坐标 → 3D射线(Raycaster)
3. 射线与平面求交 → 3D世界坐标
4. 坐标传递到GPU → 影响粒子计算
6. 渲染优化技术
技术	作用	实现方式
实例化渲染	高效绘制大量相同对象	THREE.Sprite实例
Alpha-to-Coverage	透明边缘抗锯齿	material.alphaToCoverage = true
视锥体裁剪禁用	避免粒子系统被错误裁剪	frustumCulled = false
圆形粒子	视觉美观	shapeCircle()透明度
7. 性能架构设计
text
CPU端（JavaScript）
  ├── 用户输入处理
  ├── 参数更新
  └── 调度GPU计算
      ↓
GPU端（WebGPU）
  ├── 计算着色器（并行）
  │   ├── 粒子物理更新
  │   └── 交互影响计算
  └── 渲染管线
      ├── 顶点处理
      ├── 片段处理
      └── 输出到屏幕
8. Uniform系统
javascript
// CPU与GPU数据通信桥梁
const gravity = uniform(-.00098);    // 可动态调整
const bounce = uniform(.8);         // 运行时修改
const size = uniform(.12);          // 立即生效
Uniform特点：

CPU端定义，GPU端只读

可在运行时通过JavaScript修改

立即影响所有粒子的行为

无需重新编译着色器

9. 事件处理与状态管理
javascript
// 交互状态切换
let isOrbitControlsActive = false;

controls.addEventListener('start', () => {
  isOrbitControlsActive = true;    // 控制器激活
});

controls.addEventListener('end', () => {
  isOrbitControlsActive = false;   // 控制器释放
});

// 鼠标事件中检查状态
if (isOrbitControlsActive) return; // 避免冲突
🚀 技术优势总结
性能方面
并行计算：GPU同时处理20万粒子

零拷贝优化：数据直接驻留GPU内存

计算渲染分离：充分利用GPU不同单元

可扩展性
参数化设计：所有物理参数可动态调整

模块化着色器：计算着色器可独立替换

易于扩展：可添加风力、磁力等新效果

用户体验
实时响应：60FPS流畅交互

直观控制：完整的3D导航和参数调节

视觉反馈：即时看到参数调整效果

📊 系统性能指标
粒子数量：200,000个

计算频率：每秒60次（与显示刷新率同步）

数据类型：每个粒子存储位置、速度、颜色（3×vec3）

内存占用：约14.4MB显存（仅粒子数据）

兼容性：需要支持WebGPU的现代浏览器

🔮 潜在扩展方向
更多物理效果：风力、涡流、磁力

粒子生命周期：出生、成长、死亡

碰撞交互：粒子间碰撞检测

数据驱动：从外部加载粒子配置

多级细节：根据距离调整粒子细节 -->


<html lang="zh-CN">
	<head>
		<!-- 中文页面标题 -->
		<title>three.js WebGPU - 计算粒子系统</title>
		<meta charset="utf-8"> <!-- 设置字符编码为UTF-8，支持中文显示 -->
		<!-- 
			视口(viewport)设置：
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放
			minimum-scale=1.0, maximum-scale=1.0: 最小和最大缩放比例都固定为1.0
			这些设置确保了页面在不同设备上的一致显示
		-->
		<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>

		<!-- 
			页面顶部信息展示区域
			id="info"：用于CSS样式定位和JavaScript操作
			这个区域包含标题、logo和说明信息
		-->
		<div id="info">
			<!-- 
				three.js官方logo链接
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全设置，防止新页面访问原页面的window.opener属性
				class="logo-link"：CSS样式类，通常用于设置logo背景图片
			-->
			<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>WebGPU计算粒子系统演示</span>
			</div>

			<!-- 
				副标题/说明文字：
				<small>标签表示小号字体，通常用于附加说明
				这里显示粒子数量和系统特性
			-->
			<small>高性能粒子模拟 · 20万实时粒子 · WebGPU计算着色器 · 交互式物理效果</small>
		</div>

		<!-- 
			导入映射(Import Map)配置：
			这是一个现代JavaScript模块系统功能，允许定义模块别名和路径映射
			type="importmap"：声明这是一个导入映射配置
			作用：简化模块导入语句，使代码更清晰
		-->
		<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模块，支持现代JavaScript特性
			模块内部的代码在严格模式下运行，有自己的作用域
		-->
		<script type="module">

			// ============ 模块导入部分 ============
			// 使用导入映射中定义的别名导入模块
			
			// 导入Three.js核心库（WebGPU版本）
			// * as THREE：将所有导出内容作为THREE对象的属性
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）函数和节点
			// TSL允许使用JavaScript语法编写GPU着色器代码
			import { 
				Fn,          // 创建着色器函数
				If,          // 条件语句节点
				uniform,     // 创建uniform变量（可在CPU端修改的GPU常量）
				float,       // 浮点数类型
				uv,          // UV坐标（纹理坐标）
				vec3,        // 三维向量
				hash,        // 哈希函数，生成伪随机数
				shapeCircle, // 圆形形状函数
				instancedArray, // 创建实例化数组（用于存储每个实例的数据）
				instanceIndex // 当前实例的索引（在计算着色器中自动提供）
			} from 'three/tsl';

			// 导入调试检查器（Inspector）
			// 这是一个可视化调试工具，可以查看场景结构和调整参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			
			// 导入轨道控制器（OrbitControls）
			// 提供鼠标/触摸控制相机旋转、缩放和平移的功能
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ============ 常量定义 ============
			
			// 粒子数量常量
			// 注意：页面标题显示50万粒子，但实际使用20万以获得更好性能
			const particleCount = 200000;

			// ============ TSL Uniform变量定义 ============
			// Uniform变量是在CPU端定义，在GPU端只读的常量
			// 它们可以在运行时通过JavaScript修改
			
			// 重力加速度：控制粒子下落的加速度
			// 负值表示向下，-0.00098是一个适中的重力值
			const gravity = uniform( - .00098 );
			
			// 弹力系数：控制粒子碰撞地面后的反弹程度
			// 0.8表示保留80%的垂直速度（能量损失20%）
			const bounce = uniform( .8 );
			
			// 摩擦力系数：控制粒子运动时的速度衰减
			// 0.99表示每帧保留99%的速度（衰减1%）
			const friction = uniform( .99 );
			
			// 粒子大小：控制每个粒子的显示尺寸
			const size = uniform( .12 );

			// 鼠标点击位置：存储鼠标交互时点击的3D空间坐标
			// 初始化为(0,0,0)，实际值在鼠标移动时更新
			const clickPosition = uniform( new THREE.Vector3() );

			// ============ 全局变量声明 ============
			// 这些变量将在初始化函数中被赋值，并在整个应用中使用
			
			let camera;     // 相机对象：定义观察场景的视角
			let scene;      // 场景对象：包含所有要渲染的3D对象
			let renderer;   // 渲染器对象：负责将3D场景渲染到2D画布
			let controls;   // 轨道控制器实例：处理用户交互控制相机
			let computeParticles; // 粒子更新计算着色器：每帧更新粒子状态
			
			let isOrbitControlsActive; // 轨道控制器激活状态标志
			// 用于在鼠标交互和控制器操作之间切换，防止冲突

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

			// ============ 主初始化函数 ============
			// async关键字表示这是一个异步函数，可以await其他异步操作
			async function init() {

				// 解构赋值获取窗口尺寸
				// 等同于：const innerWidth = window.innerWidth;
				//        const innerHeight = window.innerHeight;
				const { innerWidth, innerHeight } = window;

				// ------------ 1. 相机设置 ------------
				// 创建透视相机(PerspectiveCamera)
				// 参数：
				//   50 - 视野角度(FOV)，单位度，较大的值产生广角效果
				//   innerWidth/innerHeight - 宽高比，匹配窗口比例
				//   0.1 - 近裁剪面，距离相机小于此值的物体不显示
				//   1000 - 远裁剪面，距离相机大于此值的物体不显示
				camera = new THREE.PerspectiveCamera( 50, innerWidth / innerHeight, .1, 1000 );
				
				// 设置相机初始位置
				// x=0：中心位置
				// y=5：高度5个单位
				// z=20：向后20个单位，这样可以看到整个场景
				camera.position.set( 0, 5, 20 );

				// ------------ 2. 场景创建 ------------
				// 创建场景对象，所有3D对象都需要添加到场景中才能被渲染
				scene = new THREE.Scene();

				// ------------ 3. 粒子系统初始化 ------------

				// 创建实例化数组(instancedArray)
				// 这些数组将在GPU中存储每个粒子的数据
				// 参数：
				//   particleCount - 数组长度（粒子数量）
				//   'vec3' - 元素类型（三维向量）
				const positions = instancedArray( particleCount, 'vec3' ); // 位置数组：存储每个粒子的3D坐标
				const velocities = instancedArray( particleCount, 'vec3' ); // 速度数组：存储每个粒子的3D速度向量
				const colors = instancedArray( particleCount, 'vec3' ); // 颜色数组：存储每个粒子的颜色值（RGB）

				// ------------ 4. 计算着色器初始化 ------------

				// 粒子初始布局参数
				const separation = 0.2; // 粒子间距：控制初始网格中粒子之间的距离
				const amount = Math.sqrt( particleCount ); // 每行/列粒子数：计算平方根得到网格边长
				const offset = float( amount / 2 ); // 中心偏移量：使网格以原点为中心

				// 创建粒子初始化计算着色器
				// Fn()函数创建一个TSL函数定义
				const computeInit = Fn( () => {

					// 获取当前计算着色器实例对应的数据元素
					// instanceIndex是内置变量，表示当前处理的实例索引（0到particleCount-1）
					const position = positions.element( instanceIndex ); // 当前粒子的位置
					const color = colors.element( instanceIndex ); // 当前粒子的颜色

					// 计算粒子在网格中的坐标
					// mod()：取模运算，得到列索引（x坐标）
					const x = instanceIndex.mod( amount );
					// div()：整数除法，得到行索引（z坐标）
					const z = instanceIndex.div( amount );

					// 设置初始位置
					// 将粒子排列在XZ平面的网格中
					// (offset - x) * separation：计算X坐标，使网格居中
					position.x = offset.sub( x ).mul( separation );
					// (offset - z) * separation：计算Z坐标，使网格居中
					position.z = offset.sub( z ).mul( separation );
					// Y坐标保持默认值0，粒子将从这个高度开始下落

					// 设置随机颜色
					// hash()函数根据输入生成伪随机数（0到1之间）
					// 为每个粒子生成不同的颜色，增加视觉效果
					color.x = hash( instanceIndex ); // R通道：基于实例索引的随机值
					color.y = hash( instanceIndex.add( 2 ) ); // G通道：基于(索引+2)的随机值
					// B通道保持默认值（可能在其他地方设置或保持0）

				} )() // 立即调用函数，返回计算节点
				.compute( particleCount ) // 指定计算着色器要处理的实例数量
				.setName( '初始化粒子' ); // 设置名称，便于在调试工具中识别

				// ------------ 5. 粒子更新计算着色器 ------------

				// 创建粒子状态更新计算着色器
				// 这个着色器每帧执行，更新所有粒子的物理状态
				const computeUpdate = Fn( () => {

					// 获取当前粒子的位置和速度
					const position = positions.element( instanceIndex );
					const velocity = velocities.element( instanceIndex );

					// 物理模拟步骤：

					// a. 应用重力
					// 创建一个向下（y轴负方向）的重力向量
					// gravity是uniform变量，可以在运行时调整
					velocity.addAssign( vec3( 0.00, gravity, 0.00 ) );
					
					// b. 更新位置
					// 根据速度移动粒子：新位置 = 原位置 + 速度
					position.addAssign( velocity );

					// c. 应用空气摩擦力
					// 每帧速度乘以摩擦系数，使粒子逐渐减速
					velocity.mulAssign( friction );

					// d. 地面碰撞检测和处理
					// 如果粒子的y坐标小于0（低于地面）
					If( position.y.lessThan( 0 ), () => {

						// 将粒子固定在地面上
						position.y = 0;

						// 计算反弹速度
						// 垂直速度反向并乘以弹力系数
						// negate()：取反
						// mul(bounce)：乘以弹力系数（能量损失）
						velocity.y = velocity.y.negate().mul( bounce );

						// 应用地面摩擦力
						// 水平方向速度进一步衰减，模拟地面摩擦
						velocity.x = velocity.x.mul( .9 ); // X方向保留90%速度
						velocity.z = velocity.z.mul( .9 ); // Z方向保留90%速度

					} );

				} );

				// 创建计算节点并设置属性
				computeParticles = computeUpdate() // 创建计算节点
					.compute( particleCount ) // 设置计算规模
					.setName( '更新粒子' ); // 设置显示名称

				// ------------ 6. 创建渲染粒子 ------------

				// 创建精灵材质(SpriteNodeMaterial)
				// Sprite是始终面向相机的2D平面，适合用于粒子效果
				const material = new THREE.SpriteNodeMaterial();
				
				// 设置材质节点：
				// colorNode：颜色节点，决定每个粒子的颜色
				// uv()获取纹理坐标，mul()乘以实例颜色，实现颜色变化
				material.colorNode = uv().mul( colors.element( instanceIndex ) );
				
				// positionNode：位置节点，从positions数组读取每个粒子的位置
				material.positionNode = positions.toAttribute();
				
				// scaleNode：缩放节点，控制粒子大小
				// size是uniform变量，可以统一调整所有粒子大小
				material.scaleNode = size;
				
				// opacityNode：透明度节点，使用圆形形状函数
				// shapeCircle()创建圆形透明度，中心完全不透明，边缘完全透明
				material.opacityNode = shapeCircle();
				
				// alphaToCoverage：启用alpha-to-coverage技术
				// 这是一种抗锯齿技术，特别适合透明物体的边缘平滑
				material.alphaToCoverage = true;
				
				// transparent：启用透明度
				// 必须设置为true才能正确渲染透明效果
				material.transparent = true;

				// 创建精灵粒子系统
				const particles = new THREE.Sprite( material );
				particles.count = particleCount; // 设置实例数量
				particles.frustumCulled = false; // 禁用视锥体裁剪
				// 禁用裁剪可以提高性能，因为粒子数量多且分布广
				scene.add( particles ); // 将粒子系统添加到场景

				// ------------ 7. 场景辅助元素 ------------

				// 添加网格辅助线
				// 参数：
				//   90：网格大小（90个单位）
				//   45：细分数量（45x45网格）
				//   0x303030：网格线颜色（深灰色）
				//   0x303030：中心线颜色（同样深灰色）
				const helper = new THREE.GridHelper( 90, 45, 0x303030, 0x303030 );
				scene.add( helper );

				// 创建不可见的平面，用于鼠标交互
				// 这个平面不会被渲染，但可以检测鼠标点击
				const geometry = new THREE.PlaneGeometry( 200, 200 ); // 200x200的平面
				geometry.rotateX( - Math.PI / 2 ); // 绕X轴旋转-90度，使平面水平
				const plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
				scene.add( plane );

				// 创建光线投射器和指针变量
				// 用于将2D屏幕坐标转换为3D场景坐标
				const raycaster = new THREE.Raycaster(); // 光线投射器：计算鼠标与3D对象的交点
				const pointer = new THREE.Vector2(); // 存储归一化的鼠标坐标（-1到1）

				// ------------ 8. 渲染器初始化 ------------

				// 创建WebGPU渲染器
				// WebGPU是下一代图形API，提供更好的性能和更底层的硬件访问
				renderer = new THREE.WebGPURenderer( { antialias: true } ); // 启用抗锯齿
				
				// 设置设备像素比
				// 匹配显示器的物理像素和CSS像素比例，防止在高DPI屏幕上模糊
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// animate函数将在每次屏幕刷新时被调用（通常60fps）
				renderer.setAnimationLoop( animate );
				
				// 初始化调试检查器
				// Inspector提供可视化调试界面
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// 异步初始化渲染器
				// await等待渲染器完成初始化（包括WebGPU上下文创建等）
				await renderer.init();

				// 执行粒子初始化计算
				// 调用计算着色器，设置粒子的初始位置和颜色
				renderer.compute( computeInit );

				// ------------ 9. 鼠标交互计算着色器 ------------

				// 创建鼠标点击效果计算着色器
				// 当鼠标移动时，这个着色器会给附近的粒子施加推力
				const computeHit = Fn( () => {

					const position = positions.element( instanceIndex );
					const velocity = velocities.element( instanceIndex );

					// 计算当前粒子到鼠标点击位置的距离
					const dist = position.distance( clickPosition );
					
					// 计算从点击位置指向粒子的方向向量
					// 归一化(normalize)使其长度为1
					const direction = position.sub( clickPosition ).normalize();
					
					// 计算影响区域
					// 公式：max(0, 3 - distance)
					// 距离小于3时产生正影响，距离越大影响越小
					const distArea = float( 3 ).sub( dist ).max( 0 );

					// 计算基本推力
					// 距离越近，推力越大
					const power = distArea.mul( .01 );
					
					// 添加随机性
					// 每个粒子的推力略有不同，产生更自然的效果
					const relativePower = power.mul( hash( instanceIndex ).mul( 1.5 ).add( .5 ) );

					// 应用速度变化
					// 新速度 = 原速度 + 方向 * 推力
					velocity.assign( velocity.add( direction.mul( relativePower ) ) );

				} )() // 立即执行函数
				.compute( particleCount ) // 设置计算规模
				.setName( '鼠标交互效果' ); // 设置名称

				// ------------ 10. 鼠标移动事件处理 ------------

				// 鼠标移动事件处理函数
				function onMove( event ) {

					// 如果轨道控制器正在活动（用户正在拖拽旋转视角）
					// 则忽略鼠标交互效果，防止冲突
					if ( isOrbitControlsActive ) return;

					// 将鼠标屏幕坐标转换为归一化设备坐标(NDC)
					// NDC范围：X从-1（左）到1（右），Y从-1（下）到1（上）
					pointer.set( 
						( event.clientX / window.innerWidth ) * 2 - 1, // X坐标转换
						- ( event.clientY / window.innerHeight ) * 2 + 1  // Y坐标转换（Y轴反向）
					);

					// 从相机位置通过鼠标指针方向创建射线
					raycaster.setFromCamera( pointer, camera );

					// 检测射线与交互平面的交点
					// intersectObject()返回射线与指定对象的所有交点数组
					// false表示不递归检查子对象
					const intersects = raycaster.intersectObject( plane, false );

					// 如果有交点（鼠标在平面上方）
					if ( intersects.length > 0 ) {

						// 获取第一个交点（最接近相机的交点）
						const { point } = intersects[ 0 ];

						// 更新点击位置uniform变量的值
						// clickPosition是在GPU中使用的uniform
						// .value访问其JavaScript端表示，.copy()复制坐标值
						clickPosition.value.copy( point );
						clickPosition.value.y = - 1; // 固定Y坐标为-1，使效果在特定高度发生

						// 执行鼠标点击效果计算着色器
						// 这会更新所有粒子的速度，产生推力效果
						renderer.compute( computeHit );

					}

				}

				// 为渲染器的canvas元素添加鼠标移动事件监听
				// 'pointermove'事件同时支持鼠标、触摸和笔输入
				renderer.domElement.addEventListener( 'pointermove', onMove );

				// ------------ 11. 轨道控制器设置 ------------

				// 创建轨道控制器
				// 连接相机和渲染器的DOM元素
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 启用阻尼效果
				// 相机移动会有惯性，停止操作后继续滑动一小段距离
				controls.enableDamping = true;
				
				// 设置相机与目标点的最小距离
				// 防止相机与物体太近或穿过物体
				controls.minDistance = 5;
				
				// 设置相机与目标点的最大距离
				// 防止相机离场景太远
				controls.maxDistance = 200;
				
				// 设置控制器的目标点（相机围绕旋转的中心点）
				// 这里设置在场景下方，适合观察粒子下落
				controls.target.set( 0, - 8, 0 );
				
				// 更新控制器内部状态
				// 必须在设置所有参数后调用一次
				controls.update();

				// 添加控制器事件监听器

				// 当用户开始操作控制器时（按下鼠标）
				controls.addEventListener( 'start', () => {
					isOrbitControlsActive = true; // 标记控制器为激活状态
				} );
				
				// 当用户结束操作控制器时（释放鼠标）
				controls.addEventListener( 'end', () => {
					isOrbitControlsActive = false; // 标记控制器为非激活状态
				} );

				// 触摸控制配置
				// 定义触摸手势与控制器动作的映射
				controls.touches = {
					ONE: null,        // 单指触摸：无操作（禁用单指旋转）
					TWO: THREE.TOUCH.DOLLY_PAN // 双指触摸：缩放和平移
				};

				// ------------ 12. 窗口大小变化事件 ------------

				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新调整渲染尺寸
				window.addEventListener( 'resize', onWindowResize );

				// ------------ 13. GUI调试面板 ------------

				// 创建调试面板的"设置"分类
				const gui = renderer.inspector.createParameters( '物理参数设置' );

				// 添加重力参数控件
				// 参数：uniform变量, 最小值, 最大值, 步长
				gui.add( gravity, 'value', - .0098, 0, 0.0001 )
					.name( '重力加速度' ) // 控件显示名称
					.onChange( ( value ) => {
						// 可以在这里添加值变化时的额外处理
						console.log( '重力调整为:', value );
					} );
				
				// 添加弹力系数控件
				gui.add( bounce, 'value', .1, 1, 0.01 )
					.name( '弹力系数' );
				
				// 添加摩擦力系数控件
				gui.add( friction, 'value', .96, .99, 0.01 )
					.name( '空气摩擦力' );
				
				// 添加粒子大小控件
				gui.add( size, 'value', .12, .5, 0.01 )
					.name( '粒子尺寸' );

				// 初始化完成日志
				console.log( 'Three.js WebGPU粒子系统初始化完成' );
				console.log( '粒子数量:', particleCount );
				console.log( '渲染器类型:', renderer.constructor.name );

			}

			// ============ 窗口大小变化处理函数 ============
			function onWindowResize() {

				// 获取新的窗口尺寸
				const { innerWidth, innerHeight } = window;

				// 更新相机宽高比
				// 必须匹配渲染区域的宽高比，否则图像会被拉伸
				camera.aspect = innerWidth / innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 使渲染输出匹配新的窗口尺寸
				renderer.setSize( innerWidth, innerHeight );

				// 可选：输出尺寸变化信息
				console.log( `窗口尺寸已更新: ${innerWidth} x ${innerHeight}` );

			}

			// ============ 动画循环函数 ============
			// 这个函数由renderer.setAnimationLoop()注册
			// 会在每个动画帧被自动调用（通常是每秒60次）
			function animate() {

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

				// 2. 执行粒子更新计算
				// 调用WebGPU计算着色器，更新所有粒子的物理状态
				// 这是性能关键步骤，WebGPU可以并行处理所有粒子
				renderer.compute( computeParticles );

				// 3. 渲染场景
				// 将3D场景通过相机视角渲染到2D画布
				// 参数：
				//   scene - 要渲染的场景
				//   camera - 使用的相机
				renderer.render( scene, camera );

				// 注意：这里没有显式的requestAnimationFrame调用
				// 因为setAnimationLoop已经处理了动画循环

			}

			// ============ 可选的性能监控代码（示例） ============
			// 如果要添加性能监控，可以取消注释以下代码
			/*
			let frameCount = 0;
			let lastTime = performance.now();
			let fps = 0;
			
			function updateFPS() {
				frameCount++;
				const currentTime = performance.now();
				if (currentTime >= lastTime + 1000) {
					fps = frameCount;
					frameCount = 0;
					lastTime = currentTime;
					console.log(`FPS: ${fps}`);
					// 也可以在页面上显示FPS
					// document.getElementById('fps').textContent = `FPS: ${fps}`;
				}
			}
			
			// 在animate函数中调用updateFPS()
			*/

		</script>
		
		<!-- 
			可选的额外DOM元素
			例如，可以添加一个显示FPS的div
		-->
		<!--
		<div id="fps" style="
			position: fixed;
			top: 10px;
			right: 10px;
			color: white;
			font-family: monospace;
			background: rgba(0,0,0,0.5);
			padding: 5px 10px;
			border-radius: 3px;
			z-index: 1000;
		">FPS: --</div>
		-->
	</body>
</html>