<!-- 代码功能与技术点详解
一、核心功能概述
这是一个基于Three.js WebGPU版本的实时边缘检测可视化示例，主要功能包括：

1. 3D模型展示与交互
加载并显示高精度的龙形3D模型

支持用户通过鼠标/触摸进行360度视角旋转

实时渲染动态光影效果

2. Sobel边缘检测后处理
应用经典的Sobel算子进行实时图像处理

将3D场景转换为黑白边缘轮廓图

提供边缘检测效果的开关控制

3. 完整的交互系统
轨道相机控制器

实时调试面板

响应式窗口适配

二、主要技术点详解
1. WebGPU渲染技术
javascript
// WebGPU是现代图形API，相比WebGL有显著优势
new THREE.WebGPURenderer({ antialias: true })

// 主要优势：
// 1. 更低的CPU开销
// 2. 更好的多线程支持
// 3. 更高效的GPU资源管理
// 4. 支持计算着色器
2. TSL（Three.js着色器语言）
javascript
import { pass, renderOutput } from 'three/tsl'
import { sobel } from 'three/addons/tsl/display/SobelOperatorNode.js'

// TSL特点：
// - 节点化的着色器编程
// - 在JavaScript中直接编写着色器逻辑
// - 实时编译和优化
// - 类型安全的着色器代码
3. Sobel边缘检测算法
算法原理：

javascript
// Sobel算子使用两个3×3卷积核：
// Gx = [-1, 0, 1]   Gy = [-1, -2, -1]
//      [-2, 0, 2]       [ 0,  0,  0]
//      [-1, 0, 1]       [ 1,  2,  1]

// 计算像素梯度：
// 梯度大小 = sqrt(Gx² + Gy²)
// 梯度方向 = atan2(Gy, Gx)

// 在后处理管线中的应用：
postProcessing.outputNode = sobel(renderOutput(scenePass))
4. 后处理管线架构
text
渲染流程：
1. 场景渲染阶段 → 2. 渲染到纹理 → 3. Sobel处理 → 4. 屏幕输出
   ↑                    ↑
3D场景               中间纹理
5. 物理渲染（PBR）环境
javascript
// 使用基于物理的渲染材质
model.material = new THREE.MeshStandardNodeMaterial()

// PMREM环境贴图生成
const pmremGenerator = new THREE.PMREMGenerator(renderer)
scene.environment = pmremGenerator.fromScene(environment).texture

// 特点：
// - 真实的光照计算
// - 物理正确的材质反射
// - 高质量的环境映射
6. 模块化架构设计
javascript
// 使用ES6模块系统
import * as THREE from 'three/webgpu'

// 清晰的关注点分离：
// - 初始化模块
// - 渲染模块
// - 后处理模块
// - 控制模块
三、关键技术实现
1. 异步资源加载
javascript
// 异步加载GLTF模型，避免阻塞主线程
const gltf = await loader.loadAsync('models/gltf/DragonAttenuation.glb')

// 优势：
// - 提升页面响应速度
// - 更好的用户体验
// - 支持加载进度显示
2. 响应式设计
javascript
// 窗口大小变化处理
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
}

// 自动适配：
// - 不同分辨率的设备
// - 浏览器窗口缩放
// - 移动端屏幕旋转
3. 调试与开发工具
javascript
// 集成调试检查器
renderer.inspector = new Inspector()
const gui = renderer.inspector.createParameters('设置')
gui.add(params, 'enabled')

// 功能包括：
// - 实时参数调整
// - 性能监控
// - 场景对象树查看
四、性能优化策略
1. 渲染优化
智能裁剪：近/远裁剪面合理设置（0.1-100）

纹理管理：及时释放不再需要的资源

抗锯齿处理：antialias: true 平衡画质与性能

2. 内存管理
javascript
// 显式资源释放
pmremGenerator.dispose()

// 避免内存泄漏：
// - 及时清理不再使用的纹理
// - 合理管理几何体缓存
// - 监听页面卸载事件进行清理
3. GPU资源利用
WebGPU特性：更高效的资源绑定和状态管理

着色器优化：TSL自动优化着色器代码

批处理渲染：减少Draw Call数量

五、应用场景
1. 计算机视觉演示
边缘检测算法教学

图像处理原理可视化

实时效果对比展示

2. 3D可视化工具
模型轮廓提取

工业检测应用

医学图像处理

3. 图形技术研究
WebGPU性能测试

后处理效果开发

实时渲染技术验证

六、技术栈总结
技术组件	作用	特点
Three.js WebGPU	3D渲染引擎	现代图形API，高性能
TSL	着色器编程	节点化，类型安全
GLTFLoader	模型加载	标准3D格式支持
OrbitControls	交互控制	用户友好的相机操作
PostProcessing	后处理框架	灵活的渲染管线
PMREMGenerator	环境光照	物理正确的环境映射 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			three.js WebGPU 版本 - Sobel边缘检测后处理示例
			WebGPU是下一代图形API，提供更底层的GPU访问和更好的性能
		-->
		<title>three.js WebGPU版 - Sobel算子边缘检测后处理</title>
		<!-- 
			字符编码设置：UTF-8支持中文字符
			确保页面能正确显示中文和其他特殊字符
		-->
		<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样式表链接
			type="text/css": 指定样式表类型
			rel="stylesheet": 定义与文档的关系为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			页面信息展示区域
			id="info": 用于CSS样式选择和JavaScript操作
			包含logo、标题和描述信息
		-->
		<div id="info">
			<!-- 
				three.js官方网站链接
				target="_blank": 在新标签页中打开
				rel="noopener": 安全措施，防止新页面访问原始页面的window对象
				class="logo-link": CSS类名，用于添加three.js logo样式
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器，用于样式控制 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：点击可访问three.js官网
					three.js是一个流行的JavaScript 3D库
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 副标题文本：指示当前示例的功能 -->
				<span> Sobel算子边缘检测</span>
			</div>

			<!-- 
				简要描述文本
				<small>标签表示小号字体，通常用于版权信息、法律文本或辅助信息
				这里描述示例的核心功能：使用Sobel算子进行边缘检测
			-->
			<small>使用Sobel算子实现实时边缘检测效果</small>
		</div>

		<!-- 
			导入映射表（Import Map）
			现代JavaScript模块系统的一部分，用于定义模块别名和路径映射
			允许在import语句中使用简短的别名而不是冗长的相对路径
		-->
		<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">

			// ============ 模块导入部分 ============
			// 导入Three.js核心模块（WebGPU版本）
			// WebGPU是下一代图形API，比WebGL性能更好，功能更强大
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js着色器语言）相关功能
			// pass: 创建一个渲染通道
			// renderOutput: 获取渲染输出
			import { pass, renderOutput } from 'three/tsl';
			
			// 导入Sobel边缘检测算子节点
			// sobel: 一个TSL节点，用于实现Sobel边缘检测算法
			import { sobel } from 'three/addons/tsl/display/SobelOperatorNode.js';

			// 导入Three.js附加组件
			// OrbitControls: 轨道控制器，用于鼠标/触摸控制相机旋转和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// GLTFLoader: GLTF/GLB格式的3D模型加载器
			// GLTF是Khronos Group制定的3D模型标准格式
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			// RoomEnvironment: 预制的室内环境，提供环境光照
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			// Inspector: 调试检查器，用于实时查看和修改场景参数
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ============ 全局变量声明 ============
			// 这些变量将在整个应用中使用
			let camera;       // 相机对象：定义观察3D场景的视角
			let scene;        // 场景对象：包含所有3D对象（模型、灯光、相机等）
			let renderer;     // 渲染器对象：负责将3D场景渲染到2D画布上
			let controls;     // 控制器对象：用户交互控制
			let postProcessing;  // 后处理对象：用于实现各种屏幕空间效果

			// ============ 参数配置对象 ============
			// 存储应用的可配置参数，可通过GUI修改
			const params = {
				enabled: true  // 是否启用后处理效果（Sobel边缘检测）
				// 可以添加更多参数，如边缘检测强度、颜色等
			};

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

			// ============ 异步初始化函数 ============
			// async关键字表示这是一个异步函数，内部可以使用await等待异步操作完成
			async function init() {
				// 创建场景对象
				// 场景是Three.js中所有3D对象的容器
				scene = new THREE.Scene();

				// 创建透视相机（PerspectiveCamera）
				// 透视相机模拟人眼的视角，有近大远小的效果
				camera = new THREE.PerspectiveCamera( 
					70,                                     // 视野角度（Field of View）
					// 视野越大，看到的范围越广，类似于广角镜头
					window.innerWidth / window.innerHeight, // 宽高比（Aspect Ratio）
					// 根据窗口尺寸动态计算，防止图像拉伸
					0.1,                                    // 近裁剪面（Near Clipping Plane）
					// 相机能看到的最小距离，小于此距离的对象不会渲染
					100                                     // 远裁剪面（Far Clipping Plane）
					// 相机能看到的最大距离，大于此距离的对象不会渲染
				);
				// 设置相机初始位置（x, y, z坐标）
				camera.position.set( 0, 1, 3 );  // (x: 0, y: 1, z: 3)

				// ============ 加载并设置3D模型 ============
				// 创建GLTF加载器实例
				const loader = new GLTFLoader();  
				// 异步加载龙模型
				// await会暂停函数执行，直到模型加载完成
				// GLTF是二进制格式，加载效率高于JSON格式
				const gltf = await loader.loadAsync( 'models/gltf/DragonAttenuation.glb' );
				// 获取模型的第二个子对象（通常是网格对象）
				// gltf.scene包含所有加载的场景对象
				const model = gltf.scene.children[ 1 ];
				// 为模型创建新的标准材质
				// MeshStandardNodeMaterial是基于物理渲染（PBR）的材质
				model.material = new THREE.MeshStandardNodeMaterial();
				// 将模型添加到场景中
				scene.add( model );

				// ============ 创建WebGPU渲染器 ============
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				renderer = new THREE.WebGPURenderer( { 
					antialias: true  // 启用抗锯齿，消除边缘锯齿
				} );
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上提供更清晰的图像
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				// 初始化调试检查器并附加到渲染器
				renderer.inspector = new Inspector();
				// 设置色调映射（Tone Mapping）
				// LinearToneMapping：线性色调映射，不进行额外的颜色处理
				renderer.toneMapping = THREE.LinearToneMapping;
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild( renderer.domElement );

				// 初始化渲染器（异步操作）
				// WebGPU渲染器需要异步初始化
				await renderer.init();

				// ============ 设置场景环境光照 ============
				// 创建室内环境实例
				const environment = new RoomEnvironment();
				// 创建PMREM（预过滤的Mipmap辐射环境贴图）生成器
				// 用于生成立方体贴图的环境光照
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				// 从环境场景生成环境贴图，并设置为场景的环境贴图
				scene.environment = pmremGenerator.fromScene( environment ).texture;
				// 释放生成器资源（不再需要）
				pmremGenerator.dispose();

				// ============ 创建轨道控制器 ============
				// 轨道控制器允许用户通过鼠标/触摸控制相机
				controls = new OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;    // 启用阻尼效果，使相机移动更平滑
				controls.enableZoom = false;      // 禁用缩放功能（根据需求设置）
				controls.target.set( 0, 0.5, 0 ); // 设置控制器的目标点（相机围绕此点旋转）
				controls.update();  // 初始化后立即更新控制器状态

				// ============ 创建后处理系统 ============
				// PostProcessing是Three.js的后处理框架
				postProcessing = new THREE.PostProcessing( renderer );
				// 禁用输出颜色转换（保持原始颜色）
				postProcessing.outputColorTransform = false;

				// 创建场景渲染通道
				// pass函数创建一个渲染通道节点，将场景和相机作为参数
				const scenePass = pass( scene, camera );

				// 设置后处理输出节点为Sobel边缘检测
				// sobel函数接收渲染输出，应用Sobel算子进行边缘检测
				// renderOutput函数获取场景通道的渲染结果
				postProcessing.outputNode = sobel( renderOutput( scenePass ) );

				// ============ 创建GUI控制面板 ============
				// 使用调试检查器创建参数面板
				const gui = renderer.inspector.createParameters( '设置' );
				// 添加一个复选框，用于启用/禁用后处理效果
				// 参数1: 参数对象
				// 参数2: 参数名
				gui.add( params, 'enabled' );

				// ============ 添加事件监听器 ============
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

			}

			// ============ 窗口大小变化处理函数 ============
			function onWindowResize() {
				// 更新相机宽高比
				// 确保渲染图像不会因窗口大小变化而拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵
				// 在修改相机参数后必须调用此方法
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 使渲染器canvas尺寸与窗口尺寸保持一致
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ============ 动画循环函数 ============
			// 此函数在每一帧被调用（通常每秒60次）
			function animate() {
				// 更新控制器状态
				// 处理用户输入（鼠标移动、触摸等）
				controls.update();

				// 根据参数选择渲染方式
				if ( params.enabled === true ) {
					// 使用后处理渲染（带Sobel边缘检测）
					// postProcessing.render()会自动处理整个后处理管线
					// 包括：渲染场景 -> 应用Sobel算子 -> 输出到屏幕
					postProcessing.render();
				} else {
					// 使用标准渲染（无后处理效果）
					// 直接渲染场景，不应用任何后处理效果
					renderer.render( scene, camera );
				}
			}

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