<!-- PMREM场景演示 - 代码功能与技术点详解
🌟 整体功能概述
这是一个基于Three.js WebGPU的PMREM（预过滤Mipmapped辐射环境贴图）技术演示。程序创建一个3D场景，其中包含6个彩色球体，然后将这些球体作为环境光源，生成PMREM纹理，最后在一个中心球体上展示动态环境反射效果。

🔧 主要技术点详解
1. PMREM（Pre-filtered Mipmapped Radiance Environment Map）
核心功能：将3D场景转换为高质量的环境贴图

工作流程：

场景捕获：从6个方向（立方体贴图）渲染整个场景

预过滤处理：对捕获的图像进行卷积处理，模拟不同粗糙度的表面反射

Mipmap生成：创建多级纹理，每级对应不同的粗糙度

技术优势：

实现实时环境反射，无需复杂的光照计算

支持粗糙度变化的材质（从镜面到漫反射）

性能高效，预处理一次，多次使用

2. WebGPU渲染
新一代图形API：替代WebGL，提供更接近原生GPU的性能

技术特点：

异步初始化：await renderer.init()

现代GPU特性：支持计算着色器、并行处理等

更好的性能：更少的CPU开销，更多的GPU控制

3. TSL（Three.js Shader Language）
节点式着色器编程：可视化/编程式创建复杂材质

关键组件：

pmremTexture()：PMREM纹理采样节点

normalWorld：世界空间法线输入

uniform()：创建可动态修改的着色器参数

4. 场景结构与渲染流程
text
场景构成：
├── 背景：HDR立方体贴图（公园环境）
├── 6个彩色球体（环境光源）：
│   ├── 蓝色球体（Z-方向）
│   ├── 红色球体（Z+方向）
│   ├── 洋红色球体（X+方向）
│   ├── 青色球体（X-方向）
│   ├── 黄色球体（Y-方向）
│   └── 绿色球体（Y+方向）
└── 中心球体（PMREM材质）：
    └── 反射6个彩色球体的动态环境
🎯 核心代码功能模块
初始化阶段 (init() 函数)
javascript
// 1. 创建Three.js基础组件
camera = new THREE.PerspectiveCamera(...)  // 透视相机
scene = new THREE.Scene()                  // 3D场景容器
renderer = new THREE.WebGPURenderer(...)   // WebGPU渲染器

// 2. 设置用户交互
controls = new OrbitControls(...)          // 鼠标/触摸控制

// 3. 加载环境资源
scene.background = await loader.loadAsync(...)  // 立方体贴图背景
PMREM生成阶段
javascript
// 关键代码：从场景生成PMREM纹理
const pmremGenerator = new THREE.PMREMGenerator(renderer)
const sceneRT = pmremGenerator.fromScene(scene)
// ↑ 这个调用完成了：
//   a) 场景6方向渲染
//   b) 预过滤处理
//   c) Mipmap链生成
材质与着色器阶段
javascript
// 1. 创建可调节的粗糙度参数
const pmremRoughness = uniform(0.5)  // 初始值0.5

// 2. 创建PMREM材质节点
const pmremNode = pmremTexture(
  sceneRT.texture,    // PMREM纹理
  normalWorld,        // 法线方向
  pmremRoughness      // 粗糙度控制
)

// 3. 应用到球体材质
new THREE.MeshBasicNodeMaterial({
  colorNode: pmremNode  // 使用PMREM作为颜色源
})
交互与控制阶段
javascript
// GUI控制面板
gui.add(pmremRoughness, 'value', 0, 1, 0.001)
  .name('粗糙度')
  .onChange(() => render())  // 实时更新渲染
🚀 技术亮点
1. 实时动态环境反射
中心球体实时反射周围6个彩色球体

反射效果随视角变化而动态更新

粗糙度可调节，展示从镜面到漫反射的连续变化

2. 现代Web图形技术栈
text
技术栈层级：
┌─────────────────────────┐
│    Three.js (应用层)     │ ← 3D场景管理、材质、几何体
├─────────────────────────┤
│    TSL (着色器层)        │ ← 节点式着色器编程
├─────────────────────────┤
│    WebGPU (API层)        │ ← 底层图形API调用
├─────────────────────────┤
│    GPU驱动 (硬件层)      │ ← 实际图形计算
└─────────────────────────┘
3. 高效的资源管理
PMREM纹理复用：一次生成，多次使用

异步加载：纹理加载不阻塞主线程

响应式设计：自适应窗口大小变化

4. 开发工具集成
内置调试检查器 (Inspector)

可视化参数控制 (GUI面板)

交互式相机控制 (OrbitControls)

📊 性能与优化考虑
PMREM生成开销
一次性成本：只在初始化时生成PMREM纹理

纹理大小：立方体贴图分辨率影响质量和性能

Mipmap级别：更多级别支持更精细的粗糙度变化

渲染优化
静态环境：6个彩色球体位置固定，不需要每帧更新

单一材质：中心球体使用高效节点材质

按需渲染：只有参数变化时才重新渲染

🎨 视觉效果演示
反射特性展示
镜面反射 (粗糙度≈0)

清晰反射周围球体

高光锐利，细节丰富

光泽反射 (粗糙度≈0.5)

模糊的反射效果

模拟真实材质表面

漫反射 (粗糙度≈1)

几乎看不到具体反射

颜色混合的环境光照

交互体验
实时调节：拖动滑块立即看到反射变化

自由观察：360度旋转查看不同角度的反射

缩放查看：近距离观察反射细节

🔍 技术应用场景
适合的应用
产品展示：高反射材质的产品3D展示

游戏开发：实时环境反射效果

建筑可视化：玻璃、金属材质的建筑渲染

教育演示：光学和反射原理的教学工具

扩展可能性
动态环境：让彩色球体运动，实现动态环境变化

多材质支持：不同粗糙度的多个物体

后期处理：添加抗锯齿、色彩校正等效果

VR/AR集成：支持VR设备交互

⚠️ 注意事项
浏览器兼容性
需要支持WebGPU：Chrome 113+、Edge 113+

备选方案：通过forceWebGL: true降级到WebGL

性能考虑
高细分球体：64x64的球体细分较高，在低端设备可能影响性能

纹理大小：PMREM纹理分辨率需要根据设备能力调整

资源路径
相对路径依赖：纹理文件需要放在./textures/cube/Park3Med/目录

跨域问题：如果部署到服务器，需要注意CORS策略 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题 
			PMREM：预过滤的Mipmapped辐射环境贴图（Pre-filtered Mipmapped Radiance Environment Map）
			这是一种用于实时渲染的高效环境光照技术
		-->
		<title>Three.js WebGPU - PMREM场景演示</title>
		<!-- 字符编码设置为UTF-8，支持中文显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置，适配移动设备：
			width=device-width：宽度等于设备宽度
			user-scalable=no：禁止用户手动缩放
			minimum-scale=1.0：最小缩放比例为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样式表，用于页面布局和样式 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域
			id="info"：用于CSS样式选择和JavaScript操作
			通常这个区域会显示在页面左上角，包含标题和描述
		-->
		<div id="info">
			<!-- 
				Three.js官方logo链接
				class="logo-link"：样式类，通常包含背景图片显示Three.js的logo
				target="_blank"：在新标签页打开链接
				rel="noopener"：安全属性，防止新页面通过window.opener访问原页面
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装容器，用于水平排列主标题和副标题 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接，点击可跳转到Three.js官方网站
					Three.js是一个流行的基于WebGL的3D JavaScript库
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题，用span标签包裹以便单独设置样式 -->
				<span>PMREM场景演示</span>
			</div>

			<!-- 
				描述文本，使用small标签表示辅助性、次要的信息
				这段文本说明了本示例的核心功能
			-->
			<small>
				从场景生成预过滤Mipmapped辐射环境贴图（PMREM）
			</small>
			
			<!-- 新增：技术说明区域 -->
			<div class="tech-info" style="margin-top: 40px;">
				<small>
					<strong>技术说明：</strong>PMREM是一种环境光照技术，它将场景渲染为立方体贴图，
					并生成不同粗糙度级别的mipmap，用于实现高质量的实时环境反射效果。
				</small>
			</div>
			
			<!-- 新增：操作说明区域 -->
			<div class="instructions">
				<small>
					<strong>操作说明：</strong>
					<br>• 鼠标拖拽：旋转视角
					<br>• 鼠标滚轮：缩放视角
					<br>• 右侧面板：调整粗糙度参数
				</small>
			</div>
		</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>

		<!-- 
			主应用程序脚本
			type="module"：表示这是一个ES6模块，支持import/export语法
			模块脚本默认是defer的，会在HTML解析完成后执行
		-->
		<script type="module">

			// ========== 模块导入区域 ==========
			
			// 导入Three.js的WebGPU核心模块
			// WebGPU是新一代的图形API，比WebGL更高效，支持更多现代GPU特性
			import * as THREE from 'three/webgpu';
			
			// 从TSL模块导入特定的着色器节点：
			// normalWorld: 世界空间法线向量节点
			// uniform: 创建uniform变量的函数，用于从JavaScript向着色器传递数据
			// pmremTexture: PMREM纹理节点，用于在着色器中采样PMREM纹理
			import { normalWorld, uniform, pmremTexture } from 'three/tsl';

			// 导入轨道控制器（OrbitControls）
			// 这是一种常用的相机控制器，允许用户通过鼠标拖拽、滚轮来控制和旋转视角
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试检查器（Inspector）
			// 这是一个可视化调试工具，可以查看场景结构、修改对象属性、添加GUI控制面板等
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			
			// 声明三个全局变量，用于存储场景的核心组件
			// 这些变量在init函数中初始化，在render函数中使用
			let camera;     // 相机：定义观察者的视角和投影方式
			let scene;      // 场景：包含所有需要渲染的3D对象（网格、灯光等）
			let renderer;   // 渲染器：负责将3D场景渲染到2D画布上

			// ========== 初始化函数调用 ==========
			
			// 程序入口点，调用初始化函数
			// 注意：init函数是async的，所以这里实际上启动了一个异步初始化流程
			init();

			// ========== 异步初始化函数 ==========
			
			// async关键字表示这个函数内部可以使用await进行异步操作
			// 这个函数负责设置整个Three.js应用程序
			async function init() {

				// --- 创建DOM容器 ---
				// 创建一个新的div元素，用于容纳Three.js的渲染画布
				const container = document.createElement( 'div' );
				// 将这个容器添加到页面的body元素中
				document.body.appendChild( container );

				// --- 相机设置 ---
				// 创建透视相机（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 );

				// --- 场景创建 ---
				// 创建一个新的3D场景，所有的3D对象（网格、灯光等）都将添加到这个场景中
				scene = new THREE.Scene();

				// --- 渲染器配置 ---
				// 是否强制使用WebGL而不是WebGPU（用于测试或兼容性目的）
				// 如果设为true，即使浏览器支持WebGPU也会使用WebGL
				const forceWebGL = false;

				// 创建WebGPU渲染器实例
				// WebGPURenderer是Three.js对WebGPU API的封装
				renderer = new THREE.WebGPURenderer( { 
					antialias: true,   // 开启抗锯齿，使边缘更平滑
					forceWebGL         // 是否强制使用WebGL
				} );
				
				// 设置渲染器的设备像素比
				// window.devicePixelRatio是设备的物理像素与CSS像素的比率
				// 设置这个值可以让渲染在高DPI屏幕上更清晰
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器的输出尺寸为浏览器窗口的尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置渲染器的动画循环回调函数
				// 这里传入的render函数将在每一帧被调用，实现动画效果
				// 如果不设置动画循环，需要手动在需要时调用render函数
				renderer.setAnimationLoop( render );
				
				// 将调试检查器附加到渲染器上
				// 这样可以通过检查器查看和修改场景中的对象
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas画布）添加到之前创建的容器中
				container.appendChild( renderer.domElement );

				// --- 异步初始化渲染器 ---
				// WebGPU渲染器需要异步初始化，因为它可能需要请求GPU设备权限
				// await会等待初始化完成再继续执行后面的代码
				await renderer.init();

				// --- 轨道控制器设置 ---
				// 创建轨道控制器，允许用户通过鼠标与3D场景交互
				// 参数：要控制的相机，以及交互的DOM元素（这里是渲染器的画布）
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 添加变化事件监听器，当用户操作控制器时触发
				// 这里直接调用render函数进行重新渲染
				// 注意：如果设置了动画循环（setAnimationLoop），这行代码可能不是必需的
				controls.addEventListener( 'change', render );
				
				// 设置相机的最小和最大距离限制，防止用户缩放过近或过远
				controls.minDistance = 2;   // 最小距离2个单位
				controls.maxDistance = 10;  // 最大距离10个单位
				
				// 更新控制器内部状态，应用上述设置
				controls.update();

				// --- 加载场景背景 ---
				// 创建立方体贴图加载器（CubeTextureLoader）
				// 立方体贴图由6张图片组成，分别对应立方体的6个面
				const loader = new THREE.CubeTextureLoader();
				
				// 设置纹理文件的基路径
				loader.setPath( './textures/cube/Park3Med/' );
				
				// 异步加载立方体贴图
				// 参数数组中的顺序对应立方体的6个面：
				//   'px.jpg': 正X面（右）
				//   'nx.jpg': 负X面（左）
				//   'py.jpg': 正Y面（上）
				//   'ny.jpg': 负Y面（下）
				//   'pz.jpg': 正Z面（前）
				//   'nz.jpg': 负Z面（后）
				scene.background = await loader.loadAsync( [ 
					'px.jpg', 'nx.jpg', 
					'py.jpg', 'ny.jpg', 
					'pz.jpg', 'nz.jpg' 
				] );

				// --- 创建场景中的彩色球体 ---
				// 这些球体将作为环境反射的源，被PMREM捕获并用于中间球体的反射
				let model;  // 临时变量，用于存储每个创建的球体网格

				// 蓝色球体 - 放置在Z轴负方向（相机前方）
				model = new THREE.Mesh(
					// 球体几何体：半径0.2，宽度细分64，高度细分64
					// 较高的细分数使球体更平滑，但渲染成本也更高
					new THREE.SphereGeometry( .2, 64, 64 ),
					// 基础材质（MeshBasicMaterial）：不受光照影响，直接显示颜色
					// 0x0000ff是十六进制颜色值，表示纯蓝色
					new THREE.MeshBasicMaterial( { color: 0x0000ff } )
				);
				model.position.z -= 1;  // 沿Z轴负方向移动1个单位
				scene.add( model );     // 将球体添加到场景中

				// 红色球体 - 放置在Z轴正方向（相机后方）
				model = new THREE.Mesh(
					new THREE.SphereGeometry( .2, 64, 64 ),
					new THREE.MeshBasicMaterial( { color: 0xff0000 } )  // 红色
				);
				model.position.z += 1;  // 沿Z轴正方向移动1个单位
				scene.add( model );

				// 洋红色球体 - 放置在X轴正方向（右侧）
				model = new THREE.Mesh(
					new THREE.SphereGeometry( .2, 64, 64 ),
					new THREE.MeshBasicMaterial( { color: 0xff00ff } )  // 洋红色
				);
				model.position.x += 1;  // 沿X轴正方向移动1个单位
				scene.add( model );

				// 青色球体 - 放置在X轴负方向（左侧）
				model = new THREE.Mesh(
					new THREE.SphereGeometry( .2, 64, 64 ),
					new THREE.MeshBasicMaterial( { color: 0x00ffff } )  // 青色
				);
				model.position.x -= 1;  // 沿X轴负方向移动1个单位
				scene.add( model );

				// 黄色球体 - 放置在Y轴负方向（下方）
				model = new THREE.Mesh(
					new THREE.SphereGeometry( .2, 64, 64 ),
					new THREE.MeshBasicMaterial( { color: 0xffff00 } )  // 黄色
				);
				model.position.y -= 1;  // 沿Y轴负方向移动1个单位
				scene.add( model );

				// 绿色球体 - 放置在Y轴正方向（上方）
				model = new THREE.Mesh(
					new THREE.SphereGeometry( .2, 64, 64 ),
					new THREE.MeshBasicMaterial( { color: 0x00ff00 } )  // 绿色
				);
				model.position.y += 1;  // 沿Y轴正方向移动1个单位
				scene.add( model );

				// 注释掉的代码：移除场景中所有子对象
				// 这行代码如果取消注释，会清空场景中刚刚添加的所有球体
				// 通常用于测试或重置场景状态
				// while ( scene.children.length > 0 ) scene.remove( scene.children[ 0 ] );

				// --- 生成PMREM纹理 ---
				// 这是本示例的核心部分：从当前场景生成PMREM环境贴图
				
				// 1. 创建PMREM生成器实例，传入渲染器作为参数
				// PMREMGenerator是Three.js提供的工具类，专门用于生成PMREM纹理
				const pmremGenerator = new THREE.PMREMGenerator( renderer );
				
				// 2. 从当前场景生成PMREM纹理
				// fromScene()方法会：
				//   a. 将当前场景渲染到一个立方体贴图中（6个方向各渲染一次）
				//   b. 对这个立方体贴图进行预过滤处理，生成不同粗糙度级别的mipmap
				//   c. 返回一个WebGLRenderTarget对象，其中包含生成的纹理
				const sceneRT = pmremGenerator.fromScene( scene );
				// sceneRT.texture 就是生成的PMREM纹理，可以用于材质的环境贴图

				// --- 创建使用PMREM纹理的球体 ---
				// 这个球体将反射之前创建的6个彩色球体
				
				// 1. 创建粗糙度uniform变量
				// uniform()函数创建一个可以在着色器中访问的uniform变量
				// 初始值设为0.5（中等粗糙度）
				// 粗糙度影响反射的模糊程度：0表示完全镜面反射，1表示完全漫反射
				const pmremRoughness = uniform( 0.5 );
				
				// 2. 创建PMREM纹理节点
				// pmremTexture()是一个TSL函数，它创建一个纹理采样节点
				// 参数：
				//   sceneRT.texture: 之前生成的PMREM纹理
				//   normalWorld: 世界空间法线向量，用于确定反射方向
				//   pmremRoughness: 粗糙度值，决定使用哪个mipmap级别
				const pmremNode = pmremTexture( sceneRT.texture, normalWorld, pmremRoughness );
				
				// 3. 创建使用PMREM纹理的球体
				// 这个球体位于场景中心，半径0.5，比周围的彩色球体大
				const centerSphere = new THREE.Mesh(
					// 球体几何体，半径0.5，细分64x64
					new THREE.SphereGeometry( 0.5, 64, 64 ),
					// MeshBasicNodeMaterial：支持节点着色器的基本材质
					// 与传统材质不同，节点材质允许通过节点图（node graph）定义材质属性
					new THREE.MeshBasicNodeMaterial( { 
						// colorNode: 颜色节点，这里使用PMREM纹理节点作为颜色来源
						// 这意味着球体的颜色将由PMREM纹理根据法线和粗糙度决定
						colorNode: pmremNode
					} )
				);
				
				// 4. 将中心球体添加到场景中
				// 这个球体不会自动添加到场景，因为它的位置已经是(0,0,0)
				scene.add( centerSphere );

				// --- 创建GUI控制面板 ---
				// 使用调试检查器创建参数控制面板
				
				// 1. 创建名为"Settings"的参数面板
				// 这个面板将显示在页面的右侧或通过特定按键触发
				const gui = renderer.inspector.createParameters( '设置' );
				
				// 2. 添加粗糙度控制滑块
				gui.add( pmremRoughness, 'value', 0, 1, 0.001 )  // 参数：对象、属性名、最小值、最大值、步长
					.name( '粗糙度' )                            // 显示在GUI中的名称
					.onChange( () => render() );                 // 值改变时的回调函数，重新渲染场景

				// --- 添加窗口大小变化监听器 ---
				// 当浏览器窗口大小改变时，需要调整相机和渲染器的设置
				window.addEventListener( 'resize', onWindowResize );

				// 初始化完成
				// 此时场景已设置好，渲染器已初始化，GUI已创建
				// 动画循环将开始调用render函数，场景开始渲染
			}

			// ========== 窗口大小变化处理函数 ==========
			
			// 当浏览器窗口大小改变时，这个函数会被调用
			function onWindowResize() {

				// 1. 更新相机的宽高比
				// 相机需要知道渲染区域的宽高比来计算正确的透视投影
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机的投影矩阵
				// 改变相机参数后，必须调用updateProjectionMatrix()来重新计算投影矩阵
				// 投影矩阵定义了3D空间如何映射到2D屏幕
				camera.updateProjectionMatrix();

				// 3. 更新渲染器的大小
				// 使渲染器的输出画布与窗口的新尺寸匹配
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 注意：这里没有自动调用render()，因为：
				// - 如果有动画循环，会自动重新渲染
				// - 如果通过控制器触发变化，控制器的事件监听器会调用render()
			}

			// ========== 渲染函数 ==========
			
			// 这个函数负责将3D场景渲染到2D画布上
			// 它被注册为渲染器的动画循环回调，所以会在每一帧被调用
			function render() {

				// 调用渲染器的render方法，传入场景和相机
				// 这个方法会：
				// 1. 遍历场景中的所有对象
				// 2. 根据相机参数计算每个对象的屏幕位置
				// 3. 执行着色器程序，将3D几何体渲染为2D像素
				// 4. 将结果输出到canvas画布上
				renderer.render( scene, camera );
				
				// 注意：这是一个简单的渲染函数，没有包含：
				// - 动画更新逻辑
				// - 性能统计
				// - 后期处理效果
				// 在实际应用中，这些功能可能需要添加到这个函数中
			}

			// ========== 模块结束 ==========
			
			// 注意：由于这是一个ES6模块，所有顶级变量和函数都只在模块作用域内可见
			// 不会污染全局命名空间

		</script>

	</body>
</html>