<!-- 代码功能和技术点详解
🎯 核心功能
这是一个基于WebGPU计算着色器的实时物理变形演示。实现了一个果冻效果的3D人头模型，用户可以通过鼠标悬停与模型交互，产生类似果冻的弹性变形效果。

主要功能特点：
实时物理模拟

模型表面具有弹性，鼠标靠近时会凹陷

鼠标移开后模型逐渐恢复原状

支持持续的弹性振动效果

交互式变形

鼠标悬停即可产生变形（无需点击）

变形效果基于距离计算（越靠近变形越大）

支持画笔大小和强度调节

动态视觉效果

渐变背景配合晕影效果

法线着色清晰显示表面细节

60FPS流畅动画

开发者友好

内置调试面板可实时调整参数

轨道控制器方便多角度查看

详细的性能监控工具

⚙️ 主要技术点
1. WebGPU技术栈
text
Three.js WebGPU版本 + TSL着色器语言 + 计算着色器
WebGPU渲染器：下一代图形API，比WebGL性能更高

TSL（Three.js Shader Language）：Three.js的着色器节点系统

计算着色器（Compute Shader）：GPU通用计算能力

2. 计算着色器架构
javascript
// 核心架构：三部分存储缓冲区
1. 原始位置缓冲区（只读）- 作为参考位置
2. 当前位置缓冲区（可读写）- 存储变形后位置
3. 速度缓冲区（可读写）- 存储物理速度
3. 物理模拟算法
胡克定律（Hooke's Law）
javascript
// 恢复力计算：F = -k * x
const force = elasticity.mul( distance ).mul( basePosition.sub( currentPosition ) );
k（弹性系数）：控制弹簧强度

x（位移）：当前位置与原始位置的距离

阻尼系统
javascript
// 能量损失模拟
currentSpeed.mulAssign( damping );
阻尼系数（0.9-0.98）：控制能量损失速度

每帧衰减：速度乘以小于1的系数

欧拉积分
javascript
// 位置更新：简单的数值积分
currentSpeed.addAssign( force );    // 更新速度：v = v + a*dt
currentPosition.addAssign( currentSpeed ); // 更新位置：x = x + v*dt
4. 交互变形算法
javascript
// 变形力度计算（基于距离的非线性衰减）
const power = brushSize.sub( dist ).max( 0 ).mul( brushStrength );
距离衰减：距离越远，影响越小

画笔参数：

brushSize：影响范围半径

brushStrength：最大变形强度

5. 坐标转换系统
javascript
// 关键坐标转换流程
1. 鼠标屏幕坐标 → 归一化设备坐标（NDC）
2. NDC坐标 → 3D世界坐标（光线投射）
3. 局部坐标 ↔ 世界坐标（矩阵变换）
6. 并行计算模式
javascript
// 顶点级并行处理
.compute( count ); // 对count个顶点同时执行
GPU并行：所有顶点同时计算

instanceIndex：自动提供的顶点索引

存储缓冲区：GPU内存中的可读写数据

📊 技术架构图
text
┌─────────────────────────────────────────┐
│          用户交互层                      │
│  • 鼠标移动检测                         │
│  • 光线投射交点计算                     │
│  • GUI参数调节                         │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│          JavaScript逻辑层                │
│  • Three.js场景管理                     │
│  • 事件处理                             │
│  • Uniform参数传递                     │
└──────────────┬──────────────────────────┘
               │
┌──────────────▼──────────────────────────┐
│          WebGPU渲染管线                  │
├─────────────────────────────────────────┤
│   计算着色器阶段 (Compute Shader)        │
│   • 物理模拟（胡克定律+阻尼）            │
│   • 交互变形处理                         │
│   • 顶点位置更新                         │
├─────────────────────────────────────────┤
│   图形渲染阶段 (Graphics Pipeline)       │
│   • 顶点着色器                           │
│   • 片元着色器                           │
│   • 光栅化                               │
└──────────────────────────────────────────┘
🔧 关键技术组件
1. Three.js模块
WebGPURenderer：WebGPU渲染器

StorageBufferAttribute：存储缓冲区属性

MeshNormalNodeMaterial：法线材质

GLTFLoader：模型加载器

2. TSL节点系统
Fn：着色器函数定义

storage：存储缓冲区访问

uniform：统一变量

attribute：顶点属性

3. 交互组件
OrbitControls：轨道相机控制

Raycaster：光线投射

Inspector：调试工具

🚀 性能优化特性
GPU并行计算优势
大规模并行：数千顶点同时计算

零CPU开销：物理模拟完全在GPU进行

内存效率：数据在GPU内存中流转

计算着色器优势
分离计算与渲染：物理计算独立于渲染管线

数据局部性：顶点数据在GPU内存中高效访问

异步执行：可与渲染并行执行

内存管理
javascript
// 三个关键缓冲区
原始位置: 只读，可重复使用
当前位置: 可读写，每帧更新
速度缓冲: 可读写，物理状态持久化
🎨 视觉效果技术
背景效果
javascript
// 动态渐变 + 晕影
背景 = 垂直渐变(紫色→粉色) × 晕影(中心亮边缘暗) × 亮度增强
法线着色
无灯光需求：直接显示表面方向

变形可视化：清晰显示表面曲率变化

实时更新：随顶点位置动态变化

📈 技术亮点总结
技术领域	具体实现	优势
渲染技术	WebGPU + 计算着色器	高性能、现代API支持
物理模拟	胡克定律 + 阻尼系统	真实弹性效果
交互设计	光线投射 + 距离衰减	自然流畅的交互体验
开发工具	Inspector调试器	实时调参、性能分析
视觉效果	法线材质 + 动态背景	视觉清晰、美观
🔮 应用场景扩展
游戏开发：角色物理效果、环境交互

产品展示：可交互的3D产品演示

数据可视化：动态的3D图表和模型

教育演示：物理原理可视化教学

艺术创作：交互式数字艺术 -->


<!DOCTYPE html>
<!-- 声明HTML5文档类型 -->
<html lang="zh-CN">
	<!-- 设置页面语言为中文 -->
	<head>
		<!-- 文档头部开始 -->
		<meta charset="utf-8">
		<!-- 
			字符编码设置：
			utf-8支持多语言字符，确保中文字符正确显示
		-->
		
		<title>three.js WebGPU - 计算着色器几何体变形示例</title>
		<!-- 
			页面标题：
			显示在浏览器标签页上，包含核心功能描述
		-->
		
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			视口元标签，用于移动端适配：
			- width=device-width：视口宽度等于设备宽度
			- user-scalable=no：禁止用户手动缩放（保持3D场景稳定性）
			- minimum-scale=1.0：最小缩放比例为1.0
			- maximum-scale=1.0：最大缩放比例为1.0
			这些设置确保3D场景在不同设备上保持一致的视觉体验
		-->
		
		<link type="text/css" rel="stylesheet" href="example.css">
		<!-- 
			外部CSS样式表链接：
			- type="text/css"：指定链接文件类型为CSS
			- rel="stylesheet"：定义与当前文档的关系为样式表
			- href="example.css"：样式表文件路径
			用于页面的基础样式设置
		-->
	</head>
	<!-- 文档头部结束 -->
	
	<body>
		<!-- 文档主体开始 -->

		<div id="info">
			<!-- 
				信息展示区域容器：
				- id="info"：唯一标识符，可用于CSS和JavaScript选择
				用于显示标题、说明和品牌信息
			-->
			
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
			<!-- 
				Three.js官网链接：
				- href="https://threejs.org/"：Three.js官方网站
				- target="_blank"：在新标签页打开链接
				- rel="noopener"：安全属性，防止新页面访问原页面的window对象
				- class="logo-link"：CSS类名，通常用于设置Three.js的logo样式
				通常通过CSS背景图片显示Three.js的logo
			-->

			<div class="title-wrapper">
				<!-- 
					标题包装容器：
					用于包裹标题链接和副标题
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 
					主标题链接：Three.js品牌链接
					与logo链接相同，但显示为文本形式
				-->
				<span>计算几何体变形效果</span>
				<!-- 
					副标题文本：
					描述当前页面的具体功能
				-->
			</div>

			<small>
				<!-- 
					<small>标签：表示小号字体文本
					用于显示辅助说明信息
				-->
				使用WebGPU计算着色器实现的果冻变形效果。移动鼠标指针与模型交互。
				<!-- 
					功能描述：
					- 技术栈：WebGPU计算着色器
					- 效果类型：果冻物理变形
					- 交互方式：鼠标移动
				-->
			</small>
		</div>

		<!-- 导入映射配置（Import Maps） -->
		<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>

		<!-- 主应用程序脚本 -->
		<!-- 
			type="module"：指定脚本为ES6模块
			模块脚本支持import/export语法，在严格模式下运行
			具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			

			// ==================== 模块导入部分 ====================
			
			// 导入Three.js核心模块（WebGPU版本）
			// 使用importmap中定义的'three/webgpu'别名
			import * as THREE from 'three/webgpu';
			/* 
				* as THREE：将所有导出内容作为THREE对象导入
				包含Three.js的所有核心类和方法（WebGPU专用版本）
			*/
			
			// 导入TSL（Three.js Shader Language）着色器节点
			import { 
				vec4,      // 四维向量构造函数
				storage,   // 存储缓冲区节点
				Fn,        // 函数定义节点
				If,        // 条件判断节点
				uniform,   // uniform变量节点
				instanceIndex, // 实例索引（在计算着色器中表示当前处理的顶点索引）
				objectWorldMatrix, // 对象世界变换矩阵
				color,     // 颜色构造函数
				screenUV,  // 屏幕UV坐标（0-1范围）
				attribute  // 属性节点
			} from 'three/tsl';
			
			// 导入GLTF模型加载器
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			/* 
				GLTFLoader：用于加载GLTF/GLB格式的3D模型
				这是Three.js的官方扩展，不属于核心库
			*/
			
			// 导入轨道控制器
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			/*
				OrbitControls：提供鼠标/触摸控制相机旋转、平移、缩放的功能
				常用于3D场景的交互式查看
			*/
			
			// 导入调试器/检查器
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			/*
				Inspector：Three.js的调试工具
				提供场景检查、性能分析、参数调整等功能
			*/

			// ==================== 全局变量声明 ====================
			
			// Three.js核心对象
			let camera;    // 相机：定义观察3D场景的视角
			let scene;     // 场景：包含所有3D对象的容器
			let renderer;  // 渲染器：负责将3D场景绘制到2D画布
			
			// 交互相关对象
			let raycaster; // 光线投射器：用于鼠标点击/悬停检测
			let pointer;   // 指针坐标：存储鼠标的2D屏幕坐标
			
			// 模型对象
			let mesh;      // 网格：包含几何体（形状）和材质（外观）的3D对象
			
			// TSL uniform变量声明（可在着色器和JavaScript中访问的全局变量）
			const pointerPosition = uniform( vec4( 0 ) ); 
			/* 
				pointerPosition：指针位置uniform变量
				- 数据类型：vec4（四维向量）
				- 初始值：(0, 0, 0, 0)
				- xyz分量：存储鼠标在3D空间中的交点坐标
				- w分量：启用标志（1=启用变形，0=禁用变形）
			*/
			
			const elasticity = uniform( .4 ); 
			/*
				elasticity：弹性系数uniform变量
				- 作用：控制弹簧效果的强度
				- 值范围：0-0.5
				- 值越大：变形后恢复原状的速度越快（像硬弹簧）
				- 值越小：恢复越慢（像软弹簧）
			*/
			
			const damping = uniform( .94 ); 
			/*
				damping：阻尼系数uniform变量
				- 作用：控制能量损失速度
				- 值范围：0.9-0.98
				- 值越大：能量损失越慢（持续振动更久）
				- 值越小：能量损失越快（快速停止振动）
				- 典型物理模拟：每帧乘以阻尼系数来减少速度
			*/
			
			const brushSize = uniform( .25 ); 
			/*
				brushSize：画笔大小uniform变量
				- 作用：定义变形影响范围半径
				- 值范围：0.1-0.5
				- 单位：世界空间单位
				- 影响：距离指针多远范围内的顶点会受到变形影响
			*/
			
			const brushStrength = uniform( .22 ); 
			/*
				brushStrength：画笔强度uniform变量
				- 作用：定义变形力度大小
				- 值范围：0.1-0.3
				- 值越大：鼠标拖动时顶点移动距离越大
				- 值越小：变形效果越轻微
			*/

			// ==================== 初始化调用 ====================
			
			// 调用主初始化函数
			init();

			// ==================== TSL函数定义：果冻变形效果 ====================
			
			/**
			 * jelly：果冻变形效果的TSL函数
			 * 这是一个高阶函数，返回一个计算着色器更新函数
			 * 
			 * @param {Object} params - 参数对象
			 * @param {THREE.WebGPURenderer} params.renderer - WebGPU渲染器实例
			 * @param {THREE.BufferGeometry} params.geometry - 几何体数据
			 * @param {THREE.Object3D} params.object - 3D对象
			 * @returns {Function} 计算着色器更新函数
			 */
			const jelly = Fn( ( { renderer, geometry, object } ) => {
				// 获取几何体的顶点数量
				const count = geometry.attributes.position.count;
				/* 
					geometry.attributes.position：几何体的位置属性缓冲区
					.count：顶点数量
					这些顶点将在计算着色器中并行处理
				*/

				// ========== 创建存储缓冲区属性 ==========
				
				// 原始位置属性（只读，不修改）
				const positionBaseAttribute = geometry.attributes.position;
				/* 
					模型的原始顶点位置
					在变形计算中作为参考位置（胡克定律的"静止位置"）
				*/
				
				// 存储位置属性（可写，存储变形后的位置）
				const positionStorageBufferAttribute = new THREE.StorageBufferAttribute( count, 3 );
				/*
					THREE.StorageBufferAttribute：存储缓冲区属性类
					- count：元素数量（顶点数）
					- 3：每个元素的组件数（x, y, z）
					存储缓冲区可以在计算着色器中读写，用于存储中间结果
				*/
				
				// 速度属性（存储每个顶点的当前速度）
				const speedBufferAttribute = new THREE.StorageBufferAttribute( count, 3 );
				/* 
					用于物理模拟：存储顶点的运动速度
					每帧更新：速度 = 上一帧速度 + 力
				*/
				
				// 将存储位置属性添加到几何体
				geometry.setAttribute( 'storagePosition', positionStorageBufferAttribute );
				/* 
					为几何体添加新属性'storagePosition'
					这个属性将在渲染时使用，而不是原始位置
				*/

				// ========== 将缓冲区属性转换为TSL存储节点 ==========
				
				// 原始位置存储节点（只读）
				const positionAttribute = storage( positionBaseAttribute, 'vec3', count );
				/* 
					storage()：TSL函数，将BufferAttribute转换为存储节点
					- positionBaseAttribute：原始位置缓冲区
					- 'vec3'：数据类型（三维向量）
					- count：元素数量
				*/
				
				// 存储位置节点（可读写）
				const positionStorageAttribute = storage( positionStorageBufferAttribute, 'vec3', count );
				
				// 速度存储节点（可读写）
				const speedAttribute = storage( speedBufferAttribute, 'vec3', count );

				// ========== 定义TSL变量（在计算着色器中使用） ==========
				
				// 原始位置向量（当前处理的顶点）
				const basePosition = positionAttribute.element( instanceIndex );
				/* 
					.element(instanceIndex)：获取指定索引的元素
					instanceIndex：在计算着色器中自动提供，表示当前正在处理的顶点索引
					basePosition：当前顶点的原始位置（vec3）
				*/
				
				// 当前变形后的位置
				const currentPosition = positionStorageAttribute.element( instanceIndex );
				
				// 当前速度
				const currentSpeed = speedAttribute.element( instanceIndex );

				// ========== 初始化计算着色器 ==========
				
				/**
				 * computeInit：初始化计算着色器函数
				 * 只执行一次，用于设置初始状态
				 */
				const computeInit = Fn( () => {
					// 将存储位置初始化为原始位置
					// 变形开始时，当前位置等于原始位置
					currentPosition.assign( basePosition );
					/* 
						.assign()：TSL赋值操作
						将basePosition的值赋给currentPosition
					*/
				} )().compute( count );
				/* 
					.compute(count)：标记为计算着色器函数
					- 执行模式：计算着色器
					- 工作负载：处理count个顶点
					- 并行执行：GPU同时处理多个顶点
				*/

				// ========== 更新计算着色器（每帧执行） ==========
				
				/**
				 * computeUpdate：更新计算着色器函数
				 * 每帧执行，处理鼠标交互和物理模拟
				 */
				const computeUpdate = Fn( () => {
					
					// ---------- 鼠标交互变形处理 ----------
					/* 
						If条件：检查指针是否启用（pointerPosition.w == 1）
						只有在鼠标悬停在模型上时才执行变形
					*/
					If( pointerPosition.w.equal( 1 ), () => {
						/* 
							If(condition, thenBlock)：TSL条件节点
							- pointerPosition.w.equal(1)：检查w分量是否等于1
							- 第二个参数：条件为真时执行的函数
						*/
						
						// 将顶点位置从局部空间转换到世界空间
						const worldPosition = objectWorldMatrix( object ).mul( currentPosition );
						/* 
							objectWorldMatrix(object)：获取对象的世界变换矩阵
							.mul(currentPosition)：矩阵乘以向量，执行空间变换
							将顶点从局部坐标系转换到世界坐标系
							必要步骤：因为鼠标位置是世界坐标，需要统一坐标系
						*/
						
						// 计算顶点到鼠标指针的距离
						const dist = worldPosition.distance( pointerPosition.xyz );
						/* 
							.distance()：计算两点间距离
							pointerPosition.xyz：鼠标指针的世界坐标（vec3）
							用于确定变形的影响范围
						*/
						
						// 计算变形方向向量（从顶点指向鼠标位置）
						const direction = pointerPosition.xyz.sub( worldPosition ).normalize();
						/* 
							.sub()：向量减法，得到从顶点到指针的向量
							.normalize()：归一化，得到单位方向向量
							方向向量决定了顶点移动的方向
						*/
						
						// 计算变形力度（基于距离的非线性衰减）
						const power = brushSize.sub( dist ).max( 0 ).mul( brushStrength );
						/* 
							力度计算分步：
							1. brushSize.sub(dist)：画笔大小减去距离
							   - 距离越小，结果越大（距离越近，影响越大）
							2. .max(0)：将负值限制为0
							   - 距离超过画笔大小的顶点不受影响
							3. .mul(brushStrength)：乘以画笔强度系数
							   最终得到变形力度值
						*/
						
						// 应用变形：将顶点沿方向向量移动
						currentPosition.addAssign( direction.mul( power ) );
						/* 
							.mul(power)：方向向量乘以力度（控制移动距离）
							.addAssign()：累加到当前位置
							实现鼠标拖动顶点移动的效果
						*/
					} );

					// ---------- 物理模拟计算 ----------
					/* 
						基于胡克定律的弹簧物理模拟：
						力 = 弹性系数 × 位移
						模拟顶点在变形后返回原始位置的过程
					*/
					
					// 计算当前顶点与原始位置的距离（位移大小）
					const distance = basePosition.distance( currentPosition );
					
					// 计算恢复力（胡克定律：F = -kx）
					const force = elasticity.mul( distance ).mul( basePosition.sub( currentPosition ) );
					/* 
						力计算分步：
						1. basePosition.sub(currentPosition)：从当前位置指向原始位置的向量
						   - 这是恢复力的方向
						2. elasticity.mul(distance)：弹性系数乘以位移距离
						   - 这是力的大小
						3. .mul(...)：力的大小乘以方向，得到力向量
						负号已隐含在方向向量中（指向原始位置）
					*/
					
					// 更新速度：应用力和阻尼
					currentSpeed.addAssign( force );
					/* 
						.addAssign(force)：将力加到当前速度
						牛顿第二定律：F = ma，这里假设质量为1，所以a = F
					*/
					currentSpeed.mulAssign( damping );
					/* 
						.mulAssign(damping)：应用阻尼（能量损失）
						每帧乘以小于1的阻尼系数，速度逐渐减小
					*/
					
					// 更新位置：基于速度移动顶点
					currentPosition.addAssign( currentSpeed );
					/* 
						积分运算：位置 = 位置 + 速度
						这是最简单的欧拉积分法
					*/

				} )().compute( count ).setName( 'Update Jelly' );
				/* 
					.setName('Update Jelly')：为计算着色器设置名称
					方便在调试工具中识别
				*/

				// ========== 初始化回调 ==========
				
				// 当computeUpdate首次执行时，先执行computeInit
				computeUpdate.onInit( () => renderer.compute( computeInit ) );
				/* 
					.onInit()：TSL节点的初始化回调
					renderer.compute(computeInit)：渲染器执行计算着色器
					确保存储位置在开始变形前正确初始化
				*/

				// 返回更新函数
				return computeUpdate;
				/* 
					返回值：computeUpdate函数
					这个函数每帧都会被调用，更新所有顶点的位置
				*/

			} );

			// ==================== 初始化函数定义 ====================
			
			/**
			 * init：Three.js应用程序初始化函数
			 * 设置场景、相机、渲染器、加载资源、绑定事件
			 */
			function init() {
				// ---------- 相机设置 ----------
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				/* 
					PerspectiveCamera：透视相机（模拟人眼视角）
					参数：
					- 50：垂直视野角度（FOV），单位度
					- window.innerWidth / window.innerHeight：纵横比
					- 0.1：近裁剪平面（距离相机多近开始渲染）
					- 10：远裁剪平面（距离相机多远停止渲染）
					相机只渲染0.1到10单位之间的物体
				*/
				
				camera.position.set( 0, 0, 1 );
				/* 
					设置相机初始位置：
					- x：0（水平中心）
					- y：0（垂直中心）
					- z：1（向后移动1个单位，看向原点）
				*/

				// ---------- 场景设置 ----------
				scene = new THREE.Scene();
				/* 
					Scene：3D场景容器
					所有3D对象（网格、灯光、相机）都添加到场景中
					场景也是渲染树的根节点
				*/

				// ---------- 交互工具初始化 ----------
				raycaster = new THREE.Raycaster();
				/* 
					Raycaster：光线投射器
					用于将2D屏幕坐标转换为3D空间中的射线
					检测鼠标悬停/点击在哪个物体上
				*/
				
				pointer = new THREE.Vector2();
				/* 
					Vector2：二维向量
					存储鼠标在屏幕上的归一化坐标（-1到1）
				*/

				// ---------- 背景设置 ----------
				/* 
					使用TSL节点创建动态背景
					背景不是静态图片，而是基于屏幕坐标计算的渐变
				*/
				
				// 垂直渐变：从紫色到粉色
				const bgColor = screenUV.y.mix( color( 0x9f87f7 ), color( 0xf2cdcd ) );
				/* 
					screenUV.y：屏幕垂直坐标（0=底部，1=顶部）
					.mix()：混合函数，根据第一个参数混合两个颜色
					color(0x9f87f7)：十六进制颜色转换为TSL颜色节点
					效果：屏幕顶部显示紫色，底部显示粉色
				*/
				
				// 晕影效果（边缘变暗）
				const bgVignette = screenUV.distance( .5 ).remapClamp( 0.3, .8 ).oneMinus();
				/* 
					计算分步：
					1. screenUV.distance(.5)：计算每个像素到屏幕中心(0.5,0.5)的距离
					   - 中心距离为0，边缘距离最大
					2. .remapClamp(0.3, .8)：将距离重新映射并限制
					   - 0.3以下映射到0，0.8以上映射到1，中间线性插值
					3. .oneMinus()：1减去当前值
					   - 中心值高（1-0=1），边缘值低（1-1=0）
					效果：屏幕中心明亮，边缘变暗
				*/
				
				const bgIntensity = 4; // 背景整体亮度乘数
				
				// 设置场景背景节点
				scene.backgroundNode = bgColor.mul( bgVignette.mul( color( 0xa78ff6 ).mul( bgIntensity ) ) );
				/* 
					backgroundNode：TSL背景节点属性
					.mul()：颜色相乘
					最终效果：渐变背景 × 晕影效果 × 亮度增强
				*/

				// ---------- 模型加载 ----------
				/* 
					使用GLTFLoader加载3D模型
					GLTF是标准的3D传输格式，支持几何体、材质、动画等
				*/
				new GLTFLoader().load( 
					'models/gltf/LeePerrySmith/LeePerrySmith.glb', // 模型文件路径
					function ( gltf ) { // 加载完成回调函数
						/* 
							回调参数gltf：包含加载的3D场景
							gltf.scene：根场景对象
						*/

						// 创建果冻效果材质
						const material = new THREE.MeshNormalNodeMaterial();
						/* 
							MeshNormalNodeMaterial：法线材质
							- 根据表面法向量显示颜色
							- 不需要灯光就能看到3D形状
							- 法线方向不同显示不同颜色（便于观察变形）
						*/
						
						material.geometryNode = jelly();
						/* 
							geometryNode：材质几何体节点
							指定了计算着色器函数，每帧更新顶点位置
						*/
						
						material.positionNode = attribute( 'storagePosition' );
						/* 
							positionNode：位置节点
							告诉材质使用哪个属性作为顶点位置
							使用计算着色器更新后的'storagePosition'属性
						*/

						// 将材质应用到网格
						mesh = gltf.scene.children[ 0 ];
						/* 
							获取加载场景的第一个子对象
							对于这个GLTF模型，只有一个网格对象
						*/
						
						mesh.scale.setScalar( .1 );
						/* 
							缩放模型：乘以0.1
							原始模型可能太大，缩小以适应相机视野
						*/
						
						mesh.material = material; // 替换原始材质为果冻材质
						scene.add( mesh ); // 添加到场景
					}
				);

				// ---------- 渲染器设置 ----------
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				/* 
					WebGPURenderer：WebGPU渲染器
					- WebGPU是新的图形API，替代WebGL
					- 提供更好的性能和更多功能
					参数：
					- antialias: true：启用抗锯齿（平滑边缘）
				*/
				
				renderer.setPixelRatio( window.devicePixelRatio );
				/* 
					设置像素比：
					- devicePixelRatio：设备物理像素与CSS像素的比率
					- 高DPI屏幕（如Retina）需要更高的渲染分辨率
					确保在各类显示器上都有清晰图像
				*/
				
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置渲染器画布大小为浏览器窗口大小
				
				renderer.setAnimationLoop( animate );
				/* 
					设置动画循环：
					- animate函数每帧被调用
					- 使用浏览器的requestAnimationFrame机制
					- 与显示刷新率同步（通常60Hz）
				*/
				
				renderer.inspector = new Inspector();
				/* 
					附加调试器：
					Inspector提供实时场景检查、性能分析等功能
					按快捷键（通常是F9或Ctrl+Shift+I）可以打开
				*/
				
				document.body.appendChild( renderer.domElement );
				/* 
					将渲染器的画布元素添加到页面：
					- renderer.domElement：HTML canvas元素
					- document.body.appendChild：添加到body末尾
				*/

				// ---------- 轨道控制器 ----------
				const controls = new OrbitControls( camera, renderer.domElement );
				/* 
					OrbitControls：轨道控制器
					参数：
					- camera：控制的相机
					- renderer.domElement：事件监听的DOM元素
					功能：
					- 鼠标左键拖动：旋转视图
					- 鼠标右键拖动：平移视图
					- 鼠标滚轮：缩放视图
				*/
				
				controls.minDistance = .7; // 最小缩放距离（不能比0.7更近）
				controls.maxDistance = 2;  // 最大缩放距离（不能比2更远）

				// ---------- GUI调试面板 ----------
				const gui = renderer.inspector.createParameters( 'Settings' );
				/* 
					createParameters()：创建参数面板
					'Settings'：面板标题
					返回的gui对象可以添加可调节参数
				*/
				
				// 添加弹性系数调节滑块
				gui.add( elasticity, 'value', 0, .5 ).name( '弹性系数' );
				/* 
					.add()：添加参数控制器
					- elasticity：目标对象
					- 'value'：目标属性
					- 0, .5：最小值和最大值
					- .name('弹性系数')：显示名称
				*/
				
				gui.add( damping, 'value', .9, .98 ).name( '阻尼系数' );
				gui.add( brushSize, 'value', .1, .5 ).name( '画笔大小' );
				gui.add( brushStrength, 'value', .1, .3 ).name( '画笔强度' );

				// ---------- 事件监听器 ----------
				
				window.addEventListener( 'resize', onWindowResize );
				/* 
					窗口大小调整事件：
					- 当浏览器窗口改变大小时触发
					- 调用onWindowResize函数更新相机和渲染器
				*/
				
				window.addEventListener( 'pointermove', onPointerMove );
				/* 
					鼠标移动事件：
					- 当鼠标在窗口内移动时触发
					- 调用onPointerMove函数更新指针位置
					- pointermove比mousemove更通用（支持触摸笔等）
				*/

			} // init函数结束

			// ==================== 事件处理函数 ====================
			
			/**
			 * onPointerMove：鼠标移动事件处理函数
			 * 将鼠标屏幕坐标转换为3D空间坐标
			 * 
			 * @param {MouseEvent} event - 鼠标事件对象
			 */
			function onPointerMove( event ) {
				// 将鼠标坐标转换为归一化设备坐标（NDC）
				pointer.set( 
					( event.clientX / window.innerWidth ) * 2 - 1,  // X坐标：-1（左）到1（右）
					- ( event.clientY / window.innerHeight ) * 2 + 1 // Y坐标：-1（下）到1（上）
				);
				/* 
					转换公式：
					- X：屏幕像素坐标 → NDC
					  (clientX / width) * 2 - 1
					- Y：Y轴需要反转（屏幕坐标原点在左上，NDC在左下）
					  -(clientY / height) * 2 + 1
				*/

				// 从相机和鼠标位置生成光线
				raycaster.setFromCamera( pointer, camera );
				/* 
					创建从相机位置通过鼠标屏幕位置的光线
					用于检测与3D物体的交点
				*/

				// 检测光线与场景中物体的交点
				const intersects = raycaster.intersectObject( scene );
				/* 
					intersectObject()：检测光线与指定对象的交点
					- scene：检测整个场景
					返回交点数组，按距离排序（最近的在前面）
				*/

				if ( intersects.length > 0 ) {
					// 如果有交点（鼠标悬停在物体上）
					const intersect = intersects[ 0 ]; // 获取最近的交点
					
					pointerPosition.value.copy( intersect.point );
					/* 
						intersect.point：交点的3D世界坐标
						将鼠标位置传递给着色器
					*/
					
					pointerPosition.value.w = 1; // 启用变形效果
					/* 
						w分量作为启用标志：
						- 1：启用变形，着色器会处理鼠标交互
						- 0：禁用变形，只进行物理模拟
					*/

				} else {
					// 如果没有交点（鼠标在空白区域）
					pointerPosition.value.w = 0; // 禁用变形效果
					// 只保留物理模拟，顶点会逐渐恢复原状
				}

			}

			/**
			 * onWindowResize：窗口大小调整事件处理函数
			 * 更新相机和渲染器以适应新的窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机纵横比
				camera.aspect = window.innerWidth / window.innerHeight;
				/* 
					相机纵横比 = 窗口宽度 / 窗口高度
					确保渲染内容不会拉伸变形
				*/
				
				camera.updateProjectionMatrix();
				/* 
					更新投影矩阵：
					当相机参数改变后，必须调用此方法更新内部矩阵
				*/

				// 更新渲染器大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				/* 
					设置渲染器画布的新尺寸
					同时会更新内部渲染缓冲区大小
				*/

			}

			// ==================== 动画循环函数 ====================
			
			/**
			 * animate：主动画循环函数
			 * 每帧调用，执行渲染
			 */
			async function animate() {
				// 渲染场景
				renderer.render( scene, camera );
				/* 
					render()：执行渲染
					- scene：要渲染的场景
					- camera：用于渲染的相机
					内部流程：
					1. 更新所有对象的矩阵
					2. 执行计算着色器（更新顶点位置）
					3. 执行顶点着色器和片元着色器
					4. 将结果绘制到画布
				*/
			}

		</script>
		<!-- 主脚本模块结束 -->
	</body>
	<!-- 文档主体结束 -->
</html>
<!-- HTML文档结束 -->