<!-- 代码功能和技术点详细说明
一、项目概述
这是一个基于Three.js WebGPU的实时海浪模拟器，通过先进的图形技术实现了逼真的动态海洋表面效果。项目不仅展示了WebGPU的强大性能，还演示了现代着色器编程在3D图形中的应用。

二、核心功能
1. 动态波浪系统
基础大波浪：使用正交正弦波叠加生成基础波浪形状

细节小波浪：通过多重分形噪声技术添加表面细节

实时动画：所有波浪随时间动态变化，模拟真实海洋运动

参数可调：波浪大小、速度、频率等参数均可实时调整

2. 视觉效果
物理光照：基于物理的渲染（PBR）材质，支持真实反射和粗糙度

波谷发光：海浪低洼处产生自发光效果，模拟水体的深度感

动态法线：实时计算水面法线，产生逼真的光照反射

高质量抗锯齿：WebGPU硬件抗锯齿，边缘平滑无锯齿

3. 交互体验
自由视角控制：鼠标拖拽旋转、滚轮缩放、平移场景

实时参数调试：完整GUI界面，可调整30+个视觉参数

响应式设计：自动适应不同屏幕尺寸和分辨率

惯性交互：相机运动带有阻尼效果，操作流畅自然

三、主要技术点
1. WebGPU渲染器
javascript
// 使用下一代图形API
renderer = new THREE.WebGPURenderer({ antialias: true });
性能优势：相比WebGL有显著的性能提升

并行计算：更好地利用现代GPU的多核架构

内存管理：更高效的内存使用和数据传输

兼容性：支持最新的图形硬件功能

2. TSL着色器语言
javascript
// 在JavaScript中直接编写着色器代码
const wavesElevation = Fn(([position]) => {
    const elevation = mul(
        sin(position.x.mul(largeWavesFrequency.x).add(time.mul(largeWavesSpeed))),
        sin(position.z.mul(largeWavesFrequency.y).add(time.mul(largeWavesSpeed))),
        largeWavesMultiplier
    ).toVar();
});
声明式编程：类似GLSL但更易用的语法

节点化系统：将着色器操作表示为可连接的节点

类型安全：强类型的数学运算和向量操作

实时编译：着色器可动态生成和修改

3. 波浪生成算法
3.1 基础波形（大波浪）
javascript
// 两个正交正弦波的乘积
elevation = sin(x*freqX + time*speed) * sin(z*freqY + time*speed) * amplitude
数学原理：正交正弦波产生规则的网格状波纹

可调参数：X/Z方向频率独立控制

时间动画：通过时间变量实现波浪移动

3.2 细节噪声（小波浪）
javascript
// 多重分形噪声叠加
for (i = 1 to iterations) {
    noise = perlinNoise(position * frequency * i, time * speed)
    elevation -= abs(noise * multiplier / i)
}
分形技术：在不同尺度上叠加相同模式的噪声

频率倍增：每次迭代频率增加，产生更小的细节

振幅衰减：高频噪声影响逐渐减小（1/i衰减）

4. 法线计算技术
javascript
// 数值法线计算（有限差分法）
positionA = position + (ε, 0, 0)
positionB = position + (0, 0, -ε)
normal = cross(
    normalize(positionA - position),
    normalize(positionB - position)
)
数值微分：通过微小偏移近似计算表面梯度

实时更新：每帧重新计算，支持动态变形表面

视图空间转换：将法线转换到相机视角进行光照计算

5. 自发光效果
javascript
// 基于高度的发光映射
emissive = pow(
    remap(elevation, highThreshold, lowThreshold, 0, 1),
    power
) * emissiveColor
阈值控制：只在特定高度范围内发光

指数增强：使用幂函数增强对比度

颜色混合：可自定义发光颜色和强度

6. 用户界面系统
javascript
// 创建参数控制面板
const gui = renderer.inspector.createParameters('海浪参数控制面板');
gui.addColor({color: material.color.getHex()}, 'color')
    .name('基础颜色')
    .onChange(value => material.color.set(value));
即时反馈：参数调整立即反映在渲染结果中

分组管理：相关参数按功能分组整理

范围控制：所有参数都有合理的取值范围

类型支持：支持颜色选择器、滑块、复选框等

四、技术架构
1. 模块化设计
javascript
// 清晰的模块导入结构
import * as THREE from 'three/webgpu';           // 核心库
import { sin, vec3, time, uniform } from 'three/tsl'; // 着色器语言
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 控制器
import { Inspector } from 'three/addons/inspector/Inspector.js'; // 调试器
2. 渲染管线
text
初始化 → 创建场景 → 设置材质 → 计算着色器 → 渲染循环
    ↓         ↓          ↓           ↓           ↓
相机/灯光  网格几何  节点材质   GPU编译   动画更新
3. 数据流
text
CPU端: 用户输入 → 参数更新 → Uniform变量
                              ↓
GPU端: 顶点着色器 → 波浪计算 → 法线计算 → 片段着色器 → 输出画面
五、性能优化
1. GPU优先设计
所有波浪计算在着色器中完成

最小化CPU-GPU数据传输

利用WebGPU的并行计算能力

2. 内存效率
使用Instanced Buffer减少内存占用

合理的几何体细分度（256×256）

动态Uniform更新，避免重复创建

3. 渲染优化
启用硬件抗锯齿

适当的裁剪面设置

高效的动画循环管理 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示项目名称和技术栈 -->
		<title>Three.js WebGPU - 汹涌海浪特效演示</title>
		<!-- 字符编码：使用UTF-8支持中文显示 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁用缩放，确保页面正常显示 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 外部CSS样式表链接：用于页面基础样式 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 页面顶部信息栏：包含项目信息和链接 -->
		<div id="info">
			<!-- Three.js官方网站链接（带Logo） -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 项目标题区域 -->
			<div class="title-wrapper">
				<!-- Three.js主链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 当前项目名称分隔符和标题 -->
				<span>汹涌海浪模拟器</span>
			</div>

			<!-- 项目说明和版权信息 -->
			<small>
				<!-- 项目来源说明 -->
				基于 <a href="https://threejs-journey.com/lessons/raging-sea" target="_blank" rel="noopener">Three.js Journey教程</a> 的海浪效果实现
				<br>
				<!-- 技术特性说明 -->
				（使用WebGPU渲染器和TSL着色器语言）
			</small>
		</div>

		<!-- Import Map声明：定义JavaScript模块的导入映射 -->
		<!-- 作用：让浏览器知道从哪里加载各个模块 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript代码模块 -->
		<script type="module">

			// ========== 模块导入区域 ==========
			// 注意：这些导入依赖于上面的importmap配置

			// 导入Three.js的WebGPU核心模块
			// THREE对象包含所有的Three.js核心类和函数
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shading Language）着色器语言相关的函数和节点
			// TSL是Three.js的新着色器系统，允许在JavaScript中构建着色器
			import { 
				float,           // 浮点数类型包装器，用于TSL中的浮点数运算
				mx_noise_float,  // 噪声生成函数，用于生成Perlin噪声等
				Loop,           // 循环控制结构，用于在着色器中创建循环
				color,          // 颜色类型和操作函数
				positionLocal,  // 局部空间坐标节点，表示网格的本地坐标
				sin,            // 正弦函数，用于波形计算
				vec2,           // 二维向量类型，常用于纹理坐标
				vec3,           // 三维向量类型，常用于位置、法线等
				mul,            // 乘法操作函数
				time,           // 时间变量节点，随着动画更新
				uniform,        // 统一变量包装器，用于从CPU传递数据到GPU
				Fn,             // 函数定义器，用于创建可重用的TSL函数
				transformNormalToView  // 法线变换函数，将法线从模型空间转换到视图空间
			} from 'three/tsl';

			// 导入轨道控制器：允许用户用鼠标控制相机视角
			// 功能包括：旋转、缩放、平移场景
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入调试器工具：创建实时可调的参数面板
			// 用于在运行时调整各种参数，方便调试和观察效果
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			// 这些变量在多个函数中共享使用
			let camera,   // 相机对象：定义观察场景的视角
				scene,    // 场景对象：包含所有要渲染的3D对象
				renderer, // 渲染器对象：负责将3D场景绘制到2D画布
				controls; // 控制器对象：处理用户交互输入

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

			// ========== 主初始化函数 ==========
			// 作用：设置整个Three.js应用的所有组件
			function init() {

				// ---------- 1. 相机设置 ----------
				// 创建透视相机（模拟人眼视角）
				// 参数说明：
				// - 50: 视野角度（FOV），单位度，角度越大看到的范围越广
				// - window.innerWidth / window.innerHeight: 宽高比，确保渲染不拉伸
				// - 0.1: 近裁剪面，距离相机小于此值的物体不渲染
				// - 10: 远裁剪面，距离相机大于此值的物体不渲染
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
				
				// 设置相机初始位置 (x, y, z)
				// 将相机放在场景的右上方，俯瞰整个平面
				camera.position.set( 1.25, 1.25, 1.25 );

				// ---------- 2. 场景创建 ----------
				// 创建场景对象，所有3D对象（网格、灯光等）都将添加到场景中
				scene = new THREE.Scene();

				// ---------- 3. 灯光设置 ----------
				// 灯光对于3D渲染至关重要，决定了物体的明暗和阴影
			
				// 创建平行光：模拟太阳光，所有光线方向平行
				// 参数说明：
				// - '#ffffff': 光的颜色（白色）
				// - 3: 光的强度，数值越大越亮
				const directionalLight = new THREE.DirectionalLight( '#ffffff', 3 );
				
				// 设置灯光位置：放在场景的左前方
				directionalLight.position.set( - 4, 2, 0 );
				
				// 将灯光添加到场景中
				scene.add( directionalLight );

				// ---------- 4. 材质创建 ----------
				// 材质定义物体表面的外观属性（颜色、光泽度、纹理等）

				// 创建基于物理的渲染（PBR）材质
				// MeshStandardNodeMaterial支持真实的光照和反射效果
				const material = new THREE.MeshStandardNodeMaterial( { 
					color: '#271442',  // 基础颜色：深紫色（十六进制RGB颜色）
					roughness: 0.15     // 粗糙度：0.0为镜面反射，1.0为完全漫反射
				} );

				// ---------- 5. TSL统一变量定义 ----------
				// uniform变量：在着色器执行期间保持不变的全局变量
				// 这些变量可以从JavaScript端动态更新，并影响着色器效果
				
				// 自发光相关参数
				const emissiveColor = uniform( color( '#ff0a81' ) );  // 自发光颜色：亮粉色
				const emissiveLow = uniform( - 0.25 );               // 自发光低阈值：低于此值开始发光
				const emissiveHigh = uniform( 0.2 );                 // 自发光高阈值：高于此值停止发光
				const emissivePower = uniform( 7 );                  // 自发光强度指数：控制发光对比度
				
				// 大波浪参数（基础波形）
				const largeWavesFrequency = uniform( vec2( 3, 1 ) ); // 波浪频率：x方向3，z方向1
				const largeWavesSpeed = uniform( 1.25 );             // 波浪移动速度
				const largeWavesMultiplier = uniform( 0.15 );        // 波浪高度倍乘器
				
				// 小波浪参数（细节噪声）
				const smallWavesIterations = uniform( 3 );           // 噪声迭代次数：数值越大细节越丰富
				const smallWavesFrequency = uniform( 2 );            // 噪声频率
				const smallWavesSpeed = uniform( 0.3 );              // 噪声动画速度
				const smallWavesMultiplier = uniform( 0.18 );        // 噪声强度
				
				// 法线计算参数
				const normalComputeShift = uniform( 0.01 );          // 法线计算偏移量：用于近似计算法线向量

				// ---------- 6. TSL自定义函数：波浪高度计算 ----------
				// 这是一个可重用的着色器函数，计算给定位置的海浪高度
				// Fn是TSL中定义函数的方法，这里的函数接受一个位置参数
				const wavesElevation = Fn( ( [ position ] ) => {

					// 6.1 计算大波浪（基础波形）
					// 使用两个正弦波在x和z方向叠加，产生基本的波浪形状
					// 公式：elevation = sin(x*freqX + time*speed) * sin(z*freqY + time*speed) * multiplier
					const elevation = mul(
						// 第一个正弦波：沿x方向的波形
						sin( position.x.mul( largeWavesFrequency.x ).add( time.mul( largeWavesSpeed ) ) ),
						// 第二个正弦波：沿z方向的波形（与x方向垂直）
						sin( position.z.mul( largeWavesFrequency.y ).add( time.mul( largeWavesSpeed ) ) ),
						// 应用幅度乘数
						largeWavesMultiplier
					).toVar();  // 转换为变量，以便在后续循环中修改

					// 6.2 计算小波浪（细节噪声）
					// 使用多重分形噪声技术叠加细节
					// Loop在着色器中创建循环，迭代添加不同尺度的噪声
					Loop( { 
						start: float( 1 ),  // 循环起始值
						end: smallWavesIterations.add( 1 )  // 循环结束值（迭代次数+1）
					}, ( { i } ) => {

						// 构建噪声输入向量
						// 噪声需要3个输入：空间坐标(x,z)和时间
						const noiseInput = vec3(
							// xz平面坐标处理：
							position.xz
								.add( 2 ) // 添加偏移，避免在原点产生不自然的图案
								.mul( smallWavesFrequency )  // 应用频率缩放
								.mul( i ),  // 乘以迭代序号，每次迭代频率不同（分形噪声）
							// 时间分量：使噪声随时间变化
							time.mul( smallWavesSpeed )
						);

						// 计算噪声值并处理
						const wave = mx_noise_float( noiseInput, 1, 0 )  // 生成Perlin噪声
							.mul( smallWavesMultiplier )   // 乘以噪声强度
							.div( i )                      // 除以迭代序号（高频噪声影响更小）
							.abs();                        // 取绝对值，确保噪声总是减少高度

						// 从基础高度中减去噪声值
						// 这会在波浪表面创建凹陷的细节
						elevation.subAssign( wave );

					} );

					// 返回最终计算的高度值
					return elevation;

				} );

				// ---------- 7. 顶点位置计算 ----------
				// 修改网格的顶点位置，创建波浪起伏效果
				
				// 7.1 计算当前位置的波浪高度
				const elevation = wavesElevation( positionLocal );
				
				// 7.2 创建新的顶点位置：原始位置 + 高度偏移（y方向）
				const position = positionLocal.add( vec3( 0, elevation, 0 ) );
				
				// 7.3 将计算的位置节点赋给材质
				// 这会在GPU的顶点着色器中动态修改顶点位置
				material.positionNode = position;

				// ---------- 8. 法线计算 ----------
				// 法线决定了光线如何从表面反射，影响物体的明暗和立体感
				// 这里通过数值方法近似计算法线：比较附近点的位置差异
				
				// 8.1 计算两个偏移点的位置
				// 位置A：在x正方向有一个小偏移
				let positionA = positionLocal.add( vec3( normalComputeShift, 0, 0 ) );
				// 位置B：在z负方向有一个小偏移
				let positionB = positionLocal.add( vec3( 0, 0, normalComputeShift.negate() ) );

				// 8.2 对偏移点也应用波浪高度计算
				positionA = positionA.add( vec3( 0, wavesElevation( positionA ), 0 ) );
				positionB = positionB.add( vec3( 0, wavesElevation( positionB ), 0 ) );

				// 8.3 计算从当前位置到两个偏移点的向量
				const toA = positionA.sub( position ).normalize();  // 向量A，并单位化
				const toB = positionB.sub( position ).normalize();  // 向量B，并单位化
				
				// 8.4 通过叉积计算法线
				// 两个向量的叉积得到一个垂直于这两个向量的新向量
				const normal = toA.cross( toB );

				// 8.5 将法线转换到视图空间并设置到材质
				// 视图空间是相对于相机的位置，用于光照计算
				material.normalNode = transformNormalToView( normal );

				// ---------- 9. 自发光计算 ----------
				// 根据波浪高度创建发光效果：波谷处发光，波峰处不发光
				
				// 9.1 重新映射高度值并应用指数函数
				// remap函数：将elevation从[emissiveHigh, emissiveLow]范围映射到[0,1]
				// pow函数：应用指数，增强对比度（低处更亮，高处更暗）
				const emissive = elevation.remap( emissiveHigh, emissiveLow ).pow( emissivePower );
				
				// 9.2 计算最终的自发光颜色
				// 自发光颜色 = 基础发光颜色 × 强度值
				material.emissiveNode = emissiveColor.mul( emissive );

				// ---------- 10. 网格创建 ----------
				// 网格是3D对象的基本组成单位，包含几何体（形状）和材质（外观）

				// 10.1 创建平面几何体
				// 参数说明：
				// - 2: 平面宽度（x方向）
				// - 2: 平面高度（z方向）
				// - 256: 宽度分段数（顶点细分程度）
				// - 256: 高度分段数（顶点细分程度）
				// 高分段数提供更多顶点，使波浪效果更平滑
				const geometry = new THREE.PlaneGeometry( 2, 2, 256, 256 );
				
				// 10.2 旋转平面
				// 默认平面是垂直的（在xz平面），需要旋转90度使其水平（在xy平面）
				// -Math.PI * 0.5 = -90度（绕x轴旋转）
				geometry.rotateX( - Math.PI * 0.5 );
				
				// 10.3 创建网格对象
				// 将几何体和材质组合成可渲染的网格
				const mesh = new THREE.Mesh( geometry, material );
				
				// 10.4 将网格添加到场景中
				scene.add( mesh );

				// ---------- 11. 渲染器设置 ----------
				// 渲染器负责将3D场景绘制到HTML5 Canvas元素上

				// 11.1 创建WebGPU渲染器
				// WebGPU是新一代图形API，比WebGL性能更好
				// antialias: true 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 11.2 设置设备像素比
				// 适配高DPI屏幕（如Retina显示屏），确保清晰度
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 11.3 设置渲染尺寸
				// 使用整个浏览器窗口的大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 11.4 设置动画循环
				// animate函数将在每一帧被调用（通常是60fps）
				renderer.setAnimationLoop( animate );
				
				// 11.5 创建调试器并附加到渲染器
				// Inspector提供GUI界面，方便调整参数
				renderer.inspector = new Inspector();
				
				// 11.6 将渲染器的Canvas元素添加到页面
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

				// ---------- 12. 控制器设置 ----------
				// 轨道控制器允许用户通过鼠标与3D场景交互

				// 12.1 创建轨道控制器
				// 将相机和Canvas元素关联起来
				controls = new OrbitControls( camera, renderer.domElement );
				
				// 12.2 设置控制器的目标点
				// 控制器的旋转和缩放将围绕这个点进行
				controls.target.y = - 0.25;
				
				// 12.3 启用阻尼效果
				// 使相机移动有惯性，交互更自然
				controls.enableDamping = true;
				
				// 12.4 设置缩放限制
				controls.minDistance = 0.1;  // 最小缩放距离（不能太近）
				controls.maxDistance = 50;   // 最大缩放距离（不能太远）

				// ---------- 13. 调试界面（GUI） ----------
				// 创建参数调整面板，方便实时观察不同参数的效果

				// 13.1 创建主参数面板
				const gui = renderer.inspector.createParameters( '海浪参数控制面板' );

				// 13.2 基础材质参数
				// 颜色选择器：修改海浪的基础颜色
				gui.addColor( 
					{ color: material.color.getHex( THREE.SRGBColorSpace ) }, 
					'color' 
				)
				.name( '基础颜色' )
				.onChange( value => material.color.set( value ) );  // 颜色变化时的回调函数
				
				// 粗糙度滑块：控制表面光泽度
				gui.add( material, 'roughness', 0, 1, 0.001 ).name( '表面粗糙度' );

				// 13.3 自发光参数折叠面板
				const colorGui = gui.addFolder( '自发光效果' );
				
				// 自发光颜色选择器
				colorGui.addColor( 
					{ color: emissiveColor.value.getHex( THREE.SRGBColorSpace ) }, 
					'color' 
				)
				.name( '发光颜色' )
				.onChange( value => emissiveColor.value.set( value ) );
				
				// 自发光阈值参数
				colorGui.add( emissiveLow, 'value', - 1, 0, 0.001 ).name( '发光低阈值' );
				colorGui.add( emissiveHigh, 'value', 0, 1, 0.001 ).name( '发光高阈值' );
				colorGui.add( emissivePower, 'value', 1, 10, 1 ).name( '发光强度指数' );

				// 13.4 波浪参数折叠面板
				const wavesGui = gui.addFolder( '波浪效果参数' );
				
				// 大波浪参数
				wavesGui.add( largeWavesSpeed, 'value', 0, 5 ).name( '大波浪速度' );
				wavesGui.add( largeWavesMultiplier, 'value', 0, 1 ).name( '大波浪高度' );
				wavesGui.add( largeWavesFrequency.value, 'x', 0, 10 ).name( '大波浪X方向频率' );
				wavesGui.add( largeWavesFrequency.value, 'y', 0, 10 ).name( '大波浪Z方向频率' );
				
				// 小波浪参数
				wavesGui.add( smallWavesIterations, 'value', 0, 5, 1 ).name( '小波浪迭代次数' );
				wavesGui.add( smallWavesFrequency, 'value', 0, 10 ).name( '小波浪频率' );
				wavesGui.add( smallWavesSpeed, 'value', 0, 1 ).name( '小波浪速度' );
				wavesGui.add( smallWavesMultiplier, 'value', 0, 1 ).name( '小波浪强度' );
				
				// 法线计算参数
				wavesGui.add( normalComputeShift, 'value', 0, 0.1, 0.0001 ).name( '法线计算精度' );

				// ---------- 14. 事件监听 ----------
				// 处理浏览器窗口大小变化

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

			}

			// ========== 窗口大小变化处理函数 ==========
			// 作用：确保渲染尺寸始终与窗口大小匹配
			function onWindowResize() {

				// 1. 更新相机的宽高比
				// 必须与窗口的新宽高比一致，否则渲染会变形
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				// 改变aspect后必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 3. 更新渲染器的尺寸
				// 使Canvas元素填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ========== 动画循环函数 ==========
			// 此函数每帧执行一次（通常60次/秒）
			// 负责更新场景状态和重新渲染
			async function animate() {
			
				// 1. 更新控制器状态
				// 处理用户的鼠标/触摸输入，更新相机位置
				// 如果启用了阻尼效果，这里会计算惯性运动
				controls.update();

				// 2. 渲染场景
				// 将3D场景从当前相机视角绘制到Canvas上
				// 这是最耗性能的操作，由WebGPU硬件加速
				renderer.render( scene, camera );

				// 注意：这是一个持续循环，函数执行完后会立即准备下一帧
				// Three.js内部使用requestAnimationFrame实现动画循环
			}

			// ========== 程序执行流程总结 ==========
			// 1. 页面加载 → 执行<script type="module">中的代码
			// 2. 导入所有依赖模块
			// 3. 调用init()函数初始化场景
			// 4. init()完成后，animate()开始循环执行
			// 5. 用户与GUI交互时，修改uniform变量，影响下一帧的渲染
			// 6. 窗口大小变化时，自动调整渲染尺寸

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