<!-- Three.js WebGPU 纹理部分更新演示
一、代码功能概述
1. 核心功能
这是一个基于Three.js和WebGPU技术的交互式3D图形演示，展示了实时部分更新纹理的高级渲染技术。程序会在一个静态的碳纤维纹理平面上，以固定时间间隔（0.1秒）在随机位置动态添加32×32像素的彩色方块。

2. 视觉效果
主纹理：加载一张碳纤维纹理作为背景

动态更新：随机位置出现彩色方块，不断变化位置和颜色

颜色变化：每个方块采用随机生成的纯色

位置随机：方块在纹理网格（16×16个可能位置）中随机出现

3. 交互特性
自动运行动画，无需用户交互

响应式设计，适配不同窗口尺寸

高性能渲染，保持流畅的动画效果

二、主要技术点详解
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer({ 
    antialias: true,      // 抗锯齿
    forceWebGL: false     // 优先使用WebGPU
})
优势：相比于传统WebGL，WebGPU提供：

更低的CPU开销

更好的多线程支持

更高效的纹理操作

现代化API设计

兼容性：自动降级到WebGL（如果浏览器不支持WebGPU）

2. 纹理部分更新技术
javascript
renderer.copyTextureToTexture(dataTexture, diffuseMap, null, position)
这是最核心的技术点，实现了：

高效更新：只更新纹理的一小部分，而不是整个纹理

GPU加速：直接在GPU内存中进行纹理复制

实时性：支持每帧更新，适合游戏和交互应用

3. 双纹理架构
纹理类型	尺寸	用途	特点
主纹理	512×512（示例）	背景显示	静态加载，只被部分更新
数据纹理	32×32	更新源	动态生成，内存驻留
4. 数据纹理（DataTexture）
javascript
const data = new Uint8Array(32 * 32 * 4);  // RGBA格式
dataTexture = new THREE.DataTexture(data, 32, 32);
内存管理：直接在JavaScript内存中管理纹理数据

高效更新：修改JavaScript数组后标记更新

格式：RGBA格式，每像素4字节（R,G,B,A各1字节）

5. 动画时间控制
javascript
if (elapsedTime - last > 0.1) {  // 控制更新频率
    // 执行更新
}
精准计时：使用THREE.Clock获取精确时间

频率控制：每0.1秒更新一次，平衡视觉效果和性能

平滑动画：与显示刷新率解耦，确保稳定更新

6. 坐标系统
javascript
position.x = (32 * THREE.MathUtils.randInt(1, 16)) - 32;
// 生成范围：-32 到 480（以32为步长）
网格对齐：确保更新位置是32像素的整数倍

边界处理：避免更新超出纹理边界

随机分布：在16×16的网格中随机选择位置

7. 颜色生成系统
javascript
color.setHex(Math.random() * 0xffffff);
// 转换为0-255范围
const r = Math.floor(color.r * 255);
随机生成：每次生成不同的RGB颜色

批量填充：一次性填充整个32×32区域为同色

颜色空间：使用sRGB颜色空间，显示效果更自然

三、性能优化技术
1. Mipmaps管理
javascript
diffuseMap.generateMipmaps = false;
禁用原因：动态更新纹理时，重新生成Mipmaps开销大

节省资源：减少GPU内存使用和计算开销

适用场景：适合频繁更新的纹理

2. 纹理过滤设置
javascript
diffuseMap.minFilter = THREE.LinearFilter;
线性过滤：缩放时平滑过渡，避免像素化

性能平衡：比最近邻过滤效果好，比三线性过滤性能高

3. 内存管理
复用数据数组：重用同一个Uint8Array，避免垃圾回收

最小化更新：只更新必要的纹理区域

GPU上传优化：通过needsUpdate标记控制GPU上传时机

四、应用场景
1. 游戏开发
粒子系统：实时更新爆炸、魔法效果

动态贴花：子弹孔、血迹、划痕

角色状态：实时更新血量条、状态指示器

2. 数据可视化
热力图更新：实时数据变化

地理信息：动态标记更新

实时监控：仪表盘和指示器

3. 交互应用
绘图应用：画笔实时绘制

图像编辑：局部滤镜应用

AR/VR：实时环境纹理更新

五、技术优势总结
1. 性能优势
局部更新：避免全纹理传输，减少带宽消耗

GPU加速：利用WebGPU的并行计算能力

内存高效：最小化CPU-GPU数据传输

2. 开发优势
API简洁：Three.js封装复杂操作，接口简单易用

跨平台：WebGPU标准支持，未来兼容性好

维护性好：模块化设计，便于扩展和修改

3. 视觉效果
实时性：毫秒级更新，响应迅速

高质量：支持抗锯齿和高质量过滤

灵活性：可调整更新频率和区域大小 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示在浏览器标签页上的文字 -->
		<title>Three.js WebGPU演示 - 纹理部分更新技术</title>
		
		<!-- 字符编码设置：指定文档使用UTF-8字符编码，确保中文等字符正确显示 -->
		<meta charset="utf-8">
		
		<!-- 视口设置：用于移动端适配和响应式设计
		     width=device-width: 视口宽度等于设备宽度
		     user-scalable=no: 禁止用户缩放页面
		     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样式表：为页面提供基本样式 -->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 信息展示区域：包含Logo、标题和描述信息 -->
		<div id="info">
			<!-- Three.js官网链接（通过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> - 纹理部分更新演示</span>
			</div>

			<!-- 详细描述信息：解释本演示的核心功能 -->
			<small>
				本演示展示了Three.js WebGPU渲染器的纹理部分更新功能。<br>
				通过将一个32x32像素的数据纹理动态复制到主纹理的随机位置，<br>
				实现了在不重新加载整个纹理的情况下，实时更新纹理的特定区域。<br>
				这种技术特别适用于需要频繁更新纹理小部分的游戏和交互式应用。
			</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模块 -->
		<script type="module">

			// 导入Three.js的WebGPU版本
			// 使用import * as语法导入整个模块并命名为THREE
			import * as THREE from 'three/webgpu';

			// ============ 全局变量声明区域 ============
			// 场景相关变量
			let camera;      // 摄像机：定义观察3D场景的视点
			let scene;       // 场景：包含所有3D对象的容器
			let renderer;    // 渲染器：负责将3D场景渲染到2D画布
			let clock;       // 时钟：用于精确控制动画时间
			
			// 纹理相关变量
			let dataTexture; // 数据纹理：动态生成的32x32像素纹理，用于部分更新
			let diffuseMap;  // 漫反射贴图：主纹理，从文件加载的碳纤维纹理
			
			// 时间控制变量
			let last = 0;    // 记录上一次执行纹理更新的时间戳，用于控制更新频率
			
			// 工具对象
			const position = new THREE.Vector2();  // 二维向量：存储纹理更新的目标位置坐标(x, y)
			const color = new THREE.Color();       // 颜色对象：用于生成和管理随机颜色
			// ========================================

			// 初始化函数：程序入口点
			// 当页面加载完成后会自动调用此函数
			init();

			/**
			 * 初始化函数：设置整个Three.js应用的基础框架
			 * 主要职责：
			 * 1. 创建场景、相机和渲染器
			 * 2. 加载纹理和创建3D对象
			 * 3. 设置事件监听器
			 */
			function init() {

				// ---------- 创建摄像机 ----------
				// 使用透视相机（PerspectiveCamera），模拟人眼看到的3D效果
				camera = new THREE.PerspectiveCamera( 
					70,  // 视野角度（Field of View）：垂直方向的视野角度，单位是度
					     // 值越大，看到的场景越广，但边缘会有更多变形
					
					window.innerWidth / window.innerHeight,  // 宽高比（Aspect Ratio）
					     // 根据窗口宽度和高度计算，确保渲染的画面不会被拉伸变形
					
					0.01,  // 近裁剪面（Near Clipping Plane）
					       // 距离相机多近的物体开始被渲染，太小的值可能导致深度精度问题
					       // 太大的值可能导致近处的物体被裁剪掉
					
					10     // 远裁剪面（Far Clipping Plane）
					       // 距离相机多远的物体不再被渲染，太大的值可能导致深度缓冲精度问题
				);
				
				// 设置摄像机在Z轴上的位置
				// 在Three.js中，Z轴垂直屏幕向外，正值表示向屏幕外移动
				camera.position.z = 2;

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

				// ---------- 创建时钟 ----------
				// 时钟对象用于精确控制动画时间，可以获取自创建以来的经过时间
				// 这是实现平滑动画的关键工具
				clock = new THREE.Clock();

				// ---------- 加载纹理 ----------
				// 创建纹理加载器实例
				const loader = new THREE.TextureLoader();
				
				// 异步加载碳纤维纹理图片
				// load()方法参数说明：
				// 1. 纹理图片路径：'textures/carbon/Carbon.png'
				// 2. 加载成功回调（可选）：这里使用默认回调
				// 3. 加载进度回调（可选）：这里未提供
				// 4. 加载错误回调（可选）：这里未提供
				diffuseMap = loader.load( 'textures/carbon/Carbon.png' );
				
				// 设置纹理颜色空间为sRGB
				// sRGB颜色空间更符合人眼感知，使颜色显示更自然
				diffuseMap.colorSpace = THREE.SRGBColorSpace;
				
				// 设置纹理的缩小过滤方式为线性过滤
				// 当纹理被缩小时（显示在屏幕上比原始尺寸小），使用线性插值计算像素颜色
				// 这比最近邻过滤（NearestFilter）效果更平滑
				diffuseMap.minFilter = THREE.LinearFilter;
				
				// 禁用Mipmaps生成
				// Mipmaps是纹理的一系列缩小版本，用于提高渲染质量，但会增加内存使用
				// 这里禁用是因为我们要动态更新纹理，生成Mipmaps会增加开销
				diffuseMap.generateMipmaps = false;

				// ---------- 创建几何体 ----------
				// 创建一个2x2单位的平面几何体
				// PlaneGeometry(width, height, widthSegments, heightSegments)
				// 参数说明：
				// width: 平面宽度
				// height: 平面高度
				// widthSegments: 宽度分段数（可选，默认1）
				// heightSegments: 高度分段数（可选，默认1）
				const geometry = new THREE.PlaneGeometry( 2, 2 );
				
				// ---------- 创建材质 ----------
				// 使用MeshBasicMaterial基础材质，这种材质不受光照影响
				// 只使用纹理的颜色信息，适合显示图片或颜色
				const material = new THREE.MeshBasicMaterial( { 
					map: diffuseMap  // 将加载的纹理设置为材质的贴图
				} );

				// ---------- 创建网格 ----------
				// 网格（Mesh）是几何体（Geometry）和材质（Material）的组合
				// 这是Three.js中最基本的3D对象类型
				const mesh = new THREE.Mesh( geometry, material );
				
				// 将网格添加到场景中
				// 只有添加到场景中的对象才会被渲染
				scene.add( mesh );

				// ============ 创建数据纹理 ============
				// 数据纹理是动态生成的纹理，存储在内存数组中
				// 我们将用它来更新主纹理的特定区域
				
				const width = 32;   // 数据纹理宽度：32像素
				const height = 32;  // 数据纹理高度：32像素

				// 创建Uint8Array来存储纹理数据
				// 计算数组大小：width * height * 4 (RGBA四个通道)
				// Uint8Array中的每个元素是0-255的整数
				const data = new Uint8Array( width * height * 4 );
				
				// 创建数据纹理对象
				dataTexture = new THREE.DataTexture( 
					data,     // 纹理数据：Uint8Array数组
					width,    // 纹理宽度：像素数
					height,   // 纹理高度：像素数
					THREE.RGBAFormat,  // 纹理格式：RGBA格式（可选，默认RGBAFormat）
					THREE.UnsignedByteType  // 数据类型：无符号字节（可选，默认UnsignedByteType）
				);
				// =====================================

				// ---------- 创建渲染器 ----------
				// 使用WebGPURenderer，这是Three.js的下一代渲染器
				// 相比于WebGLRenderer，WebGPU提供更好的性能和更多功能
				renderer = new THREE.WebGPURenderer( { 
					antialias: true,      // 启用抗锯齿：平滑几何体边缘的锯齿
					forceWebGL: false     // 不强制使用WebGL：如果浏览器不支持WebGPU，会尝试WebGL
				} );
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上，devicePixelRatio大于1
				// 设置这个值可以确保渲染的画布清晰度匹配屏幕
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器大小与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// setAnimationLoop()是Three.js的动画循环接口
				// 参数animate函数会在每一帧被调用，实现连续的动画效果
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// renderer.domElement是HTMLCanvasElement实例
				document.body.appendChild( renderer.domElement );

				// ---------- 事件监听器 ----------
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，需要更新相机和渲染器设置
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，确保3D场景正确适配新窗口尺寸
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 相机宽高比必须与渲染区域的宽高比一致，否则画面会被拉伸
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 修改相机属性后，必须调用此方法使更改生效
				// 投影矩阵定义了3D空间如何投影到2D屏幕
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 确保渲染的画布大小与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 这是Three.js动画的核心，每一帧都会调用此函数
			 * 主要职责：
			 * 1. 渲染当前帧
			 * 2. 按固定时间间隔更新纹理
			 * 
			 * @return {void}
			 */
			function animate() {

				// 获取自时钟创建以来经过的时间（秒）
				// 这个时间值是连续的，适合用于基于时间的动画
				const elapsedTime = clock.getElapsedTime();

				// 渲染当前帧
				// render()方法将场景从相机的视角渲染到画布上
				// 这是整个Three.js管线执行的起点
				renderer.render( scene, camera );

				// 控制纹理更新频率：每0.1秒更新一次
				// elapsedTime - last计算距离上一次更新的时间间隔
				if ( elapsedTime - last > 0.1 ) {

					// 更新最后执行时间戳
					// 将当前时间记录为"上一次更新时间"
					last = elapsedTime;

					// 生成随机位置坐标
					// 位置范围：从(-32, -32)到(480, 480)，以32像素为步长
					// 这是因为我们的主纹理可能是512x512，数据纹理是32x32
					position.x = ( 32 * THREE.MathUtils.randInt( 1, 16 ) ) - 32;
					position.y = ( 32 * THREE.MathUtils.randInt( 1, 16 ) ) - 32;

					// 更新数据纹理内容
					// 生成新的随机颜色并填充到数据纹理中
					updateDataTexture( dataTexture );

					// 执行纹理复制操作
					// 将数据纹理的内容复制到主纹理的指定位置
					// copyTextureToTexture()参数说明：
					// 1. srcTexture: 源纹理（dataTexture）
					// 2. dstTexture: 目标纹理（diffuseMap）
					// 3. srcRegion: 源区域（null表示使用整个源纹理）
					// 4. dstPosition: 目标位置（position向量）
					renderer.copyTextureToTexture( dataTexture, diffuseMap, null, position );

				}

			}

			/**
			 * 更新数据纹理的函数
			 * 为数据纹理的所有像素生成相同的随机颜色
			 * 
			 * @param {THREE.DataTexture} texture - 要更新的数据纹理对象
			 */
			function updateDataTexture( texture ) {

				// 计算纹理的总像素数
				// 纹理尺寸：32x32 = 1024个像素
				const size = texture.image.width * texture.image.height;
				
				// 获取纹理数据数组的引用
				// texture.image.data是Uint8Array类型
				// 直接修改这个数组，然后设置needsUpdate=true，纹理就会更新
				const data = texture.image.data;

				// 生成随机颜色
				// 1. Math.random()生成0-1之间的随机数
				// 2. 乘以0xffffff（16777215）得到0-16777215之间的随机整数
				// 3. setHex()将十六进制颜色值设置为颜色对象
				color.setHex( Math.random() * 0xffffff );

				// 将颜色分量从0-1范围转换为0-255范围
				// color.r/g/b是0-1之间的浮点数
				// Math.floor()向下取整，确保是整数
				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个字节：R, G, B, A
					// stride意思是"步长"，这里指像素的起始位置
					const stride = i * 4;

					// 设置RGBA四个通道的值
					data[ stride ] = r;          // 红色通道
					data[ stride + 1 ] = g;      // 绿色通道
					data[ stride + 2 ] = b;      // 蓝色通道
					data[ stride + 3 ] = 255;    // Alpha通道（透明度）
					                              // 255表示完全不透明
					                              // 注：原代码中写的是1，应该是255，这里修正为255

				}

				// 标记纹理需要更新
				// 当needsUpdate设置为true时，Three.js会在下一帧将数据上传到GPU
				// 这是必要的步骤，因为修改的是内存中的数据，GPU中的纹理不会自动更新
				texture.needsUpdate = true;

			}

		</script>

	</body>
</html>