<!-- 代码功能概述
这是一个使用Three.js的WebGPU渲染器和TSL（Three.js着色器语言）实现的多渲染目标(MRT)遮罩效果演示。演示通过MRT技术，在单次渲染中同时输出颜色和遮罩信息，然后对遮罩标记的物体（蓝色球体和人物模型）应用高斯模糊效果，而其他物体保持清晰。

主要功能特点
1. 核心视觉效果
选择性模糊：只有蓝色球体和人物模型被模糊，其他颜色的球体保持清晰

动态动画：人物模型带有骨骼动画，球体组会自动旋转

交互式视角：用户可以通过鼠标拖拽、缩放来自由控制观察角度

美观的背景：基于屏幕坐标的垂直渐变蓝色背景

2. 场景组成
3D人物模型：加载GLTF格式的"Michelle"模型，带有行走动画

彩色球体阵列：四个不同颜色的球体排列成十字形

蓝色球体：应用遮罩和模糊效果

绿色、红色、青色球体：无遮罩，保持清晰

动态灯光：附加在相机上的聚光灯，随视角移动

3. 用户交互
鼠标左键拖拽：旋转摄像机

鼠标右键拖拽：平移场景

鼠标滚轮：缩放视图

交互期间球体暂停自动旋转，释放后恢复

核心技术点
1. WebGPU渲染器
新一代图形API：替代WebGL，提供更底层的GPU访问和更好的性能

自动异步编译：着色器自动编译和优化

多线程支持：更好地利用现代CPU的多核架构

2. 多渲染目标(MRT)技术
同时输出多个纹理：在单次渲染通道中输出颜色和遮罩信息

效率优势：避免多次渲染相同场景，提高性能

应用代码：

javascript
material.mrtNode = mrt({ mask: output.add(1) }); // 为材质添加遮罩通道
scenePass.setMRT(mrt({
    output: output.renderOutput(), // 颜色输出
    mask: vec4(0)                  // 遮罩输出，默认黑色
}));
3. TSL（Three.js着色器语言）
声明式着色器编程：使用JavaScript编写着色器逻辑

节点化系统：将着色器操作封装为可连接的节点

类型安全：编译时类型检查，减少运行时错误

示例应用：

javascript
// TSL节点链式操作
scene.backgroundNode = screenUV.y.mix(color(0x66bbff), color(0x4466ff)).mul(.05);
4. 后期处理管道
模块化设计：分离场景渲染和后期效果处理

可配置的渲染通道：灵活组合不同的处理效果

效果叠加：颜色通道 + 模糊遮罩通道的合成

javascript
postProcessing.outputNode = colorPass.add(gaussianBlur(maskPass, 1, 20).mul(.3));
5. 高斯模糊实现
分离式模糊：水平和垂直方向分别处理，提高性能

可配置参数：半径、采样数量可调整

选择性应用：仅对遮罩通道应用，不影响清晰物体

6. 动画系统
GLTF骨骼动画：通过AnimationMixer控制人物模型动画

基于时间的动画：使用Clock对象确保帧率无关的平滑动画

混合动画状态：支持多个动画的混合和过渡

7. 资源管理
按需加载：异步加载GLTF模型，不阻塞主线程

几何体复用：多个球体共享同一个几何体实例，节省内存

材质定制：为不同物体分别配置材质和MRT节点

8. 响应式设计
自适应分辨率：根据设备像素比自动调整渲染质量

窗口大小适配：实时调整相机和渲染器以适应窗口变化

性能感知：在高DPI设备上提供更清晰的渲染

工作流程
初始化阶段：

创建场景、相机、渲染器

加载人物模型和设置动画

创建球体并配置材质

渲染循环（每帧）：

text
更新动画状态
   ↓
更新球体旋转（如果允许）
   ↓
渲染场景到MRT（颜色 + 遮罩）
   ↓
对遮罩通道应用高斯模糊
   ↓
合成最终图像（颜色 + 模糊遮罩）
   ↓
显示到屏幕
用户交互：

轨道控制器处理鼠标输入

相机位置和视角更新

渲染器响应视图变化

技术优势
性能方面
单次渲染：MRT技术避免了多次渲染相同场景

GPU加速：WebGPU提供更高效的GPU利用

智能更新：只有变化的部分需要重新处理

质量方面
选择性效果：精确控制哪些物体应用效果

高质量模糊：基于屏幕空间的后处理模糊

物理正确：基于物理的渲染材质和光照

开发体验
声明式编程：TSL简化了复杂的着色器编写

模块化架构：清晰的关注点分离

热重载友好：基于模块的代码组织便于开发调试

实际应用场景
游戏特效：角色光环、技能范围指示、景深效果

UI/UX设计：焦点模糊、突出显示特定元素

数据可视化：高亮重要数据点，模糊背景信息

艺术创作：选择性风格化处理，创意视觉效果 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：使用中文描述 -->
		<title>Three.js WebGPU - 多渲染目标(MRT)遮罩效果演示</title>
		<!-- 字符编码设置 -->
		<meta charset="utf-8">
		<!-- 响应式视口设置：禁止用户手动缩放 -->
		<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>
		<!-- 页面信息展示区域 -->
		<div id="info">
			<!-- Three.js官方Logo链接 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 这里通常会有CSS样式控制显示Three.js的Logo -->
			</a>

			<!-- 主标题区域 -->
			<div class="title-wrapper">
				<!-- 链接到Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 演示页面副标题 -->
				<span>多渲染目标(MRT)遮罩效果演示</span>
			</div>

			<!-- 页面描述说明 -->
			<small>
				此演示展示了Three.js的多渲染目标(MRT)技术。遮罩效果会先被应用，
				然后仅对选中的材质（蓝色球体和人物模型）进行高斯模糊处理。
				你可以通过鼠标拖拽旋转视角，球体会自动旋转。
			</small>
			
			
		</div>

		<!-- 模块导入映射配置 -->
		<!-- Import Maps：现代浏览器中用于模块解析的配置 -->
		<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模块
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言(TSL)的关键节点
			// color: 颜色节点构造函数，用于创建颜色值
			// screenUV: 屏幕UV坐标节点，范围[0,1]，用于获取当前像素在屏幕上的位置
			// mrt: 多渲染目标节点，用于配置多个渲染输出
			// output: 输出节点，表示当前渲染的输出
			// pass: 渲染通道节点，用于创建渲染管道
			// vec4: 四维向量构造函数
			import { color, screenUV, mrt, output, pass, vec4 } from 'three/tsl';
			
			// 导入高斯模糊效果节点，用于后期处理
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';
			
			// 导入GLTF模型加载器，用于加载.glb格式的3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			
			// 导入轨道控制器，提供鼠标控制的相机交互
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// ==================== 全局变量声明 ====================
			let camera;          // 透视相机对象，定义观察视角
			let scene;           // 场景对象，包含所有3D物体
			let renderer;        // WebGPU渲染器，负责将3D场景绘制到2D画布
			let postProcessing;  // 后期处理对象，管理渲染后的图像处理
			let spheres;         // 球体组，包含四个不同颜色的球体
			let rotate = true;   // 旋转标志，控制球体是否自动旋转
			let mixer;           // 动画混合器，用于管理模型动画
			let clock;           // 动画时钟，用于计算帧时间差

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

			// ==================== 初始化函数定义 ====================
			/**
			 * 初始化整个3D应用程序
			 * 包括：场景、相机、灯光、模型、渲染器、后期处理、控制器等
			 */
			function init() {
				// ---------- 相机设置 ----------
				// 创建透视相机：模拟人眼视角
				// 参数说明：
				// 50: 视野角度(FOV) - 50度
				// window.innerWidth / window.innerHeight: 宽高比，根据窗口大小动态计算
				// 0.01: 近裁剪面 - 距离相机0.01单位以内的物体不显示
				// 100: 远裁剪面 - 距离相机100单位以外的物体不显示
				camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 100);
				
				// 设置相机初始位置：X=1, Y=2, Z=3
				camera.position.set(1, 2, 3);
				
				// 让相机看向场景中心偏上的位置：X=0, Y=1, Z=0
				camera.lookAt(0, 1, 0);

				// ---------- 场景设置 ----------
				// 创建主场景，所有3D物体都添加到场景中
				scene = new THREE.Scene();
				
				// 设置场景背景节点：使用TSL着色器语言创建渐变色背景
				// 1. screenUV.y: 获取屏幕垂直方向的UV坐标(0到1，从上到下或从下到上)
				// 2. color(0x66bbff): 浅蓝色，对应RGB(102, 187, 255)
				// 3. color(0x4466ff): 深蓝色，对应RGB(68, 102, 255)
				// 4. .mix(): 混合函数，根据第一个参数(混合因子)混合两个颜色
				// 5. .mul(.05): 乘以0.05，大幅降低颜色亮度，创建深色背景
				scene.backgroundNode = screenUV.y.mix(color(0x66bbff), color(0x4466ff)).mul(.05);

				// ---------- 时间管理 ----------
				// 创建动画时钟，用于计算每帧的时间差(Delta Time)
				clock = new THREE.Clock();

				// ---------- 灯光设置 ----------
				// 创建聚光灯：模拟从特定方向发出的锥形光
				const light = new THREE.SpotLight(0xffffff, 1); // 白色灯光，强度1
				light.power = 2000; // 设置灯光功率为2000流明
				camera.add(light);  // 将灯光附加到相机上，使灯光随相机移动
				scene.add(camera);  // 将相机（带灯光）添加到场景

				// ---------- 加载GLTF人物模型 ----------
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();
				
				// 异步加载Michelle人物模型
				loader.load('models/gltf/Michelle.glb', function (gltf) {
					// 加载完成后的回调函数
					const object = gltf.scene; // 获取模型的主场景对象
					
					// 创建动画混合器，用于控制模型的骨骼动画
					mixer = new THREE.AnimationMixer(object);
					
					// 获取人物模型的材质
					// object.children[0]: 模型的第一个子对象（通常是一个组）
					// .children[0]: 该组的第一个子对象（通常是网格）
					// .material: 获取该网格的材质
					const material = object.children[0].children[0].material;

					// 为人物材质添加MRT（多渲染目标）节点
					// 这将使该材质在渲染时输出遮罩信息
					// output.add(1): 设置遮罩值为1（白色），表示完全应用遮罩效果
					// mrt({ mask: ... }): 创建多渲染目标配置，mask通道设置为白色
					material.mrtNode = mrt({ mask: output.add(1) });

					// 播放模型的第一个动画
					const action = mixer.clipAction(gltf.animations[0]);
					action.play(); // 开始播放动画

					// 将模型添加到场景中
					scene.add(object);
				});

				// ---------- 创建球体组 ----------
				// 创建组对象，用于管理所有球体
				spheres = new THREE.Group();
				scene.add(spheres); // 将球体组添加到场景

				// 创建球体几何体，所有球体共享同一个几何体以节省内存
				// 参数说明：
				// 0.3: 球体半径
				// 32: 宽度分段数（经线数量），影响球体平滑度
				// 16: 高度分段数（纬线数量）
				const geometry = new THREE.SphereGeometry(.3, 32, 16);

				/**
				 * 辅助函数：向场景中添加一个球体
				 * @param {number} color - 球体颜色，十六进制表示
				 * @param {object|null} mrtNode - MRT节点配置，为null时不应用遮罩
				 */
				function addSphere(color, mrtNode = null) {
					const distance = 1; // 球体距离中心点的距离
					const id = spheres.children.length; // 当前球体的索引ID
					const rotation = THREE.MathUtils.degToRad(id * 90); // 根据ID计算旋转角度
					
					// 创建标准材质节点（基于物理的渲染材质）
					const material = new THREE.MeshStandardNodeMaterial({ color });
					
					// 如果提供了MRT节点，则将其应用到材质
					// 这样在后期处理中就可以识别哪些球体需要模糊效果
					if (mrtNode) {
						material.mrtNode = mrtNode;
					}

					// 创建网格对象：几何体 + 材质
					const mesh = new THREE.Mesh(geometry, material);
					
					// 计算球体在圆形轨道上的位置
					// X坐标：cos(旋转角度) * 距离
					// Y坐标：固定为1，使球体保持在同一高度
					// Z坐标：sin(旋转角度) * 距离
					mesh.position.set(
						Math.cos(rotation) * distance, // X轴位置
						1,                             // Y轴位置
						Math.sin(rotation) * distance  // Z轴位置
					);

					// 将球体添加到球体组
					spheres.add(mesh);
				}

				// 添加四个不同颜色的球体，构成一个十字形布局
				// 第一个球体（蓝色）：应用遮罩效果（会模糊）
				// mrt({ mask: output }): output默认值为1，所以遮罩为白色
				addSphere(0x0000ff, mrt({ mask: output }));
				
				// 第二个球体（绿色）：不应用遮罩效果（保持清晰）
				addSphere(0x00ff00);
				
				// 第三个球体（红色）：不应用遮罩效果
				addSphere(0xff0000);
				
				// 第四个球体（青色）：不应用遮罩效果
				addSphere(0x00ffff);

				// ---------- 渲染器设置 ----------
				// 创建WebGPU渲染器实例
				// { antialias: true }: 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer({ antialias: true });
				
				// 设置设备像素比，适配高DPI屏幕（如Retina显示屏）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 设置动画循环回调函数，浏览器会在每一帧调用animate函数
				renderer.setAnimationLoop(animate);
				
				// 设置色调映射：中性色调映射，用于HDR渲染
				renderer.toneMapping = THREE.NeutralToneMapping;
				
				// 设置曝光度：0.4使整体场景变暗
				renderer.toneMappingExposure = 0.4;
				
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ---------- 后期处理管道设置 ----------
				// 创建场景渲染通道：渲染整个场景到纹理
				// pass(scene, camera): 创建一个渲染通道，使用指定场景和相机
				const scenePass = pass(scene, camera);
				
				// 配置多渲染目标(MRT)输出：
				// 1. output通道：存储场景的颜色信息
				// 2. mask通道：存储遮罩信息，默认值为vec4(0)（黑色，无遮罩）
				// vec4(0)等同于vec4(0,0,0,0)，表示完全不透明黑色
				scenePass.setMRT(mrt({
					output: output.renderOutput(), // 颜色输出，调用renderOutput()将其转换为可渲染节点
					mask: vec4(0)                  // 遮罩输出，默认黑色（无遮罩）
				}));

				// 获取渲染通道的纹理节点
				// getTextureNode(): 默认获取颜色纹理
				const colorPass = scenePass.getTextureNode();
				
				// getTextureNode('mask'): 获取名为'mask'的遮罩纹理
				const maskPass = scenePass.getTextureNode('mask');

				// 创建后期处理对象
				// 参数renderer: 使用WebGPU渲染器进行后期处理
				postProcessing = new THREE.PostProcessing(renderer);
				
				// 禁用颜色变换（如果启用，可能会对输出进行额外的色调映射）
				postProcessing.outputColorTransform = false;
				
				// 设置最终输出节点：颜色通道 + 模糊后的遮罩通道
				// 1. gaussianBlur(maskPass, 1, 20): 对遮罩纹理进行高斯模糊
				//    - maskPass: 输入的遮罩纹理
				//    - 1: 模糊半径
				//    - 20: 采样数量，影响模糊质量
				// 2. .mul(.3): 将模糊结果乘以0.3，降低模糊强度
				// 3. colorPass.add(...): 将颜色通道和模糊的遮罩相加
				// 4. .renderOutput(): 将节点转换为可渲染的输出
				postProcessing.outputNode = colorPass.add(gaussianBlur(maskPass, 1, 20).mul(.3)).renderOutput();

				// ---------- 交互控制设置 ----------
				// 创建轨道控制器，实现鼠标控制相机
				// 参数说明：
				// camera: 要控制的相机对象
				// renderer.domElement: 事件监听的DOM元素（渲染器的canvas）
				const controls = new OrbitControls(camera, renderer.domElement);
				
				// 设置控制器的目标点（相机围绕该点旋转）
				controls.target.set(0, 1, 0);
				
				// 监听控制器开始交互事件：当用户开始拖拽时
				controls.addEventListener('start', () => {
					rotate = false; // 暂停球体的自动旋转
				});
				
				// 监听控制器结束交互事件：当用户停止拖拽时
				controls.addEventListener('end', () => {
					rotate = true; // 恢复球体的自动旋转
				});
				
				// 更新控制器内部状态
				controls.update();

				// ---------- 窗口事件监听 ----------
				// 监听窗口大小变化事件，确保3D场景始终适配窗口尺寸
				window.addEventListener('resize', onWindowResize);
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * 当浏览器窗口大小改变时调用
			 * 重新调整相机和渲染器以适应新窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵，使3D透视正确适应新宽高比
				camera.updateProjectionMatrix();
				
				// 更新渲染器尺寸，使其填满整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ==================== 动画循环函数 ====================
			/**
			 * 每一帧调用的动画循环函数
			 * 负责更新动画状态和渲染场景
			 */
			function animate() {
				// 获取上一帧到当前帧的时间差（秒）
				// 使用时间差而不是固定值，确保动画速度与帧率无关
				const delta = clock.getDelta();

				// 如果存在动画混合器，更新模型动画
				// delta参数告诉混合器动画应该前进多少时间
				if (mixer) mixer.update(delta);

				// 如果允许旋转，更新球体组的旋转角度
				// 每秒旋转0.5弧度（约28.65度）
				if (rotate) spheres.rotation.y += delta * 0.5;

				// 执行后期处理渲染
				// 这将执行整个渲染管道：场景渲染 → 遮罩提取 → 高斯模糊 → 最终合成
				postProcessing.render();
			}
		</script>
	</body>
</html>