<!-- 代码功能与主要技术点详解
📋 一、整体功能概述
这是一个基于WebGPU的Three.js计算纹理示例，通过GPU计算着色器动态生成彩色纹理图案并渲染到屏幕上。示例展示了现代图形API（WebGPU）的并行计算能力，完全在GPU上生成纹理数据，无需CPU参与。

🎯 二、核心功能
1. GPU计算纹理生成
功能：使用计算着色器并行生成512×512像素的彩色纹理

特点：每个像素由一个独立的GPU线程计算，总共262,144个线程同时执行

算法：基于多个正弦波函数的叠加，产生复杂的彩虹色干涉图案

2. 实时渲染
功能：将计算生成的纹理应用到一个平面几何体上

特点：纹理生成后立即渲染，展示GPU计算到渲染的完整流水线

3. 响应式设计
功能：自适应窗口大小变化

特点：保持纹理显示比例，正确处理不同宽高比

🔧 三、主要技术点
1. WebGPU技术栈
text
WebGPU API → three.js WebGPU渲染器 → TSL着色器语言
WebGPU API：现代图形API，替代WebGL，提供更好的性能和更直接的GPU控制

Three.js WebGPU渲染器：Three.js对WebGPU的封装实现

TSL（Three.js Shading Language）：Three.js的着色器语言，提供类型安全的着色器编程

2. 计算着色器（Compute Shader）
javascript
// 关键技术点：
const computeNode = computeTexture({ storageTexture }).compute(width * height);
并行计算模型：每个像素一个线程，并行执行

存储纹理访问：通过textureStore直接写入纹理数据

工作项分配：通过instanceIndex区分不同线程

3. 存储纹理（Storage Texture）
javascript
const storageTexture = new THREE.StorageTexture(width, height);
特点：可读写纹理，支持计算着色器随机访问

优势：相比传统纹理，允许GPU直接写入数据

用途：作为计算着色器的输出和片段着色器的输入

4. 数学函数纹理生成
glsl
// 核心算法：多个正弦波叠加
const v1 = x.sin();                    // 水平方向波
const v2 = y.sin();                    // 垂直方向波  
const v3 = x.add(y).sin();             // 对角线波
const v4 = (sqrt(x² + y²) + 5).sin();  // 径向波
const v = v1 + v2 + v3 + v4;           // 波叠加
5. TSL着色器语言特性
类型安全：float、uvec2、vec4等明确的类型

链式调用：x.mul(x).add(y.mul(y)).sqrt()

函数式编程：Fn()创建可重用着色器函数

6. 渲染管线架构
text
[计算阶段]                  [渲染阶段]
计算着色器  →  存储纹理  →  片段着色器  →  屏幕显示
   ↓              ↓            ↓            ↓
并行计算   数据传递     纹理采样   最终输出
🏗️ 四、技术架构层次
第一层：WebGPU基础设施
设备检测：WebGPU.isAvailable()

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

命令提交：renderer.compute(computeNode)

第二层：Three.js抽象层
场景管理：THREE.Scene

相机系统：THREE.OrthographicCamera

几何体：THREE.PlaneGeometry

材质系统：THREE.MeshBasicNodeMaterial

第三层：计算与着色器层
计算函数定义：Fn()创建计算着色器

数据并行：.compute(width * height)指定线程数

纹理操作：textureStore()写入，texture()读取

第四层：数学与算法层
坐标变换：像素坐标→归一化坐标

波函数计算：正弦波叠加算法

颜色生成：相位偏移的RGB通道

⚡ 五、性能优化技术
1. 并行化最大化
262,144个线程完全并行执行

无数据依赖，无同步开销

2. 内存访问优化
存储纹理使用toWriteOnly()提示

局部变量重用，减少全局内存访问

3. 管线优化
计算与渲染分离，充分利用GPU不同硬件单元

一次计算，多次渲染（纹理可重复使用）

🔄 六、工作流程
初始化阶段

检测WebGPU支持性

创建相机、场景、渲染器

异步初始化WebGPU上下文

计算阶段

创建存储纹理

定义计算着色器函数

提交计算命令到GPU

262,144个线程并行执行

渲染阶段

创建平面几何体

创建材质并绑定计算纹理

添加到场景并渲染

响应阶段

监听窗口大小变化

调整相机参数

重新渲染

🎨 七、视觉效果特点
生成的纹理具有：
平滑渐变：正弦函数产生的连续变化

复杂图案：多个波函数干涉产生

彩虹色系：RGB通道相位差产生的色彩

无限缩放性：数学函数定义，无分辨率限制

📊 八、与传统方法的对比
特性	传统CPU生成纹理	传统片段着色器	本示例（计算着色器）
并行度	单线程	像素级并行	像素级并行+计算优化
性能	慢	中等	快
灵活性	高	有限	高
内存	CPU↔GPU传输	GPU纹理采样	GPU直接计算
适用场景	简单纹理	屏幕效果	复杂计算、模拟 -->


<html lang="zh-CN">  <!-- 修改为中文语言 -->
	<head>
		<!-- 修改标题为中文 -->
		<title>Three.js WebGPU 示例 - 计算纹理</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 中文信息栏 -->
		<div id="info">
			<!-- three.js logo链接 -->
			<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>计算纹理示例</span>
			</div>

			<!-- 中文示例描述 -->
			<small>
				使用GPU计算着色器生成动态纹理。这是一个展示WebGPU计算能力的示例，通过计算着色器并行处理每个像素，生成基于数学函数的彩色图案。
			</small>
		</div>

		<!-- 导入映射配置（ES模块的路径映射） -->
		<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模块 -->
		<script type="module">
			// 从three.js WebGPU版本导入所有模块
			// 注意：这里使用的是WebGPU专用的构建版本，不是传统的three.js
			import * as THREE from 'three/webgpu';
			
			// 从TSL（Three.js Shading Language）导入特定函数
			// texture: 用于采样纹理的函数
			// textureStore: 用于在计算着色器中写入纹理数据
			// Fn: 用于创建着色器函数的高阶函数
			// instanceIndex: 计算着色器中的内置变量，表示当前执行实例的索引
			// float: 将整数转换为浮点数的函数
			// uvec2: 创建无符号整数二维向量的函数
			// vec4: 创建四维浮点向量的函数（用于RGBA颜色）
			import { texture, textureStore, Fn, instanceIndex, float, uvec2, vec4 } from 'three/tsl';
			
			// 导入WebGPU兼容性检测模块
			// 这个模块用于检查浏览器是否支持WebGPU API
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// 全局变量声明，将在init函数中初始化
			let camera;      // 相机对象，控制视图
			let scene;       // 场景对象，包含所有3D对象
			let renderer;    // 渲染器对象，负责将3D场景渲染到2D画布

			// 初始化并渲染场景
			// init()返回Promise，使用.then()在初始化完成后调用render函数
			init().then(render);

			// 异步初始化函数
			async function init() {
				// ============ WebGPU兼容性检测 ============
				// 检查当前浏览器是否支持WebGPU
				if (WebGPU.isAvailable() === false) {
					// 如果不支持，获取错误信息元素并添加到页面
					document.body.appendChild(WebGPU.getErrorMessage());
					// 抛出错误，停止执行后续代码
					throw new Error('浏览器不支持WebGPU。请使用Chrome 113+、Edge 113+或Firefox Nightly版本。');
				}

				// ============ 相机设置 ============
				// 计算窗口的宽高比（宽度/高度）
				const aspect = window.innerWidth / window.innerHeight;
				
				// 创建正交投影相机（Orthographic Camera）
				// 正交投影：物体大小不随距离改变，适合2D渲染和UI
				// 参数说明：left, right, top, bottom, near, far
				// 这里创建了一个覆盖整个屏幕的相机
				camera = new THREE.OrthographicCamera(-aspect, aspect, 1, -1, 0, 2);
				// 将相机向后移动1个单位（沿Z轴负方向）
				// 在正交投影中，Z位置不影响物体大小，但影响可见性
				camera.position.z = 1;

				// ============ 场景设置 ============
				// 创建场景对象，所有3D对象都将添加到场景中
				scene = new THREE.Scene();

				// ============ 计算纹理创建 ============
				// 定义纹理的宽度和高度（像素）
				const width = 512, height = 512;

				// 创建存储纹理（Storage Texture）
				// 存储纹理是一种特殊类型的纹理，可以在计算着色器中读写
				// 与传统纹理不同，存储纹理允许随机访问和写入
				const storageTexture = new THREE.StorageTexture(width, height);
				// 注释掉的代码：设置纹理过滤方式（如果需要mipmap可以启用）
				// storageTexture.minFilter = THREE.LinearMipMapLinearFilter;

				// ============ 使用TSL定义计算着色器函数 ============
				// Fn()函数创建一个可重用的着色器函数
				// 这里定义了一个计算纹理颜色的函数
				const computeTexture = Fn(({ storageTexture }) => {
					// ----- 计算当前线程处理的像素位置 -----
					// instanceIndex: 当前计算着色器实例的索引（0到width*height-1）
					// 通过取模运算得到X坐标（列索引）
					const posX = instanceIndex.mod(width);
					// 通过整数除法得到Y坐标（行索引）
					const posY = instanceIndex.div(width);
					// 将两个坐标组合成二维向量（无符号整数）
					const indexUV = uvec2(posX, posY);

					// ----- 基于像素位置生成颜色值 -----
					// 参考ShaderToy示例：https://www.shadertoy.com/view/Xst3zN
					// 这里使用多个正弦波函数创建彩色图案

					// 将像素坐标转换为浮点数并缩放
					// 除以50.0是为了控制图案的频率
					const x = float(posX).div(50.0);  // x坐标从0到512，映射到0到10.24
					const y = float(posY).div(50.0);  // y坐标同理

					// 计算四个不同频率的正弦波值
					// 这些正弦波在空间上叠加，产生复杂的干涉图案
					const v1 = x.sin();                    // 正弦波1：基于x坐标
					const v2 = y.sin();                    // 正弦波2：基于y坐标
					const v3 = x.add(y).sin();             // 正弦波3：基于x+y（对角线方向）
					const v4 = x.mul(x)                    // 计算到原点的距离的平方（x² + y²）
						.add(y.mul(y))                    // 加法运算
						.sqrt()                           // 开方得到欧几里得距离
						.add(5.0)                         // 加上常数偏移
						.sin();                           // 正弦波4：基于径向距离

					// 将四个正弦波值相加
					// 这种叠加会产生复杂的干涉图案
					const v = v1.add(v2, v3, v4);

					// ----- 为RGB通道生成颜色 -----
					// 通过对v值应用不同相位的正弦函数，为每个颜色通道生成不同的值
					// 这种方法可以创建平滑变化的彩虹色效果
					const r = v.sin();                           // 红色通道：sin(v)
					const g = v.add(Math.PI).sin();             // 绿色通道：sin(v + π) - 相位偏移180度
					const b = v.add(Math.PI).sub(0.5).sin();    // 蓝色通道：sin(v + π - 0.5) - 相位偏移进一步调整

					// ----- 将计算结果写入存储纹理 -----
					// textureStore函数将颜色值写入纹理的指定位置
					// vec4(r, g, b, 1): 创建RGBA颜色，alpha值固定为1（不透明）
					// toWriteOnly(): 优化提示，告诉编译器这个纹理只写入不读取
					textureStore(storageTexture, indexUV, vec4(r, g, b, 1)).toWriteOnly();
				});

				// ============ 执行计算着色器 ============
				// 创建计算节点，指定线程数量（每个像素一个线程）
				// compute(width * height): 启动width*height个线程并行执行
				// 在这个例子中是512×512=262,144个线程同时运行
				const computeNode = computeTexture({ storageTexture }).compute(width * height);

				// ============ 创建渲染材质和几何体 ============
				// 创建MeshBasicNodeMaterial（节点材质系统）
				// 节点材质使用基于节点的可视化编程方式定义材质
				const material = new THREE.MeshBasicNodeMaterial({ 
					color: 0x00ff00  // 默认颜色（绿色），将被纹理覆盖
				});
				// 将计算生成的纹理设置为材质的颜色节点
				// texture(storageTexture): 采样存储纹理
				material.colorNode = texture(storageTexture);

				// 创建一个平面几何体（1x1单位）
				// 这个平面将显示计算生成的纹理
				const plane = new THREE.Mesh(
					new THREE.PlaneGeometry(1, 1),  // 宽度1，高度1的平面
					material                         // 使用上面创建的材质
				);
				// 将平面添加到场景中
				scene.add(plane);

				// ============ 创建WebGPU渲染器 ============
				// 创建WebGPURenderer实例（替代传统的WebGLRenderer）
				// antialias: true 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer({ antialias: true });
				// 设置设备像素比，支持高DPI显示屏（如Retina显示器）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 将渲染器的canvas元素添加到body中
				// renderer.domElement是HTMLCanvasElement
				document.body.appendChild(renderer.domElement);

				// ============ 异步初始化渲染器 ============
				// WebGPU渲染器需要异步初始化
				// 这是因为WebGPU API本身是异步的（请求适配器、设备等）
				await renderer.init();

				// ============ 执行计算着色器生成纹理 ============
				// 在GPU上执行计算着色器，填充存储纹理
				// 这个操作是异步的，但WebGPU会保证计算完成后才进行渲染
				renderer.compute(computeNode);

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

			// 窗口大小变化事件处理函数
			function onWindowResize() {
				// 更新渲染器尺寸以匹配新的窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);

				// 重新计算宽高比
				const aspect = window.innerWidth / window.innerHeight;
				// 计算当前相机的视锥体高度（top - bottom）
				const frustumHeight = camera.top - camera.bottom;

				// 根据新的宽高比调整正交相机的左右边界
				// 保持视锥体高度不变，只调整宽度
				camera.left = -frustumHeight * aspect / 2;
				camera.right = frustumHeight * aspect / 2;

				// 更新相机投影矩阵
				// 必须调用此方法使新的投影参数生效
				camera.updateProjectionMatrix();

				// 重新渲染场景
				render();
			}

			// 渲染函数
			function render() {
				// 使用指定的相机渲染场景
				// 将3D场景转换为2D图像显示在canvas上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>