<!-- Three.js WebGPU 沙盒环境 - 功能描述与技术点分析
🎯 整体功能概述
这是一个基于Three.js和WebGPU的3D图形技术演示沙盒环境，展示了六种不同的3D渲染技术示例，通过可视化方式演示现代Web图形API的各种功能。所有示例被精心布局在3D空间中，形成一个完整的演示场景。

📊 六大3D图形示例详解
1. 动态纹理动画立方体（右上）
位置：(0, 1, 0) - 中心偏上

功能：

展示基于时间的UV坐标动画

混合两种纹理：UV网格图 + 动态棋盘格

持续自动旋转展示不同角度

视觉效果：纹理随时间水平向左、垂直向上移动，产生流动感

2. 置换贴图球体（左下）
位置：(-2, -1, 0) - 左下方

功能：

使用置换贴图实时修改几何体表面形状

置换强度作为颜色显示，可视化变形效果

核心技术：顶点着色器中的位置偏移计算

3. 数据纹理平面（中下）
位置：(0, -1, 0) - 中心偏下

功能：

展示程序生成的纹理（非图像文件）

基础红色纹理叠加蓝色通道

特点：纯代码生成的紫色纹理，演示动态纹理创建

4. 压缩纹理发光平面（左上）
位置：(-2, 1, 0) - 左上方

功能：

使用KTX2压缩纹理格式

周期性发光颜色动画（深棕↔蓝色）

Alpha测试动画（闪烁消失效果）

技术优势：展示现代纹理压缩技术的高效性

5. 位置着色点云（右下）
位置：(2, -1, 0) - 右下方

功能：

1000个随机分布的点

基于顶点位置自动着色

每个点的颜色由其位置决定

可视化效果：空间位置的三维色彩映射

6. 顶点颜色线条（右上）
位置：(2, 1, 0) - 右上方

功能：

正方形闭合线条

顶点颜色渐变效果

使用位置数据作为颜色属性

技术演示：顶点属性数据复用

🚀 主要技术点分析
1. WebGPU渲染引擎
核心优势：下一代Web图形API，相比WebGL：

更低的开销，更高的性能

更好的多线程支持

更现代化的GPU特性访问

初始化：异步初始化，需要设备权限

2. TSL（Three.js Shading Language）
声明式着色器编程：在JavaScript中直接构建着色器

节点化系统：将着色器操作抽象为可组合的节点

关键节点类型：

time：时间变量，驱动动画

uv / texture：纹理采样

positionLocal / normalLocal：几何属性

mix / oscSine：数学和效果节点

3. 纹理技术栈
传统格式：JPG、PNG（用于UV网格、置换贴图）

现代压缩格式：KTX2

Basis Universal压缩算法

GPU友好的内存布局

运行时格式转码

程序纹理：DataTexture（内存直接生成）

4. 坐标系处理
WebGPU坐标系差异：Y轴方向与WebGL相反

解决方案：flipY()函数转换UV坐标

空间布局：精心设计的6个示例位置，形成视觉平衡

5. 材质系统
MeshBasicNodeMaterial：基础不受光影响材质

节点材质特点：

可编程的渲染管线

实时着色器编译

动态材质属性

6. 几何体类型
基本几何体：BoxGeometry、SphereGeometry、PlaneGeometry

点云系统：Points + BufferGeometry

线条渲染：Line + 顶点颜色

置换变形：动态顶点位置修改

7. 性能优化
抗锯齿：渲染时启用MSAA

设备像素比适配：高DPI显示器支持

异步加载：纹理和渲染器初始化

缓冲区使用：BufferGeometry高效内存布局

🔧 开发工具特性
1. 调试支持
内置检查器：Inspector工具

开发友好：详细的纹理命名、结构化的场景图

实时调试：运行时场景分析

2. 响应式设计
自适应窗口大小：onWindowResize处理

设备像素比感知：retina屏优化

移动设备适配：viewport设置

3. 模块化架构
ES模块导入：现代JavaScript模块系统

导入映射：简化模块路径管理

依赖分离：核心库、加载器、工具分离

🎨 视觉效果设计
1. 颜色方案
场景背景：深灰色(0x222222) - 突出前景物体

示例区分：不同示例使用不同的着色策略

动画协调：时间驱动的同步动画

2. 空间布局
2x3网格布局：六个示例在XY平面均匀分布

深度层次：Z轴统一为0，保持平面感

视觉平衡：上下左右对称分布

3. 动画系统
时间驱动：统一的time节点

独立动画：每个示例不同的动画逻辑

性能优化：仅在animate函数中更新必要对象

📱 技术应用场景
1. 教育演示
学习WebGPU基础概念

理解3D图形渲染管线

掌握现代纹理技术

2. 技术评估
WebGPU性能测试

不同纹理格式比较

渲染技术选型参考

3. 原型开发
快速验证3D效果

测试着色器逻辑

性能基准测试

🔮 技术发展趋势体现
WebGPU普及：展示下一代Web图形标准

着色器编程民主化：TSL降低着色器编写门槛

纹理压缩标准化：KTX2成为行业标准

性能导向设计：从WebGL到WebGPU的性能跃迁 -->


<html lang="zh-CN">
	<head>
		<!-- 页面标题：显示为"Three.js WebGPU 沙盒环境" -->
		<title>Three.js WebGPU 沙盒环境</title>
		<!-- 字符编码：设置为UTF-8以支持中文和其他Unicode字符 -->
		<meta charset="utf-8">
		<!-- 视口设置：适配移动设备，禁止用户手动缩放 -->
		<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>

		<!-- 页面顶部信息区域：显示Logo、标题和描述 -->
		<div id="info">
			<!-- three.js Logo链接：点击可访问three.js官方网站 -->
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link">
				<!-- 此处的logo-link类通常通过CSS设置背景图片显示three.js Logo -->
			</a>

			<!-- 标题包装器：包含主标题和副标题 -->
			<div class="title-wrapper">
				<!-- 主标题链接：点击可访问three.js官方网站 -->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				<!-- 副标题：说明当前页面的具体内容 -->
				<span>WebGPU 沙盒环境</span>
			</div>

			<!-- 页面描述：使用small标签表示次要信息 -->
			<small>用于测试基础场景设置的沙盒环境。包含六个不同的3D图形示例，展示WebGPU的各种渲染功能。</small>
		</div>

		<!-- 导入映射配置：定义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模块：包含所有3D场景的初始化、设置和渲染逻辑 -->
		<script type="module">

			// ========== 模块导入部分 ==========
			// 导入three.js的WebGPU核心模块
			// WebGPU是下一代Web图形API，提供更接近底层的GPU访问能力
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shading Language）节点
			// TSL是three.js的着色器节点系统，允许在JavaScript中以声明式方式构建着色器
			// - time: 时间节点，返回从场景开始经过的时间（秒）
			// - vec2: 二维向量节点，用于创建或操作2D向量
			// - uv: UV坐标节点，用于访问纹理坐标
			// - texture: 纹理采样节点，用于从纹理中读取颜色
			// - mix: 混合节点，用于线性插值混合两个值
			// - checker: 棋盘格图案节点，生成黑白相间的图案
			// - normalLocal: 局部空间法线节点
			// - positionLocal: 局部空间位置节点
			// - color: 颜色节点，用于创建或操作颜色值
			// - oscSine: 正弦振荡器节点，生成周期性的正弦波值
			// - attribute: 属性节点，用于访问几何体的顶点属性（如颜色、UV等）
			import { time, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute } from 'three/tsl';

			// 导入KTX2纹理加载器
			// KTX2是一种现代的GPU纹理压缩格式，支持多种压缩算法和特性
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

			// 导入调试检查器
			// 用于在运行时检查和调试3D场景、材质和着色器
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// ========== 全局变量声明 ==========
			// camera: 相机对象，决定观察3D场景的视角
			// scene: 场景对象，包含所有需要渲染的3D对象（网格、灯光等）
			// renderer: 渲染器对象，负责将3D场景渲染到2D画布上
			let camera, scene, renderer;
			
			// box: 立方体网格对象的引用，用于在动画循环中控制其旋转
			let box;

			// ========== 初始化函数调用 ==========
			// 调用主初始化函数，开始构建3D场景
			// 使用async关键字表示此函数包含异步操作
			init();

			// ========== 主初始化函数 ==========
			// 异步初始化函数，负责创建和设置所有3D场景元素
			async function init() {

				// --- 相机设置 ---
				// 创建透视投影相机
				// 参数说明：
				// - 70: 视野角度（Field of View），单位是度，控制相机能看到的多宽范围
				// - window.innerWidth / window.innerHeight: 宽高比，确保渲染图像不扭曲
				// - 0.1: 近裁面距离，距离相机多近的物体开始渲染
				// - 10: 远裁面距离，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
				// 设置相机位置：在Z轴正方向4个单位处
				// 在three.js中，默认坐标系为：
				// - X轴：水平向右
				// - Y轴：垂直向上
				// - Z轴：垂直屏幕向外（正方向朝向观察者）
				camera.position.z = 4;

				// --- 场景设置 ---
				// 创建3D场景容器，所有需要渲染的对象都添加到场景中
				scene = new THREE.Scene();
				// 设置场景背景颜色为深灰色（十六进制颜色值0x222222）
				scene.background = new THREE.Color( 0x222222 );

				// --- 渲染器设置 ---
				// 创建WebGPU渲染器实例
				// 参数说明：{ antialias: true } 启用抗锯齿，平滑图形边缘
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				// 设置设备像素比，确保在高DPI显示器上清晰渲染
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器画布尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数，每帧自动调用animate函数
				renderer.setAnimationLoop( animate );
				// 附加调试检查器到渲染器，启用场景调试功能
				renderer.inspector = new Inspector();
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				document.body.appendChild( renderer.domElement );

				// --- WebGPU渲染器初始化 ---
				// 等待渲染器完成WebGPU上下文和管线的初始化
				// WebGPU需要异步初始化，因为它需要请求GPU设备权限和编译着色器
				await renderer.init();

				// ========== 纹理加载部分 ==========
				// 创建纹理加载器实例，用于加载图像文件作为纹理
				const textureLoader = new THREE.TextureLoader();
				
				// 1. 加载UV测试纹理
				// UV测试纹理是一种网格图案，常用于检查纹理映射是否正确
				const uvTexture = textureLoader.load( './textures/uv_grid_opengl.jpg' );
				// 设置纹理在S轴（水平方向）重复包裹
				// 当UV坐标超过[0,1]范围时，纹理会重复而不是拉伸
				uvTexture.wrapS = THREE.RepeatWrapping;
				// 设置纹理在T轴（垂直方向）重复包裹
				uvTexture.wrapT = THREE.RepeatWrapping;
				// 为纹理设置一个名称，便于调试时识别
				uvTexture.name = 'uv_grid';

				// 2. 加载置换贴图纹理
				// 置换贴图用于修改几何体顶点位置，产生表面起伏效果
				const textureDisplace = textureLoader.load( './textures/transition/transition1.png' );
				// 同样设置重复包裹模式
				textureDisplace.wrapS = THREE.RepeatWrapping;
				textureDisplace.wrapT = THREE.RepeatWrapping;

				// 3. 初始化KTX2加载器（用于加载压缩纹理）
				// KTX2是一种高效的GPU纹理压缩格式，可以大幅减少纹理内存占用和加载时间
				const ktxLoader = await new KTX2Loader()
					// 设置Basis Universal转码器路径
					// Basis Universal是一种先进的纹理压缩技术，支持多种GPU格式
					.setTranscoderPath( 'jsm/libs/basis/' )
					// 检测当前设备和渲染器支持的纹理格式
					.detectSupport( renderer );

				// 异步加载KTX2压缩纹理文件
				// 使用await等待纹理加载完成
				const ktxTexture = await ktxLoader.loadAsync( './textures/ktx2/2d_uastc.ktx2' );

				// ========== 示例1：立方体网格（动态纹理混合示例） ==========
				// 创建立方体几何体
				// 默认尺寸为1x1x1，中心位于原点
				const geometryBox = new THREE.BoxGeometry();
				// 创建基础节点材质
				// MeshBasicNodeMaterial是节点材质的基础版本，不受灯光影响
				const materialBox = new THREE.MeshBasicNodeMaterial();

				// --- 使用TSL节点创建动态纹理动画 ---
				// 创建时间缩放节点：将时间乘以方向向量(-0.5, 0.1)
				// time节点返回从场景开始经过的时间（秒）
				// vec2创建二维向量，mul方法执行乘法
				const timerScaleNode = time.mul( vec2( - 0.5, 0.1 ) );
				// 创建动画UV坐标：基础UV坐标加上时间偏移
				// 这会使纹理随时间在UV空间移动，产生动画效果
				const animateUV = uv().add( timerScaleNode );

				// 创建纹理采样节点：在动画UV坐标处采样纹理
				// texture函数创建纹理节点，第一个参数是纹理对象，第二个参数是UV坐标
				const textureNode = texture( uvTexture, animateUV );

				// 创建混合节点：将纹理与棋盘格图案混合
				// mix函数执行线性插值：当第三个参数为0.5时，等量混合两个输入
				// checker函数生成棋盘格图案，也使用相同的动画UV坐标
				materialBox.colorNode = mix( textureNode, checker( animateUV ), 0.5 );

				// 备用测试代码：使用第二套UV坐标（被注释掉）
				// geometryBox.setAttribute( 'uv1', geometryBox.getAttribute( 'uv' ) );
				// materialBox.colorNode = texture( uvTexture, uv( 1 ) );

				// 创建立方体网格对象：组合几何体和材质
				box = new THREE.Mesh( geometryBox, materialBox );
				// 设置立方体位置：X=0（水平居中），Y=1（向上偏移1个单位），Z=0（深度中心）
				box.position.set( 0, 1, 0 );
				// 将立方体添加到场景中
				scene.add( box );

				// ========== 示例2：球体网格（置换贴图示例） ==========
				// 创建球体几何体
				// 参数说明：0.5（半径），64（宽度分段数），64（高度分段数）
				// 较高的分段数使球体更平滑，但顶点数也更多
				const geometrySphere = new THREE.SphereGeometry( .5, 64, 64 );
				// 创建基础节点材质
				const materialSphere = new THREE.MeshBasicNodeMaterial();

				// --- 置换贴图效果 ---
				// 创建置换强度节点：从置换纹理的红色通道获取值并乘以0.25
				// texture( textureDisplace ) 创建纹理采样节点
				// .x 获取纹理的红色通道值（纹理返回的是vec4，.x对应R通道）
				// .mul(0.25) 将值乘以0.25，减小置换强度
				const displaceY = texture( textureDisplace ).x.mul( 0.25 );
				// 创建置换方向节点：沿法线方向置换
				// normalLocal 是局部空间的法线向量
				// .mul( displaceY ) 将法线向量乘以置换强度
				const displace = normalLocal.mul( displaceY );

				// 设置材质颜色节点：使用置换强度作为颜色
				// 这样置换强度高的区域显示为亮色，低的区域显示为暗色
				materialSphere.colorNode = displaceY;
				// 设置材质位置节点：原始位置加上置换偏移
				// 这会修改顶点的实际位置，而不仅仅是视觉效果
				materialSphere.positionNode = positionLocal.add( displace );

				// 创建球体网格对象
				const sphere = new THREE.Mesh( geometrySphere, materialSphere );
				// 设置球体位置：X=-2（向左偏移2个单位），Y=-1（向下偏移1个单位），Z=0
				sphere.position.set( - 2, - 1, 0 );
				// 将球体添加到场景中
				scene.add( sphere );

				// ========== 示例3：平面网格（数据纹理示例） ==========
				// 创建平面几何体
				// 默认尺寸为1x1，创建在XY平面上
				const geometryPlane = new THREE.PlaneGeometry();
				// 创建基础节点材质
				const materialPlane = new THREE.MeshBasicNodeMaterial();
				// 设置材质颜色节点：从数据纹理采样并叠加蓝色
				// createDataTexture() 创建自定义的红色数据纹理
				// .add( color( 0x0000FF ) ) 将纹理颜色加上蓝色
				// 由于红色是(1,0,0)，加上蓝色(0,0,1)得到紫色(1,0,1)
				materialPlane.colorNode = texture( createDataTexture() ).add( color( 0x0000FF ) );
				// 启用透明度，允许材质显示透明效果
				materialPlane.transparent = true;

				// 创建平面网格对象
				const plane = new THREE.Mesh( geometryPlane, materialPlane );
				// 设置平面位置：X=0（水平居中），Y=-1（向下偏移1个单位），Z=0
				plane.position.set( 0, - 1, 0 );
				// 将平面添加到场景中
				scene.add( plane );

				// ========== 示例4：压缩纹理平面（KTX2 + 动画示例） ==========
				// 创建基础节点材质
				const materialCompressed = new THREE.MeshBasicNodeMaterial();
				// 设置材质颜色节点：使用KTX2压缩纹理
				materialCompressed.colorNode = texture( ktxTexture );
				
				// --- 创建发射光动画 ---
				// 使用正弦振荡器节点混合两种颜色，产生周期性闪烁效果
				// oscSine() 生成在[-1,1]范围内振荡的正弦波值
				// .mix() 根据正弦波值混合两种颜色：
				// - 当值为-1时：完全显示第一种颜色(0x663300，深棕色)
				// - 当值为1时：完全显示第二种颜色(0x0000FF，蓝色)
				// - 在中间值时：显示两种颜色的混合
				materialCompressed.emissiveNode = oscSine().mix( color( 0x663300 ), color( 0x0000FF ) );
				
				// --- 创建透明度测试动画 ---
				// 使用正弦振荡器节点控制alpha测试阈值
				// alpha测试会根据阈值丢弃像素，用于实现简单的透明度效果
				// 随着正弦波变化，平面会有规律地显示和消失
				materialCompressed.alphaTestNode = oscSine();
				// 启用透明度
				materialCompressed.transparent = true;

				// 翻转平面几何体的UV Y坐标以兼容WebGPU纹理坐标系
				// WebGPU的纹理坐标系原点在左上角，而OpenGL在左下角
				// flipY函数调整UV坐标以正确显示纹理
				const geo = flipY( new THREE.PlaneGeometry() );
				// 创建平面网格对象
				const planeCompressed = new THREE.Mesh( geo, materialCompressed );
				// 设置平面位置：X=-2（向左偏移2个单位），Y=1（向上偏移1个单位），Z=0
				planeCompressed.position.set( - 2, 1, 0 );
				// 将平面添加到场景中
				scene.add( planeCompressed );

				// ========== 示例5：点云（基于位置的着色示例） ==========
				// 创建点数组，用于存储点的位置
				const points = [];

				// 生成1000个随机点
				for ( let i = 0; i < 1000; i ++ ) {
					// 创建三维向量并赋予随机值
					// .random() 生成[0,1]范围内的随机值
					// .subScalar(0.5) 减去0.5，使范围变为[-0.5, 0.5]
					const point = new THREE.Vector3().random().subScalar( 0.5 );
					// 将点添加到数组
					points.push( point );
				}

				// 从点数组创建缓冲几何体
				// BufferGeometry是three.js的高性能几何体类型，使用类型化数组存储数据
				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
				// 创建点云节点材质
				const materialPoints = new THREE.PointsNodeMaterial();

				// 设置材质颜色节点：使用局部空间位置乘以3作为颜色
				// positionLocal 返回顶点的局部坐标
				// .mul(3) 将坐标值乘以3，增强颜色对比度
				// 由于位置坐标在[-0.5,0.5]范围，乘以3后变为[-1.5,1.5]
				// 超过[0,1]范围的值会被clamp，产生鲜艳的颜色变化
				materialPoints.colorNode = positionLocal.mul( 3 );

				// 创建点云对象
				// Points是three.js中用于渲染大量点的特殊网格类型
				const pointCloud = new THREE.Points( geometryPoints, materialPoints );
				// 设置点云位置：X=2（向右偏移2个单位），Y=-1（向下偏移1个单位），Z=0
				pointCloud.position.set( 2, - 1, 0 );
				// 将点云添加到场景中
				scene.add( pointCloud );

				// ========== 示例6：线条（顶点颜色示例） ==========
				// 创建正方形顶点数据
				const geometryLine = new THREE.BufferGeometry().setFromPoints( [
					new THREE.Vector3( - 0.5, - 0.5, 0 ),  // 左下角
					new THREE.Vector3( 0.5, - 0.5, 0 ),   // 右下角
					new THREE.Vector3( 0.5, 0.5, 0 ),     // 右上角
					new THREE.Vector3( - 0.5, 0.5, 0 ),   // 左上角
					new THREE.Vector3( - 0.5, - 0.5, 0 )  // 回到左下角，闭合形状
				] );

				// 使用位置数据作为颜色属性
				// 这会将每个顶点的位置坐标复制为颜色值
				// 由于位置坐标作为颜色，线条会显示从起点到终点的渐变效果
				geometryLine.setAttribute( 'color', geometryLine.getAttribute( 'position' ) );

				// 创建线条基础节点材质
				const materialLine = new THREE.LineBasicNodeMaterial();
				// 设置材质颜色节点：使用顶点颜色属性
				// attribute('color') 从几何体获取名为'color'的顶点属性
				materialLine.colorNode = attribute( 'color' );

				// 创建线条对象
				// Line是three.js中用于渲染连续线条的特殊网格类型
				const line = new THREE.Line( geometryLine, materialLine );
				// 设置线条位置：X=2（向右偏移2个单位），Y=1（向上偏移1个单位），Z=0
				line.position.set( 2, 1, 0 );
				// 将线条添加到场景中
				scene.add( line );

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

			}

			// ========== 窗口大小改变处理函数 ==========
			// 当浏览器窗口大小改变时调用，确保3D场景正确适应新窗口尺寸
			function onWindowResize() {
				// 更新相机宽高比为新的窗口宽高比
				// 这确保渲染图像不会因窗口大小改变而扭曲
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 投影矩阵定义了3D空间如何映射到2D屏幕，改变宽高比后必须更新
				camera.updateProjectionMatrix();

				// 更新渲染器画布大小为新的窗口尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			// ========== 动画循环函数 ==========
			// 每帧调用一次，执行动画更新和场景渲染
			function animate() {
				// 检查box对象是否存在（避免在初始化完成前访问）
				if ( box ) {
					// 更新立方体旋转角度
					// 每帧绕X轴旋转0.01弧度（约0.57度）
					box.rotation.x += 0.01;
					// 每帧绕Y轴旋转0.02弧度（约1.15度）
					box.rotation.y += 0.02;
					// 注意：这里没有更新其他示例对象，它们保持静止
				}

				// 渲染场景
				// 将3D场景从相机视角渲染到2D画布上
				renderer.render( scene, camera );
			}

			// ========== 创建数据纹理的函数 ==========
			// 生成一个纯红色的512x512像素数据纹理
			// 数据纹理是通过程序生成像素数据，而不是从图像文件加载
			function createDataTexture() {
				// 创建红色颜色对象
				// THREE.Color对象存储RGB颜色值，范围0到1
				const color = new THREE.Color( 0xff0000 );  // 十六进制红色值

				// 设置纹理尺寸
				const width = 512;   // 纹理宽度（像素）
				const height = 512;  // 纹理高度（像素）

				// 计算总像素数
				const size = width * height;
				// 创建Uint8Array类型数组存储纹理数据
				// 每个像素需要4个字节：R(红)、G(绿)、B(蓝)、A(alpha透明度)
				const data = new Uint8Array( 4 * size );

				// 将THREE.Color的浮点颜色值(0-1)转换为整数(0-255)
				const r = Math.floor( color.r * 255 );
				const g = Math.floor( color.g * 255 );
				const b = Math.floor( color.b * 255 );

				// 遍历所有像素，填充纹理数据
				for ( let i = 0; i < size; i ++ ) {
					// 计算当前像素在数组中的起始索引
					// 每个像素占用4个连续字节，所以索引是i*4
					const stride = i * 4;
					
					// 设置RGBA四个通道的值
					data[ stride ] = r;        // 红色通道
					data[ stride + 1 ] = g;    // 绿色通道（红色纹理中为0）
					data[ stride + 2 ] = b;    // 蓝色通道（红色纹理中为0）
					data[ stride + 3 ] = 255;  // Alpha通道（完全不透明，255=1.0）
				}

				// 创建数据纹理对象
				// DataTexture可以直接从内存数据创建纹理，不需要图像文件
				// 参数说明：
				// - data: 纹理数据数组
				// - width: 纹理宽度
				// - height: 纹理高度
				// - THREE.RGBAFormat: 纹理格式，表示数据是RGBA四个通道
				const texture = new THREE.DataTexture( data, width, height, THREE.RGBAFormat );
				// 标记纹理需要更新
				// 在three.js中，修改纹理数据后必须设置needsUpdate=true，以便GPU更新纹理
				texture.needsUpdate = true;
				// 返回创建的纹理对象
				return texture;
			}

			/*
			 * ========== UV Y坐标翻转函数 ==========
			 * 功能：修正几何体的UV坐标，使其兼容WebGPU的纹理坐标系
			 * 
			 * 背景说明：
			 * - OpenGL/WebGL纹理坐标系：原点在左下角，Y轴向上
			 * - WebGPU/大部分图像处理纹理坐标系：原点在左上角，Y轴向下
			 * - 此函数通过翻转Y坐标（y = 1 - y）来转换坐标系
			 * 
			 * @param {THREE.BufferGeometry} geometry - 需要修正UV坐标的几何体对象
			 * @return {THREE.BufferGeometry} 修正后的几何体对象
			 */
			function flipY( geometry ) {
				// 获取几何体的UV属性
				// BufferAttribute存储顶点属性数据（位置、法线、UV等）
				const uv = geometry.attributes.uv;

				// 遍历所有UV顶点
				for ( let i = 0; i < uv.count; i ++ ) {
					// 获取当前顶点的原始Y坐标
					// 然后计算翻转后的Y坐标：1 - 原始Y
					// 最后设置回UV属性
					uv.setY( i, 1 - uv.getY( i ) );
				}

				// 返回修正后的几何体，支持链式调用
				return geometry;
			}

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