<!-- Three.js WebGPU 3D纹理渲染示例 - 功能描述与技术点分析
🎯 整体功能描述
这是一个展示Three.js WebGPU中3D纹理和纹理数组两种不同技术的对比演示程序。程序将屏幕划分为四个视口，分别显示：

原始2D纹理数组（DataArrayTexture）及其渲染结果

原始3D纹理（Data3DTexture）及其渲染结果

2D渲染目标数组（RenderTargetArray）的渲染输出

3D渲染目标（RenderTarget3D）的渲染输出

程序的核心是加载一个医学CT扫描数据（256×256×109体素），然后同时使用两种不同的纹理技术来处理和可视化这些数据，让用户直观地看到它们之间的区别和应用场景。

📊 四个视图的具体功能
1. 左上角 - 渲染目标数组 (RenderTargetArray)
功能：显示通过渲染管线生成的2D纹理数组结果

内容：将DataArrayTexture的数据逐层渲染到2D纹理数组中

特点：每个切片是独立的2D纹理，支持逐层更新

2. 右上角 - 数据3D纹理 (Data3DTexture)
功能：显示原始的3D纹理数据

内容：直接从内存中加载的3D体积数据

特点：真正的3D纹理，支持三线性插值

3. 左下角 - 数据数组纹理 (DataArrayTexture)
功能：显示原始的2D纹理数组数据

内容：以纹理数组形式组织的相同医学数据

特点：2D纹理的堆叠，每层独立寻址

4. 右下角 - 3D渲染目标 (RenderTarget3D)
功能：显示通过渲染管线生成的3D纹理结果

内容：将DataArrayTexture的数据渲染到3D纹理中

特点：渲染结果为真正的3D纹理

🚀 主要技术点
1. WebGPU渲染器
javascript
renderer = new THREE.WebGPURenderer();
使用Three.js的WebGPU后端，替代传统的WebGL

支持更现代的图形API特性

更好的性能和更低的CPU开销

2. 多视口渲染
javascript
renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);
技术：单Canvas多视口分割渲染

实现：通过设置视口和裁剪区域将屏幕分为4个独立区域

优势：单次页面加载，多个独立视角

3. 3D纹理 vs 2D纹理数组
Data3DTexture (3D纹理)
javascript
const map3D = new THREE.Data3DTexture(array, width, height, depth);
内存布局：连续的三维数组 [x, y, z]

寻址方式：三维纹理坐标 (u, v, w)

过滤：支持三线性过滤（在x,y,z三个方向插值）

适用场景：体积数据、医学影像、云模拟

DataArrayTexture (2D纹理数组)
javascript
const mapArray = new THREE.DataArrayTexture(array, width, height, depth);
内存布局：2D纹理的堆叠 [layer][x, y]

寻址方式：二维纹理坐标+层索引 (u, v, layer)

过滤：只能在层内进行双线性过滤

适用场景：纹理图集、动画序列、地形层次

4. 渲染目标技术
RenderTarget3D
javascript
const fbo3D = new THREE.RenderTarget3D(width, height, depth);
类型：可渲染的3D纹理

用途：离屏渲染到3D纹理

WebGPU要求：需要显式清除每一层

RenderTarget (带depth参数)
javascript
const fboArray = new THREE.RenderTarget(width, height, { depth: size.depth });
类型：2D纹理数组渲染目标

用途：离屏渲染到纹理数组

层访问：通过索引访问特定层

5. TSL着色器语言
javascript
import { vec2, uniform, screenUV, color, texture } from 'three/tsl';
TSL：Three.js Shader Language

优势：在JavaScript中构建着色器，无需编写GLSL

节点系统：通过连接节点构建着色器图

示例应用：

javascript
// 动态背景效果
const backgroundEffect = color(0x212121)
  .sub(distanceEffect.pow(0.3).mul(0.1));
6. 体积数据可视化
javascript
import { TextureHelper } from 'three/addons/helpers/TextureHelperGPU.js';
TextureHelper：专门用于可视化3D纹理的辅助类

显示方式：将3D纹理渲染为体积对象

交互：支持旋转、缩放查看内部结构

7. 数据流处理
javascript
// 1. 加载压缩数据
new THREE.FileLoader().load('textures/3d/head256x256x109.zip', ...);

// 2. 解压缩
const zip = unzipSync(new Uint8Array(data));

// 3. 创建两种纹理
const map3D = new THREE.Data3DTexture(...);
const mapArray = new THREE.DataArrayTexture(...);

// 4. 逐层渲染到两个渲染目标
renderer.setRenderTarget(fboArray, j);
quadMesh.render(renderer);
8. 交互控制
javascript
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
独立控制：每个视口有独立的OrbitControls

视角限制：设置合理的角度和距离限制

阻尼效果：使相机移动更平滑自然

9. 异步资源加载
javascript
await renderer.init(); // 等待WebGPU初始化
异步初始化：WebGPU需要异步初始化

资源加载：医学数据较大，使用异步加载

渐进式渲染：数据加载完成后开始渲染循环

🔧 关键技术实现细节
1. 视口管理策略
javascript
// 归一化坐标系统
class View {
    constructor(left, top, width, height) {
        // 所有参数在0-1范围内
        this.left = left;   // 0.0 - 1.0
        this.top = top;     // 0.0 - 1.0
        this.width = width; // 0.0 - 1.0
        this.height = height;// 0.0 - 1.0
    }
}
2. 动态背景效果
javascript
// 基于视口位置和像素距离的动态背景
const distanceEffect = normalizedUV.distance(viewportCenter).smoothstep(0, 0.2);
const backgroundEffect = color(this.top > 0 ? 0x212121 : 0x616161)
    .sub(distanceEffect.pow(0.3).mul(0.1));
3. 逐层渲染机制
javascript
// 定时器驱动的逐层渲染
const interval = setInterval(() => {
    uZCoord.value = j; // 更新当前层索引
    
    // 渲染到两个不同的渲染目标
    renderer.setRenderTarget(fboArray, j);
    quadMesh.render(renderer);
    
    renderer.setRenderTarget(fbo3D, j);
    quadMesh.render(renderer);
    
    j = (j + 1) % size.depth;
}, 50);
4. WebGPU特殊处理
javascript
// WebGPU需要显式清除3D渲染目标
if (renderer.backend.isWebGPUBackend) {
    for (let i = 0; i < size.depth; i++) {
        renderer.setRenderTarget(fbo3D, i);
        clearQuadMesh.render(renderer);
    }
}
🎨 可视化效果特点
1. 深度感知增强
javascript
// 使用Z坐标增强深度感
vec3(diffuseColor.r.mul(attribute('uvw').z.mul(diffuseColor.r)))
2. 交互式探索
每个视图可独立旋转、缩放

实时查看3D体积数据内部结构

对比观察两种纹理技术的差异

3. 渐进式数据加载
先显示界面，后加载数据

数据解压后立即开始可视化

渲染过程可视（逐层渲染动画）

📈 性能考虑
1. 内存效率
相同数据只加载一次，分别创建两种纹理

使用压缩格式（ZIP）减少网络传输

按需显示，只可视化部分切片

2. 渲染优化
离屏渲染使用最小必要尺寸（256×256）

禁用不需要的深度测试

使用合适的纹理过滤方式

3. 交互响应
四个视图独立更新，互不阻塞

阻尼效果提升操作体验

合理的视锥体裁剪 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：Three.js WebGPU - 渲染目标数组与3D渲染目标示例 -->
		<title>three.js webgpu - 渲染目标数组与3D渲染目标演示</title>
		<meta charset="UTF-8">
		<!-- 视口设置：适应移动设备，禁止用户缩放 -->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<!-- 引入Three.js示例样式表 -->
		<link type="text/css" rel="stylesheet" href="example.css">
		<style>
			/* 视口标签样式：用于标识四个不同显示区域的文本标签 */
			.viewport-label {
				position: absolute; /* 绝对定位，相对于body定位 */
				color: white; /* 白色文字 */
				background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，70%不透明度 */
				padding: 5px 10px; /* 上下5px，左右10px的内边距 */
				border-radius: 4px; /* 4像素圆角边框 */
				font-family: monospace; /* 等宽字体，使文本对齐更整齐 */
				pointer-events: none; /* 禁止鼠标事件穿透，避免干扰底层交互 */
				z-index: 1000; /* 高z-index确保标签显示在最顶层 */
				user-select: none; /* 禁止用户选择文本，防止误操作 */
			}
		</style>
	</head>

	<body>
		<!-- 页面信息区域：显示Three.js标志、标题和描述 -->
		<div id="info">
			<!-- Three.js官方网站链接，点击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>渲染目标数组与3D渲染目标演示</span>
			</div>

			<!-- 示例描述文本 -->
			<small>
				本示例展示了Three.js WebGPU中RenderTargetArray和RenderTarget3D的用法。
				左侧显示2D数组纹理相关，右侧显示3D纹理相关。
			</small>
		</div>

		<!-- 四个视口的标签，使用绝对定位分别放在四个区域 -->
		<!-- 左下角：数据数组纹理（原始数据） -->
		<div class="viewport-label" style="bottom: 2%; left: 2%;">数据数组纹理 (DataArrayTexture)</div>
		<!-- 右下角：数据3D纹理（原始数据） -->
		<div class="viewport-label" style="bottom: 2%; left: 52%;">数据3D纹理 (Data3DTexture)</div>
		<!-- 右上角：3D渲染目标（渲染结果） -->
		<div class="viewport-label" style="bottom: 52%; left: 52%;">3D渲染目标 (RenderTarget3D)</div>
		<!-- 左上角：渲染目标数组（渲染结果） -->
		<div class="viewport-label" style="bottom: 52%; left: 2%;">渲染目标数组 (RenderTargetArray)</div>

		<!-- 模块导入映射表：定义模块别名和路径，类似package.json的imports字段 -->
		<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>

		<script type="module">
			// ==================== 模块导入部分 ====================
			// 导入Three.js WebGPU核心模块
			import * as THREE from 'three/webgpu';
			
			// 导入TSL（Three.js Shader Language）着色器节点
			// vec2: 二维向量节点
			// uniform: 统一值节点（着色器常量）
			// screenUV: 屏幕UV坐标节点（0-1范围）
			// color: 颜色节点
			// texture: 纹理采样节点
			// diffuseColor: 漫反射颜色节点（通常来自材质）
			// attribute: 顶点属性节点
			// vec3: 三维向量节点
			// vec4: 四维向量节点
			import { vec2, uniform, screenUV, color, texture, diffuseColor, attribute, vec3, vec4 } from 'three/tsl';
			
			// 导入纹理辅助类：用于在3D场景中可视化纹理
			import { TextureHelper } from 'three/addons/helpers/TextureHelperGPU.js';
			
			// 导入轨道控制器：允许用户用鼠标控制相机旋转、缩放和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入解压缩库：用于解压从服务器加载的ZIP格式纹理数据
			import { unzipSync } from 'three/addons/libs/fflate.module.js';

			// ==================== 全局变量声明 ====================
			let renderer; // WebGPU渲染器实例，负责将3D场景渲染到canvas
			let views = []; // 存储四个视口对象的数组，每个视口对应屏幕的一个区域

			// ==================== View类定义 ====================
			// 视口类：管理屏幕上的一个矩形区域，包含独立的场景和相机
			class View {
				/**
				 * 构造函数
				 * @param {number} left - 视口左边界位置（归一化坐标，0-1范围）
				 * @param {number} top - 视口上边界位置（归一化坐标，0-1范围）
				 * @param {number} width - 视口宽度（归一化坐标，0-1范围）
				 * @param {number} height - 视口高度（归一化坐标，0-1范围）
				 */
				constructor( left, top, width, height ) {
					// 存储视口参数（归一化坐标）
					this.left = left;   // 左边界：0表示最左，1表示最右
					this.top = top;     // 上边界：0表示最上，1表示最下
					this.width = width; // 宽度：0-1，1表示整个屏幕宽度
					this.height = height; // 高度：0-1，1表示整个屏幕高度

					// 计算视口的实际宽高比
					// 公式：(屏幕宽度 × 视口宽度比例) ÷ (屏幕高度 × 视口高度比例)
					const aspect = ( window.innerWidth * width ) / ( window.innerHeight * height );

					// 创建透视相机
					// 参数：视野角度50度，宽高比，近裁剪面0.1单位，远裁剪面100单位
					this.camera = new THREE.PerspectiveCamera( 50, aspect, 0.1, 100 );
					this.camera.position.set( -7, 0, 10 ); // 设置相机位置：x=-7, y=0, z=10
					this.camera.lookAt( 0, 0, 0 ); // 让相机看向世界坐标系原点
					this.camera.updateProjectionMatrix(); // 更新相机的投影矩阵

					// 创建3D场景，所有3D对象（网格、灯光等）都添加到场景中
					this.scene = new THREE.Scene();

					// ==================== 使用TSL节点创建动态背景效果 ====================
					// 1. 获取屏幕UV坐标并调整Y轴方向
					// screenUV：屏幕空间UV坐标，左下角(0,0)，右上角(1,1)
					// .mul(vec2(1, -1))：乘以(1, -1)来翻转Y轴
					// .add(vec2(0, 1))：加上(0, 1)将原点移到左上角（WebGPU的纹理坐标系）
					const normalizedUV = screenUV.mul( vec2( 1, -1 ) ).add( vec2( 0, 1 ) );

					// 2. 计算当前视口的中心点在归一化屏幕坐标中的位置
					const viewportCenter = vec2(
						this.left + this.width * 0.5, // 水平中心：左边界 + 宽度的一半
						this.top + this.height * 0.5  // 垂直中心：上边界 + 高度的一半
					);

					// 3. 计算距离效果：当前像素到视口中心的距离，使用smoothstep平滑处理
					// .distance(viewportCenter)：计算当前像素到视口中心的距离
					// .smoothstep(0, 0.2)：将距离映射到0-1范围，0-0.2之间平滑过渡
					const distanceEffect = normalizedUV.distance( viewportCenter ).smoothstep( 0, 0.2 );

					// 4. 创建背景颜色效果
					// 条件选择：如果视口在屏幕上半部分(top > 0)，使用深灰色(0x212121)，否则使用浅灰色(0x616161)
					const baseColor = color( this.top > 0 ? 0x212121 : 0x616161 );
					// 背景效果：基础颜色减去距离效果的轻微影响
					// .pow(0.3)：对距离效果进行0.3次幂运算，使效果更柔和
					// .mul(0.1)：乘以0.1减小影响程度
					const backgroundEffect = baseColor.sub( distanceEffect.pow( 0.3 ).mul( 0.1 ) );

					// 5. 将背景效果节点应用到场景的背景属性
					this.scene.backgroundNode = backgroundEffect;
				}

				/**
				 * 更新视口尺寸（响应窗口大小变化时调用）
				 * @param {number} left - 新的左边界位置
				 * @param {number} top - 新的上边界位置
				 * @param {number} width - 新的宽度
				 * @param {number} height - 新的高度
				 */
				updateSize( left, top, width, height ) {
					// 更新视口参数
					this.left = left;
					this.top = top;
					this.width = width;
					this.height = height;

					// 重新计算宽高比（窗口大小可能已改变）
					const aspect = ( window.innerWidth * width ) / ( window.innerHeight * height );
					
					// 更新相机的宽高比和投影矩阵
					this.camera.aspect = aspect;
					this.camera.updateProjectionMatrix();
				}
			}

			// ==================== 初始化函数 ====================
			/**
			 * 应用程序初始化入口函数
			 * 负责创建渲染器、设置场景、加载资源等
			 */
			async function init() {
				// 1. 创建容器元素并添加到页面body
				const container = document.createElement( 'div' );
				document.body.appendChild( container );

				// 2. 创建WebGPU渲染器实例
				renderer = new THREE.WebGPURenderer();
				renderer.setPixelRatio( window.devicePixelRatio ); // 设置设备像素比，支持高DPI屏幕
				renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器尺寸为整个窗口大小
				renderer.autoClear = false; // 禁用自动清除，因为我们要分四个区域手动渲染
				renderer.setAnimationLoop( animate ); // 设置动画循环回调函数，每帧调用animate
				container.appendChild( renderer.domElement ); // 将渲染器的canvas元素添加到容器

				// 3. 异步初始化WebGPU渲染器（必须等待初始化完成）
				await renderer.init();

				// 4. 创建四个视口，将屏幕分为四个相等的矩形区域
				// 每个View对象管理一个区域的场景和相机
				views = [
					new View( 0.0, 0.0, 0.5, 0.5 ), // 左上角：第1象限，显示RenderTargetArray
					new View( 0.5, 0.0, 0.5, 0.5 ), // 右上角：第2象限，显示Data3DTexture
					new View( 0.0, 0.5, 0.5, 0.5 ), // 左下角：第3象限，显示DataArrayTexture
					new View( 0.5, 0.5, 0.5, 0.5 )  // 右下角：第4象限，显示RenderTarget3D
				];

				// 5. 为每个视口添加轨道控制器（用户交互）
				views.forEach( view => {
					// 创建轨道控制器，绑定到当前视口的相机和渲染器的canvas
					view.controls = new OrbitControls( view.camera, renderer.domElement );
					
					// 配置控制器参数
					view.controls.minDistance = 1; // 相机与目标点的最小距离（防止穿入物体内部）
					view.controls.maxDistance = 20; // 相机与目标点的最大距离（防止拉得太远）
					view.controls.minAzimuthAngle = - Math.PI / 3; // 最小水平旋转角度（-60度）
					view.controls.maxAzimuthAngle = Math.PI / 3; // 最大水平旋转角度（+60度）
					view.controls.minPolarAngle = Math.PI / 4; // 最小垂直旋转角度（45度，避免从下方看）
					view.controls.maxPolarAngle = Math.PI / 1.25; // 最大垂直旋转角度（144度，避免从正上方看）
					view.controls.enableDamping = true; // 启用阻尼效果，使相机移动更平滑
				} );

				// 6. 定义3D纹理的尺寸（这是医学CT扫描数据的尺寸）
				const size = {
					width: 256,   // 纹理宽度：256像素
					height: 256,  // 纹理高度：256像素
					depth: 109    // 纹理深度：109个切片（Z轴方向）
				};

				// 7. 加载并处理3D纹理数据
				new THREE.FileLoader() // 创建文件加载器
					.setResponseType( 'arraybuffer' ) // 设置响应类型为二进制数组缓冲区
					.load( 
						'textures/3d/head256x256x109.zip', // 纹理文件路径（压缩的医学数据）
						function ( data ) { // 加载完成后的回调函数
							// 7.1 解压缩ZIP文件
							// unzipSync：同步解压缩函数，将ArrayBuffer转换为Uint8Array后解压
							const zip = unzipSync( new Uint8Array( data ) );
							
							// 7.2 从解压结果中获取原始数据
							// 'head256x256x109'是ZIP文件中的文件名
							// 转换为Uint8Array类型，这是原始的灰度图像数据
							const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );

							// ==================== 创建Data3DTexture ====================
							// Data3DTexture是真正的3D纹理，在GPU内存中以三维数组形式存储
							const map3D = new THREE.Data3DTexture( 
								array,        // 原始数据：Uint8Array
								size.width,   // 宽度：256
								size.height,  // 高度：256
								size.depth    // 深度：109
							);
							map3D.name = 'Data3DTexture'; // 设置纹理名称，便于调试
							map3D.format = THREE.RedFormat; // 纹理格式：单通道（红色通道），因为这是灰度数据
							map3D.minFilter = THREE.LinearFilter; // 缩小时的过滤方式：线性过滤
							map3D.magFilter = THREE.LinearFilter; // 放大时的过滤方式：线性过滤
							map3D.unpackAlignment = 1; // 解包对齐方式：1字节对齐（默认）
							map3D.needsUpdate = true; // 标记纹理需要更新到GPU

							// 7.3 设置可视化时的显示深度
							// 为了性能考虑，只显示部分切片（109/20≈5个切片）
							const depth = size.depth / 20;

							// 7.4 创建Data3DTexture的可视化辅助对象（视图1：右上角）
							// TextureHelper：将纹理可视化为3D体积的辅助类
							// 参数：纹理对象，X轴大小10单位，Y轴大小10单位，Z轴大小depth单位
							const helper3D = new TextureHelper( map3D, 10, 10, depth );
							
							// 自定义着色器输出节点，增强深度显示效果
							// attribute('uvw')：获取纹理坐标的三维向量（x,y,z都在0-1范围）
							// diffuseColor.r：从纹理采样得到的红色通道值（灰度值）
							// 效果：使用Z坐标来增强深度感，越深的切片越亮
							helper3D.material.outputNode = vec4(
								vec3( diffuseColor.r.mul( attribute( 'uvw' ).z.mul( diffuseColor.r ) ) ), // RGB：灰度值 × Z坐标
								diffuseColor.r.mul( diffuseColor.a ) // Alpha：灰度值 × 原始alpha
							);
							views[ 1 ].scene.add( helper3D ); // 添加到右上角视口的场景

							// 7.5 创建RenderTarget3D（3D渲染目标）
							// RenderTarget3D：离屏渲染的3D纹理，可以渲染到其中
							const fbo3D = new THREE.RenderTarget3D( 
								size.width,   // 宽度：256
								size.height,  // 高度：256
								size.depth,   // 深度：109
								{
									depthBuffer: false, // 禁用深度缓冲区（不需要深度测试）
								}
							);
							fbo3D.texture.name = 'RenderTarget3D'; // 设置纹理名称

							// 7.6 创建RenderTarget3D的可视化辅助对象（视图3：右下角）
							const fbo3DHelper = new TextureHelper( fbo3D.texture, 10, 10, depth );
							// 简单的输出：直接显示灰度值
							fbo3DHelper.material.outputNode = vec4(
								vec3( diffuseColor.r ), // RGB：直接使用灰度值
								diffuseColor.r          // Alpha：也使用灰度值
							);
							views[ 3 ].scene.add( fbo3DHelper ); // 添加到右下角视口的场景

							// ==================== 创建DataArrayTexture ====================
							// DataArrayTexture：2D纹理数组，在GPU中以2D纹理数组形式存储
							const mapArray = new THREE.DataArrayTexture( 
								array,        // 相同的原始数据
								size.width,   // 宽度：256
								size.height,  // 高度：256
								size.depth    // 深度：109（作为数组层数）
							);
							mapArray.name = 'DataArrayTexture'; // 纹理名称
							mapArray.format = THREE.RedFormat; // 单通道格式
							mapArray.minFilter = THREE.LinearFilter; // 线性过滤
							mapArray.magFilter = THREE.LinearFilter; // 线性过滤
							mapArray.unpackAlignment = 1; // 1字节对齐
							mapArray.needsUpdate = true; // 标记需要更新

							// 7.7 创建DataArrayTexture的可视化辅助对象（视图0：左上角）
							const helperArray = new TextureHelper( mapArray, 10, 10, depth );
							// 自定义着色器输出：使用归一化的Z坐标（除以总深度）
							helperArray.material.outputNode = vec4(
								vec3( diffuseColor.r.mul( attribute( 'uvw' ).z.div( size.depth ).mul( diffuseColor.r ) ) ), // RGB：灰度值 × 归一化Z坐标
								diffuseColor.r.mul( diffuseColor.a ) // Alpha：灰度值 × 原始alpha
							);
							views[ 0 ].scene.add( helperArray ); // 添加到左上角视口的场景

							// 7.8 创建用于渲染到纹理的材质（QuadMesh材质）
							const materialQuad = new THREE.NodeMaterial();
							const uZCoord = uniform( 0 ); // 统一值节点：控制当前渲染到哪个深度层
							materialQuad.depthTest = false; // 禁用深度测试（2D渲染不需要）
							
							// 输出节点：从DataArrayTexture的特定深度层读取颜色
							// texture(mapArray)：采样DataArrayTexture
							// .depth(uZCoord)：指定采样哪个深度层（由uZCoord控制）
							// .rgb：取RGB通道
							materialQuad.outputNode = vec4( texture( mapArray ).depth( uZCoord ).rgb, 1 );
							
							// 7.9 创建RenderTargetArray（2D数组渲染目标）
							const fboArray = new THREE.RenderTarget( 
								size.width,   // 宽度：256
								size.height,  // 高度：256
								{
									depthBuffer: false, // 禁用深度缓冲区
									depth: size.depth   // 纹理数组的深度（层数）：109
								}
							);
							fboArray.texture.name = 'RenderTargetArray'; // 纹理名称

							// 7.10 创建RenderTargetArray的可视化辅助对象（视图2：左下角）
							const fboArrayHelper = new TextureHelper( fboArray.texture, 10, 10, depth );
							// 简单输出：直接显示灰度值
							fboArrayHelper.material.outputNode = vec4(
								vec3( diffuseColor.r ), // RGB：灰度值
								diffuseColor.r          // Alpha：灰度值
							);
							views[ 2 ].scene.add( fboArrayHelper ); // 添加到左下角视口的场景

							// 7.11 创建用于渲染的四边形网格
							// QuadMesh：全屏四边形，用于渲染到纹理
							const quadMesh = new THREE.QuadMesh( materialQuad );

							// ==================== WebGPU特殊处理 ====================
							// WebGPU需要显式清除3D渲染目标的所有层（与WebGL不同）
							if ( renderer.backend.isWebGPUBackend ) {
								// 创建清除用的材质：输出黑色(0,0,0,0)
								const materialClear = new THREE.NodeMaterial();
								materialClear.outputNode = vec4( 0 );
								const clearQuadMesh = new THREE.QuadMesh( materialClear );
								
								// 遍历所有深度层，逐层清除
								for ( let i = 0; i < size.depth; i ++ ) {
									renderer.setRenderTarget( fbo3D, i ); // 设置当前渲染目标层
									clearQuadMesh.render( renderer );    // 渲染清除四边形
								}
							}

							// ==================== 逐层渲染循环 ====================
							let j = 0; // 当前正在渲染的深度层索引（0-108）

							/**
							 * 逐层渲染函数：将DataArrayTexture的每一层渲染到两个渲染目标
							 */
							const loop = () => {
								// 检查是否已完成所有层的渲染
								if ( j === size.depth ) {
									clearInterval( interval ); // 清除定时器，停止渲染
									return;
								}

								// 为离屏渲染设置视口和裁剪区域
								// 注意：这里是为渲染到纹理设置，不是为屏幕视口
								renderer.setViewport( 0, 0, size.width, size.height ); // 设置视口为纹理大小
								renderer.setScissor( 0, 0, size.width, size.height ); // 设置裁剪区域
								renderer.setScissorTest( false ); // 禁用裁剪测试（渲染整个纹理）

								// 更新要渲染的深度层
								uZCoord.value = j;

								// 渲染到RenderTargetArray（2D数组渲染目标）的第j层
								renderer.setRenderTarget( fboArray, j ); // 设置渲染目标和层索引
								renderer.clear(); // 清除当前渲染目标
								quadMesh.render( renderer ); // 渲染四边形（将DataArrayTexture的第j层复制过来）

								// 渲染到RenderTarget3D（3D渲染目标）的第j层
								renderer.setRenderTarget( fbo3D, j ); // 切换到3D渲染目标的第j层
								renderer.clear(); // 清除当前渲染目标
								quadMesh.render( renderer ); // 再次渲染四边形（复制到3D纹理）

								// 恢复默认渲染目标（屏幕）
								renderer.setRenderTarget( null );

								// 更新层索引：循环进行，完成所有层后从0重新开始
								j = ( j + 1 ) % size.depth;
							};

							// 设置定时器，每50毫秒渲染一层（慢速渲染，便于观察过程）
							const interval = setInterval( loop, 50 );

							// 立即执行一次初始渲染
							loop();
						}
					);

				// 8. 添加窗口大小变化事件监听器
				window.addEventListener( 'resize', onWindowResize );
			}

			// ==================== 窗口大小变化处理函数 ====================
			/**
			 * 处理浏览器窗口大小变化事件
			 * 重新调整渲染器和所有视口的尺寸
			 */
			function onWindowResize() {
				// 获取当前窗口尺寸
				const width = window.innerWidth;
				const height = window.innerHeight;

				// 更新渲染器尺寸
				renderer.setSize( width, height );

				// 更新所有视口的尺寸和相机参数
				views.forEach( view => {
					view.updateSize(
						view.left,    // 左边界位置不变
						view.top,     // 上边界位置不变
						view.width,   // 宽度比例不变
						view.height   // 高度比例不变
					);
				} );
			}

			// ==================== 动画循环函数 ====================
			/**
			 * 每帧调用的动画循环函数
			 * 负责更新控制器状态并渲染四个视口
			 */
			function animate() {
				// 遍历所有视口
				views.forEach( view => {
					// 更新轨道控制器状态（处理阻尼等效果）
					view.controls.update();

					// 计算当前视口在屏幕上的实际像素坐标
					// 注意：WebGPU坐标系原点在左下角，而CSS坐标系原点在左上角
					const left = Math.floor( view.left * window.innerWidth ); // 左边界像素坐标
					const bottom = Math.floor( ( 1 - view.top - view.height ) * window.innerHeight ); // 下边界像素坐标（WebGPU使用底部为原点）
					const width = Math.floor( view.width * window.innerWidth ); // 视口宽度像素
					const height = Math.floor( view.height * window.innerHeight ); // 视口高度像素

					// 设置当前视口的渲染区域
					renderer.setViewport( left, bottom, width, height ); // 设置视口（渲染区域）
					renderer.setScissor( left, bottom, width, height ); // 设置裁剪区域（与视口相同）
					renderer.setScissorTest( true ); // 启用裁剪测试，确保渲染不超出视口范围

					// 清除当前视口（清除颜色缓冲区和深度缓冲区）
					renderer.clear();
					
					// 渲染当前视口的场景
					renderer.render( view.scene, view.camera );
				} );
			}

			// ==================== 启动应用程序 ====================
			// 调用初始化函数，开始整个应用程序
			init();
		</script>
	</body>
</html>