<!-- 代码功能描述
这是一个Three.js WebGPU多渲染目标(MRT)技术演示，展示了现代图形渲染中的高级技术。主要功能是通过单次渲染同时输出多个渲染通道，并将它们并排显示在屏幕上，便于开发者观察和分析不同的渲染组件。

核心功能：
多通道渲染显示：

屏幕被水平分割成5个区域

同时显示：最终渲染、美观输出、法线贴图、自发光、漫反射颜色

实时对比不同渲染通道的效果

交互式3D场景：

展示一个受损头盔的3D模型

使用HDR环境贴图提供真实光照

支持鼠标旋转、缩放、平移的交互操作

实时渲染管线：

完整的渲染到后处理流程

支持实时调试和检查

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

性能优势：更好的多线程支持、更低的CPU开销

功能特性：原生的计算着色器、更好的内存管理

跨平台：支持桌面和移动设备

2. 多渲染目标(MRT)
javascript
scenePass.setMRT(mrt({
    output: output,
    normal: directionToColor(normalView),
    diffuse: diffuseColor,
    emissive: emissive
}));
核心技术：单次渲染输出到多个纹理缓冲区

四个输出目标：

output: 完整的PBR渲染结果（包含所有光照和后期效果）

normal: 视图空间法线（转换为RGB颜色）

diffuse: 基础漫反射颜色（材质本色）

emissive: 自发光/发光贴图效果

3. TSL (Three.js着色器语言)
javascript
import { output, normalView, pass, step, diffuseColor, emissive, ... } from 'three/tsl';
声明式着色器编程：相比传统的GLSL更易用

节点化编程：类似UE4的材质编辑器

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

实时编译：动态生成优化的着色器代码

4. HDR环境照明
javascript
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = texture;
scene.environment = texture;
高动态范围：保留更多光照细节

物理正确的渲染：

作为天空盒背景

作为环境光来源（IBL）

提供真实的反射和折射

格式支持：UltraHDRLoader支持现代HDR格式

5. PBR材质系统
基于物理的渲染：真实的材质表现

多贴图支持：

法线贴图（normal mapping）

粗糙度贴图

金属度贴图

环境光遮蔽

能量守恒：确保光照计算的物理正确性

6. 后处理合成技术
javascript
const out = mix(output.renderOutput(), output, step(0.2, screenUV.x));
const nor = mix(out, normal, step(0.4, screenUV.x));
// ...
屏幕空间操作：基于UV坐标的像素级混合

阶梯函数(step)：用于区域分割判断

线性插值(mix)：平滑过渡（虽然这里用作开关）

多纹理采样：从不同渲染目标读取像素

7. 性能优化技术
javascript
{ minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter }
normalTexture.type = THREE.UnsignedByteType;
纹理过滤优化：使用最近邻过滤避免插值开销

纹理格式优化：使用8位无符号字节减少内存占用

渲染目标复用：多个通道共享几何数据

8. 现代开发工具集成
模块化导入：ES6模块系统

Import Maps：浏览器原生模块路径解析

TypeScript准备：类型化的API设计

调试工具：内置场景检查器

技术架构流程
text
1. 初始化阶段
   ├── 创建WebGPU渲染器
   ├── 加载HDR环境贴图
   ├── 加载GLTF 3D模型
   └── 设置相机和控制器

2. 渲染帧循环
   ├── MRT渲染通道（单次绘制，四个输出）
   │   ├── 几何处理（顶点着色器）
   │   ├── 材质计算（片段着色器）
   │   └── 写入四个渲染目标
   │
   └── 后处理合成
       ├── 采样四个纹理
       ├── 基于屏幕位置选择显示内容
       └── 输出到屏幕

3. 交互处理
   ├── 鼠标输入 → 轨道控制器 → 相机变换
   └── 窗口大小变化 → 渲染器重设
应用场景
图形调试和开发：

实时查看不同渲染通道

诊断渲染问题

优化性能分析

教育演示：

展示现代渲染技术

理解PBR渲染流程

学习WebGPU和MRT概念

技术预研：

测试WebGPU兼容性

验证渲染效果

性能基准测试

高级渲染效果：

为后期效果提供多个输入（法线、深度、ID等）

自定义渲染管线开发

特效叠加和混合

技术亮点
一体化解决方案：从加载到渲染到显示的完整链条

实时性：60FPS的流畅交互体验

可扩展性：易于添加更多渲染目标或后处理效果

跨平台：基于Web标准，无需安装插件

开源生态：充分利用Three.js丰富的插件和工具 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示示例的主题和使用的技术 -->
		<title>Three.js WebGPU 示例 - 多渲染目标(MRT)</title>
		<!-- 字符编码设置：确保正确显示所有字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：用于响应式设计，控制移动设备上的缩放行为 -->
		<!-- width=device-width: 使页面宽度等于设备宽度 -->
		<!-- user-scalable=no: 禁止用户手动缩放 -->
		<!-- minimum-scale=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>

		<!-- 信息显示面板：展示页面信息和控制链接 -->
		<!-- id="info": 用于CSS样式选择器和JavaScript操作 -->
		<div id="info">
			<!-- Three.js官方链接：点击跳转到Three.js官网 -->
			<!-- target="_blank": 在新标签页中打开链接 -->
			<!-- rel="noopener": 安全设置，防止新页面访问原页面的window对象 -->
			<!-- class="logo-link": CSS类名，通常用于设置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>多渲染目标(MRT)技术演示</span>
			</div>

			<!-- 提示信息：解释屏幕上显示的不同渲染通道 -->
			<!-- 屏幕从左到右被分为5个区域，每个区域显示不同的渲染结果 -->
			<small>
				【从左到右】最终合成 / 美观渲染 / 法线贴图 / 自发光 / 漫反射颜色
			</small>
			<!-- 额外说明：帮助用户理解示例的功能 -->
			<small style="display: block; margin-top: 25px;">
				提示：使用鼠标左键拖动旋转视角，鼠标滚轮缩放，右键拖动平移
			</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代码：使用ES6模块化语法 -->
		<!-- type="module": 表示这是一个ECMAScript模块，支持import/export语法 -->
		<script type="module">

			// ========== 模块导入部分 ==========
			// 导入Three.js核心库（WebGPU版本）
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）中的特定功能
			// output: 渲染输出节点
			// normalView: 视图空间法线
			// pass: 创建渲染通道
			// step: 阶梯函数（用于条件判断）
			// diffuseColor: 漫反射颜色
			// emissive: 自发光
			// directionToColor: 将方向向量转换为颜色值
			// screenUV: 屏幕UV坐标（0到1范围）
			// mix: 线性插值混合函数
			// mrt: 多渲染目标配置
			// Fn: 创建着色器函数
			import { output, normalView, pass, step, diffuseColor, emissive, directionToColor, screenUV, mix, mrt, Fn } from 'three/tsl';

			// 导入调试工具：Three.js场景检查器
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入HDR纹理加载器：用于加载高动态范围图像
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';

			// 导入交互控制：轨道控制器（鼠标控制相机）
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入模型加载器：用于加载GLTF格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			// ========== 全局变量声明 ==========
			let camera, scene, renderer;  // Three.js三大核心对象
			let postProcessing;  // 后处理对象，用于多渲染目标合成

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

			// ========== 初始化函数定义 ==========
			function init() {

				// --- 创建DOM容器 ---
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中
				document.body.appendChild( container );

				// --- 场景和相机初始化 ---
				// 创建透视相机：模拟人眼视角
				// 参数：45度视野角，窗口宽高比，近裁剪面(0.25)，远裁剪面(20)
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
				// 设置相机初始位置：X(-1.8), Y(0.6), Z(2.7)
				camera.position.set( - 1.8, 0.6, 2.7 );

				// 创建三维场景：所有3D对象的容器
				scene = new THREE.Scene();

				// --- 加载HDR环境贴图 ---
				// 创建UltraHDRLoader实例并设置纹理路径
				new UltraHDRLoader()
					.setPath( 'textures/equirectangular/' )  // 设置HDR纹理文件所在目录
					.load( 
						'royal_esplanade_2k.hdr.jpg',  // HDR纹理文件名
						function ( texture ) {  // 加载完成后的回调函数
							
							// 设置纹理映射方式：等距柱状投影反射映射
							// 这种映射方式常用于环境贴图和天空盒
							texture.mapping = THREE.EquirectangularReflectionMapping;

							// 将HDR纹理设置为场景的背景（天空盒）
							scene.background = texture;
							// 将HDR纹理设置为场景的环境光（提供全局照明）
							scene.environment = texture;

							// --- 加载3D模型（在HDR加载完成后）---
							// 创建GLTFLoader实例并设置模型路径
							const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
							loader.load( 
								'DamagedHelmet.gltf',  // GLTF模型文件名
								function ( gltf ) {  // 加载完成后的回调函数
									// 将加载的3D模型添加到场景中
									scene.add( gltf.scene );
								} 
							);
						} 
					);

				// --- 渲染器设置 ---
				// 创建WebGPU渲染器，开启抗锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比：确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数：每帧调用render函数
				renderer.setAnimationLoop( render );
				// 设置色调映射：ACESFilmic色调映射，提供更自然的颜色响应
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 附加调试器：按特定键（通常是Ctrl+Shift+I）打开场景检查器
				renderer.inspector = new Inspector();
				// 将渲染器的canvas元素添加到之前创建的容器中
				container.appendChild( renderer.domElement );

				// --- 后处理和多渲染目标设置 ---
				// 创建场景渲染通道（pass）
				// 参数：场景、相机、渲染目标配置（使用最近邻过滤，避免颜色插值）
				const scenePass = pass( 
					scene, 
					camera, 
					{ 
						minFilter: THREE.NearestFilter,  // 缩小时使用最近邻过滤
						magFilter: THREE.NearestFilter   // 放大时使用最近邻过滤
					} 
				);
				
				// 配置多渲染目标（MRT）
				// 一次渲染输出到四个不同的纹理：
				scenePass.setMRT( mrt( {
					output: output,  // 通道1：最终渲染输出（包含所有光照和材质效果）
					normal: directionToColor( normalView ),  // 通道2：法线信息（方向向量转换为RGB颜色）
					diffuse: diffuseColor,  // 通道3：漫反射颜色（基础颜色）
					emissive: emissive  // 通道4：自发光颜色
				} ) );

				// --- 纹理优化 ---
				// 从场景通道获取各个渲染目标的纹理对象
				const normalTexture = scenePass.getTexture( 'normal' );    // 法线纹理
				const diffuseTexture = scenePass.getTexture( 'diffuse' );  // 漫反射纹理
				const emissiveTexture = scenePass.getTexture( 'emissive' ); // 自发光纹理

				// 将所有纹理类型设置为无符号字节类型（8位每通道）
				// 这种格式内存占用小，性能较好，适合不需要高精度的纹理
				normalTexture.type = diffuseTexture.type = emissiveTexture.type = THREE.UnsignedByteType;

				// --- 后处理合成 ---
				// 创建后处理对象，传入渲染器
				postProcessing = new THREE.PostProcessing( renderer );
				// 禁用输出颜色变换（保持原始颜色）
				postProcessing.outputColorTransform = false;
				
				// 设置后处理输出节点（使用TSL着色器语言）
				// 这里定义了如何将四个渲染目标合成到最终屏幕显示
				postProcessing.outputNode = Fn( () => {
					// 从场景通道获取各个渲染目标的纹理节点
					const output = scenePass.getTextureNode( 'output' );    // 最终输出
					const normal = scenePass.getTextureNode( 'normal' );    // 法线
					const diffuse = scenePass.getTextureNode( 'diffuse' );  // 漫反射
					const emissive = scenePass.getTextureNode( 'emissive' ); // 自发光

					// 使用step函数和mix函数实现屏幕水平分割显示
					// screenUV.x范围是0到1，从左到右
					// step(a,b): 如果b>=a返回1，否则返回0
					// mix(x,y,a): 根据a在x和y之间线性插值
					
					// 1. 最左侧20%区域：显示原始渲染输出
					const out = mix( output.renderOutput(), output, step( 0.2, screenUV.x ) );
					// 2. 20%-40%区域：显示法线贴图
					const nor = mix( out, normal, step( 0.4, screenUV.x ) );
					// 3. 40%-60%区域：显示自发光
					const emi = mix( nor, emissive, step( 0.6, screenUV.x ) );
					// 4. 60%-80%区域：显示漫反射颜色
					const dif = mix( emi, diffuse, step( 0.8, screenUV.x ) );
					// 5. 80%-100%区域：保持漫反射颜色（最右侧区域）

					// 返回最终合成结果
					return dif;

				} )();  // 立即执行Fn函数

				// --- 交互控制设置 ---
				// 创建轨道控制器：允许用户用鼠标控制相机
				const controls = new OrbitControls( camera, renderer.domElement );
				controls.minDistance = 2;    // 相机与目标点的最小距离
				controls.maxDistance = 10;   // 相机与目标点的最大距离
				controls.target.set( 0, 0, - 0.2 );  // 设置相机围绕旋转的目标点
				controls.update();  // 初始化更新控制器状态

				// --- 事件监听器 ---
				// 监听窗口大小变化事件，确保渲染器与窗口同步
				window.addEventListener( 'resize', onWindowResize );

			}

			// ========== 窗口大小变化处理函数 ==========
			function onWindowResize() {
				// 更新相机的宽高比为当前窗口宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法使更改生效）
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸为当前窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ========== 渲染循环函数 ==========
			// 每一帧都会被调用（通常60次/秒）
			function render() {
				// 执行后处理渲染：这会处理整个渲染管线
				// 包括场景渲染到多个目标，以及后处理合成
				postProcessing.render();
			}

		</script>

	</body>
</html>