<!-- 代码功能描述和主要技术点
🎯 整体功能描述
这是一个基于 Three.js WebGPU版本 的MaterialX噪声函数可视化演示。程序创建了一个包含4个3D球体的交互式场景，每个球体使用不同的MaterialX噪声函数（Perlin噪声、细胞噪声、Worley噪声、分形噪声）作为表面材质，并实时展示这些程序化纹理的动态效果。

核心功能特点：
四种噪声函数对比展示：在场景的四个象限分别展示不同类型的噪声效果

实时动画效果：所有噪声随时间变化，球体持续旋转，光源动态移动

交互式体验：用户可以通过鼠标控制视角旋转、缩放和平移

高质量渲染：使用HDR环境贴图、物理渲染和色调映射

现代化技术栈：基于最新的WebGPU技术和MaterialX标准

🔧 主要技术点详解
1. WebGPU渲染技术
下一代图形API：替代传统的WebGL，提供更接近原生图形API的性能

更好的并行处理：支持现代GPU的并行计算能力

更低的驱动开销：减少CPU到GPU的通信开销

异步计算支持：更适合复杂的着色器和计算任务

2. MaterialX着色器系统
工业标准：由工业光魔（ILM）创建的开源材质定义标准

节点式着色器：可视化、模块化的着色器编程方式

跨平台兼容：在多个DCC工具（Maya、Houdini等）和渲染器间保持一致性

实时性能优化：专为实时渲染优化的噪声函数实现

3. 四种噪声算法实现
Perlin噪声（mx_noise_vec3）：

经典的梯度噪声算法

产生自然、有机的纹理效果

常用于模拟云、大理石、木材等自然材质

细胞噪声（mx_cell_noise_float）：

基于网格点的伪随机值生成

产生类似细胞或马赛克的图案

返回单精度浮点数（灰度值）

Worley噪声（mx_worley_noise_vec3）：

基于最近特征点距离的函数

产生类似细胞、石块或生物组织的图案

常用于模拟皮肤、石块、泡沫等效果

分形噪声（mx_fractal_noise_vec3）：

多层噪声叠加（通常使用不同频率和振幅的Perlin噪声）

产生丰富的细节和自相似结构

常用于模拟地形、云层、侵蚀效果

4. 物理渲染（PBR）管线
基于物理的材质：使用MeshPhysicalNodeMaterial

HDR环境光照：使用HDR立方体贴图提供真实的环境反射

色调映射：ACES Filmic色调映射算法，处理高动态范围

实时反射：环境贴图同时用于背景显示和物体反射

5. 动态效果系统
时间驱动的动画：使用time节点变量驱动所有噪声变化

空间变换：通过法线向量和缩放因子控制噪声采样

光源动画：三角函数驱动的周期性光源移动

对象旋转：持续旋转展示不同角度的噪声效果

6. 交互和调试功能
轨道控制器：鼠标拖拽旋转、右键平移、滚轮缩放

Inspector调试器：实时查看和编辑场景对象属性（按F键切换）

响应式布局：自动适应窗口大小变化

🏗️ 代码架构和流程
初始化阶段（init()函数）：
创建基础结构：DOM容器、场景、相机、渲染器

加载资源：异步加载HDR环境贴图

创建几何体：4个高精度球体网格

设置材质：为每个球体分配不同的MaterialX噪声材质

配置光源：创建动态点光源及其可视化表示

设置后期处理：配置色调映射和曝光

绑定事件：窗口调整和用户交互事件

渲染循环（render()函数）：
计算时间：基于当前时间的动画参数

更新动画：

移动点光源位置

旋转所有球体

执行渲染：调用WebGPU渲染器绘制场景

📊 技术堆栈概览
技术组件	作用	说明
Three.js WebGPU	3D渲染引擎	提供WebGPU后端的Three.js版本
MaterialX TSL	着色器语言	Three.js的MaterialX实现
HDR Cube Texture	环境照明	提供高质量的环境光和反射
OrbitControls	交互控制	鼠标/触摸视角控制
Inspector	调试工具	实时场景检查和编辑
ES6 Modules	代码组织	模块化JavaScript开发
🎨 视觉效果实现原理
噪声采样策略：
javascript
const customUV = normalWorld.mul(10).add(time);
normalWorld：使用世界空间法线作为UV坐标基础

mul(10)：缩放噪声频率，控制图案大小

add(time)：添加时间维度，创建动画效果

环境反射系统：
双重用途：同一HDR贴图既作为背景，又作为环境反射源

物理正确性：环境光影响材质的高光和漫反射

实时更新：所有反射效果每帧重新计算

🚀 性能优化特点
GPU优先：所有噪声计算在GPU着色器中执行

批处理：使用Group统一管理相似对象

智能更新：只有变化的属性才会触发重新编译

抗锯齿：硬件级抗锯齿，避免边缘锯齿

自适应分辨率：根据设备像素比自动调整

🔍 调试和开发支持
实时Inspector：可视化场景图，实时修改属性

模块热重载：ES6模块支持开发时的快速迭代

错误反馈：WebGPU提供详细的错误信息

性能分析：浏览器开发者工具支持WebGPU性能分析

🌟 应用场景
这个示例展示了现代实时图形技术的核心能力，适用于：

游戏开发：程序化纹理生成、动态材质效果

可视化应用：科学数据可视化、3D数据展示

创意编码：艺术生成、交互式媒体艺术

教育演示：计算机图形学教学、噪声算法展示

产品展示：实时材质预览、设计验证 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：three.js WebGPU版本 - MaterialX噪声函数示例
			MaterialX 是开源的材质定义标准，由工业光魔（ILM）创建
			Noise（噪声）函数用于生成程序化纹理和材质效果
		-->
		<title>three.js WebGPU - MaterialX 噪声函数示例</title>
		
		<!-- 
			字符编码设置：
			utf-8 是万国码，支持中文、英文、日文等多种字符
		-->
		<meta charset="utf-8">
		
		<!-- 
			视口（viewport）设置：
			width=device-width: 宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放（确保WebGL画布比例正确）
			minimum-scale=1.0: 最小缩放比例为1倍
			maximum-scale=1.0: 最大缩放比例为1倍
			这些设置确保了移动设备上的正确显示
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			引入外部CSS样式表：
			type="text/css": 指定文档类型为CSS
			rel="stylesheet": 定义当前文档与被链接文档之间的关系为样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息显示区域（id="info"）：
			位于页面左上角，显示标题、描述和链接
			通常用于Three.js示例的信息展示
		-->
		<div id="info">
			<!-- 
				Three.js官方网站链接（通过CSS背景图片显示Logo）：
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全设置，防止新页面访问原页面的window对象
				class="logo-link": CSS类名，用于设置Logo样式
			-->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<!-- 标题包装器 -->
			<div class="title-wrapper">
				<!-- Three.js主标题链接 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<!-- 当前示例的副标题 -->
				<span>MaterialX 噪声函数演示</span>
			</div>

			<!-- 
				示例详细描述：
				这里描述了本示例展示的核心功能
				MaterialX 是电影行业标准的开源材质定义语言
				Noise Functions（噪声函数）用于创建程序化纹理
			-->
			<small>本示例展示四种MaterialX噪声函数：Perlin噪声、细胞噪声、Worley噪声和分形噪声。所有效果均实时计算，支持动态变化。</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模块
			模块内部的代码拥有自己的作用域，不会污染全局
		-->
		<script type="module">

			// ==================== 导入模块 ====================
			
			// 导入Three.js WebGPU版本的所有导出
			// THREE 对象包含Three.js的所有核心类和功能
			import * as THREE from 'three/webgpu';
			
			// 从Three.js Shading Language (TSL) 导入特定的着色器节点函数
			// normalWorld: 世界空间法线向量节点（每个顶点的法线方向）
			// time: 时间变量节点（自动更新，用于动画效果）
			// mx_noise_vec3: MaterialX的三维Perlin噪声函数，返回vec3类型
			// mx_worley_noise_vec3: MaterialX的Worley噪声函数，返回vec3类型
			// mx_cell_noise_float: MaterialX的细胞噪声函数，返回float类型
			// mx_fractal_noise_vec3: MaterialX的分形噪声函数，返回vec3类型
			import { normalWorld, time, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/tsl';

			// 导入调试器/检查器组件
			// Inspector提供交互式场景调试界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器（OrbitControls）
			// 允许用户通过鼠标交互控制相机（旋转、缩放、平移）
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入HDR立方体贴图加载器
			// HDR（高动态范围）贴图提供更真实的环境光照
			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';

			// ==================== 全局变量声明 ====================
			
			let container;      // 用于包含Three.js渲染器的DOM容器元素
			let camera;         // 场景中的相机对象（控制视角）
			let scene;          // 场景对象（包含所有3D物体、光源等）
			let renderer;       // WebGPU渲染器（负责将3D场景渲染到canvas）
			let particleLight;  // 可移动的点光源（带可视化球体）
			let group;          // 组对象（用于组织和管理多个网格对象）

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

			// ==================== 初始化函数定义 ====================
			
			/**
			 * 初始化函数
			 * 这是应用程序的入口点，负责设置所有Three.js组件
			 * 包括：场景、相机、渲染器、几何体、材质、光源等
			 */
			function init() {

				// 创建DOM容器元素
				// 这个div将包含Three.js的canvas元素
				container = document.createElement( 'div' );
				// 将容器添加到网页的body中
				document.body.appendChild( container );

				// 创建透视相机（PerspectiveCamera）
				// 参数说明：
				// 1. fov (field of view): 视野角度，27度（较小的角度减少透视变形）
				// 2. aspect: 宽高比，使用窗口的宽高比
				// 3. near: 近裁剪面，1个单位（相机能看到的最近距离）
				// 4. far: 远裁剪面，1000个单位（相机能看到的最近距离）
				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 1000 );
				// 设置相机在Z轴上的位置（向后移动100个单位）
				camera.position.z = 100;

				// 创建场景对象
				// Scene是所有3D对象的容器，包含网格、光源、相机等
				scene = new THREE.Scene();

				// 创建组对象（Group）
				// Group可以将多个对象作为一个整体来操作（如统一旋转）
				group = new THREE.Group();
				// 将组添加到场景中
				scene.add( group );

				// 加载HDR环境贴图（立方体贴图）
				// HDR贴图提供高质量的环境光照和背景
				new HDRCubeTextureLoader()
					// 设置纹理文件的路径
					.setPath( 'textures/cube/pisaHDR/' )
					// 加载6个面的HDR图像（立方体贴图的6个方向）
					// 参数顺序：正X, 负X, 正Y, 负Y, 正Z, 负Z
					.load( [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ],
						// 加载完成后的回调函数，参数hdrTexture是加载完成的立方体贴图
						function ( hdrTexture ) {

							// 创建球体几何体
							// 参数说明：
							// 1. radius: 球体半径，8个单位
							// 2. widthSegments: 水平分段数，64（越高越平滑）
							// 3. heightSegments: 垂直分段数，32（越高越平滑）
							const geometry = new THREE.SphereGeometry( 8, 64, 32 );

							// 创建自定义UV坐标用于噪声采样
							// normalWorld: 世界空间法线（每个顶点的法线方向向量）
							// mul(10): 将法线乘以10，扩大采样范围（增加噪声的"尺度"）
							// add(time): 加上时间变量，使噪声随时间变化（创建动画效果）
							// 这样每个顶点的法线方向都会随时间变化，产生流动效果
							const customUV = normalWorld.mul( 10 ).add( time );

							// ---------- 创建第一个球体：左上角，使用Perlin噪声 ----------
							
							// 创建物理节点材质（MeshPhysicalNodeMaterial）
							// 这是一种基于物理渲染（PBR）的材质，支持节点式着色器
							let material = new THREE.MeshPhysicalNodeMaterial();
							// 设置材质的颜色节点为三维Perlin噪声
							// mx_noise_vec3()生成Perlin噪声，返回vec3类型（RGB颜色）
							material.colorNode = mx_noise_vec3( customUV );

							// 创建网格对象（Mesh），将几何体和材质组合
							let mesh = new THREE.Mesh( geometry, material );
							// 设置网格位置：X轴-10（向左），Y轴10（向上）
							mesh.position.x = - 10;
							mesh.position.y = 10;
							// 将网格添加到组中
							group.add( mesh );

							// ---------- 创建第二个球体：右上角，使用细胞噪声 ----------
							
							// 创建新的物理节点材质
							material = new THREE.MeshPhysicalNodeMaterial();
							// 设置材质的颜色节点为细胞噪声
							// mx_cell_noise_float()生成细胞噪声，返回float类型（灰度值）
							// Three.js会自动将float转换为vec3（相同的RGB值）
							material.colorNode = mx_cell_noise_float( customUV );

							// 创建网格对象
							mesh = new THREE.Mesh( geometry, material );
							// 设置网格位置：X轴10（向右），Y轴10（向上）
							mesh.position.x = 10;
							mesh.position.y = 10;
							// 将网格添加到组中
							group.add( mesh );

							// ---------- 创建第三个球体：左下角，使用Worley噪声 ----------
							
							// 创建新的物理节点材质
							material = new THREE.MeshPhysicalNodeMaterial();
							// 设置材质的颜色节点为Worley噪声
							// mx_worley_noise_vec3()生成Worley/Voronoi噪声，返回vec3类型
							// Worley噪声产生类似细胞或石块的图案
							material.colorNode = mx_worley_noise_vec3( customUV );

							// 创建网格对象
							mesh = new THREE.Mesh( geometry, material );
							// 设置网格位置：X轴-10（向左），Y轴-10（向下）
							mesh.position.x = - 10;
							mesh.position.y = - 10;
							// 将网格添加到组中
							group.add( mesh );

							// ---------- 创建第四个球体：右下角，使用分形噪声 ----------
							
							// 创建新的物理节点材质
							material = new THREE.MeshPhysicalNodeMaterial();
							// 设置材质的颜色节点为分形噪声
							// mx_fractal_noise_vec3()生成分形噪声，返回vec3类型
							// customUV.mul(.2): 将UV乘以0.2，缩小采样范围
							// 这使得分形细节更密集，产生更多层次的细节
							material.colorNode = mx_fractal_noise_vec3( customUV.mul( .2 ) );

							// 创建网格对象
							mesh = new THREE.Mesh( geometry, material );
							// 设置网格位置：X轴10（向右），Y轴-10（向下）
							mesh.position.x = 10;
							mesh.position.y = - 10;
							// 将网格添加到组中
							group.add( mesh );

							// ---------- 设置场景背景和环境 ----------
							
							// 将HDR贴图设置为场景背景
							// 这会在渲染时显示HDR图像作为背景
							scene.background = hdrTexture;
							
							// 将HDR贴图设置为场景环境贴图
							// 这会影响所有物体的环境反射和环境光照
							// 使物体表面反射周围环境，增加真实感
							scene.environment = hdrTexture;

						} // 回调函数结束
					); // HDR加载器结束

				// ==================== 光源设置 ====================

				// 创建可移动的点光源（带可视化球体）
				// 这是一个Mesh对象，包含一个球体几何体和基础材质
				particleLight = new THREE.Mesh(
					// 球体几何体：半径0.4，分段数8（低多边形，因为很小）
					new THREE.SphereGeometry( 0.4, 8, 8 ),
					// 基础材质：白色，不发光，仅用于可视化光源位置
					new THREE.MeshBasicMaterial( { color: 0xffffff } )
				);
				// 将点光源添加到场景中
				scene.add( particleLight );

				// 给可视化球体添加一个实际的点光源组件
				// 参数：颜色（白色），光照强度（1000，非常亮）
				// 这个点光源会照亮场景中的物体
				particleLight.add( new THREE.PointLight( 0xffffff, 1000 ) );

				// ==================== 渲染器设置 ====================

				// 创建WebGPU渲染器
				// WebGPU是下一代图形API，替代WebGL，提供更好的性能和功能
				// { antialias: true } 开启抗锯齿，平滑边缘锯齿
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置动画循环回调函数
				// setAnimationLoop() 会以显示器的刷新率（通常60fps）调用指定函数
				renderer.setAnimationLoop( render );
				
				// 设置设备像素比
				// 这确保在高DPI屏幕（如Retina屏幕）上正确渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 附加调试器到渲染器
				// Inspector提供场景结构查看、属性编辑等功能
				renderer.inspector = new Inspector();
				
				// 将渲染器的canvas元素添加到容器中
				// renderer.domElement是渲染器创建的<canvas>元素
				container.appendChild( renderer.domElement );

				// ==================== 后期处理设置 ====================

				// 设置色调映射（Tone Mapping）
				// 色调映射将HDR（高动态范围）颜色转换为LDR（低动态范围）显示
				// ACESFilmicToneMapping是电影行业标准，提供自然的颜色和高光处理
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置曝光值
				// 控制整体亮度，1.0是默认值，1.25稍微提亮
				renderer.toneMappingExposure = 1.25;

				// ==================== 事件监听器设置 ====================

				// 创建轨道控制器
				// 参数：要控制的相机，事件监听的DOM元素（canvas）
				// OrbitControls会自动添加鼠标和触摸事件监听
				new OrbitControls( camera, renderer.domElement );

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

			} // init()函数结束

			// ==================== 窗口大小变化处理函数 ====================
			
			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器
			 */
			function onWindowResize() {

				// 获取窗口的新宽度和高度
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新相机的宽高比
				// 确保渲染画面不会拉伸变形
				camera.aspect = width / height;
				
				// 更新相机的投影矩阵
				// 修改相机参数后必须调用此方法使更改生效
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保canvas元素的大小与窗口匹配
				renderer.setSize( width, height );

			} // onWindowResize()函数结束

			// ==================== 渲染循环函数 ====================
			
			/**
			 * 渲染循环函数（每帧调用）
			 * 这是应用程序的主循环，负责更新动画状态和渲染场景
			 */
			function render() {

				// 计算基于时间的动画值
				// Date.now()返回从1970年1月1日至今的毫秒数
				// 乘以0.00025等于除以4000，将毫秒转换为秒并缩小
				// 这样timer每秒增加0.25，创建缓慢的动画
				const timer = Date.now() * 0.00025;

				// 更新点光源的位置（创建动态光照效果）
				// 使用三角函数使光源在三维空间中周期性移动
				// Math.sin()和Math.cos()产生平滑的周期性运动
				particleLight.position.x = Math.sin( timer * 7 ) * 30;  // X轴：频率7，幅度30
				particleLight.position.y = Math.cos( timer * 5 ) * 40;  // Y轴：频率5，幅度40
				particleLight.position.z = Math.cos( timer * 3 ) * 30;  // Z轴：频率3，幅度30

				// 旋转组内的所有球体
				// 遍历组的所有子对象（四个球体）
				for ( let i = 0; i < group.children.length; i ++ ) {

					// 获取当前子对象
					const child = group.children[ i ];
					
					// 使球体绕Y轴旋转
					// 每帧旋转0.005弧度（约0.286度）
					// 这样球体会缓慢自转，展示噪声效果的不同角度
					child.rotation.y += 0.005;

				} // for循环结束

				// 执行渲染
				// 将3D场景和相机传递给渲染器，渲染一帧图像
				renderer.render( scene, camera );

			} // render()函数结束

		</script> <!-- 主脚本模块结束 -->
	</body> <!-- body结束 -->
</html> <!-- html文档结束 -->