<!-- 代码功能和技术点详解
🎯 核心功能
这是一个基于Three.js WebGPU的KTX2纹理加载器演示页面，主要展示和对比不同类型的GPU纹理格式。页面将多种纹理格式分为三类进行可视化展示，让开发者能够直观地理解不同纹理格式的特点和应用场景。

主要功能模块：
纹理分类展示：

未压缩格式：RGBA8/16/32等，展示高精度无损纹理

压缩格式：ASTC、BCn系列等，展示GPU原生压缩纹理

通用格式：Basis Universal，展示跨平台兼容的中间格式

实时3D渲染：

每个纹理都在独立的3D场景中渲染

支持页面滚动时的实时更新

自动适配不同屏幕尺寸

格式信息显示：

显示纹理文件名

显示颜色空间信息（sRGB/Linear）

加载状态提示

🛠 核心技术点
1. WebGPU渲染技术
javascript
// WebGPU渲染器初始化
renderer = new THREE.WebGPURenderer({ 
  canvas, 
  antialias: true,  // 开启抗锯齿
  forceWebGL: false // 优先使用WebGPU，禁用WebGL回退
});
现代图形API：使用WebGPU替代WebGL，获得更好的性能和新特性

异步初始化：await renderer.init()确保资源正确加载

高DPI支持：setPixelRatio(window.devicePixelRatio)适配Retina屏

2. KTX2纹理加载系统
javascript
const loader = new KTX2Loader()
  .setTranscoderPath('jsm/libs/basis/')
  .setPath('textures/ktx2/')
  .detectSupport(renderer);
格式自动检测：detectSupport()检测GPU支持的压缩格式

Basis Universal转码：运行时将Basis格式转为设备支持的格式

渐进式加载：异步加载避免阻塞主线程

3. 多场景管理策略
javascript
// 为每个纹理创建独立场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 1, 10);
scene.userData = { element, camera };
scenes.push(scene);
场景隔离：每个纹理独立渲染，互不干扰

数据关联：使用userData将DOM元素与Three.js对象关联

相机管理：每个场景有独立的相机和视角

4. 视口裁剪渲染技术
javascript
// 计算渲染区域
const rect = element.getBoundingClientRect();
const width = rect.right - rect.left;
const height = rect.bottom - rect.top;

// 设置裁剪区域
renderer.setViewport(left, top, width, height);
renderer.setScissor(left, top, width, height);
性能优化：只渲染可见区域，跳过屏幕外元素

精确对齐：将3D场景精确渲染到对应的DOM元素位置

滚动同步：translateY(${window.scrollY}px)跟随页面滚动

5. 纹理格式处理
javascript
// UV坐标翻转适配
function flipY(geometry) {
  const uv = geometry.attributes.uv;
  for (let i = 0; i < uv.count; i++) {
    uv.setY(i, 1 - uv.getY(i)); // Y轴翻转
  }
  return geometry;
}
坐标系转换：适配不同纹理格式的UV坐标系

颜色空间管理：正确处理sRGB和Linear颜色空间

格式兼容性：处理各种GPU纹理压缩格式

6. 响应式设计实现
javascript
function updateSize() {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
  }
}
自适应布局：根据窗口大小调整渲染尺寸

CSS盒模型：使用box-sizing: border-box确保布局一致性

卡片式设计：纹理展示项采用卡片式UI设计

7. 错误处理机制
javascript
try {
  const texture = await loader.loadAsync(path);
  // 成功处理
} catch (e) {
  console.error(`加载失败: ${path}`, e);
  labelElement.innerText += '\n[加载失败]';
  labelElement.style.color = '#f00';
}
异步错误捕获：使用try-catch处理加载失败

用户友好提示：显示加载状态和错误信息

优雅降级：单个纹理失败不影响其他纹理显示

📊 支持的纹理格式
未压缩格式：
RGBA8：8位每通道，标准sRGB

RGBA16/32：16/32位每通道，高精度线性

RGB9E5：共享指数格式，节省内存

R11G11B10：浮点格式，HDR支持

压缩格式：
ASTC：ARM格式，移动端高效

ETC1/2：Ericsson格式，Android标准

BC1-7：DirectX格式，Windows/主机平台

通用格式：
ETC1S：Basis高质量压缩

UASTC：Basis无损压缩

🚀 性能优化特性
懒渲染机制：只渲染可见区域的纹理

资源复用：共享几何体和材质定义

智能检测：自动选择最优纹理格式

内存管理：压缩纹理减少GPU内存占用

滚动优化：transform替代top定位，避免重排

🔧 开发工具特性
模块化导入：使用ES6模块和Import Maps

TypeScript兼容：完整的类型定义支持

调试友好：详细的控制台日志

跨浏览器支持：WebGPU和WebGL双后备

💡 应用场景
图形技术选型：帮助开发者选择适合的纹理格式

性能测试：对比不同格式的内存和渲染性能

兼容性验证：测试不同设备的纹理格式支持

教学演示：直观展示纹理压缩技术原理

质量控制：验证纹理加载和渲染的正确性 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：three.js WebGPU - KTX2 纹理加载器演示 -->
		<title>three.js WebGPU - KTX2 纹理加载器演示</title>
		<!-- 字符编码设置为UTF-8，支持中文 -->
		<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="main.css">
		<style>
			/* 全局盒模型设置：确保所有元素使用border-box盒模型 */
			* {
				box-sizing: border-box;        /* 标准box-sizing */
				-moz-box-sizing: border-box;   /* Firefox兼容性 */
			}

			/* 页面主体样式 */
			body {
				background-color: #fff; /* 白色背景 */
				color: #444;            /* 深灰色文字 */
			}

			/* 超链接样式 */
			a {
				color: #08f; /* 亮蓝色链接 */
			}

			/* 主要内容区域样式 */
			#content {
				position: absolute; /* 绝对定位 */
				top: 0;             /* 顶部对齐 */
				width: 100%;        /* 全宽度 */
				z-index: 1;         /* 确保在canvas上方显示 */
				padding: 3em 0 0 0; /* 顶部内边距3em，确保不会被canvas遮挡 */
			}

			/* 每个纹理分类区域样式 */
			section {
				padding: 1em; /* 内边距1em */
			}

			/* WebGPU渲染画布样式 */
			#c {
				position: absolute; /* 绝对定位 */
				left: 0;            /* 左侧对齐 */
				width: 100%;        /* 全宽度 */
				height: 100%;       /* 全高度 */
			}

			/* 分类描述文字样式 */
			section .description {
				max-width: 50em;    /* 最大宽度限制，提高可读性 */
				text-wrap: pretty;  /* 文本换行优化 */
			}

			/* 单个纹理展示项样式 - 卡片式设计 */
			.list-item {
				display: inline-block;          /* 行内块显示，允许并排排列 */
				margin: 1em;                    /* 外边距1em */
				padding: 1em;                   /* 内边距1em */
				box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.25); /* 轻微阴影效果 */
			}

			/* 纹理3D场景显示区域样式 */
			.list-item > div:nth-child(1) {
				width: 200px;   /* 固定宽度200px */
				height: 200px;  /* 固定高度200px */
			}

			/* 纹理信息标签区域样式 */
			.list-item > div:nth-child(2) {
				color: #888;            /* 浅灰色文字 */
				font-family: sans-serif; /* 无衬线字体 */
				width: 200px;           /* 与显示区域同宽 */
				margin-top: 0.5em;      /* 顶部外边距0.5em */
			}
		</style>
	</head>
	<body>

		<!-- WebGPU/WebGL 渲染画布元素 -->
		<!-- 所有3D内容将在此canvas上绘制 -->
		<canvas id="c"></canvas>

		<!-- 页面内容容器，显示纹理分类信息和描述 -->
		<div id="content">
			<!-- 页面信息区域，显示标题和链接 -->
			<!-- 已替换为中文内容 -->
			<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - KTX2纹理加载器演示</div>
			<!-- 
				rel="noopener": 安全特性，防止新打开的页面访问原页面的window对象
				target="_blank": 在新标签页中打开链接
			-->
		</div>

		<!-- 浏览器导入映射表 (Import Maps) -->
		<!-- 现代JavaScript模块系统特性，定义模块路径别名 -->
		<!-- 允许在import语句中使用简写名称，而不是完整的URL -->
		<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核心库
			// 使用importmap中定义的"three"别名
			import * as THREE from 'three';
			
			// 导入KTX2纹理加载器
			// KTX2是Khronos Texture 2.0格式，支持多种GPU纹理压缩格式
			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';

			// 全局变量声明
			let canvas, renderer;   // 画布DOM元素和WebGPU渲染器实例
			const scenes = [];      // 存储所有纹理场景的数组，每个纹理对应一个场景

			// 纹理分类定义数组
			// 每种分类包含标题、描述和纹理文件列表
			const sections = [
				{
					title: '未压缩格式', // 分类标题
					// 分类描述 - 解释未压缩格式的特点
					description: '未压缩格式（如rgba8、rgba16、rgba32）加载为THREE.DataTexture对象。'
						+ ' 优点：无损、易于读写、GPU上未压缩、网络传输时可选择压缩。'
						+ ' 缺点：内存占用较大。',
					// 该分类下的纹理文件列表
					textures: [
						{ path: '2d_rgba8.ktx2' },          // 8位RGBA，sRGB颜色空间
						{ path: '2d_rgba8_linear.ktx2' },   // 8位RGBA，线性颜色空间
						{ path: '2d_rgba16_linear.ktx2' },  // 16位RGBA，线性颜色空间，更高精度
						{ path: '2d_rgba32_linear.ktx2' },  // 32位RGBA，线性颜色空间，最高精度
						{ path: '2d_rgb9e5_linear.ktx2' },  // 共享指数RGB格式，9位红绿蓝+5位指数
						{ path: '2d_r11g11b10_linear.ktx2' }, // 11位红绿+10位蓝，浮点格式
					]
				},
				{
					title: '压缩格式', // 分类标题
					// 分类描述 - 解释压缩格式的特点和限制
					description: '压缩格式（如ASTC、BCn系列）加载为THREE.CompressedTexture对象，'
						+ ' 显著降低内存占用。需要设备GPU原生支持：'
						+ ' 没有任何一种压缩格式在所有设备上都可用。'
						+ ' 不同厂商GPU支持不同的压缩格式。',
					// 各种GPU压缩格式纹理
					textures: [
						{ path: '2d_astc4x4.ktx2' },  // ARM的ASTC格式，4x4像素块
						{ path: '2d_etc1.ktx2' },     // Ericsson纹理压缩格式1，主要用于移动端
						{ path: '2d_etc2.ktx2' },     // Ericsson纹理压缩格式2，支持Alpha通道
						{ path: '2d_bc1.ktx2' },      // DirectX的BC1格式（DXT1），无Alpha或1位Alpha
						{ path: '2d_bc3.ktx2' },      // DirectX的BC3格式（DXT5），支持完整Alpha
						{ path: '2d_bc4.ktx2' },      // DirectX的BC4格式，单通道（红通道）压缩
						{ path: '2d_bc5.ktx2' },      // DirectX的BC5格式，双通道（红绿通道）压缩
						{ path: '2d_bc7.ktx2' },      // DirectX的BC7格式，高质量RGBA压缩
					]
				},
				{
					title: '通用格式', // 分类标题
					// 分类描述 - 解释Basis Universal格式的工作原理
					description: 'Basis Universal纹理是专门的中间格式，支持运行时快速转码为其他GPU纹理压缩格式。'
						+ ' 转码后，通用纹理可以在任何设备上以减少的内存占用使用。'
						+ ' 提供"一次编码，到处运行"的解决方案。',
					// Basis Universal格式的两种变体
					textures: [
						{ path: '2d_etc1s.ktx2' },  // Basis Universal的ETC1S模式，高质量压缩
						{ path: '2d_uastc.ktx2' },  // Basis Universal的UASTC模式，无损压缩
					]
				},
			];

			// 页面加载完成后立即调用初始化函数
			init();

			// 异步初始化函数
			// async关键字表示函数内部可以使用await进行异步操作
			async function init() {
				// 获取HTML中的canvas元素
				// 这个canvas将用于WebGPU渲染
				canvas = document.getElementById( 'c' );

				// 创建Three.js的WebGPU渲染器
				// 配置参数说明：
				// - canvas: 渲染目标canvas元素
				// - antialias: true 启用抗锯齿，平滑边缘
				// - forceWebGL: false 不强制使用WebGL，优先使用WebGPU
				renderer = new THREE.WebGPURenderer( { 
					canvas, 
					antialias: true, 
					forceWebGL: false 
				} );
				
				// 设置渲染器清除颜色为白色，不透明度为1
				// 清除颜色用于清空画布时的背景色
				renderer.setClearColor( 0xffffff, 1 );
				
				// 设置渲染器像素比，匹配设备像素比
				// 在高DPI屏幕（如Retina屏幕）上提供更清晰的渲染
				renderer.setPixelRatio( window.devicePixelRatio );

				// 异步初始化WebGPU渲染器
				// await会等待初始化完成才继续执行后面的代码
				// WebGPU初始化包括：请求适配器、创建设备、配置渲染管线等
				await renderer.init();

				// 创建并配置KTX2加载器
				// 链式调用配置方法：
				const loader = new KTX2Loader()
					// 设置Basis Universal转码器路径
					// Basis转码器用于在运行时将Basis格式转换为设备支持的格式
					.setTranscoderPath( 'jsm/libs/basis/' )
					// 设置纹理文件的基础路径
					// 所有纹理文件都位于此路径下
					.setPath( 'textures/ktx2/' )
					// 自动检测当前GPU支持的纹理压缩格式
					// 根据检测结果选择最佳的转码目标格式
					.detectSupport( renderer );

				// 创建平面几何体，用于显示纹理
				// PlaneGeometry(1, 1)创建1x1单位的平面
				// flipY函数用于翻转Y轴UV坐标，适配某些纹理的坐标系
				const geometry = flipY( new THREE.PlaneGeometry( 1, 1 ) );

				// 获取页面内容容器，用于动态添加纹理展示项
				const content = document.getElementById( 'content' );

				// 遍历所有纹理分类
				for ( const section of sections ) {
					// 为每个分类创建section元素
					const sectionElement = document.createElement( 'section' );

					// 创建分类标题元素
					const sectionHeader = document.createElement( 'h2' );
					sectionHeader.textContent = section.title; // 设置标题文本
					sectionElement.appendChild( sectionHeader ); // 添加到section

					// 创建分类描述元素
					const sectionDescription = document.createElement( 'p' );
					sectionDescription.className = 'description'; // 添加CSS类
					sectionDescription.textContent = section.description; // 设置描述文本
					sectionElement.appendChild( sectionDescription ); // 添加到section

					// 遍历当前分类中的所有纹理
					for ( const { path, supported } of section.textures ) {
						// 为每个纹理创建一个Three.js场景
						// 每个场景独立渲染，互不影响
						const scene = new THREE.Scene();

						// 创建纹理展示项的容器元素
						const element = document.createElement( 'div' );
						element.className = 'list-item'; // 添加卡片样式类

						// 创建3D场景显示区域
						// 这个div将作为纹理渲染的目标区域
						const sceneElement = document.createElement( 'div' );
						element.appendChild( sceneElement );

						// 创建纹理信息标签
						const labelElement = document.createElement( 'div' );
						labelElement.innerText = '文件: ' + path; // 显示文件名
						element.appendChild( labelElement );

						// 将DOM元素存储到场景的userData中
						// userData是Three.js对象的自定义数据存储区域
						scene.userData.element = sceneElement;
						
						// 将纹理展示项添加到分类section中
						sectionElement.appendChild( element );

						// 为场景创建透视相机
						// 参数说明：
						// - 50: 垂直视野角度（度）
						// - 1: 宽高比（将根据渲染区域调整）
						// - 1: 近裁剪平面距离
						// - 10: 远裁剪平面距离
						const camera = new THREE.PerspectiveCamera( 50, 1, 1, 10 );
						camera.position.z = 2; // 将相机向后移动2个单位
						scene.userData.camera = camera; // 相机也存储到userData

						// 尝试加载纹理文件
						// try-catch用于处理可能的加载错误
						try {
							// 异步加载KTX2纹理文件
							// await等待纹理加载完成
							// 如果supported为false，则尝试加载一个会失败的文件（用于测试错误处理）
							const texture = await loader.loadAsync( 
								supported === false ? 'fail_load.ktx2' : path 
							);
							
							// 使用加载的纹理创建材质
							// MeshBasicMaterial是基础材质，不响应光照
							const material = new THREE.MeshBasicMaterial( { 
								map: texture // 设置纹理贴图
							} );
							
							// 创建网格对象，将几何体和材质结合
							const mesh = new THREE.Mesh( geometry, material );

							// 在标签中添加纹理的颜色空间信息
							// colorSpace可以是'srgb'或'linear'
							labelElement.innerText += '\n颜色空间: ' + texture.colorSpace;

							// 将网格添加到场景中
							scene.add( mesh );
							
							// 将场景添加到全局场景数组，后续在渲染循环中使用
							scenes.push( scene );

						} catch ( e ) {
							// 纹理加载失败处理
							// 输出错误信息到控制台
							console.error( `加载失败: ${path}`, e );
							// 可以在这里添加用户可见的错误提示
							labelElement.innerText += '\n[加载失败]';
							labelElement.style.color = '#f00'; // 红色错误提示
						}
					}

					// 将整个分类section添加到页面内容容器
					content.appendChild( sectionElement );
				}

				// 启动渲染循环
				// setAnimationLoop替代了传统的requestAnimationFrame
				// animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
			}

			// 更新画布大小的函数
			// 响应窗口大小变化，确保渲染器尺寸与canvas显示尺寸一致
			function updateSize() {
				// 获取canvas元素在页面中的实际显示尺寸
				// clientWidth/clientHeight不包括边框和滚动条
				const width = canvas.clientWidth;
				const height = canvas.clientHeight;

				// 检查canvas的绘制尺寸是否与实际显示尺寸不同
				// canvas.width/canvas.height是绘制缓冲区的像素尺寸
				if ( canvas.width !== width || canvas.height !== height ) {
					// 更新渲染器尺寸
					// 第三个参数false表示不更新CSS样式，只更新绘制缓冲区
					renderer.setSize( width, height, false );
				}
			}

			// 翻转几何体Y轴UV坐标的函数
			// 某些纹理格式（如KTX2）使用不同于Three.js默认的UV坐标系
			// Three.js默认UV坐标系：原点在左下角，Y轴向上
			// 某些纹理格式：原点在左上角，Y轴向下
			function flipY( geometry ) {
				// 获取几何体的UV属性
				// UV坐标定义了几何体表面点与纹理像素的对应关系
				const uv = geometry.attributes.uv;

				// 遍历所有UV顶点
				// uv.count是UV坐标的数量
				for ( let i = 0; i < uv.count; i ++ ) {
					// 获取当前UV坐标的Y值
					const currentY = uv.getY( i );
					// 设置新的Y值：1 - currentY，实现Y轴翻转
					// 如果原Y为0，新Y为1；原Y为1，新Y为0
					uv.setY( i, 1 - currentY );
				}

				// 返回修改后的几何体
				return geometry;
			}

			// 渲染循环函数 - 每一帧执行
			function animate() {
				// 更新画布大小（响应式设计）
				updateSize();

				// 同步canvas位置与页面滚动
				// 将canvas向下平移，匹配当前滚动位置
				// 这样canvas会跟随页面一起滚动
				canvas.style.transform = `translateY(${window.scrollY}px)`;

				// 第一步：清除整个画布为白色背景
				// 设置清除颜色为白色
				renderer.setClearColor( 0xffffff );
				// 禁用裁剪测试，清除整个画布
				renderer.setScissorTest( false );
				// 执行清除操作
				renderer.clear();

				// 第二步：设置场景背景色并启用裁剪渲染
				// 设置场景背景色为浅灰色
				renderer.setClearColor( 0xe0e0e0 );
				// 启用裁剪测试
				// 裁剪测试限制渲染只发生在指定的矩形区域内
				renderer.setScissorTest( true );

				// 遍历所有纹理场景进行渲染
				scenes.forEach( function ( scene ) {
					// 从场景的userData中获取关联的DOM元素
					const element = scene.userData.element;

					// 获取DOM元素相对于视口的位置和尺寸信息
					// getBoundingClientRect返回元素的位置、宽度、高度等信息
					const rect = element.getBoundingClientRect();

					// 检查元素是否在当前视口中可见
					// 如果元素完全在视口外，跳过渲染以提高性能
					// 检查条件：
					// 1. 元素顶部在视口顶部之上（rect.top < 0）
					// 2. 元素底部在视口底部之下（rect.bottom > 视口高度）
					// 3. 元素左侧在视口左侧之左（rect.left < 0）
					// 4. 元素右侧在视口右侧之右（rect.right > 视口宽度）
					if ( rect.top < 0 || rect.bottom > renderer.domElement.clientHeight ||
						 rect.left < 0 || rect.right > renderer.domElement.clientWidth ) {
						// 元素不在视口中，跳过渲染
						return;
					}

					// 计算渲染区域尺寸
					const width = rect.right - rect.left;   // 区域宽度
					const height = rect.bottom - rect.top;  // 区域高度
					const left = rect.left;                 // 区域左侧位置
					const top = rect.top;                   // 区域顶部位置

					// 设置渲染器的视口（Viewport）
					// 视口定义渲染输出的位置和尺寸
					renderer.setViewport( left, top, width, height );
					
					// 设置渲染器的裁剪区域（Scissor）
					// 裁剪区域限制像素写入的区域，与视口通常相同
					renderer.setScissor( left, top, width, height );

					// 从场景userData中获取相机
					const camera = scene.userData.camera;

					// 渲染场景
					// 将场景和相机传递给渲染器进行绘制
					renderer.render( scene, camera );
				} );
			}

		</script>

	</body>
</html>