<!-- 代码功能描述
这是一个基于Three.js WebGPU实现的选择性辉光（Bloom）效果演示应用。主要展示了如何通过材质的自发光（emissive）属性实现智能的辉光效果，而不是对整个场景应用统一的辉光。

核心功能演示：
3D模型展示：加载一个"受损头盔"GLTF模型，模型上某些部分（如损伤处）具有自发光材质

选择性辉光效果：只对模型中标记为"自发光"的区域产生辉光效果，其他区域保持原样

实时交互调节：用户可以通过GUI界面动态调整辉光强度和半径

HDR环境照明：使用高质量HDR图像提供真实的环境反射和背景

应用交互体验：
用户可以鼠标拖拽旋转查看模型不同角度

使用滚轮缩放近距离观察细节

在右侧调试面板实时调节辉光参数

查看颜色和自发光通道的分离渲染结果

主要技术点详解
1. WebGPU渲染技术
javascript
renderer = new THREE.WebGPURenderer();
新一代图形API：替代WebGL，提供更底层的GPU访问，性能更好

并行计算优势：更好的多线程支持和计算着色器能力

现代GPU特性：支持最新的GPU硬件特性

2. 多重渲染目标（MRT）
javascript
scenePass.setMRT(mrt({
    output,      // 常规颜色输出
    emissive    // 自发光通道输出
}));
单次渲染多输出：在一次渲染过程中同时输出多个纹理

通道分离：将颜色和自发光信息分离存储

性能优化：避免多次渲染相同场景

3. 选择性辉光算法
javascript
const bloomPass = bloom(emissivePass, 2.5, .5);
基于emissive遮罩：只对emissive通道有值的区域应用辉光

高斯模糊处理：对自发光区域进行多次下采样和上采样

阈值控制：可控制产生辉光的最小亮度值

4. TSL（Three.js着色语言）
javascript
import { pass, mrt, output, emissive } from 'three/tsl';
声明式着色器：用JavaScript语法编写着色器逻辑

节点化编程：通过连接节点构建渲染管线

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

5. HDR环境映射
javascript
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
高动态范围：保留更多亮部和暗部细节

基于图像的照明（IBL）：用HDR图像作为环境光源

物理正确反射：模型表面正确反射环境内容

6. 后处理管线架构
text
场景渲染 → MRT输出 → 辉光处理 → 最终合成
模块化设计：每个效果是独立的处理节点

可组合性：可以灵活添加/移除后处理效果

资源重用：中间纹理可以在多个效果间共享

7. 轨道相机控制
javascript
const controls = new OrbitControls(camera, renderer.domElement);
三自由度控制：旋转、平移、缩放

平滑插值：动画过渡自然

边界限制：防止相机进入无效区域

8. 实时调试系统
javascript
renderer.inspector = new Inspector();
可视化参数调节：滑块控制数值参数

通道查看器：实时查看各渲染通道结果

性能监控：帧率、内存使用情况监控

技术实现流程
第一步：场景初始化
创建WebGPU渲染器和场景容器

设置透视相机和初始视角

加载HDR环境贴图作为场景背景和光源

第二步：模型加载
使用GLTFLoader加载3D模型

模型自动继承HDR环境的光照和反射

模型中的emissive材质属性被保留用于后续处理

第三步：渲染管线设置
主渲染通道：渲染整个场景到MRT

通道分离：

output通道：完整的RGB颜色

emissive通道：仅自发光区域（白色代表自发光，黑色代表无自发光）

辉光处理：对emissive通道应用高斯模糊和亮度增强

最终合成：将原始颜色与辉光效果叠加

第四步：交互与控制
用户输入：鼠标和键盘事件绑定到相机控制器

实时调节：GUI参数立即影响渲染结果

响应式布局：窗口大小变化时自动调整渲染尺寸

性能优化特点
选择性处理：只对需要辉光的区域进行计算，节省GPU资源

纹理复用：MRT避免重复渲染相同的几何数据

动态分辨率：辉光效果可以使用较低分辨率进行计算

WebGPU优化：利用现代GPU架构的并行处理能力

应用场景
这种选择性辉光技术特别适用于：

游戏特效：武器发光、魔法效果、能量核心等

产品展示：电子产品屏幕发光、LED指示灯等

科学可视化：热力图、能量分布图等

艺术创作：营造氛围和突出焦点区域

技术亮点总结
精准控制：通过材质属性精确控制辉光区域，而不是基于亮度阈值

物理正确性：HDR环境+基于物理的渲染(PBR)材质

实时性能：WebGPU提供稳定的高帧率渲染

开发友好：TSL简化了复杂的着色器编程

高度可配置：所有参数都可以实时调节和预览 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：展示使用three.js WebGPU实现的自发光辉光效果
			这个示例演示了如何基于材质的emissive属性实现选择性辉光效果
		-->
		<title>Three.js WebGPU - 自发光辉光效果</title>
		<!-- 字符编码设置为UTF-8，确保中文和特殊字符正确显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：响应式设计的重要配置
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户缩放（为3D应用优化）
			- 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样式表
			- type="text/css": 指定样式表类型
			- rel="stylesheet": 定义当前文档与被链接文档的关系为样式表
			- href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：显示应用标题、描述和链接
			id="info": 为这个div元素分配唯一标识符，便于CSS和JavaScript操作
		-->
		<div id="info">
			<!-- 
				Three.js logo链接
				- href: 链接到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>自发光辉光效果演示</span>
			</div>

			<!-- 
				描述文本：简要说明本示例的功能特点
				<small>标签表示小号字体文本
				内容说明：这是一个基于材质"emissive"（自发光）属性的选择性辉光效果实现
			-->
			<small>基于材质自发光(emissive)属性的选择性辉光效果实现</small>
			<br>
		</div>

		<!-- 
			导入映射(Import Map)：现代JavaScript模块系统的配置部分
			type="importmap": 定义模块导入的映射关系，允许使用简短的模块名
			作用：避免在代码中写冗长的相对路径，提高代码可读性
		-->
		<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模块，支持import/export语法
			模块化的好处：代码组织更清晰，避免全局变量污染，支持异步加载
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 使用ES6模块语法导入所需的功能模块
			
			// 导入Three.js WebGPU核心库的所有功能并命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 从TSL库导入特定的着色语言功能：
			// - pass: 创建渲染通道
			// - mrt: 多重渲染目标(Multiple Render Targets)
			// - output: 标准输出节点
			// - emissive: 自发光输出节点
			import { pass, mrt, output, emissive } from 'three/tsl';
			
			// 导入辉光(Bloom)后处理节点函数
			import { bloom } from 'three/addons/tsl/display/BloomNode.js';

			// 导入HDR(High Dynamic Range)图像加载器
			// HDR图像包含比普通图像更宽的亮度范围，适合作为环境贴图
			import { HDRLoader } from 'three/addons/loaders/HDRLoader.js';

			// 导入轨道控制器，允许用户用鼠标控制相机旋转、平移和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入GLTF(GLTF Transmission Format)加载器，用于加载3D模型
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

			// 导入调试检查器，用于创建实时调节参数的GUI界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ==================== 全局变量声明 ====================
			// 声明但不初始化，将在init函数中初始化
			let camera;      // 相机对象：决定场景的观察视角
			let scene;       // 场景对象：包含所有3D对象、灯光等
			let renderer;    // 渲染器对象：负责将3D场景渲染到2D画布
			let postProcessing; // 后处理对象：管理各种后期效果

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

			// ==================== 函数定义区域 ====================

			/**
			 * 初始化函数：应用的主要设置和配置入口点
			 * 这个函数负责创建所有必要的Three.js对象并设置场景
			 */
			function init() {

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

				// 2. 创建相机(Camera)
				// 使用透视相机(PerspectiveCamera)，模拟人眼视角
				// 参数说明：
				// - 45: 视野角度(Field of View)，单位度，越大看到的范围越广
				// - window.innerWidth / window.innerHeight: 宽高比，匹配窗口比例
				// - 0.25: 近裁剪面，距离相机多近的物体开始渲染
				// - 20: 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
				// 设置相机的初始位置(x, y, z坐标)
				camera.position.set( - 1.8, 0.6, 2.7 );

				// 3. 创建场景(Scene)
				// 场景是所有3D对象的容器，包括模型、灯光、相机等
				scene = new THREE.Scene();

				// 4. 加载HDR环境贴图
				// HDRLoader用于加载高动态范围图像作为环境光
				new HDRLoader()
					// 设置纹理文件的基础路径
					.setPath( 'textures/equirectangular/' )
					// 加载指定的HDR文件
					.load( 'moonless_golf_1k.hdr', function ( texture ) {
						// 加载完成后的回调函数，texture是加载的纹理对象

						// 设置纹理映射方式为等距圆柱投影(Equirectangular)
						// 这种映射方式适合全景/环境贴图
						texture.mapping = THREE.EquirectangularReflectionMapping;

						// 将HDR贴图设置为场景的背景
						// 这会在场景中显示为天空盒
						scene.background = texture;
						// 将HDR贴图设置为场景的环境贴图
						// 这会为所有物体提供基于图像的照明(Image Based Lighting)
						scene.environment = texture;

						// 5. 加载3D模型（在环境贴图加载完成后进行）
						// 创建GLTFLoader实例并设置模型文件路径
						const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
						// 加载受损头盔模型
						loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
							// 模型加载成功后的回调函数
							// gltf.scene包含模型的所有网格、材质等
							scene.add( gltf.scene );
						}, undefined, function ( error ) {
							// 加载失败时的错误处理
							console.error( '模型加载失败:', error );
						} );

					}, undefined, function ( error ) {
						// HDR加载失败时的错误处理
						console.error( 'HDR环境贴图加载失败:', error );
					} );

				// 6. 创建渲染器(Renderer)
				// 使用WebGPURenderer，这是Three.js的下一代渲染器
				// WebGPU是新的图形API，比WebGL更高效
				renderer = new THREE.WebGPURenderer();
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环，每帧自动调用render函数
				renderer.setAnimationLoop( render );
				// 设置色调映射(Tone Mapping)算法
				// ACESFilmicToneMapping是电影行业标准，提供更好的高光和阴影细节
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 创建调试检查器并附加到渲染器
				renderer.inspector = new Inspector();
				// 将渲染器的DOM元素(Canvas画布)添加到容器中
				container.appendChild( renderer.domElement );

				// 7. 设置后处理管道(Post Processing Pipeline)
				// 创建场景渲染通道，将场景渲染到纹理
				const scenePass = pass( scene, camera );
				// 配置多重渲染目标(MRT)，同时输出多个纹理：
				// - output: 常规颜色输出(RGB颜色)
				// - emissive: 自发光信息输出(用于辉光效果的遮罩)
				scenePass.setMRT( mrt( {
					output,      // 标准颜色输出
					emissive    // 自发光通道输出
				} ) );

				// 获取标准颜色输出的纹理节点，并添加到调试检查器
				// toInspector('Color')会在GUI中创建一个名为"Color"的显示面板
				const outputPass = scenePass.getTextureNode().toInspector( 'Color' );
				// 获取自发光通道的纹理节点，同样添加到调试检查器
				const emissivePass = scenePass.getTextureNode( 'emissive' ).toInspector( '自发光通道' );

				// 创建辉光(Bloom)效果
				// 参数说明：
				// - emissivePass: 输入纹理（只对自发光区域应用辉光）
				// - 2.5: 辉光强度
				// - 0.5: 辉光半径
				const bloomPass = bloom( emissivePass, 2.5, .5 );

				// 创建后处理管理器
				postProcessing = new THREE.PostProcessing( renderer );
				// 设置最终输出节点：将原始颜色与辉光效果相加
				postProcessing.outputNode = outputPass.add( bloomPass );

				// 8. 设置用户交互控制
				// 创建轨道控制器，绑定相机和渲染器的DOM元素
				const controls = new OrbitControls( camera, renderer.domElement );
				// 设置相机的最小缩放距离
				controls.minDistance = 2;
				// 设置相机的最大缩放距离
				controls.maxDistance = 10;
				// 设置控制器的目标点（相机围绕这个点旋转）
				controls.target.set( 0, 0, - 0.2 );
				// 更新控制器状态
				controls.update();

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

				// 10. 创建调试GUI界面
				// 在检查器中创建名为"设置"的参数面板
				const gui = renderer.inspector.createParameters( '设置' );

				// 创建辉光效果调节文件夹
				const bloomFolder = gui.addFolder( '辉光效果' );
				// 添加辉光强度调节滑块：范围0.0-5.0，默认值2.5
				bloomFolder.add( bloomPass.strength, 'value', 0.0, 5.0 ).name( '强度' );
				// 添加辉光半径调节滑块：范围0.0-1.0，默认值0.5
				bloomFolder.add( bloomPass.radius, 'value', 0.0, 1.0 ).name( '半径' );

				// 创建色调映射调节文件夹
				const toneMappingFolder = gui.addFolder( '色调映射' );
				// 添加曝光度调节滑块：范围0.1-2.0
				toneMappingFolder.add( renderer, 'toneMappingExposure', 0.1, 2 ).name( '曝光度' );

			}

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时，需要更新相机和渲染器以确保正确显示
			 */
			function onWindowResize() {

				// 更新相机的宽高比以匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此方法使更改生效）
				camera.updateProjectionMatrix();

				// 更新渲染器的大小以填充整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 渲染函数 - 动画循环的核心
			 * 这个函数会在每一帧被调用（通常每秒60次）
			 * 负责更新场景状态并执行渲染
			 */
			function render() {

				// 执行后处理渲染
				// postProcessing.render()会：
				// 1. 渲染场景到多个纹理（颜色、自发光等）
				// 2. 对自发光通道应用辉光效果
				// 3. 合并颜色和辉光效果
				// 4. 将最终结果输出到屏幕
				postProcessing.render();

			}

		</script>

	</body>
</html>