<!-- Three.js WebGPU 内存测试示例详解
🎯 代码核心功能
1. 内存管理测试
这是一个专门设计用于测试WebGPU渲染器内存管理能力的示例。主要功能是：

每帧动态创建和销毁：每一帧都创建新的球体网格对象

显式资源释放：演示如何正确释放Three.js的GPU资源（几何体、材质、纹理）

内存泄漏检测：帮助开发者识别和避免WebGPU应用中的内存泄漏问题

2. 实时3D渲染
创建一个包含球体和地面的3D场景

使用平行光源投射动态阴影

球体具有随机颜色和不同细分程度的几何体

3. 后处理效果系统
支持环境光遮蔽（AO）效果

支持对象描边（轮廓）效果

可实时启用/禁用不同效果组合

4. 交互式控制面板
提供完整的GUI控制界面

可调整渲染参数和效果设置

可控制网格生成启停

🔧 主要技术点
1. WebGPU渲染技术
javascript
import * as THREE from 'three/webgpu';
const renderer = new THREE.WebGPURenderer();
WebGPURenderer：Three.js的WebGPU后端实现

下一代图形API：相比WebGL，WebGPU提供更低级别的GPU访问和更好的性能

异步初始化：需要await renderer.init()异步初始化

2. Three.js Shading Language (TSL)
javascript
import { pass, mrt, directionToColor, normalView } from 'three/tsl';
声明式着色器编程：使用JavaScript语法编写着色器

节点化系统：将着色器操作抽象为可组合的节点

实时编译：TSL代码在运行时编译为WebGPU着色器

3. 后处理效果实现
环境光遮蔽 (Ambient Occlusion)
javascript
const aoNode = ao(prePassDepth, prePassNormal, camera);
GTAO算法：Ground Truth Ambient Occlusion，高质量AO实现

预渲染通道：先渲染法线和深度信息到纹理

多渲染目标：使用MRT同时输出多个缓冲区数据

轮廓描边效果
javascript
const outlineNode = outline(scene, camera, { selectedObjects });
基于法线的边缘检测：在屏幕空间检测物体边缘

可配置选择：只对特定对象应用描边

叠加合成：将描边效果叠加到主渲染结果

4. 资源生命周期管理
关键释放方法
javascript
// 几何体释放
mesh.geometry.dispose();

// 纹理释放
mesh.material.map.dispose();

// 材质释放
mesh.material.dispose();

// 后处理节点释放
aoNode.dispose();
outlineNode.dispose();
内存管理重要性
WebGPU资源：纹理、缓冲区、着色器程序等由GPU管理

JavaScript垃圾回收：无法自动释放GPU资源

显式释放：必须手动调用dispose()方法

5. 多通道渲染架构
javascript
// 预渲染通道（获取法线/深度）
prePass = pass(scene, camera);
prePass.setMRT(...);

// 主渲染通道
scenePass = pass(scene, camera);

// 后处理合成
postProcessing.outputNode = scenePass.add(outlineNode);
渲染流程：

预渲染通道 → 获取法线、深度信息

AO计算 → 基于预渲染数据计算环境光遮蔽

主渲染通道 → 渲染场景，包含AO信息

描边合成 → 叠加描边效果

最终输出 → 显示到屏幕

6. 调试与监控系统
javascript
import { Inspector } from 'three/addons/inspector/Inspector.js';
renderer.inspector = new Inspector();
内置检查器：提供参数控制和性能监控

实时调整：可修改阴影、后处理等设置

内存观察：帮助观察资源分配情况

🏗️ 架构设计模式
1. 模块化设计
分离关注点：初始化、渲染、后处理、UI控制逻辑分离

可配置性：通过params对象集中管理所有配置

可扩展性：易于添加新的后处理效果

2. 事件驱动控制
GUI回调：参数变化触发实时更新

窗口响应：自适应窗口大小变化

动画循环：requestAnimationFrame替代方案

3. 资源池模式
javascript
// 每帧的资源管理
if (mesh) {
    scene.remove(mesh);
    mesh.geometry.dispose();    // ← 关键：释放旧资源
    mesh.material.map.dispose();// ← 关键：释放纹理
    mesh.material.dispose();    // ← 关键：释放材质
}
// 创建新资源
mesh = new THREE.Mesh(newGeometry, newMaterial);
📊 性能优化要点
1. WebGPU特有优化
自动批处理：WebGPU渲染器自动优化绘制调用

并行处理：利用现代GPU的并行计算能力

内存传输优化：更高效的数据上传到GPU

2. 渲染优化
阴影优化：使用DirectionalLightShadow高效阴影

纹理重用：理论上可重用纹理对象（本示例中随机创建用于测试）

几何体复用：实际应用中应考虑几何体实例化

3. 后处理性能
分辨率控制：AO等效果可使用低分辨率计算

效果分级：可根据设备性能启用不同质量的效果

临时资源管理：及时释放中间渲染纹理

🔍 技术挑战与解决方案
挑战1：WebGPU资源泄漏
解决方案：

实现完整的dispose()调用链

使用Inspector监控内存变化

设计资源引用跟踪机制

挑战2：多效果合成复杂性
解决方案：

使用TSL节点系统简化着色器编写

实现模块化的后处理管道

提供可配置的效果开关

挑战3：跨平台兼容性
解决方案：

WebGPU的自动回退机制

渐进增强的功能检测

响应式设计适应不同设备 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题 - 修改为中文 -->
		<title>three.js WebGPU - 内存测试示例 I</title>
		<!-- 字符编码设置，UTF-8支持中文 -->
		<meta charset="utf-8">
		<!-- 
			视口设置，用于移动端适配：
			width=device-width - 视口宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放（为了保持WebGL/WebGPU应用的稳定显示）
			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样式文件，type="text/css"指定MIME类型，rel="stylesheet"定义与文档的关系 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>

	<body>
		<!-- 信息面板 - 修改为中文 -->
		<div id="info" class="invert">
			<!-- three.js logo链接，点击跳转到three.js官网 -->
			<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>WebGPU 内存测试 I</span>
			</div>

			<!-- 示例描述 - 修改为中文 -->
			<small>
				本示例测试WebGPU渲染器的内存管理能力。
				<br /> 每一帧都会创建、渲染并销毁球体对象。
				<br /> 通过检查器可以控制各种渲染参数，观察内存变化。
			</small>
		</div>

		<!-- 
			importmap配置，定义模块路径映射：
			这是一个JavaScript模块导入映射，允许在导入模块时使用简短的名称
			type="importmap" 表示这是一个导入映射声明
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块，type="module"表示这是ES6模块 -->
		<script type="module">

			// ========== 模块导入部分 ==========
			
			// 导入Three.js核心模块的WebGPU版本
			// * as THREE 表示将整个模块导入并命名为THREE对象
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）着色器节点
			// pass - 渲染通道节点，用于定义渲染流程
			// mrt - 多渲染目标（Multiple Render Targets），用于同时渲染到多个缓冲区
			// directionToColor - 将方向向量转换为颜色值的节点
			// normalView - 视图空间中的法线向量节点
			// screenUV - 屏幕UV坐标节点，范围从(0,0)到(1,1)
			// context - 上下文节点，用于传递着色器间的数据
			// sample - 采样节点，用于纹理采样操作
			// colorToDirection - 将颜色值转换回方向向量的节点
			import { pass, mrt, directionToColor, normalView, screenUV, context, sample, colorToDirection } from 'three/tsl';
			
			// 导入后处理效果节点
			// outline - 轮廓/描边效果节点
			import { outline } from 'three/addons/tsl/display/OutlineNode.js';
			// ao - 环境光遮蔽（Ambient Occlusion）效果节点，GTAO代表Ground Truth Ambient Occlusion
			import { ao } from 'three/addons/tsl/display/GTAONode.js';
			
			// 导入调试检查器，用于创建控制面板
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明部分 ==========
			
			// Three.js核心对象变量
			let camera;      // 相机对象，定义观察场景的视角
			let scene;       // 场景对象，包含所有要渲染的对象
			let renderer;    // 渲染器对象，负责将场景渲染到画布上
			let light;       // 光源对象，提供场景照明
			
			// 网格生成控制开关，true表示每帧都创建新网格，false则停止创建
			let generateMeshes = true;
			
			// 当前显示的球体网格对象
			let mesh;
			
			// 后处理系统相关变量
			let postProcessing;   // 后处理管理器
			let aoNode;           // 环境光遮蔽效果节点
			let outlineNode;      // 描边效果节点
			let scenePass;        // 主场景渲染通道
			let prePass;          // 预渲染通道（用于AO等效果）
			
			// 被选中对象数组，用于描边效果（只对选中的对象应用描边）
			const selectedObjects = [];

			// ========== 配置参数对象 ==========
			
			const params = {
				// 是否启用阴影投射
				castShadow: true,
				
				// 是否启用后处理效果
				enablePP: false,
				
				// 是否启用对象描边效果
				enableOutline: true,
				
				// 是否启用环境光遮蔽效果
				enableAO: true,
				
				// 重新创建灯光的函数
				recreateLight: () => {
					// 移除现有的灯光对象
					if ( light ) {
						// 从场景中移除灯光
						scene.remove( light );
						// 释放灯光资源（重要：避免内存泄漏）
						light.dispose();
						// 设置为null，帮助垃圾回收
						light = null;
					}

					// 创建新的平行光
					// 参数：颜色(白色)，强度(1.0)
					light = new THREE.DirectionalLight( 0xffffff, 1 );
					
					// 设置随机位置：
					// x: -100到100之间的随机值
					// y: 固定高度100
					// z: -100到100之间的随机值
					light.position.set( Math.random() * 200 - 100, 100, Math.random() * 200 - 100 );
					
					// 根据参数设置是否投射阴影
					light.castShadow = params.castShadow;
					
					// 将新灯光添加到场景中
					scene.add( light );
				},
				
				// 开始创建网格对象的函数
				start: () => {
					// 将生成开关设为true，animate函数中将开始创建网格
					generateMeshes = true;
				},
				
				// 停止创建网格对象的函数
				stop: () => {
					// 将生成开关设为false，animate函数中将停止创建网格
					generateMeshes = false;
				}
			};

			// ========== 初始化函数调用 ==========
			
			// 程序入口点，调用初始化函数
			// 使用async因为渲染器初始化是异步的
			init();

			// ========== 初始化函数定义 ==========
			
			async function init() {
				// 步骤1：创建容器元素
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中
				document.body.appendChild( container );

				// 步骤2：创建相机
				// 创建透视相机，参数：
				// 60 - 视野角度（FOV），单位是度
				// window.innerWidth / window.innerHeight - 纵横比（宽高比）
				// 1 - 近裁剪平面，距离相机多近开始渲染
				// 10000 - 远裁剪平面，距离相机多远停止渲染
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
				// 设置相机位置：沿z轴向后移动200个单位
				camera.position.z = 200;

				// 步骤3：创建场景
				// 创建一个新的3D场景，所有3D对象都将添加到这个场景中
				scene = new THREE.Scene();
				// 设置场景背景颜色为白色（十六进制颜色值）
				scene.background = new THREE.Color( 0xffffff );

				// 步骤4：创建WebGPU渲染器
				// 注意：WebGPURenderer是Three.js的WebGPU后端渲染器
				renderer = new THREE.WebGPURenderer();
				
				// 启用阴影映射系统
				renderer.shadowMap.enabled = true;
				
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环，animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 创建并附加调试检查器，用于创建控制面板
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// 步骤5：初始化WebGPU渲染器（异步操作）
				// 注意：WebGPU需要异步初始化，因为需要请求GPU设备和上下文
				await renderer.init();

				// 步骤6：创建初始光源
				// 创建平行光，参数：颜色(白色)，强度(1.0)
				light = new THREE.DirectionalLight( 0xffffff, 1 );
				// 设置光源位置：(x=0, y=100, z=0)，即正上方
				light.position.set( 0, 100, 0 );
				// 启用阴影投射
				light.castShadow = true;
				// 将光源添加到场景中
				scene.add( light );

				// 步骤7：创建地面平面
				// 创建平面几何体，宽高各1000个单位
				const planeGeometry = new THREE.PlaneGeometry( 1000, 1000 );
				
				// 创建Lambert材质（漫反射材质），颜色为浅灰色
				const planeMaterial = new THREE.MeshLambertMaterial( { color: 0xcccccc } );
				
				// 创建网格对象，将几何体和材质组合
				const plane = new THREE.Mesh( planeGeometry, planeMaterial );
				
				// 旋转平面：绕x轴旋转-90度，使平面水平（Three.js中平面默认是垂直的）
				plane.rotation.x = - Math.PI / 2;
				
				// 设置平面位置：y轴负方向100个单位
				plane.position.y = - 100;
				
				// 启用平面接收阴影
				plane.receiveShadow = true;
				
				// 将平面添加到场景中
				scene.add( plane );

				// 步骤8：创建调试检查器UI
				// 创建名为"Settings"的参数面板
				const gui = renderer.inspector.createParameters( '设置' );

				// 添加"投射阴影"控制选项
				// 参数：params对象，'castShadow'属性名，显示名称为'投射阴影'
				// onChange回调：当值改变时，更新光源的阴影设置
				gui.add( params, 'castShadow' ).name( '投射阴影' ).onChange( ( value ) => {
					// 如果光源存在，更新其阴影设置
					if ( light ) light.castShadow = value;
				} );

				// 添加"后处理"设置文件夹
				const ppFolder = gui.addFolder( '后处理设置' );
				
				// 添加"启用后处理"选项
				ppFolder.add( params, 'enablePP' ).name( '启用后处理' ).onChange( updatePostProcessing );
				
				// 添加"启用描边"选项
				ppFolder.add( params, 'enableOutline' ).name( '描边效果' ).onChange( updatePostProcessing );
				
				// 添加"启用环境光遮蔽"选项
				ppFolder.add( params, 'enableAO' ).name( '环境光遮蔽' ).onChange( updatePostProcessing );

				// 添加其他控制选项
				gui.add( params, 'recreateLight' ).name( '重新创建平行光' );
				gui.add( params, 'start' ).name( '开始创建网格' );
				gui.add( params, 'stop' ).name( '停止创建网格' );

				// 步骤9：添加窗口大小变化事件监听器
				// 当浏览器窗口大小改变时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );
			}

			// ========== 更新后处理配置函数 ==========
			
			function updatePostProcessing() {
				// 第一步：清理现有的后处理资源
				// 重要：在重新配置后处理前，必须释放之前的资源，避免内存泄漏
				
				// 如果存在后处理系统，先释放它
				if ( postProcessing ) {
					// dispose()方法释放WebGPU资源（缓冲区、纹理等）
					postProcessing.dispose();
					// 设置为null，帮助垃圾回收
					postProcessing = null;
				}

				// 释放场景渲染通道
				if ( scenePass ) {
					scenePass.dispose();
					scenePass = null;
				}

				// 释放预渲染通道
				if ( prePass ) {
					prePass.dispose();
					prePass = null;
				}

				// 释放AO节点资源
				if ( aoNode ) {
					aoNode.dispose();
					aoNode = null;
				}

				// 释放描边节点资源
				if ( outlineNode ) {
					outlineNode.dispose();
					outlineNode = null;
				}

				// 第二步：如果启用了后处理，重新创建后处理系统
				if ( params.enablePP ) {
					// 创建新的后处理系统，传入渲染器实例
					postProcessing = new THREE.PostProcessing( renderer );

					// 创建主场景渲染通道
					// pass()函数创建一个渲染通道，渲染指定场景和相机
					scenePass = pass( scene, camera );
					// colorNode将存储最终的渲染结果节点
					let colorNode = scenePass;

					// 第三步：如果启用了环境光遮蔽（AO），设置AO效果
					if ( params.enableAO ) {
						// 创建预渲染通道
						// 预渲染用于获取法线、深度等信息，供AO效果使用
						prePass = pass( scene, camera );
						
						// 设置多渲染目标（MRT）
						// 在预渲染中，我们需要同时输出颜色和法线信息
						prePass.setMRT( mrt( {
							// 将视图空间法线转换为颜色值存储
							// normalView是视图空间中的法线向量（范围-1到1）
							// directionToColor将其转换到0-1范围以便存储到纹理
							output: directionToColor( normalView )
						} ) );

						// 从预渲染通道采样法线信息
						// sample()创建一个采样节点，prePass.getTextureNode()获取预渲染的纹理
						// colorToDirection将颜色值转换回法线方向向量
						const prePassNormal = sample( ( uv ) => {
							return colorToDirection( prePass.getTextureNode().sample( uv ) );
						} );
						
						// 获取预渲染的深度纹理
						const prePassDepth = prePass.getTextureNode( 'depth' );

						// 创建AO效果节点
						// 参数：深度纹理、法线纹理、相机
						aoNode = ao( prePassDepth, prePassNormal, camera );

						// 将AO信息添加到场景渲染上下文中
						// context()创建上下文节点，用于在着色器间传递数据
						// aoNode.getTextureNode()获取AO纹理，sample(screenUV)采样整个屏幕
						// .r只取红色通道（AO是单通道信息）
						scenePass.contextNode = context( {
							ao: aoNode.getTextureNode().sample( screenUV ).r
						} );
					}

					// 第四步：如果启用了描边效果，设置描边
					if ( params.enableOutline ) {
						// 创建描边效果节点
						// 参数：场景、相机、配置对象
						// selectedObjects指定哪些对象需要描边效果
						outlineNode = outline( scene, camera, {
							selectedObjects: selectedObjects
						} );
						
						// 将描边效果叠加到主渲染结果上
						// .add()将描边效果与场景渲染结果相加
						colorNode = colorNode.add( outlineNode );
					}

					// 第五步：设置后处理系统的最终输出节点
					postProcessing.outputNode = colorNode;
				}
			}

			// ========== 窗口大小变化处理函数 ==========
			
			function onWindowResize() {
				// 获取当前窗口宽度和高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机纵横比
				// 纵横比 = 宽度 / 高度，确保渲染不变形
				camera.aspect = width / height;
				
				// 更新相机的投影矩阵
				// 当相机参数改变时，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保渲染器画布与窗口大小一致
				renderer.setSize( width, height );
			}

			// ========== 创建随机颜色Canvas纹理函数 ==========
			
			function createImage() {
				// 创建一个canvas元素
				const canvas = document.createElement( 'canvas' );
				// 设置canvas尺寸为256x256像素
				canvas.width = 256;
				canvas.height = 256;

				// 获取2D绘图上下文
				const canvas2DContext = canvas.getContext( '2d' );
				
				// 生成随机RGB颜色
				// Math.random() * 256 生成0-255之间的随机整数
				canvas2DContext.fillStyle = 'rgb(' + 
					Math.floor( Math.random() * 256 ) + ',' + 
					Math.floor( Math.random() * 256 ) + ',' + 
					Math.floor( Math.random() * 256 ) + ')';
				
				// 填充整个canvas区域
				canvas2DContext.fillRect( 0, 0, 256, 256 );

				// 返回canvas元素，将用于创建Three.js纹理
				return canvas;
			}

			// ========== 动画循环函数 ==========
			// 此函数在每一帧被调用（通常每秒60次）
			
			function animate() {
				// 第一部分：网格创建与销毁（内存测试的核心部分）
				
				// 如果启用了网格生成开关
				if ( generateMeshes ) {
					// 清理上一个网格（如果存在）
					if ( mesh ) {
						// 从场景中移除网格
						scene.remove( mesh );

						// 显式释放资源（内存测试的关键部分）
						// 重要：在Three.js中，必须手动释放WebGPU/WebGL资源
						
						// 释放几何体资源
						// 几何体包含顶点、法线、UV等数据，占用GPU内存
						mesh.geometry.dispose();
						
						// 释放纹理资源
						// 纹理占用大量GPU内存，必须显式释放
						mesh.material.map.dispose();
						
						// 释放材质资源
						// 材质包含着色器程序、uniforms等
						mesh.material.dispose();
						
						// 注意：mesh本身由JavaScript垃圾回收器管理
						// 但GPU资源需要手动释放
					}

					// 创建新的球体几何体
					// 参数：
					// 50 - 球体半径
					// Math.random() * 64 - 宽度分段数（随机0-64）
					// Math.random() * 32 - 高度分段数（随机0-32）
					const geometry = new THREE.SphereGeometry( 50, Math.random() * 64, Math.random() * 32 );

					// 创建随机颜色的纹理
					// CanvasTexture从canvas元素创建纹理
					const texture = new THREE.CanvasTexture( createImage() );

					// 创建Lambert材质并应用纹理
					// MeshLambertMaterial是漫反射材质，对光线有反应
					const material = new THREE.MeshLambertMaterial( { map: texture } );

					// 创建网格对象，组合几何体和材质
					mesh = new THREE.Mesh( geometry, material );
					// 启用阴影投射
					mesh.castShadow = true;

					// 将新网格添加到场景中
					scene.add( mesh );

					// 如果启用了描边效果，将当前网格设为选中对象
					if ( outlineNode ) {
						// 描边效果只会应用于selectedObjects数组中的对象
						selectedObjects[ 0 ] = mesh;
					}
				}

				// 第二部分：渲染场景
				
				// 如果启用了后处理系统
				if ( postProcessing ) {
					// 使用后处理系统渲染
					// postProcessing.render()会自动应用所有后处理效果
					postProcessing.render();
				} else {
					// 直接使用渲染器渲染场景
					// 参数：场景对象，相机对象
					renderer.render( scene, camera );
				}
			}

		</script>

	</body>
</html>