<!-- 代码功能描述与技术点分析
🎯 项目概述
这是一个基于Three.js WebGPU渲染器实现的多重渲染目标(MRT)技术演示。项目展示了如何利用现代GPU的并行计算能力，将3D场景的不同属性（颜色和法线）分别渲染到独立的缓冲区，并通过GPU-CPU数据回读技术实现灵活的数据处理和显示。

📊 核心功能
1. 多重渲染目标(MRT)渲染
分通道输出：单次渲染过程中，同时将场景的颜色信息和法线信息输出到两个独立的GPU缓冲区

G-Buffer构建：创建几何缓冲区，存储场景的几何属性，为延迟渲染管线打下基础

实时切换显示：用户可以通过UI选择查看颜色缓冲区、法线缓冲区或两者的分屏对比

2. GPU数据回读(Readback)
跨架构数据传输：将GPU显存中的渲染结果传输到CPU系统内存

异步操作处理：使用Promise和async/await管理GPU-CPU间的异步数据传输

数据纹理化：将回读的原始像素数据转换为纹理，便于在屏幕上显示

3. 交互式3D可视化
动态模型展示：使用圆环结(Torus Knot)作为演示模型，展示复杂几何体的渲染效果

实时相机控制：集成轨道控制器，支持鼠标拖拽、缩放、旋转等交互操作

动画效果：模型随时间自动旋转，展示动态的法线变化效果

🔧 主要技术点
1. WebGPU渲染技术
javascript
// 使用WebGPU后端，提供更底层的GPU访问和更好的性能
const renderer = new THREE.WebGPURenderer({ antialias: true });
现代图形API：替代WebGL，提供更好的性能和多线程支持

显式资源管理：更精细的GPU资源控制，减少驱动开销

计算着色器支持：为未来的GPU计算扩展奠定基础

2. Three.js着色器语言(TSL)
javascript
// 使用TSL节点构建着色器图
material.colorNode = mix(
  texture(renderTarget.textures[0]),
  texture(renderTarget.textures[1]),
  step(0.5, screenUV.x)
);
节点化编程：可视化、可组合的着色器开发模式

类型安全：编译时着色器错误检测

自动优化：TSL编译器自动优化着色器代码

3. MRT配置与管理
javascript
// MRT场景配置 - 定义多个输出目标
const sceneMRT = mrt({
  '颜色输出': output,      // 附件0: 颜色数据
  '法线数据': normalWorld  // 附件1: 法线数据
});
多附件渲染目标：创建包含多个颜色附件的帧缓冲区

着色器输出定向：在着色器中指定不同数据输出到不同附件

纹理资源命名：为调试和开发提供清晰的资源标识

4. GPU-CPU数据管道
javascript
// 异步数据回读 - 从GPU获取像素数据
const pixelBuffer = await renderer.readRenderTargetPixelsAsync(
  readbackTarget, 0, 0, width, height, attachmentIndex
);
异步数据传输：避免阻塞渲染主线程

数据类型转换：GPU浮点数据 → CPU字节数组 → WebGL纹理

内存管理：合理控制回读数据尺寸，避免性能问题

5. 响应式渲染系统
javascript
// 自适应窗口大小变化
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderTarget.setSize(window.innerWidth * dpr, window.innerHeight * dpr);
}
动态分辨率调整：根据设备像素比优化渲染质量

渲染目标重分配：窗口大小改变时重新分配GPU资源

相机参数更新：保持正确的投影矩阵和视野

🏗️ 系统架构
渲染管线设计
text
1. 场景准备阶段
   ├── 3D模型加载与设置
   ├── 材质与纹理配置
   └── 相机与光照初始化

2. MRT渲染阶段（离屏渲染）
   ├── 启用MRT模式
   ├── 渲染到双附件RenderTarget
   │   ├── 附件0: 颜色缓冲区
   │   └── 附件1: 法线缓冲区
   └── 根据模式选择执行数据回读

3. 后处理与显示阶段
   ├── 切换回默认渲染目标
   ├── 应用显示材质（混合或回读）
   └── 渲染全屏四边形到屏幕
数据流架构
text
CPU端控制逻辑 → GPU渲染命令 → GPU并行计算 → 
       ↓                              ↓
   状态更新                     MRT缓冲区填充
       ↓                              ↓
UI事件处理 ← 数据回读请求 ← 可选回读路径 ← 渲染完成
⚡ 性能优化策略
1. 渲染目标尺寸优化
javascript
// 主渲染目标使用全分辨率
const renderTarget = new THREE.RenderTarget(
  window.innerWidth * devicePixelRatio,
  window.innerHeight * devicePixelRatio
);

// 回读渲染目标使用小尺寸（512×512）
const readbackTarget = new THREE.RenderTarget(512, 512);
2. 纹理过滤策略
javascript
// 使用NearestFilter避免插值，保持数据精度
{
  minFilter: THREE.NearestFilter,
  magFilter: THREE.NearestFilter
}
3. 异步操作处理
javascript
// 使用async/await管理GPU操作
async function render(time) {
  // ... 渲染逻辑
  if (isReadback) {
    await readback(); // 等待回读完成
  }
  // ... 继续渲染
}
🔍 调试与开发支持
1. Three.js Inspector集成
javascript
// 启用场景调试工具
renderer.inspector = new Inspector();
const gui = renderer.inspector.createParameters('设置');
2. 纹理资源标识
javascript
// 为渲染目标纹理命名，便于调试
renderTarget.textures[0].name = '颜色输出';
renderTarget.textures[1].name = '法线数据';
3. 交互式参数调整
实时切换显示模式

可视化渲染状态

性能监控支持

🚀 实际应用场景
1. 游戏开发
延迟渲染管线：MRT用于存储G-Buffer，支持复杂光照模型

屏幕空间效果：法线缓冲区用于SSAO、反射、折射等后处理

视觉效果调试：分离显示不同的渲染通道，便于美术调试

2. 科学可视化
数据提取分析：从3D模型中提取法线、曲率等几何信息

GPU计算预处理：在GPU上进行初步计算，结果回读到CPU进一步分析

多属性同步显示：同时查看模型的多个物理属性

3. 计算机视觉
合成数据生成：生成带有法线信息的训练数据

特征提取：从渲染结果中提取视觉特征

算法验证：可视化算法中间结果，便于调试和优化

4. 工业设计
表面质量检查：通过法线图检查模型表面连续性

光照分析：在不同光照条件下评估产品外观

实时材质预览：快速预览不同材质和纹理组合效果

📈 技术演进方向
当前实现
基础MRT渲染管线

简单的GPU-CPU数据回读

基本的交互和显示功能

扩展可能性
更多渲染通道：添加深度、粗糙度、金属度等缓冲区

高级后处理：基于MRT的屏幕空间全局光照

GPU计算集成：使用WebGPU计算着色器进行图像处理

机器学习集成：将渲染结果作为神经网络输入

跨平台优化：针对移动设备进行性能优化

🎨 用户体验设计
视觉设计原则
清晰的信息层次：分屏显示直观对比不同渲染通道

平滑的交互反馈：实时响应用户操作，无明显延迟

自适应的布局：在不同屏幕尺寸下保持良好显示效果

交互设计特点
一键模式切换：简单直观的模式选择界面

自然的相机控制：符合用户习惯的3D导航方式

实时视觉反馈：所有操作立即反映在渲染结果上

🔗 技术栈依赖
核心框架
Three.js r160+：3D渲染引擎

WebGPU API：底层图形接口

TSL：着色器编程语言

开发工具
ES6模块系统：现代JavaScript模块管理

Import Maps：浏览器原生模块别名支持

调试工具：内置Inspector和GUI系统

性能要求
现代浏览器：支持WebGPU的Chrome/Edge 113+

GPU兼容性：支持Vulkan/Metal/D3D12的显卡

内存需求：足够的显存存储多个渲染目标

💡 学习价值
对于Web开发者
了解现代Web图形API的最新发展

学习GPU编程的基本概念和技术

掌握3D可视化应用的开发流程

对于图形程序员
深入理解MRT渲染管线的工作原理

学习GPU-CPU数据交互的最佳实践

探索WebGPU在实时图形中的应用潜力

对于计算机视觉研究者
了解合成数据生成的技术实现

学习如何从3D渲染中提取特征信息

探索Web技术在科学计算中的应用 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGPU - 多重渲染目标数据回读示例 -->
		<title>Three.js WebGPU - MRT多重渲染目标数据回读演示</title>
		<meta charset="utf-8">
		<!-- 空的favicon链接，避免浏览器请求默认图标 -->
		<link rel="shortcut icon" href="#">
		<!-- 
			响应式视口设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放
			minimum-scale=1.0, maximum-scale=1.0 - 固定缩放比例为1
		-->
		<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>

		<!-- 
			页面信息展示区域，包含标题、描述和链接 
			id="info" 用于CSS样式选择和JavaScript操作
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接，带logo样式
				target="_blank" - 在新标签页打开
				rel="noopener" - 安全特性，防止新页面访问原页面window对象
			-->
			<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>多重渲染目标(MRT)数据回读演示</span>
			</div>

			<!-- 
				示例描述文本，使用<small>标签表示次要信息
				描述本示例的主要功能和技术特点
			-->
			<small>
				本示例演示了如何使用多重渲染目标(MRT)技术将场景的颜色信息和法线信息分别渲染到不同的缓冲区，
				并通过GPU数据回读技术将渲染结果从GPU内存读取回CPU内存进行显示和处理。
				左侧显示颜色缓冲区，右侧显示法线缓冲区，可以通过下拉菜单切换显示模式。
			</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模块
			模块内的代码具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// ==================== 模块导入部分 ====================
			
			// 导入Three.js的WebGPU渲染器及相关核心功能
			// * as THREE 表示将所有导出内容作为一个名为THREE的对象导入
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言(TSL)节点
			// 这些是用于构建着色器图的节点函数：
			// - mix: 线性混合两个值
			// - step: 阶梯函数，用于阈值判断
			// - texture: 纹理采样节点
			// - screenUV: 屏幕空间UV坐标（0到1范围）
			// - mrt: 多重渲染目标节点
			// - output: 输出节点，用于MRT的颜色输出
			// - normalWorld: 世界空间法线节点
			// - uv: 模型UV坐标
			// - vec2: 二维向量构造函数
			import { mix, step, texture, screenUV, mrt, output, normalWorld, uv, vec2 } from 'three/tsl';

			// 导入轨道控制器，用于通过鼠标交互控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试检查器，用于Three.js场景的实时调试和参数调整
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ==================== 全局变量声明 ====================
			
			// 场景相关变量
			let camera;      // 透视相机，用于定义观察场景的视角
			let scene;       // 主场景，包含所有要渲染的3D对象
			let renderer;    // WebGPU渲染器，负责将3D场景渲染到2D屏幕
			let torus;       // 圆环结(Torus Knot)网格对象，本示例的主要3D模型
			
			// MRT相关变量
			let quadMesh;        // 全屏四边形网格，用于后处理渲染
			let sceneMRT;        // MRT场景配置，定义多重渲染目标的输出
			let renderTarget;    // 主渲染目标，用于存储MRT渲染结果
			let readbackTarget;  // 回读渲染目标，专门用于GPU数据回读
			
			// 材质相关变量
			let material;         // 主显示材质，用于混合显示MRT的两个缓冲区
			let readbackMaterial; // 回读显示材质，用于显示从GPU读取的数据
			
			// 数据回读相关变量
			let pixelBuffer;         // Uint8Array类型，存储从GPU读取的像素数据
			let pixelBufferTexture;  // 数据纹理，将像素数据显示为纹理

			// 配置选项对象，用于GUI控制和程序状态管理
			const options = {
				// 显示模式选择：
				// - 'mrt': 显示MRT混合结果（左侧颜色，右侧法线）
				// - 'diffuse': 仅显示漫反射/颜色缓冲区
				// - 'normal': 仅显示法线缓冲区
				selection: 'mrt',  // 默认显示MRT混合结果
			};

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

			/**
			 * 初始化函数 - 整个应用程序的入口点
			 * 负责创建和配置所有Three.js对象、设置事件监听器等
			 * 这个函数只会在页面加载时执行一次
			 */
			function init() {

				// -------------------- 渲染器初始化 --------------------
				// 创建WebGPURenderer实例，启用抗锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比，确保在高DPI显示器上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置渲染循环，每帧调用render函数
				// 这是Three.js动画系统的核心，代替了传统的requestAnimationFrame
				renderer.setAnimationLoop( render );
				// 将渲染器的canvas元素添加到DOM中，这样用户才能看到渲染结果
				document.body.appendChild( renderer.domElement );

				// -------------------- 调试工具初始化 --------------------
				// 创建Inspector实例并附加到渲染器，用于调试Three.js场景
				// Inspector提供了实时查看和修改场景参数的能力
				renderer.inspector = new Inspector();

				// -------------------- GUI控件创建 --------------------
				// 在Inspector中创建一个名为"设置"的参数面板
				const gui = renderer.inspector.createParameters( '设置' );
				// 添加一个下拉菜单控件，用于切换显示模式
				// 当用户选择不同选项时，options.selection的值会自动更新
				gui.add( options, 'selection', [ 'mrt', '漫反射', '法线' ] );

				// -------------------- 多重渲染目标(MRT)创建 --------------------
				/*
				 * RenderTarget是Three.js中的离屏渲染缓冲区
				 * 这里创建了一个包含两个颜色附件的MRT：
				 * 附件0: 存储颜色/漫反射信息
				 * 附件1: 存储世界空间法线信息
				 * 
				 * 参数说明：
				 * 1. 宽度：窗口宽度 × 设备像素比（确保在高DPI屏幕上清晰）
				 * 2. 高度：窗口高度 × 设备像素比
				 * 3. 配置对象：
				 *    - count: 2 → 两个颜色附件
				 *    - minFilter/magFilter: NearestFilter → 最近邻过滤，避免插值影响数据精度
				 * 
				 * 注意：MRT常用于延迟渲染(Deferred Rendering)管线
				 */
				renderTarget = new THREE.RenderTarget(
					window.innerWidth * window.devicePixelRatio,
					window.innerHeight * window.devicePixelRatio,
					{ 
						count: 2,  // 两个颜色附件
						minFilter: THREE.NearestFilter,  // 纹理缩小过滤方式
						magFilter: THREE.NearestFilter   // 纹理放大过滤方式
					}
				);

				// 为G-Buffer附件命名，便于调试时识别
				// G-Buffer是延迟渲染中的几何缓冲区，存储场景的几何信息
				renderTarget.textures[ 0 ].name = '颜色输出';      // 第一个附件：颜色/漫反射
				renderTarget.textures[ 1 ].name = '法线数据';      // 第二个附件：世界空间法线

				// -------------------- 数据回读系统初始化 --------------------
				/*
				 * 重要：回读尺寸需要谨慎选择！
				 * 512×512已经是一个较大的尺寸了，因为：
				 * 1. GPU到CPU的数据传输带宽有限
				 * 2. 回读操作会阻塞渲染管线，等待GPU完成渲染
				 * 3. 大数据量回读会导致明显的性能下降
				 */
				const size = 512;  // 回读纹理的尺寸（正方形）

				// 创建专门用于回读的渲染目标
				// 使用较小的尺寸以减少数据传输开销
				readbackTarget = new THREE.RenderTarget( size, size, { count: 2 } );

				/*
				 * 创建像素缓冲区：
				 * - size²：总像素数（512×512 = 262,144像素）
				 * - ×4：每个像素4个字节（RGBA通道）
				 * - fill(0)：用0初始化所有字节
				 * 
				 * 注意：这是CPU端的内存，用于存储从GPU读取的数据
				 */
				pixelBuffer = new Uint8Array( size ** 2 * 4 ).fill( 0 );
				
				/*
				 * 创建数据纹理：
				 * - 将像素缓冲区包装为纹理，便于在着色器中访问
				 * - 参数：数据，宽度，高度
				 * 
				 * 数据纹理与普通纹理的区别：
				 * 1. 数据纹理直接从内存数据创建，而不是图像文件
				 * 2. 可以动态更新内容
				 * 3. 常用于计算着色器输出、数据可视化等
				 */
				pixelBufferTexture = new THREE.DataTexture( pixelBuffer, size, size );
				pixelBufferTexture.type = THREE.UnsignedByteType;  // 数据类型：无符号字节（0-255）
				pixelBufferTexture.format = THREE.RGBAFormat;      // 数据格式：RGBA四通道

				// 创建回读显示材质
				// MeshBasicNodeMaterial是Three.js的节点基础材质
				readbackMaterial = new THREE.MeshBasicNodeMaterial();
				// 设置颜色节点为数据纹理采样
				// 这将把回读的像素数据显示为纹理
				readbackMaterial.colorNode = texture( pixelBufferTexture );

				// -------------------- MRT场景配置 --------------------
				/*
				 * mrt()函数创建MRT场景配置
				 * 这是一个着色器图配置，定义哪些数据输出到哪些渲染目标附件
				 * 
				 * 键值对说明：
				 * - 键：附件名称（与之前命名的纹理对应）
				 * - 值：TSL节点，定义输出数据
				 * 
				 * 这个配置告诉渲染器：
				 * 1. 将"output"（颜色）写入附件0
				 * 2. 将"normalWorld"（世界空间法线）写入附件1
				 */
				sceneMRT = mrt( {
					'颜色输出': output,        // 标准颜色输出节点
					'法线数据': normalWorld    // 世界空间法线节点
				} );

				// -------------------- 主场景创建 --------------------
				// 创建Three.js场景对象，这是所有3D对象的容器
				scene = new THREE.Scene();
				// 设置场景背景颜色为深灰色（十六进制颜色码）
				scene.background = new THREE.Color( 0x222222 );

				// 创建透视相机
				/*
				 * 透视相机参数：
				 * 1. fov: 70 → 垂直视野角度（度）
				 * 2. aspect: 窗口宽高比 → 确保渲染不变形
				 * 3. near: 0.1 → 近裁剪平面（距离小于此值的物体不渲染）
				 * 4. far: 50 → 远裁剪平面（距离大于此值的物体不渲染）
				 */
				camera = new THREE.PerspectiveCamera( 
					70, 
					window.innerWidth / window.innerHeight, 
					0.1, 
					50 
				);
				// 设置相机初始位置：沿Z轴向后移动4个单位
				camera.position.z = 4;

				// 创建纹理加载器实例
				const loader = new THREE.TextureLoader();

				// 加载漫反射纹理
				/*
				 * 纹理加载是异步操作，但TextureLoader提供了简洁的API
				 * 硬木纹理提供自然的表面细节
				 */
				const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg' );
				// 设置颜色空间为sRGB，确保颜色正确显示
				diffuse.colorSpace = THREE.SRGBColorSpace;
				// 设置纹理环绕方式为重复，当UV坐标超过[0,1]范围时重复纹理
				diffuse.wrapS = THREE.RepeatWrapping;  // S方向（水平/U方向）
				diffuse.wrapT = THREE.RepeatWrapping;  // T方向（垂直/V方向）

				// 创建圆环结材质（使用节点材质系统）
				/*
				 * NodeMaterial是Three.js的可视化着色器编辑系统
				 * 允许通过连接节点的方式构建复杂材质
				 */
				const torusMaterial = new THREE.NodeMaterial();
				// 设置材质颜色节点：采样纹理，并应用UV变换
				// uv().mul(vec2(10, 4)) 将UV坐标缩放，实现纹理重复效果
				// 水平重复10次，垂直重复4次
				torusMaterial.colorNode = texture( diffuse, uv().mul( vec2( 10, 4 ) ) );

				// 创建圆环结网格对象
				/*
				 * TorusKnotGeometry参数：
				 * 1. radius: 1 → 主要半径
				 * 2. tube: 0.3 → 管道半径
				 * 3. tubularSegments: 128 → 管道分段数（影响圆滑度）
				 * 4. radialSegments: 32 → 径向分段数（影响圆滑度）
				 * 
				 * 圆环结是一种有趣的几何形状，适合展示法线效果
				 */
				torus = new THREE.Mesh( 
					new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ), 
					torusMaterial 
				);
				// 将圆环结添加到场景中
				scene.add( torus );

				// -------------------- 后处理材质创建 --------------------
				/*
				 * 创建用于最终显示的材质
				 * 这个材质将MRT的两个纹理混合显示：
				 * - 左侧：颜色纹理
				 * - 右侧：法线纹理
				 * - 中间：硬过渡（使用step函数）
				 */
				material = new THREE.NodeMaterial();
				// 构建混合节点：
				// 1. texture(renderTarget.textures[0]) → 采样颜色纹理
				// 2. texture(renderTarget.textures[1]) → 采样法线纹理
				// 3. step(0.5, screenUV.x) → 创建阈值函数：
				//    - 当screenUV.x < 0.5时返回0（显示颜色纹理）
				//    - 当screenUV.x >= 0.5时返回1（显示法线纹理）
				// 4. mix() → 根据阈值混合两个纹理
				material.colorNode = mix( 
					texture( renderTarget.textures[ 0 ] ),  // 颜色纹理
					texture( renderTarget.textures[ 1 ] ),  // 法线纹理
					step( 0.5, screenUV.x )                 // 混合因子（基于屏幕水平位置）
				);

				// 创建全屏四边形网格
				/*
				 * QuadMesh是Three.js的特殊网格类型：
				 * 1. 始终覆盖整个屏幕
				 * 2. 用于后处理效果、全屏着色器等
				 * 3. 自动设置几何体和变换，无需手动配置
				 */
				quadMesh = new THREE.QuadMesh( material );

				// -------------------- 用户交互控制 --------------------
				// 创建轨道控制器，绑定到相机和渲染器DOM元素
				/*
				 * OrbitControls提供以下交互：
				 * 1. 左键拖动：旋转相机
				 * 2. 右键拖动：平移相机
				 * 3. 鼠标滚轮：缩放镜头
				 * 4. 触摸手势：移动设备支持
				 */
				new OrbitControls( camera, renderer.domElement );

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

			} // init函数结束

			/**
			 * 窗口大小调整事件处理函数
			 * 确保渲染内容和相机正确适应新的窗口尺寸
			 * 这个函数会在每次窗口大小改变时被调用
			 */
			function onWindowResize() {

				// 更新相机纵横比
				// 纵横比 = 窗口宽度 / 窗口高度
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 必须手动调用，Three.js不会自动更新
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保渲染画布填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 更新主渲染目标尺寸
				// 获取当前设备像素比
				const dpr = renderer.getPixelRatio();
				// 重新设置渲染目标尺寸，考虑设备像素比
				renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );

			}

			/**
			 * 主渲染循环函数
			 * 这是Three.js动画系统的核心，每帧自动调用
			 * 负责更新动画状态、渲染场景、处理用户交互等
			 * 
			 * @param {number} time - 从页面加载开始经过的时间（毫秒）
			 *     Three.js自动传入这个参数，可用于基于时间的动画
			 */
			async function render( time ) {

				// 获取当前选择的显示模式
				const selection = options.selection;

				// 更新圆环结的旋转动画
				// time/1000 将毫秒转换为秒
				// 乘以0.4控制旋转速度
				// 这个动画展示了动态的法线变化效果
				torus.rotation.y = ( time / 1000 ) * .4;

				// 判断当前是否需要执行数据回读操作
				// 只有选择了"漫反射"或"法线"模式时才需要回读
				const isReadback = ( selection !== 'mrt' );

				// ========== 第一步：将场景渲染到MRT中 ==========
				
				// 启用MRT渲染模式
				// setMRT()告诉渲染器使用之前配置的MRT输出
				renderer.setMRT( sceneMRT );
				
				// 设置当前渲染目标：
				// - 如果需要回读：使用较小的readbackTarget（性能考虑）
				// - 如果不需要回读：使用完整的renderTarget
				renderer.setRenderTarget( isReadback ? readbackTarget : renderTarget );
				
				// 执行渲染
				// render()函数将场景和相机渲染到当前设置的渲染目标
				renderer.render( scene, camera );

				// ========== 第二步：渲染后处理效果 ==========
				
				// 禁用MRT模式，回到单渲染目标模式
				renderer.setMRT( null );
				
				// 设置渲染目标为null，表示渲染到默认帧缓冲区（屏幕）
				renderer.setRenderTarget( null );

				// ========== 第三步：准备最终显示 ==========
				
				// 根据显示模式选择不同的材质
				if ( isReadback ) {
					// 回读模式：显示从GPU读取的数据
					// 将全屏四边形的材质切换为回读材质
					quadMesh.material = readbackMaterial;
					
					// 执行GPU数据回读操作
					// await关键字等待回读完成，确保数据可用后再渲染
					await readback();
					
				} else {
					// MRT混合模式：显示颜色和法线的分屏视图
					// 使用之前创建的混合材质
					quadMesh.material = material;
				}

				// ========== 第四步：渲染最终结果到屏幕 ==========
				
				// 渲染全屏四边形
				// quadMesh.render()将四边形渲染到当前渲染目标（屏幕）
				quadMesh.render( renderer );

			}

			/**
			 * GPU数据回读函数
			 * 从渲染目标中读取像素数据到CPU内存
			 * 
			 * 注意：这是一个异步函数，因为它涉及GPU-CPU数据传输
			 * GPU操作是并行的，CPU需要等待GPU完成渲染才能读取数据
			 * 
			 * 性能警告：
			 * 1. readRenderTargetPixelsAsync会阻塞渲染管线
			 * 2. 大数据量传输会导致明显的帧率下降
			 * 3. 应尽量避免每帧都执行回读操作
			 */
			async function readback() {

				// 获取回读渲染目标的尺寸
				const width = readbackTarget.width;
				const height = readbackTarget.height;
				
				// 获取当前选择的显示模式
				const selection = options.selection;

				// 根据选择的模式读取不同的颜色附件
				if ( selection === '漫反射' ) {
					
					/*
					 * 读取第一个颜色附件（漫反射/颜色数据）
					 * 
					 * readRenderTargetPixelsAsync参数：
					 * 1. renderTarget: 要读取的渲染目标
					 * 2. x: 读取区域的左上角X坐标（0表示从左边开始）
					 * 3. y: 读取区域的左上角Y坐标（0表示从顶部开始）
					 * 4. width: 读取区域的宽度
					 * 5. height: 读取区域的高度
					 * 6. attachmentIndex: 颜色附件索引（0表示第一个附件）
					 * 
					 * 返回值：Uint8Array，包含RGBA像素数据
					 * 每个像素4个字节：[R, G, B, A, R, G, B, A, ...]
					 */
					pixelBuffer = await renderer.readRenderTargetPixelsAsync( 
						readbackTarget,  // 要读取的渲染目标
						0,               // 起始X坐标
						0,               // 起始Y坐标
						width,           // 读取宽度
						height,          // 读取高度
						0                // 颜色附件索引：0表示第一个附件（漫反射）
					);
					
				} else if ( selection === '法线' ) {
					
					// 读取第二个颜色附件（法线数据）
					// 参数与上面相同，但attachmentIndex为1
					pixelBuffer = await renderer.readRenderTargetPixelsAsync( 
						readbackTarget,  // 要读取的渲染目标
						0,               // 起始X坐标
						0,               // 起始Y坐标
						width,           // 读取宽度
						height,          // 读取高度
						1                // 颜色附件索引：1表示第二个附件（法线）
					);
					
				}

				// ========== 更新数据纹理 ==========
				
				// 将新读取的像素数据赋给数据纹理
				// pixelBufferTexture.image.data 指向原始的像素数据数组
				pixelBufferTexture.image.data = pixelBuffer;
				
				// 标记纹理需要更新
				// Three.js使用脏标记系统，只有标记为需要更新时才会重新上传到GPU
				pixelBufferTexture.needsUpdate = true;

			}

		</script>

	</body>
</html>