<!-- Three.js WebGPU 镜头光晕效果演示 - 功能描述与技术分析
🎯 整体功能描述
这是一个基于 Three.js WebGPU 版本的高级后处理效果演示，主要展示如何使用多重渲染目标（MRT） 和节点化后处理管道实现真实的镜头光晕效果。演示包含一个太空飞船走廊的3D场景，通过复杂的后处理技术模拟相机镜头在强光下的光学现象（镜头光晕）。

🏗️ 核心功能模块
1. 3D场景构建
环境系统：使用 HDR 贴图创建逼真的太空环境

模型加载：加载并居中显示 GLTF 格式的太空飞船走廊模型

相机系统：透视相机配合轨道控制器提供用户交互

2. 后处理效果链
text
场景渲染 → [颜色通道 + 自发光通道] → Bloom辉光 → 镜头光晕 → 高斯模糊 → 最终合成
3. 用户交互系统
3D导航：轨道控制器实现场景旋转查看

实时调试：GUI 面板可动态调整所有效果参数

响应式设计：自动适应不同屏幕尺寸

🔬 主要技术点详解
1. WebGPU 渲染技术
javascript
renderer = new THREE.WebGPURenderer();
下一代图形API：替代 WebGL，提供更低级的硬件访问

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

现代特性：支持计算着色器、光线追踪等高级功能

2. 多重渲染目标（MRT）
javascript
scenePass.setMRT( mrt( {
    output,      // 主颜色输出
    emissive     // 自发光输出
} ) );
同时输出多个缓冲区：单次渲染通道产生颜色、自发光等多个纹理

性能优化：减少渲染通道切换，提高渲染效率

效果分离：将不同效果需要的数据分离到不同缓冲区

3. TSL 节点化着色器系统
javascript
import { pass, mrt, output, emissive, uniform } from 'three/tsl';
可视化着色器编程：节点连接方式构建着色器效果

模块化设计：每个效果都是独立的节点，可复用和组合

实时调试：节点可以连接到检查器进行参数调整

4. Bloom 辉光效果
javascript
const bloomPass = bloom( emissivePass, 1, 1 );
高亮提取：从自发光通道提取明亮区域

高斯模糊：对提取的区域进行模糊处理

叠加混合：将模糊后的亮区叠加回原始图像

5. 镜头光晕算法
javascript
const flarePass = lensflare( bloomPass, {
    threshold,                 // 亮度阈值
    ghostAttenuationFactor,    // 鬼影衰减
    ghostSpacing               // 鬼影间距
} );
光学模拟：基于真实相机镜头的光学特性

多重鬼影：模拟镜头内部多重反射产生的光斑

距离衰减：光晕强度随距离增加而衰减

6. 高斯模糊优化
javascript
const blurPass = gaussianBlur( flarePass, 8 );
分离卷积：水平和垂直方向分别进行模糊计算

性能优化：相比标准高斯模糊减少计算量

质量提升：使光晕边缘更加柔和自然

7. HDR 工作流
javascript
texture.mapping = THREE.EquirectangularReflectionMapping;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
高动态范围：使用 HDR 贴图存储更宽的亮度范围

色调映射：将 HDR 值映射到显示器的 LDR 范围

ACES Filmic：电影级色调映射算法，保留更多细节

8. 实时调试系统
javascript
renderer.inspector = new Inspector();
const gui = renderer.inspector.createParameters( '参数设置' );
可视化参数调整：滑块控制效果参数

分层组织：效果参数按类别分组

实时反馈：调整立即反映在渲染结果中

🚀 技术亮点
性能优化
单通道 MRT：减少渲染目标切换开销

智能模糊：只对必要区域进行模糊处理

GPU 优化：充分利用 WebGPU 的并行计算能力

视觉效果
物理准确性：基于真实光学原理的光晕模拟

多层合成：多效果叠加产生丰富视觉层次

动态调整：所有参数可实时调整，方便艺术控制

开发体验
节点化工作流：直观的效果构建方式

模块化设计：易于扩展和维护

完整调试：内置强大的调试工具

📊 技术架构图
text
[用户输入] → [轨道控制器] → [相机更新]
                           ↓
[3D场景] → [WebGPU渲染器] → [MRT输出]
                           ↓
[颜色纹理]    [自发光纹理]
      ↓           ↓
[最终合成] ← [高斯模糊] ← [镜头光晕] ← [Bloom辉光]
      ↓
[色调映射] → [屏幕显示]
      ↓
[调试面板] ← [参数调整] -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			title标签：定义网页标题，显示在浏览器标签页上
			这里我们改为中文标题："three.js WebGPU - 后处理镜头光晕效果演示"
		-->
		<title>three.js WebGPU - 后处理镜头光晕效果演示</title>
		<!-- 
			meta charset：指定文档字符编码为UTF-8，支持中文字符
			UTF-8是一种变长字节编码方式，可以表示Unicode标准中的任何字符
		-->
		<meta charset="utf-8">
		<!-- 
			viewport meta标签：控制移动设备上的视口行为
			width=device-width：视口宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放页面
			minimum-scale=1.0, maximum-scale=1.0：锁定缩放比例为1.0
			这些设置确保WebGL画布在移动设备上正确显示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 
			link标签：引入外部CSS样式表
			type="text/css"：指定链接的资源类型为CSS
			rel="stylesheet"：定义当前文档与被链接文档的关系为样式表
			href="example.css"：样式表文件的相对路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			id="info"：给这个div元素赋予唯一标识符"info"
			这个div包含页面上的所有信息性内容，如标题、描述和版权信息
		-->
		<div id="info">
			<!-- 
				a标签：创建超链接到Three.js官网
				class="logo-link"：CSS类名，可能用于添加Three.js的logo背景图片
				target="_blank"：在新标签页中打开链接
				rel="noopener"：安全特性，防止新打开的页面访问原页面的window对象
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 
				class="title-wrapper"：标题区域的包装容器
				这个div包含主标题和副标题
			-->
			<div class="title-wrapper">
				<!-- 主标题链接到Three.js官网 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 副标题：描述当前演示的具体功能 -->
				<span>镜头光晕效果演示</span>
			</div>

			<!-- 
				small标签：表示旁注或小号字体文本，通常用于版权声明、法律文本等
				这里包含技术说明和资源版权信息
			-->
			<small>
				<!-- 技术说明：描述本演示使用的核心技术 -->
				本演示使用基于Bloom后处理的镜头光晕技术实现。<br />
				<!-- 3D模型来源和版权信息 -->
				3D模型：
				<a href="https://skfb.ly/6SqUF" target="_blank" rel="noopener">太空飞船走廊</a> 
				由 
				<a href="https://sketchfab.com/yeeyeeman" target="_blank" rel="noopener">yeeyeeman</a> 
				创作，采用 
				<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">知识共享署名许可协议</a> 授权。<br />
				<!-- HDR环境贴图来源信息 -->
				环境贴图：
				<a href="https://www.spacespheremaps.com/planetary-spheremaps/" target="_blank" rel="noopener">冰行星近景</a> 
				来自 
				<a href="https://www.spacespheremaps.com/" target="_blank" rel="noopener">Space Spheremaps</a> 
				网站。
			</small>
		</div>

		<!-- 
			importmap脚本：现代JavaScript模块导入映射配置
			允许开发者定义模块标识符与其实际URL之间的映射关系
			这是ES模块系统的特性，支持在浏览器中直接使用模块化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>

		<!-- 
			type="module"：声明这是一个ES6模块脚本
			ES6模块支持import/export语法，具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// ========== 模块导入部分 ==========
			// 导入Three.js的WebGPU版本核心模块
			// THREE对象包含所有Three.js的核心类和方法
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言（TSL）节点
			// TSL是Three.js的可视化着色器节点系统，用于构建复杂的着色器效果
			// pass: 创建渲染通道节点
			// mrt: 多重渲染目标配置
			// output: 输出节点，通常表示颜色输出
			// emissive: 自发光节点，用于处理自发光的材质效果
			// uniform: 统一变量节点，用于在着色器间传递参数
			import { pass, mrt, output, emissive, uniform } from 'three/tsl';
			
			// 导入后处理效果节点
			// bloom: 辉光（泛光）效果，使明亮区域产生光晕
			// lensflare: 镜头光晕效果，模拟相机镜头中的光学现象
			// gaussianBlur: 高斯模糊效果，用于平滑图像
			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
			import { lensflare } from 'three/addons/tsl/display/LensflareNode.js';
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			// 导入UltraHDR加载器，用于加载高动态范围图像
			// HDR图像包含比普通RGB图像更宽的亮度范围，适合用作环境贴图
			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';

			// 导入轨道控制器和GLTF加载器
			// OrbitControls: 允许用户用鼠标控制相机旋转和平移
			// GLTFLoader: 加载GLTF格式的3D模型，GLTF是Web上的标准3D格式
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

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

			// ========== 全局变量声明 ==========
			// 这些变量在整个模块中共享，存储Three.js的核心对象
			let camera;      // 相机对象，定义观察3D场景的视角
			let scene;       // 场景对象，包含所有要渲染的3D对象
			let renderer;    // 渲染器对象，负责将3D场景渲染到2D画布
			let controls;    // 控制器对象，处理用户交互
			let postProcessing; // 后处理对象，管理后处理效果管道

			// 调用初始化函数，启动应用程序
			init();

			// ========== 异步初始化函数 ==========
			// async关键字表示这个函数是异步的，可以在内部使用await等待异步操作完成
			async function init() {

				// 创建透视相机（Perspective Camera）
				// 参数说明：
				// 45 - 垂直视角（视野角度），单位为度
				// window.innerWidth / window.innerHeight - 纵横比（宽度/高度）
				// 0.1 - 近裁剪平面，距离相机小于此值的物体不会被渲染
				// 100 - 远裁剪平面，距离相机大于此值的物体不会被渲染
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
				// 设置相机初始位置（x, y, z坐标）
				camera.position.set( 0, 0.5, -0.5 );

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

				// 异步加载HDR环境贴图
				// await关键字：等待异步操作完成，不会阻塞主线程
				// UltraHDRLoader().loadAsync()：异步加载HDR图像文件
				const texture = await new UltraHDRLoader().loadAsync( 'textures/equirectangular/ice_planet_close.jpg' );

				// 设置纹理映射方式为等距柱状投影
				// EquirectangularReflectionMapping将纹理映射到球体上，常用于环境贴图
				texture.mapping = THREE.EquirectangularReflectionMapping;

				// 将HDR纹理设置为场景的背景和环境贴图
				// 背景：直接渲染为场景的背景
				// 环境贴图：用于物体表面的反射和折射计算
				scene.background = texture;
				scene.environment = texture;

				// 设置背景和环境光的强度
				// 这些值控制HDR贴图的亮度影响
				scene.backgroundIntensity = 2;      // 背景强度为2倍
				scene.environmentIntensity = 15;    // 环境光强度为15倍

				// 加载3D模型
				// GLTF（GL传输格式）是Web上标准的3D文件格式
				const loader = new GLTFLoader();
				// 异步加载GLTF模型文件
				const gltf = await loader.loadAsync( 'models/gltf/space_ship_hallway.glb' );

				// 获取加载的3D场景对象
				const object = gltf.scene;

				// 计算模型的轴对齐包围盒（Axis-Aligned Bounding Box, AABB）
				// 包围盒是包含模型所有顶点的最小长方体，用于快速进行碰撞检测和空间计算
				const aabb = new THREE.Box3().setFromObject( object );
				// 获取包围盒的中心点坐标
				const center = aabb.getCenter( new THREE.Vector3() );

				// 调整模型位置使其相对于自身中心点居中
				// 这是一个常见的模型居中技巧，确保模型围绕其几何中心旋转
				object.position.x += ( object.position.x - center.x );
				object.position.y += ( object.position.y - center.y );
				object.position.z += ( object.position.z - center.z );

				// 将调整后的模型添加到场景中
				scene.add( object );
			
				// 创建WebGPU渲染器
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				// WebGPU是新一代图形API，相比WebGL提供更好的多线程支持和性能
				renderer = new THREE.WebGPURenderer();
				// 设置设备像素比，确保在高DPI显示器上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环，传入渲染函数，每帧自动调用
				renderer.setAnimationLoop( render );
				// 设置色调映射为ACES Filmic（电影级色调映射）
				// 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				// 创建并附加调试检查器，用于实时调整参数
				renderer.inspector = new Inspector();
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// ========== 后处理管道构建 ==========
				// 创建场景渲染通道节点
				// pass()函数创建一个渲染通道，将场景和相机渲染到纹理
				const scenePass = pass( scene, camera );
				// 配置多重渲染目标（Multiple Render Targets, MRT）
				// MRT允许在单次渲染通道中输出多个纹理（如颜色、法线、深度等）
				scenePass.setMRT( mrt( {
					output,      // 主颜色输出
					emissive     // 自发光输出（用于Bloom效果）
				} ) );

				// 获取颜色输出纹理节点，并添加到调试检查器
				// getTextureNode()获取默认的颜色输出纹理
				// toInspector('Color')将其添加到检查器，标签为"Color"
				const outputPass = scenePass.getTextureNode().toInspector( '颜色' );
				// 获取自发光输出纹理节点，并添加到调试检查器
				const emissivePass = scenePass.getTextureNode( 'emissive' ).toInspector( '自发光' );

				// 对自发光通道应用Bloom（辉光/泛光）效果
				// bloom()函数参数：输入纹理、强度、半径
				// 这里强度为1，半径为1，表示中等强度的Bloom效果
				const bloomPass = bloom( emissivePass, 1, 1 ).toInspector( 'Bloom效果' );

				// 创建镜头光晕效果的参数（使用uniform节点以便通过GUI调整）
				// uniform节点表示着色器中的统一变量，可以在运行时动态修改
				const threshold = uniform( 0.5 );               // 阈值：控制哪些亮度区域产生光晕
				const ghostAttenuationFactor = uniform( 25 );   // 鬼影衰减因子：控制光晕强度衰减
				const ghostSpacing = uniform( 0.25 );           // 鬼影间距：控制光晕元素之间的间隔

				// 应用镜头光晕效果到Bloom结果上
				// lensflare()函数将镜头光晕效果应用到输入纹理
				const flarePass = lensflare( bloomPass, {
					threshold,                 // 亮度阈值
					ghostAttenuationFactor,    // 衰减因子
					ghostSpacing               // 间距参数
				} );

				// 对光晕结果应用高斯模糊（可选步骤）
				// 模糊可以使光晕效果更平滑，但会增加性能开销
				// 参数8表示模糊的强度/半径
				const blurPass = gaussianBlur( flarePass, 8 );

				// 创建后处理管道管理器
				// PostProcessing类管理整个后处理效果链
				postProcessing = new THREE.PostProcessing( renderer );
				// 设置最终输出节点：原始颜色 + Bloom效果 + 模糊后的镜头光晕
				// add()方法将多个纹理叠加混合
				postProcessing.outputNode = outputPass.add( bloomPass ).add( blurPass );

				// ========== 用户交互控制 ==========
				// 创建轨道控制器，连接相机和渲染器的DOM元素
				controls = new OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;      // 启用阻尼效果，使相机移动更平滑（有惯性）
				controls.enablePan = false;         // 禁用相机平移（只能旋转）
				controls.enableZoom = false;        // 禁用缩放功能
				// 设置控制器的目标点为相机前方一点，确保旋转中心正确
				controls.target.copy( camera.position );
				controls.target.z -= 0.01;          // 微调目标点的z坐标
				controls.update();                  // 初始化更新控制器状态

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

				// ========== 调试界面创建 ==========
				// 从渲染器检查器创建参数面板
				const gui = renderer.inspector.createParameters( '参数设置' );

				// 创建Bloom效果参数文件夹
				const bloomFolder = gui.addFolder( 'Bloom效果' );
				// 添加强度参数滑块：范围0.0到2.0，默认显示名称为'strength'
				bloomFolder.add( bloomPass.strength, 'value', 0.0, 2.0 ).name( '强度' );
				// 添加半径参数滑块：范围0.0到1.0，默认显示名称为'radius'
				bloomFolder.add( bloomPass.radius, 'value', 0.0, 1.0 ).name( '半径' );
			
				// 创建镜头光晕参数文件夹
				const lensflareFolder = gui.addFolder( '镜头光晕' );
				// 添加阈值参数滑块：范围0.0到1.0
				lensflareFolder.add( threshold, 'value', 0.0, 1.0 ).name( '亮度阈值' );
				// 添加衰减因子参数滑块：范围10.0到50.0
				lensflareFolder.add( ghostAttenuationFactor, 'value', 10.0, 50.0 ).name( '衰减因子' );
				// 添加间距参数滑块：范围0.0到0.3
				lensflareFolder.add( ghostSpacing, 'value', 0.0, 0.3 ).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() {

				// 更新轨道控制器状态
				// 处理用户输入（鼠标/触摸）并更新相机位置
				controls.update();

				// 执行后处理渲染
				// 这个调用会触发整个后处理管道：场景渲染 → 效果应用 → 最终输出
				postProcessing.render();

			}

		</script>

	</body>
</html>