<!-- 代码功能和技术点详解
一、代码功能概述
这是一个基于Three.js的WebGL 3D应用，主要展示2D压缩纹理数组技术在动画播放中的应用。

核心功能：
纹理数组加载与显示：加载包含多个纹理层的KTX2压缩文件，将其作为2D纹理数组在3D平面上显示

动态纹理切换：通过着色器控制，实现纹理层（深度）的动态切换，创建动画效果

高性能动画播放：使用纹理数组技术高效播放序列帧动画，避免传统帧动画的纹理切换开销

具体实现：
加载一个包含《千与千寻》电影片段的纹理数组文件（spiritedaway.ktx2）

在3D平面上以每秒切换5层的速度播放动画

提供简单的亮度增强效果

支持响应式布局，自适应窗口大小变化

集成性能监控面板

二、主要技术点
1. 2D纹理数组技术
javascript
// 着色器中的关键定义
precision highp sampler2DArray;  // 声明2D纹理数组采样器
uniform sampler2DArray diffuse;  // 纹理数组uniform变量
vec4 color = texture(diffuse, vec3(vUv, depth));  // 三维纹理采样
概念：单个纹理对象包含多个相同尺寸的2D纹理层

优势：

高效切换：切换纹理层只需修改一个整数值，无需重新绑定纹理

内存连续：所有纹理层在内存中连续存储，提高缓存命中率

减少API调用：避免频繁的纹理绑定操作

2. KTX2/Basis Universal压缩技术
javascript
const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('jsm/libs/basis/');
ktx2Loader.detectSupport(renderer);
格式说明：KTX2是Khronos Group的下一代纹理格式

核心技术：

超级压缩：相比传统格式减少70-90%的纹理大小

GPU友好：压缩格式可直接在GPU上解压，减少内存带宽

格式自适应：根据GPU支持情况自动选择最优压缩格式

多MIP层级：支持自动生成多级纹理细节

3. 自定义着色器编程
glsl
// 顶点着色器：坐标变换和UV计算
vUv.xy = position.xy / size + 0.5;  // 坐标归一化
vUv.y = 1.0 - vUv.y;  // Y轴翻转

// 片元着色器：纹理采样和颜色处理
vec4 color = texture(diffuse, vec3(vUv, depth));
outColor = vec4(color.rgb + .2, 1.0);  // 亮度增强
GLSL 3.0：使用现代GLSL语法（in/out代替attribute/varying）

UV计算：将几何坐标转换为纹理坐标

深度索引：使用第三维坐标depth选择纹理层

4. 动画时间控制
javascript
const delta = clock.getDelta() * 10;  // 时间增量
depthStep += delta;  // 累积时间
const value = depthStep % 5;  // 0-4循环
mesh.material.uniforms['depth'].value = value;  // 更新着色器参数
时间驱动：基于实际时间而非帧率，确保动画速度一致

模运算循环：% 5实现5个纹理层的循环播放

增量控制：*10调节动画播放速度

5. Three.js核心架构
javascript
// Three.js标准工作流程
camera = new THREE.PerspectiveCamera(...);  // 创建相机
scene = new THREE.Scene();  // 创建场景
renderer = new THREE.WebGLRenderer();  // 创建渲染器
geometry = new THREE.PlaneGeometry(...);  // 创建几何体
material = new THREE.ShaderMaterial(...);  // 创建材质
mesh = new THREE.Mesh(geometry, material);  // 创建网格
scene.add(mesh);  // 添加到场景
renderer.render(scene, camera);  // 渲染
6. 性能优化技术
设备像素比适配：setPixelRatio(window.devicePixelRatio)支持高DPI屏幕

响应式渲染：窗口大小变化时自动调整渲染尺寸

性能监控：集成Stats.js显示实时性能数据

动画循环：使用setAnimationLoop优化渲染调度

7. 现代JavaScript模块系统
javascript
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
ES6模块：使用标准的import/export语法

导入映射：通过importmap简化模块路径

模块化架构：代码分离，便于维护和扩展

8. 纹理数组动画的优势
传统帧动画	纹理数组动画
需要频繁切换纹理	单次纹理绑定
多个纹理对象	单个纹理对象
GPU状态切换频繁	状态切换最小化
适合少量帧	适合大量序列帧
内存碎片化	内存连续分配
三、应用场景
序列帧动画播放：角色动画、特效动画、UI动画

纹理图集替代：比传统纹理图集更高效的管理方式

多状态材质：同一物体不同状态（如损坏程度、季节变化）

视频纹理：将视频帧预加载为纹理数组

体素渲染：3D纹理的2D模拟，用于简单体积效果

四、技术亮点总结
性能高效：纹理数组减少GPU状态切换，KTX2压缩减少内存占用

代码简洁：通过自定义着色器实现复杂效果，逻辑清晰

跨平台：Basis Universal支持所有主流GPU平台

响应式：完美适配不同屏幕尺寸和设备

易于扩展：模块化架构便于添加新功能 -->


<!DOCTYPE html>
<!-- 
  这是一个使用Three.js库创建的WebGL应用，用于展示2D压缩纹理数组技术
  纹理数组是一种高效存储多个纹理的方式，所有纹理共享相同的格式和尺寸
  本例使用KTX2压缩格式来减少纹理的内存占用和加载时间
-->
<html lang="en">
	<head>
		<!-- 
		  页面标题：描述页面核心功能
		  注意：HTML文档的lang属性为"en"，但为了演示，我们将部分内容改为中文
		-->
		<title>Three.js WebGL - 2D压缩纹理阵列演示</title>
		<!-- 
		  元数据声明部分：
		  charset="UTF-8": 指定文档使用UTF-8字符编码，支持多语言字符显示
		-->
		<meta charset="UTF-8">
		<!-- 
		  视口(viewport)设置：
		  1. width=device-width: 视口宽度等于设备宽度
		  2. user-scalable=no: 禁止用户手动缩放页面
		  3. minimum-scale=1.0: 最小缩放比例为1.0（不缩小）
		  4. 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样式表：
		  rel="stylesheet": 定义关联文档为样式表
		  href="main.css": 样式表文件路径
		  这个文件通常包含页面布局、颜色、字体等样式定义
		-->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	
	<!-- 
	  顶点着色器(Vertex Shader)脚本：
	  作用：处理每个顶点的位置和属性
	  id="vs": 用于在JavaScript中获取此脚本内容
	  type="x-shader/x-vertex": 表示这是顶点着色器代码（非标准MIME类型，Three.js能识别）
	-->
	<script id="vs" type="x-shader/x-vertex">
	// 声明uniform变量：平面尺寸（宽度和高度）
	// uniform变量由JavaScript传递，在所有顶点间共享相同值
	uniform vec2 size;
	
	// 声明输出变量：纹理坐标，传递给片元着色器使用
	// out关键字在GLSL 3.0中用于声明输出变量
	out vec2 vUv;

	// 主函数：每个顶点执行一次
	void main() {
		// 顶点位置变换：
		// 1. position: 原始顶点位置（来自几何体）
		// 2. modelViewMatrix: 模型视图矩阵（组合了模型变换和视图变换）
		// 3. projectionMatrix: 投影矩阵（将3D坐标转换到裁剪空间）
		// 4. vec4(position, 1.0): 将3D位置转换为齐次坐标（w=1.0表示点）
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

		// 计算纹理坐标(UV坐标)：
		// 1. position.xy / size: 将顶点坐标归一化到[-0.5, 0.5]范围
		// 2. + 0.5: 将范围转换到[0.0, 1.0]（纹理坐标标准范围）
		vUv.xy = position.xy / size + 0.5;
		
		// 翻转Y轴纹理坐标：
		// 在计算机图形学中，纹理坐标系通常是Y轴向下，而3D坐标系Y轴向上
		// 1.0 - vUv.y 将纹理上下翻转，修正显示方向
		vUv.y = 1.0 - vUv.y;
	}
	</script>

	<!-- 
	  片元着色器(Fragment Shader)脚本：
	  作用：处理每个像素（片元）的颜色
	  id="fs": 用于在JavaScript中获取此脚本内容
	  type="x-shader/x-fragment": 表示这是片元着色器代码
	-->
	<script id="fs" type="x-shader/x-fragment">
	// 设置高精度浮点数计算（确保计算精度，特别是移动设备）
	precision highp float;
	// 设置高精度整数计算
	precision highp int;
	// 设置2D纹理数组采样器为高精度（纹理采样需要高精度）
	precision highp sampler2DArray;

	// 声明uniform变量：
	// uniform sampler2DArray diffuse: 2D纹理数组采样器，存储多个纹理
	uniform sampler2DArray diffuse;
	
	// 输入变量：从顶点着色器传递来的纹理坐标
	// in关键字在GLSL 3.0中用于声明输入变量
	in vec2 vUv;
	
	// uniform int depth: 纹理数组的深度索引（选择使用哪一层纹理）
	// 这个值会随时间变化，用于创建动画效果
	uniform int depth;

	// 输出变量：最终像素颜色，写入到颜色缓冲区
	// out关键字声明输出变量
	out vec4 outColor;

	// 主函数：每个像素执行一次
	void main() {
		// 从纹理数组采样颜色：
		// 1. texture(): GLSL内置纹理采样函数
		// 2. diffuse: 要采样的纹理数组
		// 3. vec3(vUv, depth): 采样坐标
		//    - vUv.xy: 纹理坐标（s,t），范围[0.0, 1.0]
		//    - depth: 纹理层索引（第三维坐标）
		vec4 color = texture( diffuse, vec3( vUv, depth ) );

		// 调整最终输出颜色：
		// 1. color.rgb + .2: 将RGB值各增加0.2，使图像变亮
		// 2. 1.0: Alpha值设为1.0（完全不透明）
		// 这种简单的颜色调整常用于视觉效果增强
		outColor = vec4( color.rgb + .2, 1.0 );
	}
	</script>
	
	<body>
		<!-- 
		  信息展示区域：
		  id="info": 用于CSS样式选择和JavaScript操作
		  这里展示应用的基本信息和相关链接
		-->
		<div id="info">
			<!-- Three.js官网链接 -->
			<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 Map)：
		  现代浏览器功能，用于定义JavaScript模块的导入别名
		  这使得我们可以使用简短的名称导入模块，而不需要完整的相对路径
		-->
		<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.js是一个强大的3D JavaScript库，基于WebGL
			import * as THREE from 'three';

			// 导入性能统计工具
			// Stats.js是一个轻量级性能监控库，显示FPS、渲染时间等信息
			import Stats from 'three/addons/libs/stats.module.js';
			
			// 导入KTX2纹理加载器
			// KTX2是Khronos纹理格式的2.0版本，支持高级压缩
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

			// 声明全局变量（在模块作用域内）
			let camera;    // 3D相机，定义观察视角
			let scene;     // 3D场景，包含所有要渲染的对象
			let mesh;      // 网格对象（几何体+材质），显示纹理
			let renderer;  // WebGL渲染器，负责绘制场景
			let stats;     // 性能统计器实例
			let clock;     // 时钟对象，用于动画时间计算

			// 定义平面几何体的尺寸（单位：Three.js单位）
			// 这些值决定了显示区域的大小
			const planeWidth = 50;   // 平面宽度
			const planeHeight = 25;  // 平面高度

			// 纹理深度步进控制变量
			// 用于动画切换纹理层，初始值为1
			let depthStep = 1;

			// 调用初始化函数，启动应用
			init();

			/**
			 * 初始化函数：设置Three.js环境的所有基础组件
			 * 这是应用的起点，创建场景、相机、渲染器等
			 */
			function init() {
				// 创建容器div元素，用于包裹Three.js的canvas
				const container = document.createElement( 'div' );
				// 将容器添加到body中
				document.body.appendChild( container );

				// 创建透视相机(PerspectiveCamera)：
				// 模拟人眼视角，物体近大远小
				camera = new THREE.PerspectiveCamera(
					45,                                 // 视野角度(FOV)：45度，角度越大看到的范围越广
					window.innerWidth / window.innerHeight, // 宽高比：使用窗口宽高比
					0.1,                                // 近裁剪面：距离相机0.1单位以内的物体不显示
					2000                                // 远裁剪面：距离相机2000单位以外的物体不显示
				);
				// 设置相机位置：沿Z轴正方向移动70个单位
				camera.position.z = 70;

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

				// 创建时钟(Clock)对象：
				// 用于精确的时间计算，特别是在动画和物理模拟中
				clock = new THREE.Clock();

				// 创建WebGL渲染器(WebGLRenderer)：
				// 负责将3D场景绘制到HTML canvas元素上
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：确保在高DPI显示屏上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数
				// requestAnimationFrame的Three.js封装，实现流畅动画
				renderer.setAnimationLoop( animate );
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// 创建KTX2Loader实例，用于加载压缩纹理
				const ktx2Loader = new KTX2Loader();
				// 设置转码器路径：Basis Universal转码器，用于在GPU上解压KTX2纹理
				ktx2Loader.setTranscoderPath( 'jsm/libs/basis/' );
				// 检测渲染器支持的压缩纹理格式
				// 不同GPU支持不同的压缩格式，此方法确保使用兼容的格式
				ktx2Loader.detectSupport( renderer );

				// 加载KTX2格式的纹理数组文件
				ktx2Loader.load(
					// 纹理文件路径：包含多个《千与千寻》动画帧的压缩纹理数组
					'textures/spiritedaway.ktx2',
					
					// 加载成功回调函数
					function ( texturearray ) {
						// 创建自定义着色器材质(ShaderMaterial)
						// 使用我们定义的顶点和片元着色器
						const material = new THREE.ShaderMaterial( {
							// uniforms：从JavaScript传递到着色器的常量数据
							uniforms: {
								// diffuse：纹理数组，包含所有动画帧
								diffuse: { value: texturearray },
								// depth：当前显示的纹理层索引，初始值为55
								depth: { value: 55 },
								// size：平面尺寸，用于正确计算纹理坐标
								size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
							},
							// 从HTML中获取着色器代码
							vertexShader: document.getElementById( 'vs' ).textContent.trim(), // trim()移除首尾空白
							fragmentShader: document.getElementById( 'fs' ).textContent.trim(),
							// 指定GLSL版本：GLSL 3.0支持现代特性
							glslVersion: THREE.GLSL3
						} );

						// 创建平面几何体(PlaneGeometry)
						// 参数：宽度、高度、宽度分段数、高度分段数（后两个使用默认值）
						const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );

						// 创建网格(Mesh)对象
						// 网格是几何体和材质的组合，是实际渲染的3D对象
						mesh = new THREE.Mesh( geometry, material );

						// 将网格添加到场景中
						scene.add( mesh );
					},
					
					// 加载进度回调函数（可选，这里省略）
					// function ( xhr ) {
					//   console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
					// },
					
					// 加载错误回调函数（可选，这里省略）
					// function ( error ) {
					//   console.error( 'An error happened:', error );
					// }
				);

				// 初始化性能统计器
				stats = new Stats();
				// 将统计器的DOM元素（显示FPS的面板）添加到容器
				container.appendChild( stats.dom );

				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，重新调整Three.js渲染尺寸
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 确保Three.js渲染尺寸始终与窗口尺寸匹配
			 */
			function onWindowResize() {
				// 更新相机宽高比
				// 如果不更新，图像会被拉伸或压缩
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 应用新的宽高比到相机
				camera.updateProjectionMatrix();

				// 更新渲染器尺寸
				// 确保渲染输出填满整个窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 每帧调用一次，更新动画状态并重新渲染
			 */
			function animate() {
				// 检查网格是否已加载完成
				// 避免在纹理加载完成前访问空对象
				if ( mesh ) {
					// 获取时间增量(delta time)
					// clock.getDelta()返回上一帧到当前帧的时间差（秒）
					// 乘以10加速动画播放
					const delta = clock.getDelta() * 10;

					// 更新深度步进值
					// 随时间递增，控制纹理层切换的速度
					depthStep += delta;

					// 计算当前应该显示的纹理层索引
					// 使用模运算(%)实现循环：0 → 1 → 2 → 3 → 4 → 0 → ...
					const value = depthStep % 5;

					// 更新着色器中的depth uniform值
					// 这将导致片元着色器采样不同的纹理层
					mesh.material.uniforms[ 'depth' ].value = value;
				}

				// 渲染场景
				render();
				
				// 更新性能统计器显示
				// 刷新FPS、帧时间等统计数据
				stats.update();
			}

			/**
			 * 渲染函数
			 * 执行实际的WebGL绘制命令
			 */
			function render() {
				// 使用指定的相机渲染整个场景
				// 这是Three.js的核心渲染调用
				renderer.render( scene, camera );
			}
		</script>
	</body>
</html>