<!-- Three.js WebGPU 实例化点渲染演示 - 功能描述与主要技术点
🌟 整体功能描述
这是一个基于 Three.js WebGPU 的高级图形演示，展示了实例化点渲染技术结合GPU计算着色器实现的动态点云效果。程序创建了数千个彩色点，沿着3D希尔伯特曲线排列，每个点的大小会随时间呈波浪状波动，颜色随大小变化，形成一个生动的、具有视觉冲击力的3D动画场景。

📊 核心功能模块
1. 3D点云生成与布局
使用希尔伯特空间填充曲线算法生成3D点坐标

通过Catmull-Rom样条曲线平滑处理，使点分布更加流畅自然

沿着曲线生成数百到数千个点实例

2. 动态点动画系统
大小波动效果：每个点的大小随时间正弦变化，形成波浪状动画

颜色渐变效果：点颜色从黑色到彩虹色渐变，基于点的大小进行插值

时间偏移：每个点有独特的时间偏移，创建连续的波浪传播效果

3. 双视图渲染系统
主视图：全屏透明背景，沉浸式体验

画中画视图：右下角小视口，带深灰色背景，显示相同场景

两个视图共享相机视角，但有不同的背景设置

4. 交互控制界面
鼠标交互：旋转、缩放场景的轨道控制器

参数调节GUI：实时调节动画参数的图形界面

响应式布局：自适应窗口大小变化

🔧 主要技术点详解
1. WebGPU渲染技术
javascript
// 使用下一代Web图形API
const renderer = new THREE.WebGPURenderer({ antialias: true });
优势：相比WebGL，WebGPU提供更好的多线程支持、更低的CPU开销和更直接的内存访问

特性：内置计算着色器支持、改进的管线状态管理和更好的错误处理

2. 实例化渲染（Instanced Rendering）
javascript
// 创建实例化缓冲属性
const positionAttribute = new THREE.InstancedBufferAttribute(positions, 3);
const instancedPoints = new THREE.Sprite(material);
instancedPoints.count = divisions;
原理：单次绘制调用渲染大量相似对象，显著提升性能

应用：每个点共享相同几何体，但有不同的位置、颜色和大小属性

优势：减少GPU绘制调用，提高渲染效率

3. TSL（Three.js Shader Language）节点系统
javascript
// 使用TSL节点构建着色器
material = new THREE.PointsNodeMaterial({
    colorNode: pointColors,
    opacityNode: shapeCircle(),
    positionNode: instancedBufferAttribute(positionAttribute),
    sizeNode: instancedBufferAttribute(instanceSizeBufferAttribute)
});
声明式着色器编程：使用节点连接代替传统的GLSL代码

类型安全：编译时类型检查

模块化：可重用的着色器节点组件

4. GPU计算着色器（Compute Shader）
javascript
// 定义计算着色器函数
computeSize = Fn(() => {
    const relativeTime = time.add(float(instanceIndex));
    const sizeFactor = sin(relativeTime.mul(pulseSpeed)).add(1).div(2);
    instanceSizeStorage.element(instanceIndex).assign(...);
})().compute(divisions);
并行计算：在GPU上同时更新所有点的大小

性能优势：适合大规模数据并行处理

实时性：每帧更新，实现流畅动画

5. 希尔伯特曲线算法
javascript
// 生成3D希尔伯特曲线点
const points = GeometryUtils.hilbert3D(
    new THREE.Vector3(0, 0, 0), 
    20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7
);
空间填充曲线：连续遍历3D空间中的点

特性：局部保持性，相邻点在曲线上也相邻在空间中

应用：创建美观且结构化的点云布局

6. Catmull-Rom曲线插值
javascript
const spline = new THREE.CatmullRomCurve3(points);
样条插值：创建平滑的曲线路径

保证通过控制点：曲线精确经过所有输入点

C1连续性：曲线切线连续，视觉上更平滑

7. 高级抗锯齿技术
javascript
// Alpha-to-Coverage抗锯齿
material.alphaToCoverage = true;
多重采样抗锯齿（MSAA）：提供高质量的边缘平滑

Alpha-to-Coverage：将透明度转换为覆盖率掩码，特别适合透明物体的边缘抗锯齿

8. HSL色彩空间
javascript
// 使用HSL色彩空间生成彩虹渐变
pointColor.setHSL(t, 1.0, 0.5, THREE.SRGBColorSpace);
色相渐变：参数t控制色相，创建连续的彩虹色效果

视觉均匀性：HSL在视觉上比RGB更均匀的渐变

9. 双相机渲染系统
javascript
// 主相机和小视口相机
renderer.setViewport(0, 0, window.innerWidth, window.innerHeight); // 主视口
renderer.setViewport(20, posY, insetWidth, insetHeight); // 小视口
视口管理：在同一画布上渲染多个视图

剪刀测试：限制渲染区域，防止内容溢出

深度缓冲管理：正确清除深度信息，避免渲染冲突

🎨 视觉效果实现机制
1. 波浪动画原理
text
点大小 = 最小尺寸 + (sin(全局时间 + 点索引偏移) * 0.5 + 0.5) * (最大尺寸 - 最小尺寸)
使用正弦函数生成周期性波动

每个点有不同的相位偏移，形成波浪传播效果

正弦值映射到[0,1]范围，作为尺寸插值因子

2. 颜色混合逻辑
text
点颜色 = mix(黑色, 彩虹色, 当前尺寸/最大尺寸)
点越小颜色越暗（接近黑色）

点越大颜色越鲜艳（接近原始彩虹色）

创建尺寸与颜色的视觉关联

3. 圆形点形状
javascript
opacityNode: shapeCircle()
使用圆形透明度掩码

使方形精灵显示为圆形点

结合alpha-to-coverage实现平滑边缘

⚡ 性能优化策略
实例化渲染：显著减少绘制调用

GPU计算着色器：并行处理点动画，CPU零负担

顶点属性预计算：位置和颜色数据预计算并上传到GPU

WebGPU现代API：充分利用现代GPU架构

适中的点数量：平衡视觉效果和性能

🎯 应用场景与扩展
适用场景：
科学可视化（粒子系统、数据点云）

艺术创作和生成艺术

游戏特效（星空、魔法粒子）

数据分析和信息可视化

可能的扩展：
添加交互式点选择

实现物理模拟（引力、碰撞）

集成更复杂的颜色映射

添加音效同步

实现点之间的连接线 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGPU 示例 - 实例化点渲染 -->
		<title>Three.js WebGPU - 实例化点渲染演示</title>
		<!-- 字符编码设置为UTF-8，支持中文和多国语言 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			- width=device-width: 宽度设置为设备宽度
			- user-scalable=no: 禁止用户缩放页面
			- minimum-scale=1.0: 最小缩放比例为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>

		<!-- 页面信息展示区域，包含logo、标题和描述 -->
		<div id="info">
			<!-- 
				Three.js官方logo链接：
				- href: 指向Three.js官方网站
				- target="_blank": 在新标签页打开链接
				- rel="noopener": 安全设置，防止新页面访问原页面的window对象
				- class="logo-link": CSS类名，可能包含背景图片样式显示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>标签表示次要信息 -->
			<small>
				<!-- 
					功能描述：
					使用TSL（Three.js着色器语言）渲染实例化精灵，模拟宽点效果。
					TSL是Three.js的着色器语言系统，允许使用节点式编程创建着色器效果。
					实例化渲染是一种高效技术，可以一次性渲染大量相似的几何对象。
					这里使用精灵（sprites）模拟点，但通过着色器控制其外观和行为。
				-->
				使用TSL着色器语言渲染实例化精灵来模拟宽点效果。
				<br>
				（通过计算着色器实现动态点大小变化和颜色渐变）
			</small>
		</div>

		<!-- 
			导入映射（Import Map）：
			这是现代JavaScript模块系统的一部分，用于定义模块的别名和路径。
			允许在import语句中使用简短的名称代替完整的相对路径。
		-->
		<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模块，支持import/export语法
			模块代码会在页面加载时自动执行
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入Three.js的WebGPU版本
			// WebGPU是新一代图形API，相比WebGL提供了更好的性能和更底层的硬件访问
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）的各种函数和节点
			// 这些是用于构建着色器效果的核心构建块
			import { 
				color,      // 颜色节点，用于创建颜色值
				storage,    // 存储节点，用于访问存储缓冲区（计算着色器）
				Fn,         // 函数定义，用于创建可重用的着色器函数
				instancedBufferAttribute, // 实例化缓冲属性节点
				instanceIndex,  // 实例索引，在实例化渲染中标识当前实例
				sin,        // 正弦函数节点
				time,       // 时间节点，提供当前时间值（用于动画）
				float,      // 浮点数节点，用于创建浮点数值
				uniform,    // 统一值节点，可以在JavaScript中更新的着色器参数
				shapeCircle, // 圆形形状节点，生成圆形透明度掩码
				mix,        // 混合函数节点，在两个值之间进行线性插值
				vec3        // 三维向量节点
			} from 'three/tsl';

			// 导入Three.js的附加组件
			// OrbitControls：轨道控制器，允许用户用鼠标/触摸控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// Inspector：检查器/调试工具，提供GUI界面和性能监控
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			// GeometryUtils：几何工具集，包含各种几何生成和操作函数
			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';

			// ==================== 全局变量声明 ====================
			// 这些变量将在整个应用程序中共享和使用
			let renderer;      // WebGPU渲染器实例
			let scene;         // 3D场景对象，包含所有要渲染的对象
			let camera;        // 主相机，用户交互控制的视图
			let camera2;       // 第二个相机，用于画中画小视口
			let controls;      // 轨道控制器实例
			let backgroundNode; // 背景节点（TSL节点），用于设置场景背景
			let material;      // 点材质，定义点的外观和着色器
			let effectController; // 效果控制器，存储可调节的动画参数
			let insetWidth;    // 小视口（画中画）的宽度
			let insetHeight;   // 小视口（画中画）的高度
			let computeSize;   // 计算着色器函数，用于动态更新点的大小

			// ==================== 初始化函数 ====================
			// 应用程序的入口点，初始化所有Three.js组件和资源
			init();

			// 异步初始化函数
			// 使用async关键字以便未来可能处理异步资源加载
			async function init() {
				// 1. 创建3D场景
				// 场景是所有3D对象的容器，包括相机、灯光、模型等
				scene = new THREE.Scene();

				// 2. 创建主相机（透视相机）
				// 参数说明：
				// - 40: 视野角度（FOV），单位是度，较小的值产生望远镜效果，较大的值产生广角效果
				// - window.innerWidth / window.innerHeight: 宽高比，根据窗口尺寸计算
				// - 1: 近裁剪面，距离相机小于此值的物体不会被渲染
				// - 1000: 远裁剪面，距离相机大于此值的物体不会被渲染
				camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
				// 设置相机初始位置：X轴-40，Y轴0，Z轴60
				camera.position.set(-40, 0, 60);

				// 3. 创建第二个相机（用于画中画小视口）
				// 初始宽高比设为1（正方形），后续会根据小视口尺寸调整
				camera2 = new THREE.PerspectiveCamera(40, 1, 1, 1000);
				// 将第二个相机的位置设置为与主相机相同
				camera2.position.copy(camera.position);

				// 4. 创建背景节点
				// 使用TSL的color函数创建深灰色（0x222222）背景
				// 这个背景将用于小视口，主视口使用透明背景
				backgroundNode = color(0x222222);

				// 5. 创建效果控制器对象
				// 这个对象包含所有可以通过GUI调节的动画参数
				// uniform()函数创建可以在JavaScript中更新的着色器变量
				effectController = {
					pulseSpeed: uniform(6),  // 脉冲速度：控制点大小变化的速度
					minWidth: uniform(6),    // 最小宽度：点的最小尺寸（像素）
					maxWidth: uniform(20)    // 最大宽度：点的最大尺寸（像素）
				};

				// 6. 生成3D点数据（沿着希尔伯特曲线）
				// Hilbert3D函数生成3D希尔伯特曲线的点
				// 希尔伯特曲线是一种空间填充曲线，可以连续遍历3D空间
				// 参数说明：
				// - new THREE.Vector3(0, 0, 0): 曲线起点
				// - 20.0: 曲线尺寸
				// - 1: 迭代次数，控制曲线复杂程度
				// - 0,1,2,3,4,5,6,7: 顶点索引，定义曲线连接顺序
				const points = GeometryUtils.hilbert3D(new THREE.Vector3(0, 0, 0), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7);

				// 7. 创建Catmull-Rom样条曲线
				// Catmull-Rom是一种插值样条，保证曲线通过所有控制点
				// 这可以使希尔伯特曲线的顶点更平滑
				const spline = new THREE.CatmullRomCurve3(points);
				
				// 计算细分段数：每两个原始点之间插入4个点，使曲线更平滑
				const divisions = Math.round(4 * points.length);
				
				// 临时变量，用于在循环中重用以减少内存分配
				const point = new THREE.Vector3();
				const pointColor = new THREE.Color();
				
				// 存储所有实例数据的数组
				const positions = [];  // 位置数据：[x1, y1, z1, x2, y2, z2, ...]
				const colors = [];     // 颜色数据：[r1, g1, b1, r2, g2, b2, ...]
				const sizes = new Float32Array(divisions);  // 尺寸数据：每个点的大小

				// 8. 沿着样条曲线采样点
				// 循环遍历所有细分点，计算位置、颜色和初始尺寸
				for (let i = 0, l = divisions; i < l; i++) {
					// 计算归一化参数t，范围[0, 1]
					const t = i / l;
					
					// 获取曲线上t参数对应的点
					spline.getPoint(t, point);
					
					// 将点的坐标添加到位置数组
					positions.push(point.x, point.y, point.z);
					
					// 根据t值设置HSL颜色（生成彩虹色渐变效果）
					// HSL色彩空间：
					// - t: 色相（Hue），范围[0, 1]，对应色环上的角度
					// - 1.0: 饱和度（Saturation），最大饱和度
					// - 0.5: 亮度（Lightness），中等亮度
					// - THREE.SRGBColorSpace: 颜色空间，sRGB是标准颜色空间
					pointColor.setHSL(t, 1.0, 0.5, THREE.SRGBColorSpace);
					colors.push(pointColor.r, pointColor.g, pointColor.b);
					
					// 设置初始尺寸为10像素
					sizes[i] = 10.0;
				}

				// 9. 创建实例化缓冲属性
				// 位置属性：每个实例（点）在3D空间中的位置
				const positionAttribute = new THREE.InstancedBufferAttribute(new Float32Array(positions), 3);
				// 3表示每个位置有3个分量（x, y, z）
				
				// 颜色属性：每个实例（点）的颜色
				const colorsAttribute = new THREE.InstancedBufferAttribute(new Float32Array(colors), 3);
				// 3表示每个颜色有3个分量（r, g, b）
				
				// 尺寸属性：每个实例（点）的大小
				// 使用StorageInstancedBufferAttribute类型，支持计算着色器写入
				const instanceSizeBufferAttribute = new THREE.StorageInstancedBufferAttribute(sizes, 1);
				// 1表示每个尺寸只有1个分量（大小值）
				
				// 创建TSL存储节点，用于在着色器中访问尺寸数据
				const instanceSizeStorage = storage(instanceSizeBufferAttribute, 'float', instanceSizeBufferAttribute.count);
				// 参数说明：
				// - instanceSizeBufferAttribute: 存储缓冲属性
				// - 'float': 数据类型
				// - instanceSizeBufferAttribute.count: 元素数量

				// 10. 创建计算着色器函数
				// 计算着色器在GPU上并行运行，每个线程处理一个点
				// Fn()创建着色器函数，compute()指定执行的工作负载大小
				computeSize = Fn(() => {
					// 从效果控制器中解构参数
					const { pulseSpeed, minWidth, maxWidth } = effectController;
					
					// 计算相对时间：全局时间 + 实例索引
					// 这样每个点都有不同的时间偏移，产生波浪效果
					const relativeTime = time.add(float(instanceIndex));
					
					// 计算尺寸因子：使用正弦函数生成[0, 1]范围内的波动值
					// sin(x)范围是[-1, 1]，加1后范围[0, 2]，除以2后范围[0, 1]
					const sizeFactor = sin(relativeTime.mul(pulseSpeed)).add(1).div(2);
					
					// 计算最终尺寸并赋值给存储缓冲
					// 公式：minWidth + sizeFactor * (maxWidth - minWidth)
					instanceSizeStorage.element(instanceIndex).assign(
						sizeFactor.mul(maxWidth.sub(minWidth)).add(minWidth)
					);
				})().compute(divisions); // 指定计算着色器需要处理的工作项数量（等于点数）
				
				// 11. 创建点材质（使用TSL节点）
				// 首先创建颜色节点：根据点大小在黑色和彩虹色之间混合
				const attributeRange = instancedBufferAttribute(instanceSizeBufferAttribute);
				
				// 混合颜色：
				// - 起始颜色：黑色 (0, 0, 0)
				// - 结束颜色：原始彩虹色
				// - 混合因子：当前尺寸除以最大尺寸，范围[0, 1]
				// 效果：点越大，颜色越接近原始彩虹色；点越小，颜色越接近黑色
				const pointColors = mix(
					vec3(0.0), // 起始颜色：黑色
					instancedBufferAttribute(colorsAttribute), // 结束颜色：实例颜色属性
					attributeRange.div(float(effectController.maxWidth)) // 混合因子
				);
				
				// 创建PointsNodeMaterial（点节点材质）
				// 这是Three.js的节点材质系统，允许使用TSL节点定义材质
				material = new THREE.PointsNodeMaterial({
					colorNode: pointColors, // 颜色节点（上面计算的混合颜色）
					opacityNode: shapeCircle(), // 透明度节点：生成圆形形状（使点看起来是圆形而不是方形）
					positionNode: instancedBufferAttribute(positionAttribute), // 位置节点：实例位置属性
					// rotationNode: time, // 旋转节点（已注释）：可以使点旋转，这里不使用
					sizeNode: instancedBufferAttribute(instanceSizeBufferAttribute), // 尺寸节点：实例尺寸属性
					// size: 40, // 固定尺寸（已注释）：如果设置，所有点都有固定大小
					vertexColors: true, // 启用顶点颜色：使用我们定义的颜色数据
					sizeAttenuation: false, // 禁用尺寸衰减：点大小不会随距离变化
					alphaToCoverage: true // 启用alpha-to-coverage：提高透明边缘的抗锯齿质量
				});

				// 12. 创建精灵（点）对象并添加到场景
				// 注意：这里使用Sprite而不是Points，因为我们要使用实例化渲染
				const instancedPoints = new THREE.Sprite(material);
				instancedPoints.count = divisions; // 设置实例数量
				scene.add(instancedPoints); // 将点对象添加到场景

				// 13. 创建WebGPU渲染器
				// WebGPU是下一代Web图形API，提供更好的性能和更底层的硬件访问
				renderer = new THREE.WebGPURenderer({ antialias: true }); // 启用抗锯齿
				renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比，支持高DPI显示器
				renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小为窗口大小
				renderer.setAnimationLoop(animate); // 设置动画循环回调函数
				renderer.inspector = new Inspector(); // 附加检查器实例，用于调试和GUI
				document.body.appendChild(renderer.domElement); // 将渲染器的canvas元素添加到页面

				// 14. 创建轨道控制器
				// 允许用户用鼠标拖拽旋转场景，滚轮缩放
				controls = new OrbitControls(camera, renderer.domElement);
				controls.enableDamping = true; // 启用阻尼效果，使相机移动更平滑
				controls.minDistance = 10; // 最小缩放距离
				controls.maxDistance = 500; // 最大缩放距离

				// 15. 添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时，更新相机和渲染器
				window.addEventListener('resize', onWindowResize);
				onWindowResize(); // 初始调用，确保正确设置尺寸

				// 16. 创建GUI（图形用户界面）
				// 使用检查器的参数面板创建可调节的控制项
				const gui = renderer.inspector.createParameters('设置');
				
				// 添加材质参数控制
				gui.add(material, 'alphaToCoverage').name('Alpha To Coverage');
				// alphaToCoverage：将透明度值转换为多重采样覆盖率，提高透明边缘质量
				
				// 添加效果参数控制
				gui.add(effectController.minWidth, 'value', 1, 30, 1)
				   .name('最小点大小')
				   .onChange(() => {
					   // 参数变化时，可能需要更新某些内容
					   // 这里uniform会自动更新，所以不需要额外代码
				   });
				   
				gui.add(effectController.maxWidth, 'value', 2, 30, 1)
				   .name('最大点大小');
				   
				gui.add(effectController.pulseSpeed, 'value', 1, 20, 0.1)
				   .name('脉冲速度');
			}

			// ==================== 窗口大小变化处理函数 ====================
			// 当浏览器窗口大小改变时调用，确保渲染正确适应新尺寸
			function onWindowResize() {
				// 1. 更新主相机
				// 重新计算宽高比（窗口宽度除以高度）
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法使宽高比更改生效）
				camera.updateProjectionMatrix();

				// 2. 更新渲染器尺寸
				// 将渲染器的画布尺寸设置为窗口的新尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 3. 计算小视口（画中画）尺寸
				// 小视口是正方形，大小为窗口高度的四分之一
				insetWidth = window.innerHeight / 4; // 宽度 = 窗口高度 / 4
				insetHeight = window.innerHeight / 4; // 高度 = 窗口高度 / 4

				// 4. 更新第二个相机（小视口相机）
				// 根据小视口的宽高比更新相机
				camera2.aspect = insetWidth / insetHeight;
				// 更新投影矩阵
				camera2.updateProjectionMatrix();
			}

			// ==================== 动画循环函数 ====================
			// 这是每一帧都会调用的函数，负责更新和渲染场景
			// 使用WebGPU的requestAnimationFrame机制，通常每秒60帧
			function animate() {
				// ----- 第一步：执行计算着色器 -----
				// 在GPU上并行更新所有点的大小
				// 计算着色器使用effectController中的参数（脉冲速度、最小/最大宽度）
				// 每个点根据其索引和时间计算新的大小
				renderer.compute(computeSize);
				// 计算着色器完成后，instanceSizeBufferAttribute中的数据被更新
				// 这些更新后的数据会在后续的渲染调用中使用

				// ----- 第二步：渲染主场景（全屏） -----
				// 1. 设置主视口为整个窗口
				// 视口定义渲染在画布上的哪个区域
				renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);
				
				// 2. 更新轨道控制器
				// 处理鼠标/触摸输入，更新相机位置和旋转
				// enableDamping为true时会应用平滑惯性效果
				controls.update();
				
				// 3. 启用自动清除
				// 每次渲染前自动清除颜色缓冲和深度缓冲
				// 这确保前一帧的内容不会影响当前帧
				renderer.autoClear = true;
				
				// 4. 禁用主场景背景
				// 主场景使用透明背景，显示网页的背景色
				scene.backgroundNode = null;
				
				// 5. 渲染主场景
				// 使用主相机渲染整个场景
				renderer.render(scene, camera);
				// 渲染过程包括：
				// - 执行顶点着色器（处理位置、大小）
				// - 执行片元着色器（处理颜色、透明度）
				// - 应用alpha-to-coverage抗锯齿
				// - 写入WebGPU帧缓冲

				// ----- 第三步：渲染小视口（画中画） -----
				// 在窗口右下角显示一个带背景的小视图
				
				// 1. 计算小视口的Y坐标位置
				// 距离窗口底部20像素，确保有边距
				const posY = window.innerHeight - insetHeight - 20;
				
				// 2. 清除深度缓冲（非常重要！）
				// 深度缓冲存储每个像素的深度信息（距离相机的远近）
				// 如果不清除，小视口的深度测试会使用主场景的深度值
				// 这可能导致小视口的内容被错误地遮挡或显示
				renderer.clearDepth();
				
				// 3. 启用剪刀测试
				// 剪刀测试限制渲染只发生在指定的矩形区域内
				// 这确保小视口的内容不会溢出到其他区域
				renderer.setScissorTest(true);
				
				// 4. 设置剪刀矩形
				// 定义小视口的屏幕区域（X, Y, 宽度, 高度）
				// 距离左侧20像素，使用上面计算的posY
				renderer.setScissor(20, posY, insetWidth, insetHeight);
				
				// 5. 设置视口
				// 视口定义渲染坐标到屏幕坐标的映射
				// 通常与剪刀矩形使用相同的区域
				renderer.setViewport(20, posY, insetWidth, insetHeight);
				
				// 6. 同步第二个相机到主相机
				// 小视口显示与主场景相同的视角
				// 复制主相机的位置和旋转到第二个相机
				camera2.position.copy(camera.position);
				camera2.quaternion.copy(camera.quaternion);
				// 注意：我们没有复制其他属性如FOV，所以小视口可能有不同的视野
				
				// 7. 禁用自动清除
				// 我们不想清除主场景已经渲染的内容
				// 小视口应该叠加在主场景之上
				renderer.autoClear = false;
				
				// 8. 启用小视口背景
				// 小视口使用深灰色背景，与主场景区分
				scene.backgroundNode = backgroundNode;
				
				// 9. 渲染小视口场景
				// 使用第二个相机渲染同一个场景
				// 由于启用了背景，小视口会有深灰色背景
				renderer.render(scene, camera2);
				
				// 10. 禁用剪刀测试
				// 渲染完成后，关闭剪刀测试
				// 确保后续的渲染（如果有）不受影响
				renderer.setScissorTest(false);
				
				// ----- 动画循环结束 -----
				// 函数结束，WebGPU会自动安排下一帧
				// 整个animate函数会在下一次屏幕刷新时再次调用（通常1/60秒后）
			}

		</script>

	</body>

</html>