<!-- 代码功能与技术点详解
一、整体功能概述
这是一个基于Three.js的WebGL技术演示，展示了2D压缩纹理数组的动态层更新技术。核心功能是允许用户实时选择并复制不同纹理层的数据到纹理数组中，并在3D场景中动态显示结果。

主要演示场景：
加载了宫崎骏电影《千与千寻》的动画帧序列（KTX2压缩格式）

创建了一个包含3个垂直排列平面的3D场景

每个平面显示纹理数组的不同层

用户可以通过控制面板动态更新任意层的纹理内容

二、核心技术点详解
1. 纹理数组技术
javascript
// 创建压缩纹理数组
const textureArray = new THREE.CompressedArrayTexture([...], width, height, depth, format, type);
概念：纹理数组是GPU中存储多个相同尺寸纹理的高效方式

优势：

减少状态切换：一次绑定可以访问所有层

性能优化：在着色器中通过索引直接访问不同层

内存连续：所有层数据在内存中连续存储

应用：适合纹理动画、图集、多通道渲染等场景

2. 实例化渲染
javascript
const mesh = new THREE.InstancedMesh(geometry, material, 3);
原理：单个Draw Call绘制多个相同几何体的实例

性能优势：

大幅减少Draw Call数量

降低CPU到GPU的数据传输

特别适合大量重复物体的渲染

实现：

javascript
// 实例索引属性
const instancedIndexAttribute = new THREE.InstancedBufferAttribute(
  new Uint16Array([0, 1, 2]), 1, false, 1
);
3. KTX2压缩纹理
javascript
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('jsm/libs/basis/');
const spiritedaway = await ktx2Loader.loadAsync('textures/spiritedaway.ktx2');
格式特点：

基于Basis Universal的GPU压缩纹理

支持多种压缩格式（ETC1S/UASTC）

运行时转码为GPU原生格式

优势：

大幅减少纹理内存占用（90%+压缩率）

减少带宽消耗

支持纹理数组和Mipmap链

4. 自定义着色器
glsl
// 顶点着色器：计算实例位置和传递索引
flat out uint diffuseIndex;  // flat关键字：不插值传递

// 片段着色器：根据索引采样对应纹理层
outColor = texture(diffuse, vec3(vUv, diffuseIndex));
关键技术：

flat关键字：确保整数索引在片段间不插值

三维纹理坐标：(u, v, layerIndex)访问纹理数组

实例化属性传递：通过instancedIndex区分不同实例

5. 动态纹理更新
javascript
// 动态复制纹理数据
textureArray.mipmaps[0].data.set(
  sourceData.subarray(start, end),
  destOffset
);

// 标记层更新
textureArray.addLayerUpdate(destLayer);
textureArray.needsUpdate = true;
优化技术：

addLayerUpdate()：只更新指定层，避免全纹理上传

子数组视图：使用subarray()避免数据复制

按需更新：仅当数据变化时更新GPU纹理

6. GUI交互系统
javascript
const gui = new GUI();
gui.add(formData, 'srcLayer', 0, totalLayers-1, 1);
gui.add(formData, 'destLayer', 0, 2, 1);
gui.add(formData, 'transfer');
功能：

源层选择：从原始动画帧中选择

目标层选择：选择要更新的纹理数组层

传输控制：触发纹理数据复制

三、数据流程分析
text
1. 资源加载阶段
   └─ 加载KTX2压缩纹理 → 包含多个动画帧
   
2. 纹理初始化阶段
   └─ 创建空白纹理数组(3层) → 复制初始数据 → 上传到GPU
   
3. 渲染阶段
   └─ 实例化网格(3个实例) → 着色器采样对应纹理层 → 屏幕显示
   
4. 交互更新阶段
   └─ 用户选择源/目标层 → 复制纹理数据 → 标记层更新 → GPU部分更新 → 重新渲染
四、性能优化技术
1. GPU内存优化
使用压缩纹理减少显存占用

纹理数组减少状态切换开销

实例化渲染减少Draw Call

2. 更新优化
按需更新：仅更新变化的纹理层

部分上传：使用addLayerUpdate()避免全纹理上传

零复制：使用TypedArray视图避免数据复制

3. 渲染优化
单一材质和几何体实例化

最小化Uniform更新

高效的着色器设计

五、应用场景扩展
1. 游戏开发
角色动画纹理序列

地形纹理混合

粒子系统纹理变化

2. 数据可视化
时间序列数据展示

多维度数据切换

实时数据更新

3. 创意工具
纹理动画编辑器

图层混合工具

实时滤镜系统

4. 教育演示
纹理技术教学

GPU内存管理演示

实时渲染技术展示

六、技术挑战与解决方案
挑战	解决方案
纹理内存占用大	使用KTX2压缩格式
更新效率低	纹理数组 + 部分更新
渲染性能差	实例化渲染 + 单一Draw Call
实时交互延迟	异步加载 + 增量更新
七、现代WebGL最佳实践
使用现代纹理格式：KTX2/Basis替代传统PNG/JPG

利用实例化渲染：减少大量重复物体的开销

实现部分更新：避免全纹理上传的性能损耗

提供实时交互：增强用户体验和教育效果

优化移动端：考虑内存限制和性能差异 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面元数据 -->
		<!-- 设置文档类型为HTML5 -->
		<!DOCTYPE html>
		<!-- 设置页面语言为中文 -->
		<html lang="zh-CN">
		
		<!-- 页面标题：显示Three.js技术演示的名称和内容描述 -->
		<title>Three.js WebGL技术演示 - 2D压缩纹理数组层动态更新</title>
		
		<!-- 字符编码设置：使用UTF-8编码支持中文字符 -->
		<meta charset="UTF-8">
		
		<!-- 视口设置：针对移动设备优化，禁用缩放功能 -->
		<!-- width=device-width: 宽度等于设备宽度 -->
		<!-- user-scalable=no: 禁止用户缩放 -->
		<!-- minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0 -->
		<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="main.css">
	</head>
	
	<!-- ==================== 顶点着色器（Vertex Shader） ==================== -->
	<!-- 
		顶点着色器作用：处理每个顶点的位置和属性
		执行频率：每个顶点执行一次
		主要任务：计算顶点最终位置、准备传递给片段着色器的数据
	-->
	<script id="vs" type="x-shader/x-vertex">
	// uniform变量：由CPU传递给GPU的常量数据，在同一个绘制调用中所有顶点共享
	// size变量：存储每个实例平面的大小（宽度和高度），类型为vec2（二维向量）
	uniform vec2 size;
	
	// attribute变量：每个顶点特有的属性数据
	// instancedIndex变量：实例索引，用于区分不同的实例（网格实例）
	// uint类型：无符号整数，确保索引值为非负整数
	attribute uint instancedIndex;
	
	// flat out变量：传递给片段着色器的数据，flat关键字表示不进行插值
	// 在顶点着色器中计算的值直接传递给片段着色器，不进行平滑过渡
	// diffuseIndex变量：纹理数组的层索引，告诉片段着色器应该采样哪一层纹理
	flat out uint diffuseIndex;
	
	// out变量：传递给片段着色器的数据，会进行插值计算
	// vUv变量：纹理坐标（UV坐标），用于纹理采样
	// vec2类型：二维向量，包含u和v两个分量
	out vec2 vUv;

	// 主函数：顶点着色器的入口点
	void main() {
		// 计算实例的位置偏移量
		// 目标：让多个实例在Y轴上垂直排列
		// vec3(0, float(instancedIndex) * size.y - size.y, 0):
		//   - X和Z方向偏移为0（水平方向不偏移）
		//   - Y方向偏移：实例索引 * 平面高度 - 平面高度
		//   - 这样第0个实例在Y=0，第1个实例在Y=planeHeight，第2个实例在Y=2*planeHeight
		//   - 减去size.y是为了让实例在中心位置对齐
		vec3 translation = vec3(0, float(instancedIndex) * size.y - size.y, 0);
		
		// 计算顶点最终位置（裁剪空间坐标）
		// 计算步骤：
		// 1. position + translation: 原始顶点位置加上实例偏移
		// 2. vec4(...): 转换为齐次坐标（4维向量）
		// 3. modelViewMatrix * ...: 应用模型视图变换（世界空间->视图空间）
		// 4. projectionMatrix * ...: 应用投影变换（视图空间->裁剪空间）
		// gl_Position: GLSL内置变量，存储顶点在裁剪空间的位置
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position + translation, 1.0 );

		// 将实例索引传递给片段着色器
		// 这样每个实例的片段都知道自己属于哪个实例，从而采样对应的纹理层
		diffuseIndex = instancedIndex;

		// 将顶点坐标转换为UV纹理坐标
		// 原始顶点坐标范围：[-planeWidth/2, planeWidth/2] 和 [-planeHeight/2, planeHeight/2]
		// 转换步骤：
		// 1. position.xy / size: 将坐标归一化到[-0.5, 0.5]范围
		// 2. + 0.5: 将范围转换到[0, 1]，得到标准的UV坐标
		vUv.xy = position.xy / size + 0.5;
		
		// 反转Y轴坐标
		// 原因：OpenGL的纹理坐标系原点在左下角，而很多图像数据原点在左上角
		// 操作：1.0 - vUv.y 将Y坐标上下翻转
		vUv.y = 1.0 - vUv.y;
	}
	</script>

	<!-- ==================== 片段着色器（Fragment Shader） ==================== -->
	<!-- 
		片段着色器作用：处理每个像素的颜色
		执行频率：每个像素执行一次
		主要任务：计算像素最终颜色
	-->
	<script id="fs" type="x-shader/x-fragment">
	// 精度限定符：设置浮点数、整数和采样器的计算精度
	// highp: 高精度，用于需要高精度的计算，但可能会降低性能
	// 这些设置确保了在不同设备上的一致性
	precision highp float;
	precision highp int;
	precision highp sampler2DArray;

	// uniform变量：纹理数组采样器
	// sampler2DArray类型：2D纹理数组采样器，可以存储多个2D纹理
	// diffuse变量：包含了所有层的纹理数据
	uniform sampler2DArray diffuse;
	
	// in变量：从顶点着色器传递过来的数据（经过插值）
	// vUv变量：插值后的纹理坐标
	in vec2 vUv;
	
	// flat in变量：从顶点着色器传递过来的数据（不进行插值）
	// diffuseIndex变量：整数类型的纹理层索引
	// flat关键字确保同一个图元（三角形）内所有片段使用相同的索引值
	flat in uint diffuseIndex;

	// 输出变量：片段着色器的输出颜色
	// outColor变量：RGBA颜色值，将写入帧缓冲区
	out vec4 outColor;

	// 主函数：片段着色器的入口点
	void main() {
		// 纹理采样操作
		// texture()函数：从纹理中采样颜色
		// 参数说明：
		//   - diffuse: 纹理数组采样器
		//   - vec3(vUv, diffuseIndex): 三维纹理坐标
		//     - vUv.xy: 在纹理层内的二维坐标
		//     - diffuseIndex: 纹理层索引（第三维坐标）
		// 返回值：vec4类型的RGBA颜色值
		outColor = texture( diffuse, vec3( vUv, diffuseIndex ) );
		
		// 实际执行过程：
		// 1. 根据diffuseIndex选择纹理数组中的某一层
		// 2. 在该层纹理中，根据vUv坐标采样颜色
		// 3. 如果vUv超出[0,1]范围，会根据纹理包装模式处理
	}
	</script>
	
	<body>
		<!-- 页面信息展示区域 -->
		<!-- id="info": 用于CSS样式和JavaScript操作的标识 -->
		<div id="info">
			<!-- 
				演示标题和描述：
				1. Three.js链接：指向Three.js官方网站
				2. 技术描述：说明本演示的核心技术
				3. 内容来源：说明使用的素材来源
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> - 2D压缩纹理数组层动态更新技术演示<br />
			<!-- 说明演示内容的来源 -->
			动画素材来源：宫崎骏电影《千与千寻》循环片段<br />
			<!-- 说明版权信息 -->
			版权所有：<a href="https://www.ghibli.jp/" target="_blank" rel="noopener">吉卜力工作室</a><br />
			<!-- 操作说明 -->
			操作说明：使用下方控制面板选择源图层和目标图层，点击"传输"按钮更新纹理
		</div>

		<!-- ==================== 模块导入映射（Import Maps） ==================== -->
		<!-- 
			Import Maps作用：定义JavaScript模块的导入路径映射
			允许浏览器在导入模块时将指定的标识符映射到实际的URL
			这是ES模块的标准特性，用于简化模块导入路径
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- ==================== 主JavaScript模块 ==================== -->
		<!-- 
			type="module": 声明为ES6模块，支持import/export语法
			模块特性：有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ========== 导入依赖模块 ==========
			// 导入Three.js核心库的所有导出，命名为THREE
			// THREE对象包含Three.js的所有核心类和函数
			import * as THREE from 'three';

			// 导入GUI库：用于创建交互式控制面板
			// GUI对象提供创建滑块、按钮等UI控件的方法
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// 导入KTX2加载器：用于加载KTX2格式的压缩纹理
			// KTX2是一种高效的纹理压缩格式，支持GPU直接解码
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

			// ========== 全局变量声明 ==========
			// 这些变量在整个模块中共享，存储Three.js的核心对象
			let camera;      // 相机对象：定义观察者的视角
			let scene;       // 场景对象：包含所有要渲染的物体
			let mesh;        // 网格对象：要渲染的3D物体
			let renderer;    // 渲染器对象：负责将3D场景渲染到2D画布

			// 常量定义：平面几何体的尺寸
			// 这些值决定了每个实例（图像）在3D空间中的大小
			const planeWidth = 20;    // 平面宽度（X轴方向）
			const planeHeight = 10;   // 平面高度（Y轴方向）

			// ========== 初始化函数调用 ==========
			// 页面加载完成后立即执行初始化
			// init函数是异步的，使用async/await处理异步操作
			init();

			// ========== 主初始化函数 ==========
			// async关键字：声明这是一个异步函数，可以使用await关键字
			// 异步函数不会阻塞主线程，适合加载资源等耗时操作
			async function init() {
				// ********** 第一步：创建DOM容器 **********
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中
				// 这样渲染器生成的canvas元素就会显示在页面上
				document.body.appendChild( container );

				// ********** 第二步：创建相机 **********
				// 创建透视相机（PerspectiveCamera）：
				// - 模拟人眼的透视效果，近大远小
				// - 参数说明：
				//   1. fov (45): 视野角度（单位：度），越大看到的内容越多
				//   2. aspect: 纵横比（宽度/高度），初始使用窗口比例
				//   3. near (0.1): 近裁剪面距离，比这个近的物体不显示
				//   4. far (2000): 远裁剪面距离，比这个远的物体不显示
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
				
				// 设置相机位置：
				// - x: 0（水平方向居中）
				// - y: 0（垂直方向居中）
				// - z: 70（沿着Z轴向后移动70个单位）
				// 这样相机就在场景的前方，可以观察到场景中的物体
				camera.position.z = 70;

				// ********** 第三步：创建场景 **********
				// 场景是所有3D物体的容器，相当于一个虚拟的3D世界
				// THREE.Scene()创建一个空的场景对象
				scene = new THREE.Scene();
				// 场景中可以添加：网格、灯光、相机等对象
				// 场景本身不显示，需要通过渲染器渲染到canvas

				// ********** 第四步：创建和配置渲染器 **********
				// 创建WebGL渲染器：
				// - 使用WebGL API进行硬件加速的3D渲染
				// - 参数{ antialias: true }: 开启抗锯齿，使边缘更平滑
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				
				// 设置设备像素比：
				// - window.devicePixelRatio: 设备物理像素与CSS像素的比率
				// - 在高DPI屏幕（如Retina屏幕）上，这个值可能为2或3
				// - 设置这个值可以让渲染更清晰，避免模糊
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸：
				// - 使用整个浏览器窗口的大小
				// - window.innerWidth/innerHeight: 浏览器窗口的内部尺寸
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 将渲染器的DOM元素（canvas）添加到容器中
				// renderer.domElement: 渲染器自动创建的canvas元素
				container.appendChild( renderer.domElement );

				// ********** 第五步：配置KTX2加载器 **********
				// 创建KTX2加载器实例：
				// KTX2是一种高效的纹理压缩格式，支持Basis Universal压缩
				const ktx2Loader = new KTX2Loader();
				
				// 设置转码器路径：
				// Basis Universal转码器用于在GPU上解压KTX2纹理
				// 这个路径指向包含转码器JavaScript文件的目录
				ktx2Loader.setTranscoderPath( 'jsm/libs/basis/' );
				
				// 检测渲染器支持：
				// 检查当前WebGL渲染器是否支持KTX2格式
				// 如果不支持，加载器可能会选择其他格式或使用软件解码
				ktx2Loader.detectSupport( renderer );

				// ********** 第六步：加载KTX2纹理 **********
				// 异步加载KTX2纹理文件：
				// - await关键字：等待异步操作完成，代码在此暂停但不阻塞
				// - loadAsync()方法：返回Promise，加载完成后解析为纹理对象
				// - 'textures/spiritedaway.ktx2': 纹理文件路径
				// 这个文件包含《千与千寻》动画的多个帧，每一帧是一个纹理层
				const spiritedaway = await ktx2Loader.loadAsync( 'textures/spiritedaway.ktx2' );
				// 加载完成后，spiritedaway对象包含：
				// - image: 纹理图像数据（包含宽度、高度、深度等信息）
				// - mipmaps: 多级渐远纹理链（不同尺寸的纹理，用于远处渲染）
				// - format: 纹理格式（如RGB、RGBA等）
				// - type: 数据类型（如UNSIGNED_BYTE）

				// ********** 第七步：计算单层纹理数据大小 **********
				// 使用Three.js工具函数计算单个纹理层所需的字节数
				// 这个值用于后续创建纹理数组和复制数据
				const layerByteLength = THREE.TextureUtils.getByteLength(
					spiritedaway.image.width,    // 纹理宽度（像素）
					spiritedaway.image.height,   // 纹理高度（像素）
					spiritedaway.format,         // 纹理格式（如GL_RGB、GL_RGBA）
					spiritedaway.type,           // 数据类型（如GL_UNSIGNED_BYTE）
				);
				// 计算原理：width * height * 每个像素的字节数
				// 例如：512x512的RGBA纹理，每个像素4字节，总大小=512*512*4=1MB

				// ********** 第八步：创建压缩纹理数组 **********
				// CompressedArrayTexture: 压缩纹理数组，可以存储多个压缩纹理层
				// 参数说明：
				// 1. 数组参数：包含纹理数据的数组，这里只创建一个初始数据对象
				// 2. width: 纹理宽度
				// 3. height: 纹理高度
				// 4. depth: 纹理层数（这里是3层）
				// 5. format: 纹理格式
				// 6. type: 数据类型
				const textureArray = new THREE.CompressedArrayTexture( [
					{
						// 创建初始数据：3层的空白纹理数据
						// new Uint8Array(layerByteLength * 3): 创建足够存储3层纹理的数组
						// 所有字节初始化为0（黑色透明纹理）
						data: new Uint8Array( layerByteLength * 3 ),
						// 纹理尺寸与源纹理相同
						width: spiritedaway.image.width,
						height: spiritedaway.image.height,
					}
				], spiritedaway.image.width, spiritedaway.image.height, 3, spiritedaway.format, spiritedaway.type );
				// textureArray对象特性：
				// - 可以像单个纹理一样使用，但包含多层数据
				// - 在着色器中可以通过第三维坐标访问不同层
				// - 支持动态更新某一层的数据

				// ********** 第九步：创建GUI控制面板 **********
				// formData对象：存储GUI控件的状态和操作函数
				const formData = {
					// 源图层索引：选择从哪个源纹理层复制数据
					// 初始值为0（第一层）
					srcLayer: 0,
					
					// 目标图层索引：选择复制到纹理数组的哪一层
					// 初始值为0（第一层）
					destLayer: 0,
					
					// 传输函数：执行纹理数据复制操作
					// 当用户在GUI中点击"传输"按钮时调用此函数
					transfer() {
						// 计算单层纹理数据的元素数量（不是字节数）
						// 因为subarray()方法需要元素索引，而不是字节索引
						// BYTES_PER_ELEMENT: TypedArray每个元素的字节数
						// 例如：Uint8Array的BYTES_PER_ELEMENT=1
						//       Uint16Array的BYTES_PER_ELEMENT=2
						const layerElementLength = layerByteLength / spiritedaway.mipmaps[ 0 ].data.BYTES_PER_ELEMENT;
						
						// 复制纹理数据：将源纹理的指定层复制到目标纹理数组的指定层
						// 操作步骤：
						// 1. 从源纹理(spiritedaway)的mipmap 0（原始尺寸纹理）中提取指定层的数据
						// 2. 将提取的数据复制到纹理数组(textureArray)的指定层
						textureArray.mipmaps[ 0 ].data.set(
							// 源数据：使用subarray()提取源纹理指定层的数据
							// subarray(start, end): 返回数组的一部分视图，不复制数据
							spiritedaway.mipmaps[ 0 ].data.subarray(
								// 起始索引：层元素长度 × 源图层索引
								// % spiritedaway.image.depth: 确保索引不越界
								layerElementLength * ( formData.srcLayer % spiritedaway.image.depth ),
								// 结束索引：起始索引 + 层元素长度
								layerElementLength * ( ( formData.srcLayer % spiritedaway.image.depth ) + 1 ),
							),
							// 目标位置：纹理数组中目标层的起始位置
							// layerByteLength * formData.destLayer: 字节偏移量
							layerByteLength * formData.destLayer,
						);
						
						// 标记纹理数组的特定层需要更新
						// 这个优化告诉GPU只更新指定层的数据，而不是整个纹理数组
						textureArray.addLayerUpdate( formData.destLayer );
						
						// 设置纹理需要更新标志
						// 在下一帧渲染时，Three.js会将新的纹理数据上传到GPU
						textureArray.needsUpdate = true;

						// 手动触发一次渲染
						// 更新纹理后立即重新渲染场景，查看效果
						renderer.render( scene, camera );
					},
				};

				// 创建GUI实例
				// GUI库会创建一个可拖拽的控制面板
				const gui = new GUI();
				
				// 添加源图层控制滑块：
				// 参数说明：
				// 1. formData: 控制的目标对象
				// 2. 'srcLayer': 控制的属性名
				// 3. 最小值: 0
				// 4. 最大值: spiritedaway.image.depth - 1（源纹理的总层数-1）
				// 5. 步长: 1（整数变化）
				gui.add( formData, 'srcLayer', 0, spiritedaway.image.depth - 1, 1 );
				
				// 添加目标图层控制滑块：
				// 最大值: textureArray.image.depth - 1（纹理数组的总层数-1）
				gui.add( formData, 'destLayer', 0, textureArray.image.depth - 1, 1 );
				
				// 添加传输按钮：
				// 当用户点击按钮时，调用formData.transfer()函数
				gui.add( formData, 'transfer' ).name('传输纹理数据');

				// ********** 第十步：创建自定义着色器材质 **********
				// 使用ShaderMaterial创建自定义材质
				// 这种材质允许我们完全控制顶点和片段着色器
				const material = new THREE.ShaderMaterial( {
					// uniforms: 从JavaScript传递到着色器的常量数据
					uniforms: {
						// diffuse: 纹理数组uniform
						// value: 初始值，设置为之前创建的纹理数组
						diffuse: { value: textureArray },
						
						// size: 平面尺寸uniform
						// value: 二维向量，包含平面的宽度和高度
						size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
					},
					
					// 顶点着色器代码
					// 从页面中获取script标签的内容
					// trim(): 去除字符串两端的空白字符
					vertexShader: document.getElementById( 'vs' ).textContent.trim(),
					
					// 片段着色器代码
					fragmentShader: document.getElementById( 'fs' ).textContent.trim(),
					
					// GLSL版本：指定使用GLSL 3.0
					// GLSL3支持一些现代特性，如in/out关键字代替varying
					glslVersion: THREE.GLSL3
				} );

				// ********** 第十一步：创建实例化几何体 **********
				// InstancedBufferGeometry: 实例化缓冲几何体
				// 支持一次绘制多个实例（网格），每个实例可以有不同的变换
				const geometry = new THREE.InstancedBufferGeometry();
				
				// 从基础的平面几何体复制数据
				// 这样可以重用平面的顶点、法线、UV等属性
				geometry.copy( new THREE.PlaneGeometry( planeWidth, planeHeight ) );
				
				// 设置实例数量
				// 这里设置为3，表示要绘制3个相同的平面
				geometry.instanceCount = 3;

				// 创建实例索引属性
				// InstancedBufferAttribute: 实例化缓冲属性
				// 每个实例有不同的属性值，而不是每个顶点
				const instancedIndexAttribute = new THREE.InstancedBufferAttribute(
					// 数据数组：包含每个实例的索引值
					// Uint16Array: 16位无符号整数数组
					// [0, 1, 2]: 三个实例的索引分别为0、1、2
					new Uint16Array( [ 0, 1, 2 ] ),
					1,        // 每个索引的大小（分量数），这里是1个分量
					false,    // 是否标准化（normalized），这里不需要
					1         // 实例化步幅（instancing stride）
				);
				
				// 设置GPU数据类型为整型
				// 这告诉WebGL这个属性应该作为整数传递到着色器
				// 在着色器中我们使用uint类型接收
				instancedIndexAttribute.gpuType = THREE.IntType;
				
				// 将实例索引属性添加到几何体
				// 'instancedIndex': 属性名，对应着色器中的attribute变量名
				geometry.setAttribute( 'instancedIndex', instancedIndexAttribute );

				// ********** 第十二步：创建实例化网格 **********
				// InstancedMesh: 实例化网格对象
				// 参数说明：
				// 1. geometry: 几何体（所有实例共享）
				// 2. material: 材质（所有实例共享）
				// 3. 3: 实例数量
				mesh = new THREE.InstancedMesh( geometry, material, 3 );
				
				// 将网格添加到场景中
				// 现在场景中包含了3个实例化的平面
				scene.add( mesh );

				// ********** 第十三步：添加窗口大小变化监听器 **********
				// 当用户调整浏览器窗口大小时，重新调整渲染
				window.addEventListener( 'resize', onWindowResize );

				// ********** 第十四步：初始化纹理数组数据 **********
				// 将源纹理的所有层数据复制到纹理数组的初始3层
				// 这是首次渲染前的数据初始化
				textureArray.mipmaps[ 0 ].data.set(
					// 提取源纹理的前N层数据，N为纹理数组的容量
					// subarray(0, textureArray.mipmaps[0].data.length):
					// 提取足够填充纹理数组所有层的数据
					// 如果源纹理有10层，但纹理数组只有3层，则只复制前3层
					spiritedaway.mipmaps[ 0 ].data.subarray( 0, textureArray.mipmaps[ 0 ].data.length )
				);
				
				// 标记纹理需要更新
				// 在下一次渲染时，Three.js会将数据上传到GPU
				textureArray.needsUpdate = true;
				
				// 执行首次渲染
				// 此时场景中有3个平面，分别显示纹理数组的第0、1、2层
				renderer.render( scene, camera );
			}

			// ========== 窗口大小变化处理函数 ==========
			// 当浏览器窗口大小发生变化时自动调用
			function onWindowResize() {
				// 更新渲染器尺寸
				// 使渲染的画布大小与窗口大小保持一致
				renderer.setSize( window.innerWidth, window.innerHeight );

				// 更新相机的纵横比（aspect ratio）
				// 窗口大小改变后，宽高比也会变化
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机的投影矩阵
				// 当相机参数改变后，必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 重新渲染场景
				// 使用新的窗口尺寸和相机参数渲染
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>