<!-- 代码功能和技术点分析
一、核心功能概述
这是一个基于Three.js WebGPU的HDR（高动态范围）交互式绘画应用，允许用户通过鼠标或触摸在画布上绘制具有残影效果的发光轨迹。

主要功能：
HDR绘画体验：在高动态范围显示器上呈现更丰富的色彩和亮度范围

交互式绘制：实时响应鼠标/触摸移动，在屏幕上绘制发光轨迹

残影效果：绘制轨迹会随时间逐渐淡出，形成拖尾效果

参数实时调节：通过GUI控制台动态调整绘画效果参数

自适应显示：根据设备能力自动适配HDR/非HDR显示模式

二、主要技术点详解
1. WebGPU图形API
现代图形标准：取代传统的WebGL，提供更好的性能和更低的开销

硬件加速：直接访问GPU，支持更复杂的着色器和计算

跨平台支持：在桌面和移动设备上都能获得良好性能

2. HDR（高动态范围）技术实现
色彩空间扩展
javascript
// 使用扩展的sRGB色彩空间支持HDR
THREE.ColorManagement.define({ [ExtendedSRGBColorSpace]: ExtendedSRGBColorSpaceImpl });
renderer.outputColorSpace = ExtendedSRGBColorSpace;
数据格式优化
javascript
// 使用半精度浮点数存储颜色值（支持超过0-1的范围）
outputType: THREE.HalfFloatType
亮度累积
javascript
// 加法混合模式累积HDR能量
brushMat.blending = THREE.AdditiveBlending;
3. TSL（Three.js着色器语言）
节点化着色器编程
javascript
// 使用TSL节点构建径向衰减函数
const d = uv().sub(0.5).length();
const t = d.div(uRadius);
const a = t.clamp().oneMinus().pow(uHard.mul(8.0).add(1.0));
实时参数绑定
javascript
// Uniform变量可在运行时动态修改
params.intensity = uniform(4.0, 'float').setName('intensity');
4. 后处理管线架构
多通道渲染
javascript
// 1. 画笔场景渲染到纹理
const brushPass = pass(brushScene, camera, { type: THREE.HalfFloatType });

// 2. 应用残影效果
postProcessing.outputNode = afterImage(brushPass, params.afterImageDecay);
残影效果算法
帧缓冲历史：存储上一帧的渲染结果

衰减系数：控制残影消失速度（afterImageDecay）

混合叠加：新帧与衰减后的旧帧混合

5. 交互系统设计
坐标转换
javascript
// 将屏幕坐标转换为Three.js世界坐标
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
brushMesh.position.set(x, window.innerHeight - y, 0);
触摸优化
javascript
// 防止移动端默认滚动行为
renderer.domElement.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
6. 自适应渲染系统
HDR能力检测
javascript
// CSS媒体查询检测HDR支持
const hdrMediaQuery = window.matchMedia('(dynamic-range: high)');
响应式布局
javascript
// 窗口大小变化时自动调整
function onResize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.right = window.innerWidth;
    camera.top = window.innerHeight;
}
7. 调试与配置系统
Inspector面板集成
javascript
// 集成Three.js官方调试工具
renderer.inspector = new Inspector();
const gui = renderer.inspector.createParameters('设置');
参数分组管理
HDR设置（强度控制）

画笔设置（硬度、半径）

效果设置（残影衰减）

三、技术架构优势
1. 性能优化
最小化绘制调用：仅绘制变化的画笔区域

智能缓冲管理：合理的渲染目标重用

GPU友好设计：使用适合GPU并行处理的数据结构

2. 视觉质量
物理正确的HDR渲染：真实的亮度范围和色彩表现

平滑的动画效果：60fps流畅的绘画体验

自适应抗锯齿：在不同分辨率下保持边缘平滑

3. 开发体验
模块化设计：清晰的职责分离

热参数调节：运行时无需重新编译

完善的错误处理：WebGPU兼容性检查和HDR支持检测

四、应用场景
创意艺术工具：数字艺术家创作HDR视觉效果

技术演示：展示WebGPU和HDR网页图形能力

教育工具：学习现代Web图形技术

交互装置：博物馆、展览的互动展示

五、技术栈总结
技术层级	使用技术	作用
图形API	WebGPU	底层图形渲染
3D引擎	Three.js	3D图形抽象层
着色器	TSL	可视化着色器编程
色彩管理	Extended sRGB	HDR色彩支持
后处理	PostProcessing	特效管线
UI交互	原生DOM API	用户交互处理
调试工具	Inspector	运行时调试 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	<!-- 元数据定义 -->
	<meta charset="utf-8" /> <!-- 字符编码，确保中文正确显示 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <!-- 视口设置：宽度等于设备宽度，初始缩放1.0，禁止用户缩放 -->
	<title>three.js WebGPU - HDR 绘画演示</title> <!-- 页面标题 - 改为中文 -->
	<link type="text/css" rel="stylesheet" href="example.css"> <!-- 外部样式表链接 -->
	<style>
		/* 页面基础样式 */
		body {
			background-color: #fff; /* 设置页面背景为白色 */
		}
		/* 不支持HDR时的提示信息样式 */
		#no-hdr {
			position: absolute; /* 绝对定位，脱离文档流 */
			font-family: monospace; /* 使用等宽字体，确保字符对齐 */
			font-size: 11px; /* 字体大小为11像素 */
			font-weight: normal; /* 字体粗细为正常 */
			text-align: center; /* 文本水平居中 */
			background: #000; /* 背景颜色为黑色 */
			color: #fff; /* 文字颜色为白色 */
			left: 50%; /* 距离左侧50% */
			transform: translateX(-50%); /* 水平方向平移自身宽度的50%，实现居中 */
			padding: 1.5em; /* 内边距为1.5个相对单位 */
			max-width: 600px; /* 最大宽度限制为600像素 */
			margin: 5em auto 0; /* 上外边距5em，左右自动外边距实现水平居中 */
		}
	</style>
	</head>
	<body>

		<!-- 页面信息显示区域 - 替换为中文内容 -->
		<div id="info" class="invert">
			<!-- three.js logo链接 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题区域 -->
			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>HDR 绘画演示</span>
			</div>

			<!-- 描述文字 - 替换为中文 -->
			<small>
				本演示产生适用于HDR显示器的色彩输出。<br>
				在画面上移动鼠标或手指来绘制HDR光迹。
			</small>
		</div>

		<!-- 不支持HDR的提示信息（默认隐藏） -->
		<div id="no-hdr" style="display: none">
			<div>
			您的浏览器报告设备或显示器不支持HDR。<br />
			如果您在使用笔记本电脑连接外接显示器，请尝试使用内置显示器<br />
			或者，在手机上尝试此网站。大多数手机都支持HDR。
			</div>
		</div>

		<!-- 模块导入映射表（import map） -->
		<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模块 -->
		<script type="module">

			// ========== 模块导入部分 ==========
			// 导入Three.js核心库（WebGPU版本）
			import * as THREE from 'three/webgpu';
			// 导入TSL着色器语言的核心节点函数
			import { pass, uv, uniform } from 'three/tsl';
			// 导入WebGPU兼容性检测工具
			import WebGPU from 'three/addons/capabilities/WebGPU.js';
			// 导入残影效果节点（后处理效果）
			import { afterImage } from 'three/addons/tsl/display/AfterImageNode.js';
			// 导入调试/检查器面板
			import { Inspector } from 'three/addons/inspector/Inspector.js';
			// 导入扩展的sRGB色彩空间（支持HDR输出）
			import { ExtendedSRGBColorSpace, ExtendedSRGBColorSpaceImpl } from 'three/addons/math/ColorSpaces.js';

			// ========== 参数配置部分 ==========
			// 创建可调节的参数对象，这些参数将在TSL着色器中使用
			// uniform函数创建着色器中的uniform变量
			const params = {
				intensity: uniform( 4.0, 'float' ).setName( 'intensity' ), // HDR强度：控制画笔颜色的亮度值，默认4.0
				hardness: uniform( 0.4, 'float' ).setName( 'hardness' ),   // 画笔硬度：控制画笔边缘的锐利程度，默认0.4
				radius: uniform( 0.5, 'float' ).setName( 'radius' ),       // 画笔半径：控制画笔的大小，默认0.5
				afterImageDecay: uniform( 0.985, 'float' ).setName( 'afterImageDecay' ), // 残影衰减：控制残影效果的消失速度，默认0.985
			};

			// ========== HDR支持检测部分 ==========
			// 使用CSS媒体查询检测设备是否支持HDR（高动态范围）
			const hdrMediaQuery = window.matchMedia( '(dynamic-range: high)' );

			// 更新HDR不支持警告的显示状态
			function updateHDRWarning() {
				// 检查媒体查询是否匹配（即设备是否支持HDR）
				const displayIsHDR = hdrMediaQuery.matches;
				// 如果不支持HDR，显示警告信息；如果支持，隐藏警告信息
				document.querySelector( '#no-hdr' ).style.display = displayIsHDR ? 'none' : '';
			}

			// 监听HDR支持状态变化事件（当设备连接/断开HDR显示器时）
			hdrMediaQuery.addEventListener( 'change', updateHDRWarning );
			updateHDRWarning(); // 页面加载时执行初始检查

			// ========== WebGPU兼容性检查部分 ==========
			// 检查浏览器是否支持WebGPU
			if ( WebGPU.isAvailable() === false ) {
				// 如果不支持WebGPU，将错误信息添加到页面
				document.body.appendChild( WebGPU.getErrorMessage() );
				// 抛出错误，停止脚本执行
				throw new Error( 'No WebGPU support' );
			}

			// ========== 色彩空间配置部分 ==========
			// 启用扩展的sRGB色彩空间以支持HDR输出
			// 这是Three.js色彩管理系统的扩展
			THREE.ColorManagement.define( { [ ExtendedSRGBColorSpace ]: ExtendedSRGBColorSpaceImpl } );

			// ========== 渲染器创建与配置部分 ==========
			// 创建WebGPU渲染器实例
			const renderer = new THREE.WebGPURenderer( {
				antialias: true, // 启用抗锯齿，平滑边缘
				outputType: THREE.HalfFloatType, // 输出类型为半精度浮点数，支持HDR值范围（比标准8-bit颜色范围更大）
			} );

			// 配置渲染器
			renderer.outputColorSpace = ExtendedSRGBColorSpace; // 设置输出色彩空间为扩展sRGB（支持HDR）
			renderer.setPixelRatio( window.devicePixelRatio ); // 设置设备像素比，适配高DPI屏幕
			renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器尺寸为窗口大小
			renderer.inspector = new Inspector(); // 初始化调试面板
			document.body.appendChild( renderer.domElement ); // 将渲染器的canvas元素添加到页面DOM

			// ========== 相机创建与配置部分 ==========
			// 创建正交相机（2D渲染使用）
			// 参数：左、右、上、下、近平面、远平面
			const camera = new THREE.OrthographicCamera( 0, window.innerWidth, window.innerHeight, 0, 1, 2 );
			camera.position.z = 1; // 设置相机Z轴位置，确保能看到整个平面

			// ========== 画笔场景创建部分 ==========
			// 创建专门用于绘制画笔的场景
			const brushScene = new THREE.Scene();
			brushScene.background = new THREE.Color( 0xffffff ); // 设置场景背景为白色

			// 创建画笔材质（使用节点材质系统）
			const brushMat = new THREE.MeshBasicNodeMaterial();
			brushMat.transparent = true; // 启用透明度
			brushMat.depthTest = false; // 禁用深度测试（避免画笔之间的遮挡）
			brushMat.depthWrite = false; // 禁用深度写入（不需要记录深度信息）
			brushMat.blending = THREE.AdditiveBlending; // 使用加法混合模式，累积HDR能量

			// ========== 后处理管线配置部分 ==========
			// 创建后处理实例，传入渲染器
			const postProcessing = new THREE.PostProcessing( renderer );
			// 创建画笔渲染通道，将画笔场景渲染到纹理
			const brushPass = pass( brushScene, camera, { type: THREE.HalfFloatType } );
			brushPass.renderTarget.texture.colorSpace = ExtendedSRGBColorSpace; // 设置渲染目标纹理的色彩空间

			// 设置后处理的输出节点为带残影效果的画笔通道
			// afterImage函数创建残影效果：第一个参数是输入纹理，第二个参数是衰减系数
			postProcessing.outputNode = afterImage( brushPass, params.afterImageDecay );

			// ========== TSL着色器节点定义部分 ==========
			// 为TSL着色器节点定义别名，方便后续使用
			const uColor = params.intensity; // 颜色强度节点
			const uHard = params.hardness;   // 硬度节点
			const uRadius = params.radius;   // 半径节点

			// 使用TSL节点创建径向衰减效果：
			// 1. uv() 获取UV坐标（0到1的范围）
			// 2. .sub(0.5) 将UV坐标从[0,1]转换为[-0.5,0.5]，使原点在中心
			// 3. .length() 计算当前UV点到中心点的距离
			const d = uv().sub( 0.5 ).length();
			
			// 根据半径标准化距离：距离除以半径
			const t = d.div( uRadius );
			
			// 计算衰减因子（alpha值）：
			// 1. .clamp() 将值限制在[0,1]范围内
			// 2. .oneMinus() 计算1 - value（反转值）
			// 3. .pow() 计算幂，硬度影响衰减曲线的形状
			// 4. uHard.mul(8.0).add(1.0) 将硬度值映射到[1,9]范围
			const a = t.clamp().oneMinus().pow( uHard.mul( 8.0 ).add( 1.0 ) );

			// 将计算出的节点连接到材质属性
			brushMat.colorNode = uColor.mul( a ); // 颜色 = 强度 × 衰减因子
			brushMat.opacityNode = a; // 透明度 = 衰减因子（使用预乘Alpha配合加法混合）

			// ========== 画笔网格创建部分 ==========
			// 创建平面几何体作为画笔形状
			const brushMesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), brushMat );
			brushMesh.scale.set( 300, 300, 1 ); // 缩放画笔大小，约300像素
			brushScene.add( brushMesh ); // 将画笔网格添加到画笔场景

			// ========== 交互事件处理部分 ==========
			// 指针移动事件处理函数
			function onPointerMove( e ) {
				// 获取渲染器canvas元素在页面中的位置和尺寸
				const rect = renderer.domElement.getBoundingClientRect();
				// 计算指针相对于canvas的坐标
				const x = e.clientX - rect.left;
				const y = e.clientY - rect.top;

				// 设置画笔位置（注意：正交相机的原点在左下角，所以需要翻转Y坐标）
				// window.innerHeight - y 将坐标系从左上角原点转换为左下角原点
				brushMesh.position.set( x, window.innerHeight - y, 0 );
			}

			// 添加全局指针移动事件监听器
			// { passive: false } 允许在事件处理函数中调用preventDefault()
			window.addEventListener( 'pointermove', onPointerMove, { passive: false } );

			// 防止移动设备上的默认触摸行为（为了更好的绘画体验）
			renderer.domElement.addEventListener( 'touchstart', ( e ) => e.preventDefault(), { passive: false } );
			renderer.domElement.addEventListener( 'touchmove', ( e ) => e.preventDefault(), { passive: false } );
			renderer.domElement.addEventListener( 'touchend', ( e ) => e.preventDefault(), { passive: false } );

			// ========== GUI调试面板配置部分 ==========
			// 创建调试面板参数组
			const gui = renderer.inspector.createParameters( '设置' );

			// 创建HDR参数文件夹
			const colorFolder = gui.addFolder( 'HDR设置' );
			// 添加强度参数控制器：参数对象、属性名、最小值、最大值、步长
			colorFolder.add( params.intensity, 'value', 0, 10, 0.1 ).name( '强度' );

			// 创建画笔设置文件夹
			const brushFolder = gui.addFolder( '画笔设置' );
			brushFolder.add( params.hardness, 'value', 0, 0.99, 0.01 ).name( '硬度' );
			brushFolder.add( params.radius, 'value', 0.1, 2.0, 0.01 ).name( '半径' );

			// 创建效果设置文件夹
			const effectFolder = gui.addFolder( '效果设置' );
			effectFolder.add( params.afterImageDecay, 'value', 0.9, 0.999, 0.001 ).name( '残影衰减' );

			// ========== 窗口大小变化处理部分 ==========
			// 窗口大小变化事件处理函数
			function onResize() {
				// 更新渲染器尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 更新相机参数以适应新窗口大小
				camera.right = window.innerWidth;   // 右边界
				camera.top = window.innerHeight;    // 上边界
				// 更新相机投影矩阵（必须调用）
				camera.updateProjectionMatrix();
			}

			// 添加窗口大小变化事件监听器
			window.addEventListener( 'resize', onResize );

			// ========== 主渲染循环部分 ==========
			// 设置动画循环（替代传统的requestAnimationFrame）
			renderer.setAnimationLoop( async () => {
				// 执行后处理渲染（这会处理整个渲染管线）
				postProcessing.render();
			} );

		</script>
	</body>
</html>