<!-- 代码功能与主要技术点分析
🎯 整体功能描述
这是一个基于Three.js WebGPU的多重渲染目标（MRT）技术演示，展示了现代图形渲染中的延迟渲染基础原理。程序通过两个渲染通道实现：

第一通道（几何通道）：将3D场景的颜色和法线信息分别渲染到两个独立的缓冲区

第二通道（合成通道）：将两个缓冲区的内容并排显示，左侧显示颜色纹理，右侧显示法线贴图

核心功能展示：
✅ 实时3D渲染：显示一个旋转的圆环结模型

✅ 多重缓冲区：同时生成颜色和法线数据

✅ 分屏对比：直观展示不同缓冲区的内容

✅ 交互控制：支持鼠标旋转、缩放和平移场景

✅ 响应式设计：自适应窗口大小变化

🔧 主要技术点详解
1. WebGPU渲染技术
javascript
renderer = new THREE.WebGPURenderer( { antialias: true } );
技术：使用新一代WebGPU API替代传统的WebGL

优势：更接近金属（Metal）/Vulkan/DirectX 12的现代API设计

特性：更好的多线程支持、显式内存管理、计算着色器支持

兼容性：需要现代浏览器支持（Chrome 113+，Edge 113+）

2. 多重渲染目标（MRT）
javascript
renderTarget = new THREE.RenderTarget(width, height, { count: 2 });
renderer.setMRT(mrt({ 'output': output, 'normal': normalWorld }));
概念：单次渲染通道输出到多个颜色附件

实现：创建包含2个颜色附件的渲染目标

附件0：存储片元颜色（RGB）

附件1：存储世界空间法线（XYZ）

应用场景：G-Buffer生成、延迟渲染、后处理效果

3. G-Buffer（几何缓冲区）技术
text
┌─────────────────┬─────────────────┐
│  颜色缓冲区     │  法线缓冲区     │
│  (RGB色彩数据)  │  (XYZ法线数据)  │
└─────────────────┴─────────────────┘
目的：分离几何信息存储，便于后续光照计算

存储内容：

漫反射颜色：物体表面的基础颜色

世界空间法线：用于光照计算的表面朝向

扩展性：可增加位置、深度、金属度、粗糙度等通道

4. TSL（Three.js Shader Language）
javascript
import { mix, vec2, step, texture, uv, normalWorld } from 'three/tsl';
定义：Three.js的声明式着色器语言

特点：

节点化编程：通过连接节点创建着色器

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

跨平台：自动转换为GLSL/HLSL/WGSL

示例应用：

javascript
texture(diffuse, uv().mul(vec2(10, 4)))  // 纹理采样与UV变换
mix(colorTex, normalTex, step(0.5, screenUV.x)) // 分屏混合
5. 两阶段渲染架构
javascript
// 第一阶段：渲染到MRT
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

// 第二阶段：后处理到屏幕
renderer.setRenderTarget(null);
postProcessing.render();
第一阶段 - 几何填充：

输入：3D场景几何数据

输出：G-Buffer（颜色 + 法线）

着色器：计算每个像素的颜色和法线

第二阶段 - 屏幕空间处理：

输入：G-Buffer纹理

处理：分屏混合、颜色校正等

输出：最终显示画面

6. 分屏显示技术
javascript
step(0.5, screenUV.x)  // 创建分屏遮罩
原理：基于屏幕UV坐标的硬分割

实现：

screenUV.x < 0.5：显示颜色纹理

screenUV.x ≥ 0.5：显示法线纹理

视觉效果：直观对比原始颜色与法线信息

7. 延迟渲染基础
text
传统前向渲染：
几何 → [顶点处理 → 片元着色（含光照）] → 屏幕

延迟渲染：
几何 → [顶点处理 → 片元着色（到G-Buffer）] → G-Buffer → [屏幕空间光照] → 屏幕
优势：

光照计算与场景复杂度解耦

适合大量光源的场景

避免不可见片元的计算浪费

代价：更高的内存带宽消耗，G-Buffer存储开销

8. 法线可视化
世界空间法线：相对于世界坐标系的表面方向

颜色编码：

X分量 → 红色通道

Y分量 → 绿色通道

Z分量 → 蓝色通道

观察效果：不同朝向的表面显示不同颜色

9. 性能优化技术
纹理过滤：使用THREE.NearestFilter避免法线数据插值

分辨率管理：基于设备像素比调整渲染目标尺寸

抗锯齿：WebGPU硬件抗锯齿

📊 技术架构图
text
┌─────────────────────────────────────────────────────┐
│                   应用程序层                         │
├─────────────────────────────────────────────────────┤
│  Three.js WebGPU API     │      TSL着色器语言        │
├─────────────────────────────────────────────────────┤
│            WebGPU驱动程序（浏览器）                  │
├─────────────────────────────────────────────────────┤
│                 GPU硬件（着色器核心）                │
└─────────────────────────────────────────────────────┘

渲染管线流程：
1. JavaScript代码 → 2. Three.js转换 → 3. WebGPU命令 → 4. GPU执行
🚀 实际应用场景
1. 游戏开发
延迟光照：支持大量动态光源

屏幕空间效果：环境光遮蔽、反射、全局光照

后处理特效：景深、运动模糊、色彩分级

2. 工业可视化
数据分离：将不同属性渲染到不同通道

分析模式：快速切换显示不同属性（颜色、法线、深度等）

高质量渲染：复杂光照模型的实现

3. 科研模拟
物理属性可视化：应力分布、温度梯度等

多变量显示：同时展示多个数据维度

实时交互：动态调整参数并立即看到效果

4. 建筑可视化
材质分析：分离显示不同材质属性

光照研究：分析不同光照条件下的效果

实时渲染：快速反馈设计修改

⚙️ 关键技术配置
渲染目标配置：
javascript
{
  count: 2,                    // 颜色附件数量
  format: THREE.RGBAFormat,    // 像素格式（每个通道8位）
  type: THREE.FloatType,       // 数据类型（浮点数）
  minFilter: THREE.NearestFilter, // 纹理过滤
  magFilter: THREE.NearestFilter
}
性能考虑：
内存使用：两个1920×1080的RGBA浮点纹理 ≈ 63MB

带宽需求：每帧读写G-Buffer的带宽消耗

填充率：屏幕像素数 × 颜色附件数

🔮 扩展可能性
更多G-Buffer通道：添加位置、深度、材质ID等

屏幕空间光照：在第二阶段实现完整延迟光照

抗锯齿方案：FXAA、TAA等后处理抗锯齿

计算着色器：利用WebGPU的计算管线

光线追踪：结合硬件加速光线追踪 -->


<!DOCTYPE html>
<html lang="zh-CN"> <!-- 改为中文语言 -->
	<head>
		<!-- 修改标题为中文 -->
		<title>Three.js WebGPU 示例 - 多重渲染目标技术</title>
		<meta charset="utf-8">
		<!-- 
			视口元标签：控制移动设备上的显示
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放
			minimum-scale=1.0: 最小缩放比例为1
			maximum-scale=1.0: 最大缩放比例为1
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入外部CSS样式文件，type="text/css"指定样式表类型 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 页面信息显示区域，id为info用于CSS样式选择器 -->
		<div id="info">
			<!-- 
				Three.js官网链接
				target="_blank": 在新标签页打开链接
				rel="noopener": 安全属性，防止新页面访问原页面的window对象
				class="logo-link": CSS类名，可能用于添加Three.js图标样式
			-->
			<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>
				<!-- 示例描述 -->
				此示例演示了多重渲染目标技术，将场景的颜色信息和法线信息分别渲染到不同的缓冲区中。
				<br>左侧显示颜色纹理，右侧显示法线贴图，展示了延迟渲染的基本原理。
			</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代码，type="module"表示这是一个ES6模块 -->
		<script type="module">

			// ==================== 模块导入部分 ====================
			// 导入Three.js WebGPU版本的所有功能，命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入特定的着色器函数：
			// mix: 线性插值函数，用于混合两个值
			// vec2: 创建二维向量
			// step: 阶梯函数，根据阈值返回0或1
			// texture: 纹理采样函数
			// uv: 获取UV坐标
			// screenUV: 获取屏幕空间UV坐标
			// normalWorld: 世界空间法线
			// output: 默认输出
			// mrt: 多重渲染目标函数
			import { mix, vec2, step, texture, uv, screenUV, normalWorld, output, mrt } from 'three/tsl';
			
			// 导入轨道控制器，允许用户用鼠标控制相机旋转、平移和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ==================== 全局变量声明 ====================
			// camera: 透视相机，用于定义观察3D场景的视角
			// scene: 3D场景，包含所有要渲染的对象
			// renderer: WebGPU渲染器，负责将3D场景绘制到canvas
			// torus: 圆环结网格对象，本示例的主要3D模型
			let camera, scene, renderer, torus;
			
			// postProcessing: 后处理对象，用于应用屏幕空间效果
			// renderTarget: 渲染目标，作为离屏渲染缓冲区
			let postProcessing, renderTarget;

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

			/**
			 * 初始化函数 - 应用程序入口点
			 * 职责：创建和设置所有Three.js对象、配置渲染管线
			 * 执行顺序：1.创建渲染器 2.创建场景和相机 3.创建几何体和材质 4.设置光照 5.配置渲染
			 */
			function init() {

				// ---------- 1. 创建和配置WebGPU渲染器 ----------
				// 创建WebGPURenderer实例，开启抗锯齿以获得平滑的边缘
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比，确保在高DPI显示器上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸与浏览器窗口尺寸匹配
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置渲染循环，render函数将每帧被调用（通常是60fps）
				renderer.setAnimationLoop( render );
				// 将渲染器的canvas DOM元素添加到网页body中
				document.body.appendChild( renderer.domElement );

				// ---------- 2. 创建多重渲染目标 (MRT) ----------
				// RenderTarget是离屏渲染缓冲区，用于存储中间渲染结果
				// 这里创建包含两个颜色附件的MRT，模拟G-Buffer
				renderTarget = new THREE.RenderTarget(
					// 宽度：窗口宽度 × 设备像素比，确保像素完美
					window.innerWidth * window.devicePixelRatio,
					// 高度：窗口高度 × 设备像素比
					window.innerHeight * window.devicePixelRatio,
					{
						count: 2, // 颜色附件数量：2个（一个用于颜色，一个用于法线）
						// 纹理过滤设置：
						minFilter: THREE.NearestFilter, // 缩小过滤：最近邻，保持锐利边缘
						magFilter: THREE.NearestFilter   // 放大过滤：最近邻
						// 注意：NearestFilter避免了插值，适合存储精确数据（如法线）
					}
				);

				// 为渲染目标的纹理附件命名，便于调试和识别
				// 在WebGPU调试工具中可以看到这些名称
				renderTarget.textures[ 0 ].name = 'output'; // 第一个附件：颜色输出（漫反射颜色）
				renderTarget.textures[ 1 ].name = 'normal'; // 第二个附件：法线信息（世界空间法线）

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

				// ---------- 4. 创建和配置相机 ----------
				// 创建透视相机，参数：视野角、纵横比、近裁剪面、远裁剪面
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
				// 设置相机位置：沿Z轴正方向移动4个单位
				camera.position.z = 4;

				// ---------- 5. 加载纹理和创建材质 ----------
				// 创建纹理加载器，用于加载图像文件
				const loader = new THREE.TextureLoader();

				// 加载木纹漫反射纹理
				const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg' );
				// 设置纹理颜色空间为sRGB，确保颜色正确显示
				diffuse.colorSpace = THREE.SRGBColorSpace;
				// 设置纹理包裹模式：S方向（U坐标）重复
				diffuse.wrapS = THREE.RepeatWrapping;
				// 设置纹理包裹模式：T方向（V坐标）重复
				diffuse.wrapT = THREE.RepeatWrapping;

				// 创建节点材质（基于TSL着色器语言）
				// NodeMaterial允许使用节点图方式创建着色器
				const torusMaterial = new THREE.NodeMaterial();
				// 设置材质颜色节点：对纹理进行采样
				// texture(diffuse, uv) - 在UV坐标处采样纹理
				// uv().mul(vec2(10, 4)) - 将UV坐标乘以(10, 4)，实现纹理平铺效果
				// 这意味着纹理在U方向重复10次，V方向重复4次
				torusMaterial.colorNode = texture( diffuse, uv().mul( vec2( 10, 4 ) ) );

				// ---------- 6. 创建3D几何体 ----------
				// 创建圆环结网格（Torus Knot）：
				// TorusKnotGeometry参数：半径、管道半径、径向分段数、管道分段数
				torus = new THREE.Mesh( 
					new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ), // 几何体：圆环结
					torusMaterial // 材质：之前创建的节点材质
				);
				// 将圆环结添加到场景中
				scene.add( torus );

				// ---------- 7. 配置多重渲染目标输出 ----------
				// 设置渲染器的MRT输出配置
				// mrt函数创建一个多重渲染目标描述符
				renderer.setMRT( mrt( {
					'output': output,      // 第一个颜色附件：输出片元的颜色值
					'normal': normalWorld  // 第二个颜色附件：输出片元的世界空间法线
				} ) );

				// ---------- 8. 配置后处理效果 ----------
				// 创建PostProcessing实例，用于屏幕空间效果
				postProcessing = new THREE.PostProcessing( renderer );
				// 设置后处理的输出节点：
				// mix(a, b, factor) - 线性混合：result = a * (1 - factor) + b * factor
				// texture(renderTarget.textures[0]) - 采样颜色纹理
				// texture(renderTarget.textures[1]) - 采样法线纹理
				// step(0.5, screenUV.x) - 创建分屏效果：
				//   screenUV.x是屏幕空间水平坐标（0到1）
				//   step返回0（当x<0.5）或1（当x≥0.5）
				//   结果：左侧显示颜色，右侧显示法线
				postProcessing.outputNode = mix( 
					texture( renderTarget.textures[ 0 ] ), // 左侧：颜色纹理
					texture( renderTarget.textures[ 1 ] ), // 右侧：法线纹理
					step( 0.5, screenUV.x ) // 混合因子：基于屏幕X坐标的硬切分
				);

				// ---------- 9. 添加用户交互控制 ----------
				// 创建OrbitControls实例，将相机与渲染器的DOM元素绑定
				// 用户可以通过鼠标拖拽、滚轮进行场景交互
				new OrbitControls( camera, renderer.domElement );

				// ---------- 10. 添加窗口大小变化监听 ----------
				// 监听浏览器窗口的resize事件
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时调用
			 * 职责：更新相机、渲染器和渲染目标的尺寸
			 */
			function onWindowResize() {

				// 1. 更新相机纵横比（aspect ratio）
				// 相机需要知道渲染区域的长宽比以正确计算透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机投影矩阵
				// 当相机参数改变后，必须调用此方法来重新计算投影矩阵
				camera.updateProjectionMatrix();

				// 3. 更新渲染器尺寸
				// 确保渲染器的输出尺寸与窗口新尺寸匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 4. 更新渲染目标尺寸
				// 获取当前设备像素比（Device Pixel Ratio）
				const dpr = renderer.getPixelRatio();
				// 更新渲染目标的尺寸，确保与渲染器分辨率一致
				renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );

			}

			/**
			 * 主渲染循环函数
			 * 每帧调用（通常是60次/秒）
			 * 这是Three.js动画循环的核心
			 * 
			 * @param {number} time - 从页面加载开始经过的时间（毫秒）
			 *                        由requestAnimationFrame或setAnimationLoop提供
			 */
			function render( time ) {

				// ---------- 1. 更新动画状态 ----------
				// 根据时间旋转圆环结模型
				// time / 1000：将毫秒转换为秒
				// * 0.4：控制旋转速度的系数
				// 结果：圆环结每秒旋转0.4弧度（约23度）
				torus.rotation.y = ( time / 1000 ) * .4;

				// ---------- 2. 第一步渲染：场景到MRT ----------
				// 将当前渲染目标设置为MRT（离屏缓冲区）
				renderer.setRenderTarget( renderTarget );
				// 渲染场景到MRT：
				//  - 颜色信息写入第一个颜色附件
				//  - 法线信息写入第二个颜色附件
				// 这是G-Buffer的生成阶段（延迟渲染的第一阶段）
				renderer.render( scene, camera );

				// ---------- 3. 第二步渲染：后处理到屏幕 ----------
				// 将渲染目标设置为null，表示渲染到默认帧缓冲区（屏幕）
				renderer.setRenderTarget( null );
				// 执行后处理渲染：
				//  - 从MRT的两个纹理中读取数据
				//  - 应用分屏混合效果
				//  - 将最终结果输出到屏幕
				postProcessing.render();

			}

		</script>

	</body>
</html>