<!-- Three.js WebGPU 雪花计算模拟系统 - 功能与技术详解
🌟 整体功能概述
这是一个基于WebGPU和Three.js的高级实时粒子模拟系统，模拟了10万片雪花的自然下落、堆积和与场景交互的完整物理过程。系统通过GPU计算着色器实现高性能物理模拟，结合先进的后处理效果，创造出沉浸式的冬季雪景视觉效果。

📊 核心功能模块
1. 动态粒子物理模拟
初始分布：10万雪花粒子随机分布在3D空间（XZ平面：-50到50，Y轴：3到503）

物理行为：

重力下落：每个粒子有独立的下落速度

随机摆动：在空中时进行正弦/余弦摆动运动，模拟风效

碰撞检测：实时检测粒子与地面及场景物体的碰撞

状态转换：落地后从动态转为静态，形成积雪效果

2. 碰撞检测系统
高度图渲染：使用正交相机从顶部渲染场景高度信息到纹理

实时采样：粒子每帧采样高度图判断当前位置是否碰撞

精度补偿：考虑粒子半径，避免嵌入地面的视觉效果

3. 双渲染系统
动态粒子：正在下落的白色雪花（图层2）

静态粒子：已落地的积雪（图层1）

分离渲染：不同状态的粒子使用不同的位置缓冲区和渲染图层

4. 环境场景
圣诞树模型：程序化生成的锥体组合，带树干和树冠

茶壶装饰：经典Utah Teapot模型，位于树顶作为亮点

渐变地面：中心不透明、边缘透明的圆形地面

光照系统：方向光+半球光+阴影，营造真实光照效果

5. 后处理效果链
整体辉光：轻微的全场景模糊，增强氛围感

茶壶光晕：茶壶自发光+高斯模糊，创建发光效果

暗角效果：屏幕边缘变暗，聚焦视觉中心

色调映射：ACES Filmic色调映射，增强色彩表现力

🔧 核心技术点
1. WebGPU计算着色器
javascript
// GPU并行计算，每个线程处理一个粒子
computeParticles = computeUpdate().compute(maxParticleCount);
并行处理：10万粒子同时计算，性能远超CPU

数据驱动：粒子数据存储在GPU缓冲区，零拷贝传输

可编程管线：完全控制GPU计算过程

2. TSL（Three.js Shader Language）
可视化着色器编程：在JavaScript中构建着色器节点

节点化材质：positionNode实现实例化位置计算

实时调试：.toInspector()可实时查看中间结果

3. 实例化渲染优化
javascript
// 10万粒子只需要1个Draw Call
staticMaterial.positionNode = positionLocal
  .mul(scaleBuffer.toAttribute())
  .add(posBuffer.toAttribute());
单一几何体：所有粒子共享同一个球体几何体

实例化属性：位置、缩放通过属性数组传递

极致性能：传统方式需要10万Draw Calls，实例化只需1个

4. 多通道渲染架构
text
渲染流程：
1. 碰撞纹理通道 → 生成高度图
2. 计算着色器通道 → 更新粒子位置
3. 主渲染通道 → 渲染场景
4. 后处理通道 → 应用视觉效果
5. 高度图碰撞检测
javascript
// 将3D碰撞检测转换为2D纹理采样
const getCoord = (pos) => pos.add(50).div(100);
const height = texture(collisionPosRT.texture, getCoord(position.xz)).y;
纹理作为数据存储：高度信息存储在RGBA纹理中

UV坐标映射：世界坐标→纹理坐标转换

GPU加速检测：避免CPU循环检测10万粒子

6. 分层渲染策略
图层1：静态粒子（碰撞相机可见）

图层2：动态粒子（主相机可见）

碰撞相机：只渲染图层1，生成高度图

7. 高斯模糊后处理
多分辨率模糊：茶壶使用1/5分辨率，场景使用1/2分辨率

性能优化：分辨率缩放平衡质量与性能

方向性模糊：控制模糊方向和强度

🚀 性能优化策略
1. 计算与渲染分离
计算着色器与渲染着色器分离，避免管线停滞

异步计算，充分利用GPU并行能力

2. 内存管理
半精度浮点数：碰撞纹理使用HalfFloatType节省显存

缓冲区复用：位置缓冲区在计算和渲染间共享

纹理优化：禁用Mipmaps，使用最近邻过滤

3. 渲染优化
视锥体裁剪：自动跳过屏幕外粒子

实例化批处理：合并渲染调用

分辨率自适应：后处理使用动态分辨率

🎨 视觉效果技术
1. 物理真实感
随机种子系统：每个粒子有独特的运动模式

时间同步：所有粒子运动基于统一的时间轴

碰撞响应：平滑的状态转换，避免突然停顿

2. 氛围营造
指数雾效：增强场景深度感和距离感

径向渐变背景：中心亮边缘暗，聚焦视觉

动态阴影：2048x2048阴影贴图，高质量软阴影

3. 材质系统
PBR材质：基于物理的渲染，真实的光照反应

透明渐变：地面边缘渐隐，创造无限延伸感

自发光：茶壶材质模拟灯光效果

📱 交互功能
1. 相机控制
轨道控制器：鼠标拖动旋转，滚轮缩放

自动旋转：场景缓慢自动旋转，展示全方位效果

视角限制：防止相机翻转，保持舒适视角

2. 调试支持
Inspector工具：实时查看渲染管线和中间结果

性能监控：WebGPU内置性能计数器

图层可视化：可单独显示各渲染图层

🔄 渲染管线流程
text
开始动画循环
    ↓
更新用户输入和自动旋转
    ↓
【通道1】使用碰撞相机渲染高度图到碰撞纹理
    ↓
【通道2】GPU计算着色器更新所有粒子位置
    ↓
【通道3】主相机渲染完整场景到后处理缓冲区
    ↓
【通道4】应用后处理效果链（辉光、模糊、暗角）
    ↓
输出到屏幕显示
    ↓
等待下一帧
💡 技术创新点
WebGPU原生支持：直接利用现代GPU架构，性能提升显著

计算着色器粒子系统：完全GPU驱动的物理模拟

高度图碰撞检测：创新的3D碰撞检测简化方案

TSL节点化材质：可视化的着色器开发体验

多分辨率后处理：智能的性能/质量平衡策略 -->


<html lang="zh-CN"> <!-- 修改语言为中文 -->
	<head>
		<!-- 页面基本设置 -->
		<title>Three.js WebGPU - 雪花计算模拟</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="example.css">
		<!-- 备用样式表（当前注释掉了） -->
		<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
	</head>
	<body>

		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- three.js 官网链接（logo形式） -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题区域 -->
			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<span>雪花计算模拟</span> <!-- 副标题改为中文 -->
			</div>

			<!-- 描述信息 -->
			<small>
				10万雪花粒子模拟系统 <!-- 描述改为中文 -->
				<br>
				使用WebGPU计算着色器实现高性能物理模拟 <!-- 添加技术说明 -->
				<br>
				粒子与场景实时碰撞检测，动态与静态粒子混合渲染 <!-- 添加功能说明 -->
			</small>
			
		</div>

		<!-- 模块导入映射配置 -->
		<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模块 -->
		<script type="module">

			// 导入Three.js核心模块
			// three/webgpu：专门为WebGPU优化的Three.js版本
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）节点
			// TSL是Three.js的可视化着色器编程系统，允许在JavaScript中构建着色器
			// Fn: 创建着色器函数
			// texture: 纹理采样节点
			// vec3: 三维向量
			// pass: 渲染通道节点
			// color: 颜色节点
			// uint: 无符号整数
			// screenUV: 屏幕UV坐标（0-1范围）
			// instancedArray: 实例化数组（用于存储粒子数据）
			// positionWorld: 世界空间位置
			// positionLocal: 局部空间位置
			// time: 时间节点（自动递增）
			// vec2: 二维向量
			// hash: 哈希函数（生成伪随机值）
			// instanceIndex: 实例索引（当前处理的粒子索引）
			// If: 条件判断节点
			import { Fn, texture, vec3, pass, color, uint, screenUV, instancedArray, positionWorld, positionLocal, time, vec2, hash, instanceIndex, If } from 'three/tsl';
			
			// 导入高斯模糊效果节点
			// 高斯模糊是一种常用的图像处理效果，通过高斯函数对像素进行加权平均
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			// 导入调试工具
			// Inspector：用于调试和查看渲染管线的工具
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入几何体
			// TeapotGeometry：经典茶壶几何体（计算机图形学标准测试模型）
			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

			// 导入轨道控制器
			// OrbitControls：允许用户用鼠标控制相机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 粒子数量常量
			// 设置最大粒子数为10万，这是一个性能与效果的平衡点
			const maxParticleCount = 100000;

			// ========== 全局变量声明 ==========
			let camera, scene, renderer;         // Three.js三大核心对象
			let controls;                         // 用户交互控制器
			let computeParticles;                 // 粒子计算着色器
			let postProcessing;                   // 后处理效果管理器

			// 碰撞检测相关变量
			let collisionCamera;                  // 用于渲染碰撞纹理的相机
			let collisionPosRT;                   // 碰撞位置渲染目标（Render Target）
			let collisionPosMaterial;             // 碰撞检测材质

			// 初始化函数
			init();

			// 异步初始化函数
			async function init() {
				// async关键字表示此函数返回Promise，允许使用await进行异步操作
				// 这是因为WebGPU初始化是异步的

				// 获取窗口尺寸（解构赋值）
				const { innerWidth, innerHeight } = window;

				// ========== 摄像机设置 ==========
				// 创建透视相机（模拟人眼视角）
				// 参数：视野角度(FOV)、宽高比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, .1, 100 );
				// 设置相机初始位置
				camera.position.set( 20, 2, 20 );
				// 启用第2层（用于动态粒子）
				// Three.js使用图层系统管理渲染顺序和可见性
				camera.layers.enable( 2 );
				// 设置相机看向的点
				camera.lookAt( 0, 40, 0 );

				// ========== 场景设置 ==========
				// 创建场景对象，所有3D对象都添加到这里
				scene = new THREE.Scene();
				// 添加指数雾效
				// 参数：雾的颜色、雾的起始距离、雾的结束距离
				// 雾效可以增强场景深度感和氛围
				scene.fog = new THREE.Fog( 0x0f3c37, 5, 40 );

				// ========== 光照设置 ==========
				// 1. 方向光（模拟太阳光）
				const dirLight = new THREE.DirectionalLight( 0xf9ff9b, 9 );
				dirLight.castShadow = true; // 启用阴影投射
				dirLight.position.set( 10, 10, 0 );
				
				// 阴影相机设置（方向光使用正交相机渲染阴影）
				// 阴影相机决定了哪些物体会被渲染到阴影贴图中
				dirLight.shadow.camera.near = 1;   // 近裁剪面
				dirLight.shadow.camera.far = 30;   // 远裁剪面
				dirLight.shadow.camera.right = 30; // 右边界
				dirLight.shadow.camera.left = - 30; // 左边界
				dirLight.shadow.camera.top = 30;   // 上边界
				dirLight.shadow.camera.bottom = - 30; // 下边界
				
				// 阴影贴图分辨率，越高阴影越清晰，性能消耗越大
				dirLight.shadow.mapSize.width = 2048;
				dirLight.shadow.mapSize.height = 2048;
				
				// 阴影偏移，用于防止阴影痤疮（shadow acne）
				// 阴影痤疮是由于深度精度问题产生的自阴影伪影
				dirLight.shadow.bias = - 0.009;
				scene.add( dirLight );

				// 2. 半球光（模拟天空和地面的环境反射）
				// 参数：天空颜色、地面颜色、光照强度
				scene.add( new THREE.HemisphereLight( 0x0f3c37, 0x080d10, 100 ) );

				// ========== 碰撞检测系统设置 ==========
				// 碰撞检测原理：将场景渲染为高度图，粒子通过采样高度图判断是否碰撞
				
				// 创建正交相机用于渲染碰撞纹理
				// 正交相机没有透视变形，适合渲染高度图
				// 参数：左、右、上、下、近、远
				collisionCamera = new THREE.OrthographicCamera( - 50, 50, 50, - 50, .1, 50 );
				collisionCamera.position.y = 50; // 从正上方俯视
				collisionCamera.lookAt( 0, 0, 0 );
				collisionCamera.layers.enable( 1 ); // 启用第1层（静态粒子层）

				// 创建渲染目标（Render Target）
				// 渲染目标是离屏渲染的纹理，用于存储中间计算结果
				collisionPosRT = new THREE.RenderTarget( 1024, 1024 );
				collisionPosRT.texture.type = THREE.HalfFloatType; // 使用16位半精度浮点数，节省显存
				collisionPosRT.texture.magFilter = THREE.NearestFilter; // 放大过滤（最近邻，保持锐利）
				collisionPosRT.texture.minFilter = THREE.NearestFilter; // 缩小过滤
				collisionPosRT.texture.generateMipmaps = false; // 禁用mipmaps生成

				// 创建碰撞检测材质
				// 这个材质将物体的世界坐标Y值输出为颜色，创建高度图
				collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
				collisionPosMaterial.fog = false; // 禁用雾效，避免影响高度值
				collisionPosMaterial.toneMapped = false; // 禁用色调映射，保持原始值
				// 关键：将世界坐标的Y分量作为颜色输出
				// 这样渲染出的纹理每个像素的亮度就代表该点的高度
				collisionPosMaterial.colorNode = positionWorld.y;

				// ========== 粒子系统缓冲区设置 ==========
				// 使用实例化数组存储粒子数据，这些数组可以在着色器中访问
				const positionBuffer = instancedArray( maxParticleCount, 'vec3' );     // 粒子当前位置（x, y, z）
				const scaleBuffer = instancedArray( maxParticleCount, 'vec3' );        // 粒子缩放（每个轴可以不同）
				const staticPositionBuffer = instancedArray( maxParticleCount, 'vec3' ); // 静态粒子位置（落地后的位置）
				const dataBuffer = instancedArray( maxParticleCount, 'vec4' );         // 粒子数据包（速度、随机种子等）

				// ========== 计算着色器：粒子初始化 ==========
				// 计算着色器在GPU上并行执行，每个线程处理一个粒子
				
				// 辅助函数：生成随机无符号整数
				const randUint = () => uint( Math.random() * 0xFFFFFF );

				// 创建初始化计算着色器
				const computeInit = Fn( () => {
					// Fn创建着色器函数，内部使用TSL节点

					// 获取当前粒子（由instanceIndex指定）的各个缓冲区引用
					const position = positionBuffer.element( instanceIndex );
					const scale = scaleBuffer.element( instanceIndex );
					const particleData = dataBuffer.element( instanceIndex );

					// 生成基于粒子索引的伪随机值
					// hash函数：输入相同则输出相同，确保结果可重现
					const randX = hash( instanceIndex );
					const randY = hash( instanceIndex.add( randUint() ) );
					const randZ = hash( instanceIndex.add( randUint() ) );

					// 设置粒子初始位置
					// X和Z坐标在-50到50范围内随机分布
					// Y坐标在3到503范围内随机分布（从高空开始下落）
					position.x = randX.mul( 100 ).add( - 50 ); // randX * 100 - 50
					position.y = randY.mul( 500 ).add( 3 );    // randY * 500 + 3
					position.z = randZ.mul( 100 ).add( - 50 ); // randZ * 100 - 50

					// 设置粒子随机缩放
					// 缩放值在0.2到1.0之间，使雪花大小不一
					scale.xyz = hash( instanceIndex.add( Math.random() ) ).mul( .8 ).add( .2 );

					// 初始化静态位置为极远点（表示粒子还未落地）
					// 当粒子落地后，这个位置会被更新为落地位置
					staticPositionBuffer.element( instanceIndex ).assign( vec3( 1000, 10000, 1000 ) );

					// 设置粒子数据包
					// particleData是vec4，可以存储4个浮点数
					particleData.y = randY.mul( - .1 ).add( - .02 ); // Y分量：下落速度（负值表示向下）
					particleData.x = position.x; // X分量：初始X位置（用于后续摆动计算）
					particleData.z = position.z; // Z分量：初始Z位置
					particleData.w = randX;      // W分量：随机种子（用于后续运动变化）

				} )().compute( maxParticleCount ).setName( '初始化粒子' ); // 设置计算着色器名称（调试用）

				// ========== 计算着色器：粒子更新（每帧执行） ==========
				// 定义常量
				const surfaceOffset = .2; // 表面偏移量（粒子半径补偿）
				const speed = .4;         // 粒子摆动速度

				// 创建更新计算着色器
				const computeUpdate = Fn( () => {

					// 辅助函数：将世界坐标转换为纹理UV坐标
					// 世界坐标范围：[-50, 50]，要转换为纹理UV范围：[0, 1]
					const getCoord = ( pos ) => pos.add( 50 ).div( 100 );

					// 获取当前粒子的数据引用
					const position = positionBuffer.element( instanceIndex );
					const scale = scaleBuffer.element( instanceIndex );
					const particleData = dataBuffer.element( instanceIndex );

					// 从数据包中提取信息
					const velocity = particleData.y; // 下落速度
					const random = particleData.w;   // 随机种子

					// 采样碰撞纹理，获取当前位置的地面高度
					// 关键步骤：将粒子的XZ坐标转换为UV，采样碰撞纹理的Y分量（高度值）
					const rippleOnSurface = texture( collisionPosRT.texture, getCoord( position.xz ) )
						.toInspector( '碰撞检测', () => {
							// 调试显示：整个碰撞纹理的高度值
							return texture( collisionPosRT.texture ).y;
						} );

					// 计算有效碰撞高度
					// 实际碰撞高度 = 地面高度 + 粒子半径补偿
					// 这样可以让粒子看起来是"坐"在地面上，而不是嵌入地面
					const rippleFloorArea = rippleOnSurface.y.add( scale.x.mul( surfaceOffset ) );

					// 碰撞检测条件判断
					// 如果粒子当前位置高于碰撞高度：继续运动
					// 否则：粒子落地，变为静态
					If( position.y.greaterThan( rippleFloorArea ), () => {
						
						// 粒子在空中：计算摆动运动
						// X方向：围绕初始位置做正弦摆动
						position.x = particleData.x.add( 
							time.mul( random.mul( random ) ) // 时间 * 随机因子
							.mul( speed )                    // 乘以速度
							.sin()                           // 正弦函数产生摆动
							.mul( 3 )                        // 摆动幅度
						);
						
						// Z方向：类似X方向，但使用余弦函数，且幅度更大
						position.z = particleData.z.add( 
							time.mul( random )              // 时间 * 随机种子
							.mul( speed )                   // 乘以速度
							.cos()                          // 余弦函数产生摆动
							.mul( random.mul( 10 ) )        // 幅度与随机种子相关
						);
						
						// Y方向：应用重力下落
						// velocity是负值，所以position.y会减小
						position.y = position.y.add( velocity );

					} ).Else( () => {
						// 粒子已落地：将当前位置保存到静态位置缓冲区
						staticPositionBuffer.element( instanceIndex ).assign( position );
					} );

				} );

				// 创建计算通道
				// compute(maxParticleCount)指定了计算着色器要执行的线程数（每个粒子一个线程）
				computeParticles = computeUpdate().compute( maxParticleCount );
				computeParticles.name = '更新粒子'; // 设置名称用于调试

				// ========== 创建渲染用的粒子网格 ==========
				// 粒子使用球体几何体
				const geometry = new THREE.SphereGeometry( surfaceOffset, 5, 5 );
				// 参数：半径、宽度分段数、高度分段数
				// 分段数较低是为了节省性能，因为每个粒子都很小

				// 粒子创建函数（工厂模式）
				function particle( staticParticles = false ) {
					// staticParticles参数决定创建的是静态粒子还是动态粒子

					// 选择位置缓冲区
					// 动态粒子使用实时计算的positionBuffer
					// 静态粒子使用落地后的staticPositionBuffer
					const posBuffer = staticParticles ? staticPositionBuffer : positionBuffer;
					
					// 设置图层
					// 图层1：静态粒子，图层2：动态粒子
					// 这样可以在不同渲染通道中分别处理
					const layer = staticParticles ? 1 : 2;

					// 创建粒子材质
					const staticMaterial = new THREE.MeshStandardNodeMaterial( {
						color: 0xeeeeee, // 接近白色的浅灰色
						roughness: .9,    // 高粗糙度（0-1，1最粗糙）
						metalness: 0      // 非金属材质（0-1，0是非金属）
					} );

					// 关键：设置实例化位置
					// 这是实现10万粒子高效渲染的核心
					// 传统方式需要10万个独立的Mesh，而实例化渲染只需要1个Mesh+位置数组
					// positionNode定义了每个实例的最终位置
					staticMaterial.positionNode = positionLocal          // 球体局部坐标（-1到1）
						.mul( scaleBuffer.toAttribute() )                // 乘以每个实例的缩放
						.add( posBuffer.toAttribute() );                 // 加上每个实例的位置偏移

					// 创建实例化网格
					const rainParticles = new THREE.Mesh( geometry, staticMaterial );
					rainParticles.count = maxParticleCount; // 设置实例数量
					rainParticles.castShadow = true;        // 启用阴影投射
					rainParticles.layers.disableAll();      // 禁用所有图层
					rainParticles.layers.enable( layer );   // 启用指定图层

					return rainParticles;
				}

				// 创建动态粒子系统（正在下落的粒子）
				const dynamicParticles = particle();
				// 创建静态粒子系统（已落地的粒子）
				const staticParticles = particle( true );

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

				// ========== 创建地面 ==========
				const floorGeometry = new THREE.PlaneGeometry( 100, 100 );
				// 旋转平面使其水平（Three.js中平面默认是垂直的）
				floorGeometry.rotateX( - Math.PI / 2 );

				// 创建地面材质
				const planeMaterial = new THREE.MeshStandardMaterial( {
					color: 0x0c1e1e,     // 深蓝绿色
					roughness: .5,        // 中等粗糙度
					metalness: 0,         // 非金属
					transparent: true     // 启用透明（用于边缘渐变）
				} );

				// 创建地面网格
				const plane = new THREE.Mesh( floorGeometry, planeMaterial );
				
				// 设置地面边缘透明效果
				// 原理：计算每个点到中心点的距离，距离越远透明度越高
				plane.material.opacityNode = positionLocal.xz // 地面的局部XZ坐标
					.mul( .05 )             // 缩小坐标，控制渐变范围
					.distance( 0 )          // 计算到原点的距离
					.saturate()             // 限制在0-1范围
					.oneMinus();            // 反转：中心不透明，边缘透明

				scene.add( plane );

				// ========== 创建圣诞树模型 ==========
				// 使用函数创建可复用的树模型
				function tree( count = 8 ) {
					// count参数控制树的层数

					// 创建树冠材质（深绿色）
					const coneMaterial = new THREE.MeshStandardNodeMaterial( {
						color: 0x0d492c,
						roughness: .6,
						metalness: 0
					} );

					// 创建组对象，将树的所有部分组合在一起
					const object = new THREE.Group();

					// 创建多层树冠（从下往上，逐渐变小）
					for ( let i = 0; i < count; i ++ ) {
						const radius = 1 + i; // 半径随层数增加

						// 创建圆锥几何体（树冠）
						const coneGeometry = new THREE.ConeGeometry( radius * 0.95, radius * 1.25, 32 );
						const cone = new THREE.Mesh( coneGeometry, coneMaterial );
						cone.castShadow = true; // 投射阴影
						
						// 计算Y位置：越往上位置越高，但层高逐渐减小
						cone.position.y = ( ( count - i ) * 1.5 ) + ( count * .6 );
						object.add( cone );
					}

					// 创建树干（圆柱体）
					const geometry = new THREE.CylinderGeometry( 1, 1, count, 32 );
					const cone = new THREE.Mesh( geometry, coneMaterial );
					cone.position.y = count / 2; // 树干中心在地面上方
					object.add( cone );

					return object;
				}

				// 创建茶壶装饰（放在树顶）
				const teapotTree = new THREE.Mesh( 
					new TeapotGeometry( .5, 18 ), // 茶壶几何体
					new THREE.MeshBasicNodeMaterial( {
						color: 0xfcfb9e // 浅黄色，类似灯光
					} ) 
				);

				teapotTree.name = '茶壶通道'; // 设置名称，用于后处理
				teapotTree.position.y = 18; // 放在树顶

				// 将树和茶壶添加到场景
				scene.add( tree() );
				scene.add( teapotTree );

				// ========== 背景设置 ==========
				// 创建径向渐变背景：中心亮，边缘暗
				// screenUV：屏幕空间UV坐标（0,0在左下角，1,1在右上角）
				// distance(.5)：计算每个像素到屏幕中心(0.5,0.5)的距离
				// mul(2)：将距离范围从0-0.5扩大到0-1
				// mix(color1, color2)：在两个颜色之间混合
				scene.backgroundNode = screenUV.distance( .5 )
					.mul( 2 )
					.mix( color( 0x0f4140 ), color( 0x060a0d ) );

				// ========== 渲染器设置 ==========
				// 创建WebGPU渲染器（现代图形API，替代WebGL）
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置色调映射：模拟相机曝光和色彩响应
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 设置设备像素比（适配高DPI屏幕）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数
				renderer.setAnimationLoop( animate );
				// 附加调试工具
				renderer.inspector = new Inspector();
				// 将渲染器的canvas元素添加到页面
				document.body.appendChild( renderer.domElement );

				// 初始化WebGPU（异步操作）
				// WebGPU需要请求设备权限，所以是异步的
				await renderer.init();

				// ========== 用户交互控制器设置 ==========
				controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 10, 0 );        // 设置控制中心点
				controls.minDistance = 25;              // 最小缩放距离
				controls.maxDistance = 35;              // 最大缩放距离
				controls.maxPolarAngle = Math.PI / 1.7; // 最大俯仰角（防止相机翻转）
				controls.autoRotate = true;             // 启用自动旋转
				controls.autoRotateSpeed = - 0.7;       // 旋转速度（负值为逆时针）
				controls.update();                      // 应用初始设置

				// ========== 后处理效果设置 ==========
				// 后处理：在渲染完成后对图像进行额外处理
				
				// 1. 创建主场景渲染通道
				// pass函数创建渲染通道节点，可以捕获指定相机渲染的场景
				const scenePass = pass( scene, camera );
				const scenePassColor = scenePass.getTextureNode();
				
				// 2. 创建暗角效果（vignette）
				// 原理：屏幕边缘比中心暗，引导视线聚焦中心
				const vignette = screenUV.distance( .5 )
					.mul( 1.35 )    // 控制暗角范围
					.clamp()        // 限制在0-1
					.oneMinus();    // 反转：中心亮，边缘暗

				// 3. 创建茶壶单独渲染通道（用于发光效果）
				// 只渲染茶壶，背景为透明
				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
				// 对茶壶进行高斯模糊（创建光晕效果）
				const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 6 );
				teapotTreePassBlurred.resolutionScale = 0.2; // 降低分辨率以提高性能

				// 4. 创建场景整体模糊通道（用于辉光效果）
				const scenePassColorBlurred = gaussianBlur( scenePassColor );
				scenePassColorBlurred.resolutionScale = 0.5; // 中等分辨率
				scenePassColorBlurred.directionNode = vec2( 1 ); // 模糊方向

				// ========== 最终合成 ==========
				// 将所有效果叠加在一起
				let totalPass = scenePass.toInspector( '场景' ); // 基础场景
				
				// 添加轻微的整体辉光（增强氛围）
				totalPass = totalPass.add( scenePassColorBlurred.mul( .1 ) );
				
				// 应用暗角效果
				totalPass = totalPass.mul( vignette );
				
				// 添加茶壶发光效果
				// 茶壶本身亮度增强 + 模糊光晕
				totalPass = totalPass.add( 
					teapotTreePass.mul( 10 )               // 增强茶壶亮度
					.add( teapotTreePassBlurred )          // 加上模糊光晕
					.toInspector( '茶壶模糊' )             // 调试标签
				);

				// 创建后处理管理器
				postProcessing = new THREE.PostProcessing( renderer );
				postProcessing.outputNode = totalPass; // 设置最终输出节点

				// ========== 初始化粒子系统 ==========
				// 执行一次粒子初始化计算着色器
				renderer.compute( computeInit );

				// ========== 窗口大小调整事件监听 ==========
				window.addEventListener( 'resize', onWindowResize );
			}

			// 窗口大小调整处理函数
			function onWindowResize() {
				// 获取新的窗口尺寸
				const { innerWidth, innerHeight } = window;

				// 更新摄像机宽高比
				camera.aspect = innerWidth / innerHeight;
				camera.updateProjectionMatrix(); // 必须调用此方法应用更改

				// 更新渲染器尺寸
				renderer.setSize( innerWidth, innerHeight );
			}

			// 动画循环函数（每帧调用）
			function animate() {
				// 1. 更新控制器（处理用户输入和自动旋转）
				controls.update();

				// 2. 第一步渲染：碰撞纹理
				// 目的：获取当前帧所有物体的高度信息
				scene.name = '碰撞检测位置'; // 调试名称
				scene.overrideMaterial = collisionPosMaterial; // 临时替换所有材质
				renderer.setRenderTarget( collisionPosRT );    // 渲染到离屏纹理
				renderer.render( scene, collisionCamera );     // 使用碰撞相机渲染

				// 3. 第二步：计算着色器更新粒子位置
				// GPU并行计算所有粒子的新位置
				renderer.compute( computeParticles );

				// 4. 第三步：最终渲染
				scene.name = '主场景'; // 恢复场景名称
				scene.overrideMaterial = null; // 恢复原始材质
				renderer.setRenderTarget( null ); // 渲染到屏幕（默认帧缓冲区）
				
				// 应用后处理并渲染最终图像
				postProcessing.render();
			}
		</script>
	</body>
</html>