<!-- Three.js WebGPU 环境贴图调整示例 - 代码功能与技术点详解
📋 一、代码功能概述
本示例是一个基于 Three.js WebGPU 渲染器 和 TSL（Three.js Shader Language）着色器节点系统 的交互式3D环境贴图调整应用。主要功能包括：

1. 核心功能
双环境贴图实时混合：动态混合两个不同风格的HDR环境贴图

实时着色器参数调整：通过GUI界面调整色调、饱和度、强度等效果

程序化环境效果：将环境贴图与法线向量混合创建独特视觉效果

背景模糊控制：独立控制场景背景的模糊程度

环境贴图旋转：分别控制两个环境贴图的旋转角度

2. 场景组成
主角模型：破损的科幻头盔（PBR材质，展示真实反射效果）

对比球体：两个不同材质的球体（镜面和粗糙金属）对比环境反射差异

交互式相机：可通过鼠标旋转、缩放和平移的轨道控制器

3. 交互系统
GUI控制面板：实时调整所有着色器参数

响应式布局：自动适应不同屏幕尺寸

WebGPU硬件加速：利用现代GPU进行高性能渲染

🚀 二、主要技术点详解
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer({ antialias: true });
下一代图形API：比WebGL性能更高，支持更复杂的着色器

自动抗锯齿：平滑几何边缘，提升视觉质量

异步着色器编译：更高效的着色器处理流程

显存管理：更精细的GPU内存控制

2. TSL（Three.js Shader Language）节点系统
javascript
import { uniform, mix, pmremTexture, reference } from 'three/tsl';
声明式着色器编程：用JavaScript语法编写着色器逻辑

节点图架构：类似Unreal Engine的蓝图系统或Unity的Shader Graph

自动类型转换：无需手动处理GLSL数据类型

实时更新：JavaScript值与着色器变量的双向绑定

PMREM纹理处理：自动生成预过滤的环境贴图mipmap链

3. 环境贴图技术
HDR立方体贴图
javascript
const cube1Texture = await new HDRCubeTextureLoader().loadAsync(hdrUrls);
高动态范围：包含更宽的亮度值范围（0-∞）

物理正确光照：适合作为环境光源

6面纹理：+X, -X, +Y, -Y, +Z, -Z 方向

环境混合系统
javascript
const mixCubeMaps = mix(pmremTexture(cube1Texture), pmremTexture(cube2Texture), positionNode.y.add(mixNode).clamp());
基于高度的混合：根据Y轴位置混合不同环境贴图

平滑过渡：使用clamp()确保混合系数在有效范围内

旋转控制：独立控制每个环境贴图的旋转

4. PBR（基于物理的渲染）材质系统
金属度-粗糙度工作流
javascript
new THREE.MeshStandardMaterial({ roughness: 0, metalness: 1 })
物理准确：模拟真实世界的光照行为

金属度参数：控制材质是金属（1）还是非金属（0）

粗糙度参数：控制表面微观粗糙程度（0=镜面，1=完全漫反射）

能量守恒：确保反射光不会超过入射光

5. 着色器效果链
javascript
const intensityFilter = proceduralEnv.mul(intensityNode);
const hueFilter = hue(intensityFilter, hueNode);
const saturationFilter = saturation(hueFilter, saturationNode);
效果顺序：强度 → 色调 → 饱和度

数学运算：使用向量乘法、色相旋转等数学操作

实时反馈：所有效果参数可实时调整

6. GLTF模型加载
javascript
const gltf = await loader.loadAsync('DamagedHelmet.gltf');
glTF标准格式：Khronos Group的3D传输格式

PBR材质支持：包含金属度、粗糙度、法线贴图等

网格压缩：Draco或Meshopt压缩选项

动画支持：骨骼动画和变形动画

7. 交互控制系统
OrbitControls轨道控制器
鼠标左键：旋转视角

鼠标右键：平移视角

鼠标滚轮：缩放视角

触摸支持：移动设备手势控制

Inspector GUI系统
javascript
gui.add(adjustments, 'mix', -1, 2, 0.01);
参数绑定：自动绑定到TSL reference节点

范围验证：确保输入值在有效范围内

实时更新：立即反映到渲染效果

8. 性能优化技术
Mipmap生成
javascript
cube1Texture.generateMipmaps = true;
cube1Texture.minFilter = THREE.LinearMipmapLinearFilter;
纹理金字塔：预先生成不同分辨率的纹理版本

三线性过滤：在mipmap级别间插值，减少闪烁

带宽优化：根据距离使用合适分辨率的纹理

PMREM（预过滤的Mipmapped辐射环境贴图）
离线预处理：预先计算环境贴图的卷积结果

实时性能：减少运行时计算负担

高质量反射：提供更真实的模糊反射效果

9. 异步加载系统
javascript
async function init() {
    const cube1Texture = await new HDRCubeTextureLoader().loadAsync(hdrUrls);
    const gltf = await loader.loadAsync('DamagedHelmet.gltf');
}
非阻塞加载：使用async/await避免阻塞主线程

并行加载：多个资源可同时加载

错误处理：内置Promise错误处理机制

10. 响应式设计
javascript
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
自适应分辨率：自动调整渲染尺寸

保持宽高比：正确计算相机投影矩阵

性能感知：在高DPI设备上使用更高的渲染分辨率

🎯 三、技术架构优势
1. 模块化设计
javascript
// 清晰的模块分离
- 环境系统（environmentNode）
- 背景系统（backgroundNode） 
- 材质系统（MeshStandardMaterial）
- 控制系统（OrbitControls + Inspector）
2. 可扩展性
易于添加新的环境贴图

可扩展更多着色器效果

支持多种3D模型格式

可集成后期处理效果

3. 性能与质量平衡
WebGPU：最大化利用现代GPU硬件

TSL节点：高效的可视化着色器编程

PBR材质：物理准确的光照计算

Mipmap纹理：优化的纹理内存使用

4. 开发体验
实时反馈：GUI调整立即可见

调试友好：Inspector提供详细参数控制

代码清晰：TSL节点图比原始GLSL更易理解

文档完善：Three.js生态丰富的文档和示例

🔧 四、适用场景
产品可视化：展示产品的材质和环境反射

游戏开发：实时环境效果调整

建筑可视化：不同光照环境的建筑渲染

教育演示：学习WebGPU和PBR渲染技术

艺术创作：创作独特的3D视觉艺术 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 
			页面标题：Three.js WebGPU 环境贴图调整示例
			WebGPU是下一代图形API，相比WebGL有更好的性能和更现代的架构
		-->
		<title>Three.js WebGPU - 环境贴图调整与着色器节点系统演示</title>
		
		<!-- 
			字符编码设置：UTF-8支持中文和特殊字符
			确保浏览器正确解析中文字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			响应式视口设置，控制移动设备上的显示行为：
			- width=device-width: 宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放（为了保持3D场景的视觉一致性）
			- 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样式表链接
			rel="stylesheet" 定义这是一个样式表
			href="example.css" 指向样式文件
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：包含标题、说明和版权信息
			id="info" 用于CSS样式和JavaScript选择器
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全设置，防止新页面访问window.opener属性
				class="logo-link": CSS类，通常用于设置Three.js徽标背景图
			-->
			<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>WebGPU环境贴图调整与着色器节点系统演示</span>
			</div>

			<!-- 
				详细说明区域，使用<small>标签表示次要信息
				包含功能说明和模型来源
			-->
			<small style="margin-top: 20px;">
				<strong>功能说明：</strong>本示例展示Three.js WebGPU渲染器和TSL着色器节点系统的强大功能<br/>
				- 实时调整场景环境贴图（背景和反射）<br/>
				- 支持混合多个HDRI环境贴图<br/>
				- 程序化着色器效果（色调、饱和度、强度等）<br/>
				- WebGPU硬件加速渲染<br/>
				<br/>
				<strong>模型来源：</strong>破损科幻头盔模型由 
				<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a> 创作<br/>
				<strong>技术特性：</strong>Three.js TSL节点系统 + WebGPU渲染 + 实时参数调整
			</small>
		</div>

		<!-- 
			导入映射(Import Maps)配置：
			现代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>

		<!-- 
			主JavaScript模块：
			type="module"表示这是一个ES6模块
			模块中的代码有独立的作用域，支持顶级await
		-->
		<script type="module">
			// ==================== 模块导入区域 ====================
			
			// 导入Three.js WebGPU核心库
			// * as THREE 将整个模块导出对象命名为THREE
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）着色器节点
			// TSL是一个声明式的着色器编程系统，相比传统GLSL更易用
			import { 
				uniform,      // 统一变量节点，用于将JavaScript值传递给着色器
				mix,          // 混合节点，线性插值两个值
				pmremTexture, // PMREM（预过滤的Mipmapped辐射环境贴图）纹理节点
				reference,    // 引用节点，创建对JavaScript对象的引用
				positionLocal, // 局部空间位置节点
				hue,          // 色调调整节点
				saturation,   // 饱和度调整节点
				positionWorld, // 世界空间位置节点
				normalWorld,  // 世界空间法线节点
				positionWorldDirection, // 世界空间方向节点
				reflectVector // 反射向量节点
			} from 'three/tsl';

			// 导入HDR立方体贴图加载器
			// HDR（高动态范围）贴图包含比普通RGB更宽的亮度范围
			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';

			// 导入轨道控制器，用于鼠标控制相机旋转和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入GLTF加载器，用于加载glTF 3D模型格式
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

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

			// ==================== 全局变量声明 ====================
			// 声明将在整个模块中使用的变量
			let camera;      // 相机对象：定义观察3D场景的视角
			let scene;       // 场景对象：包含所有3D对象、光源、相机等
			let renderer;    // 渲染器对象：负责将3D场景绘制到2D画布上

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

			// ==================== 异步初始化函数 ====================
			// async关键字表示这是一个异步函数，可以内部使用await
			async function init() {
				// ---------- 1. 创建DOM容器 ----------
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement('div');
				// 将容器添加到body元素中
				document.body.appendChild(container);

				// 初始相机距离，用于计算相机位置
				const initialDistance = 2;

				// ---------- 2. 创建相机 ----------
				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 45 - 视野角度（FOV），单位度，角度越大看到的范围越广
				// window.innerWidth / window.innerHeight - 宽高比，匹配窗口比例
				// 0.25 - 近裁剪面，距离小于此值的物体不会被渲染
				// 20 - 远裁剪面，距离大于此值的物体不会被渲染
				camera = new THREE.PerspectiveCamera(
					45, 
					window.innerWidth / window.innerHeight, 
					0.25, 
					20
				);
				
				// 设置相机初始位置
				// x, y, z坐标：(-3.6, 1.2, 5.4) 形成一个斜向观察角度
				camera.position.set(
					-1.8 * initialDistance, 
					0.6 * initialDistance, 
					2.7 * initialDistance
				);

				// ---------- 3. 创建场景 ----------
				// Scene是Three.js中所有可渲染对象的容器
				// 包含网格、光源、相机、环境贴图等
				scene = new THREE.Scene();

				// ========== 4. 加载和处理立方体贴图 ==========
				// 立方体贴图（Cube Map）是6张纹理组成的天空盒，用于环境映射

				// 4.1 加载第一个HDR立方体贴图（高动态范围贴图）
				// HDR贴图包含更宽的亮度范围，适合作为环境光源
				const hdrUrls = [
					'px.hdr', // 正X面（右）
					'nx.hdr', // 负X面（左）
					'py.hdr', // 正Y面（上）
					'ny.hdr', // 负Y面（下）
					'pz.hdr', // 正Z面（前）
					'nz.hdr'  // 负Z面（后）
				];
				
				// 使用async/await等待HDR贴图加载完成
				// HDRCubeTextureLoader专门用于加载HDR格式的立方体贴图
				const cube1Texture = await new HDRCubeTextureLoader()
					.setPath('./textures/cube/pisaHDR/') // 设置贴图文件路径
					.loadAsync(hdrUrls); // 异步加载所有6个面的贴图

				// 配置HDR纹理属性
				cube1Texture.generateMipmaps = true; // 生成mipmap金字塔，提高远处纹理质量
				cube1Texture.minFilter = THREE.LinearMipmapLinearFilter; // 设置最小化过滤器，三线性过滤

				// 4.2 加载第二个普通立方体贴图（JPG格式）
				const cube2Urls = [
					'posx.jpg', // 正X面
					'negx.jpg', // 负X面
					'posy.jpg', // 正Y面
					'negy.jpg', // 负Y面
					'posz.jpg', // 正Z面
					'negz.jpg'  // 负Z面
				];
				
				// CubeTextureLoader用于加载普通格式的立方体贴图
				const cube2Texture = await new THREE.CubeTextureLoader()
					.setPath('./textures/cube/Park2/') // 设置第二个贴图的路径
					.loadAsync(cube2Urls); // 异步加载

				// 配置第二个纹理属性
				cube2Texture.generateMipmaps = true;
				cube2Texture.minFilter = THREE.LinearMipmapLinearFilter;

				// ========== 5. 创建环境调整参数系统 ==========
				// 这个对象存储所有可调整的环境参数
				// TSL的reference节点会绑定到这些属性，实现JavaScript到着色器的双向绑定
				const adjustments = {
					mix: 0,          // 混合系数：控制两个立方体贴图的混合比例，范围[-1, 2]
					procedural: 0,   // 程序化系数：混合环境贴图和纯色/法线，范围[0, 1]
					intensity: 1,    // 强度系数：环境光的亮度，范围[0, 5]
					hue: 0,          // 色调调整：色相旋转角度，范围[0, 2π]
					saturation: 1    // 饱和度调整：颜色鲜艳程度，范围[0, 2]
				};

				// 创建TSL引用节点，这些节点在着色器中引用JavaScript对象的值
				// 当JavaScript中的值改变时，着色器中的值会自动更新
				const mixNode = reference('mix', 'float', adjustments);
				const proceduralNode = reference('procedural', 'float', adjustments);
				const intensityNode = reference('intensity', 'float', adjustments);
				const hueNode = reference('hue', 'float', adjustments);
				const saturationNode = reference('saturation', 'float', adjustments);

				// 创建旋转矩阵，用于旋转立方体贴图
				// 矩阵是3D变换的数学表示，可以高效地组合旋转、平移、缩放
				const rotateY1Matrix = new THREE.Matrix4(); // 第一个立方体贴图的旋转矩阵
				const rotateY2Matrix = new THREE.Matrix4(); // 第二个立方体贴图的旋转矩阵

				// ========== 6. 环境节点生成函数 ==========
				// 这个函数创建一个TSL节点图，用于生成环境颜色
				// TSL使用节点图（Node Graph）方式构建着色器，类似可视化着色器编辑器
				
				/**
				 * 创建环境节点图
				 * @param {TSLNode} reflectNode - 反射向量节点（用于环境反射）
				 * @param {TSLNode} positionNode - 位置节点（用于混合计算）
				 * @returns {TSLNode} - 处理后的环境颜色节点
				 */
				const getEnvironmentNode = (reflectNode, positionNode) => {
					// 6.1 应用旋转矩阵到反射向量
					// 将旋转矩阵转换为uniform节点，然后与反射向量相乘
					// 这样可以通过GUI旋转环境贴图
					const custom1UV = reflectNode.xyz.mul(uniform(rotateY1Matrix));
					const custom2UV = reflectNode.xyz.mul(uniform(rotateY2Matrix));

					// 6.2 混合两个立方体贴图
					// pmremTexture: 创建PMREM纹理节点，这是经过预过滤的环境贴图
					// 混合基于Y轴位置和mixNode参数，clamp()确保值在[0,1]范围内
					const mixCubeMaps = mix(
						pmremTexture(cube1Texture, custom1UV), // 第一个HDR环境贴图
						pmremTexture(cube2Texture, custom2UV), // 第二个普通环境贴图
						positionNode.y.add(mixNode).clamp()    // 混合系数
					);

					// 6.3 程序化环境效果
					// 将环境贴图与法线向量混合，创建程序化效果
					// 当proceduralNode=0时使用环境贴图，=1时使用法线颜色
					const proceduralEnv = mix(mixCubeMaps, normalWorld, proceduralNode);

					// 6.4 应用颜色调整效果链
					// 强度调整 → 色调调整 → 饱和度调整
					const intensityFilter = proceduralEnv.mul(intensityNode); // 乘以强度系数
					const hueFilter = hue(intensityFilter, hueNode);          // 色相旋转
					return saturation(hueFilter, saturationNode);             // 饱和度调整
				};

				// 创建背景模糊节点
				// uniform(0)创建一个初始值为0的统一变量节点
				// 这个值可以通过GUI调整，控制背景的模糊程度
				const blurNode = uniform(0);

				// ========== 7. 设置场景环境节点 ==========
				// 7.1 设置场景的环境节点（用于物体反射）
				// reflectVector: 反射向量，基于视线方向和表面法线计算
				// positionWorld: 世界空间位置，影响两个环境贴图的混合
				scene.environmentNode = getEnvironmentNode(reflectVector, positionWorld);

				// 7.2 设置场景的背景节点（天空盒）
				// positionWorldDirection: 世界空间方向向量，用于背景贴图采样
				// positionLocal: 局部空间位置，用于混合计算
				// .context(): 添加上下文配置，这里设置纹理级别用于模糊效果
				scene.backgroundNode = getEnvironmentNode(positionWorldDirection, positionLocal)
					.context({
						getTextureLevel: () => blurNode // 返回模糊级别，值越大纹理越模糊
					});

				// ========== 8. 加载和设置3D模型 ==========
				// 8.1 创建GLTF加载器实例并设置模型路径
				const loader = new GLTFLoader().setPath('models/gltf/DamagedHelmet/glTF/');
				
				// 8.2 异步加载头盔模型
				// GLTF（GL Transmission Format）是3D模型的开放标准格式
				const gltf = await loader.loadAsync('DamagedHelmet.gltf');
				
				// 8.3 将加载的模型添加到场景
				// gltf.scene包含整个模型场景（可能包含多个网格、材质等）
				scene.add(gltf.scene);

				// ========== 9. 创建对比球体 ==========
				// 创建两个不同材质的球体，用于对比环境贴图在不同材质上的反射效果
				
				// 9.1 创建球体几何体
				// 参数说明：半径0.5，经向分段64，纬向分段32
				// 分段数越高球体越光滑，但性能消耗越大
				const sphereGeometry = new THREE.SphereGeometry(.5, 64, 32);

				// 9.2 创建右侧球体（完全镜面反射材质）
				// MeshStandardMaterial：基于物理的渲染(PBR)材质
				// roughness: 0 - 完全光滑（镜面反射）
				// metalness: 1 - 完全金属材质
				const sphereRightView = new THREE.Mesh(
					sphereGeometry,
					new THREE.MeshStandardMaterial({
						roughness: 0,    // 粗糙度：0表示完全光滑
						metalness: 1     // 金属度：1表示完全金属
					})
				);
				sphereRightView.position.x += 2; // 向右移动2个单位

				// 9.3 创建左侧球体（粗糙金属材质）
				// roughness: 1 - 完全粗糙（漫反射为主）
				// metalness: 1 - 完全金属材质
				const sphereLeftView = new THREE.Mesh(
					sphereGeometry,
					new THREE.MeshStandardMaterial({
						roughness: 1,    // 粗糙度：1表示完全粗糙
						metalness: 1     // 金属度：1表示完全金属
					})
				);
				sphereLeftView.position.x -= 2; // 向左移动2个单位

				// 9.4 将球体添加到场景
				scene.add(sphereLeftView);
				scene.add(sphereRightView);

				// ========== 10. 创建WebGPU渲染器 ==========
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				// 相比WebGLRenderer，WebGPU提供更好的性能和更现代的API
				renderer = new THREE.WebGPURenderer({
					antialias: true // 启用抗锯齿，平滑边缘锯齿
				});
				
				// 10.1 设置设备像素比
				// 高DPI屏幕（如Retina）需要更高的渲染分辨率
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 10.2 设置渲染器尺寸为整个窗口
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 10.3 设置色调映射
				// LinearToneMapping：线性色调映射，简单地将HDR值映射到LDR显示范围
				renderer.toneMapping = THREE.LinearToneMapping;
				
				// 10.4 创建并附加调试器
				// Inspector提供GUI界面，用于实时调整参数
				renderer.inspector = new Inspector();
				
				// 10.5 设置动画循环
				// setAnimationLoop替代了旧的requestAnimationFrame方式
				// render函数将在每一帧被调用
				renderer.setAnimationLoop(render);
				
				// 10.6 将渲染器的DOM元素（canvas画布）添加到容器
				container.appendChild(renderer.domElement);

				// ========== 11. 创建轨道控制器 ==========
				// OrbitControls允许用户通过鼠标交互控制相机
				// 左键：旋转视图
				// 右键：平移视图
				// 滚轮：缩放视图
				const controls = new OrbitControls(camera, renderer.domElement);
				controls.minDistance = 2; // 最小缩放距离，防止相机太近
				controls.maxDistance = 10; // 最大缩放距离，防止相机太远

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

				// ========== 13. 创建GUI控制面板 ==========
				// 使用Inspector创建参数控制界面
				const gui = renderer.inspector.createParameters('环境贴图调整设置');

				// 13.1 背景模糊控制
				// 创建一个对象包装器，因为GUI需要对象属性
				gui.add(
					{ blurBackground: blurNode.value }, // 对象和初始值
					'blurBackground',                    // 属性名
					0,                                   // 最小值
					1,                                   // 最大值
					0.01                                 // 步长
				).onChange(value => {
					// 当GUI滑块值改变时的回调函数
					blurNode.value = value; // 更新TSL节点的值
				});

				// 13.2 第一个立方体贴图旋转控制
				gui.add(
					{ offsetCube1: 0 },  // 初始旋转角度为0
					'offsetCube1',        // 控制参数名
					0,                    // 最小值：0弧度
					Math.PI * 2,          // 最大值：2π弧度（360度）
					0.01                  // 步长
				).onChange(value => {
					// 更新旋转矩阵
					rotateY1Matrix.makeRotationY(value); // 绕Y轴旋转
				});

				// 13.3 第二个立方体贴图旋转控制
				gui.add(
					{ offsetCube2: 0 },
					'offsetCube2',
					0,
					Math.PI * 2,
					0.01
				).onChange(value => {
					rotateY2Matrix.makeRotationY(value);
				});

				// 13.4 环境参数控制
				// 直接使用adjustments对象的属性，因为TSL节点已绑定
				gui.add(adjustments, 'mix', -1, 2, 0.01)
					.name('环境贴图混合比例'); // 设置GUI中显示的名称
				
				gui.add(adjustments, 'procedural', 0, 1, 0.01)
					.name('程序化效果强度');
				
				gui.add(adjustments, 'intensity', 0, 5, 0.01)
					.name('环境光强度');
				
				gui.add(adjustments, 'hue', 0, Math.PI * 2, 0.01)
					.name('色调调整');
				
				gui.add(adjustments, 'saturation', 0, 2, 0.01)
					.name('饱和度调整');

				// 初始化完成，渲染器将开始动画循环
				console.log('Three.js WebGPU环境贴图调整示例初始化完成！');
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * 处理浏览器窗口大小变化事件
			 * 确保3D场景正确适应新的窗口尺寸
			 */
			function onWindowResize() {
				// 1. 更新相机宽高比
				// 相机需要知道渲染区域的宽高比，以保持正确的透视
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 2. 更新相机投影矩阵
				// 改变相机参数后必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();
				
				// 3. 更新渲染器尺寸
				// 设置渲染器输出画布的大小与窗口一致
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				console.log(`窗口大小已调整为: ${window.innerWidth} x ${window.innerHeight}`);
			}

			// ==================== 渲染函数 ====================
			/**
			 * 渲染循环函数
			 * 由renderer.setAnimationLoop自动调用，每帧执行一次
			 * 负责将3D场景渲染到2D画布上
			 */
			function render() {
				// 调用渲染器的render方法，传入场景和相机
				// 这将触发整个渲染管线：
				// 1. 几何处理（顶点着色器）
				// 2. 光栅化（将3D几何转换为2D像素）
				// 3. 像素处理（片元着色器）
				// 4. 输出到画布
				renderer.render(scene, camera);
			}
		</script>

	</body>
</html>