<!-- 代码功能和技术点详解
🎯 主要功能概述
这是一个基于WebGPU的医学影像体渲染可视化系统，展示了如何将三维医学扫描数据（头部CT/MRI）以动态切片的方式在浏览器中实时渲染和动画展示。

核心功能：
3D体数据加载与解压 - 加载压缩的医学影像数据

动态切片动画 - 自动循环显示不同深度的横截面

实时着色器渲染 - 使用GPU进行高效的纹理采样和计算

响应式布局 - 适应不同屏幕尺寸

交互式可视化 - 展示3D数据的内部结构

🏗️ 系统架构
text
┌─────────────────────────────────────────────────┐
│                  HTML页面结构                    │
├─────────────────────────────────────────────────┤
│  ┌─────────────┐ ┌──────────────────────────┐  │
│  │  标题信息   │ │   WebGPU渲染画布         │  │
│  │  (Logo/版权)│ │   (3D可视化区域)         │  │
│  └─────────────┘ └──────────────────────────┘  │
└─────────────────────────────────────────────────┘
         │                        │
         │                        │
         ▼                        ▼
┌─────────────────┐    ┌──────────────────────────┐
│   CSS样式控制   │    │     JavaScript核心       │
│    · 布局       │    │     · Three.js WebGPU    │
│    · 响应式     │    │     · TSL着色器          │
└─────────────────┘    │     · 数据处理           │
                       └──────────────────────────┘
🔑 关键技术点
1. WebGPU渲染技术
javascript
// 使用Three.js的WebGPU后端
renderer = new THREE.WebGPURenderer();
现代图形API：取代WebGL，提供更接近原生图形API的性能

并行计算优化：更好的多线程和GPU并行处理

显式内存管理：更精细的GPU资源控制

2. 三维纹理（DataArrayTexture）
javascript
const map = new THREE.DataArrayTexture(array, 256, 256, 109);
体数据存储：将109层256×256的图像堆叠为3D纹理

GPU内存优化：单通道(RedFormat)存储，节省75%显存

硬件加速采样：GPU纹理单元进行三线性过滤

3. TSL着色器语言系统
javascript
import { texture, uv, time, oscTriangle } from 'three/tsl';
节点式编程：可视化构建着色器逻辑

实时编译：在运行时生成优化后的GLSL/WebGPU代码

类型安全：强类型的着色器节点系统

4. 动态切片算法
javascript
// 动画节点链
material.colorNode = texture(map, coord)
    .depth(oscLayers)  // 动态深度采样
    .r.remap(0, 1, -.1, 1.8);
三角波振荡器：产生平滑的循环动画

深度插值：在109层之间平滑过渡

对比度增强：值重映射提高视觉效果

5. 异步数据处理流程
javascript
THREE.FileLoader() → unzipSync() → DataArrayTexture
流式加载：异步加载大体积数据

内存解压：客户端解压ZIP，减少服务器带宽

渐进式处理：加载完成后立即初始化渲染

🎨 渲染管线详解
顶点着色器阶段
text
输入：平面网格顶点(50×50单位)
输出：裁剪空间位置 + UV纹理坐标
片段着色器阶段
text
输入：UV坐标 + 时间参数
处理：
  1. 采样3D纹理（根据UV和动态深度）
  2. 提取红色通道值（灰度）
  3. 重映射值范围（-0.1到1.8）
  4. 输出RGB颜色（灰度扩展）
动画系统
text
time (连续时间) 
  → oscTriangle (三角波) 
  → [0,1]范围映射 
  → [0,108]深度映射
  → 纹理采样深度参数
📊 数据流程
text
原始数据文件 (head256x256x109.zip)
        ↓
FileLoader (ArrayBuffer)
        ↓
unzipSync (解压缩)
        ↓
Uint8Array (28,262,400字节)  // 256×256×109×1
        ↓
DataArrayTexture (GPU纹理)
        ↓
WebGPU渲染管线
        ↓
Canvas显示
⚡ 性能优化特点
1. 纹理压缩
原始数据：256×256×109 = 7,159,808像素

8位存储：每像素1字节

ZIP压缩：进一步减少传输大小

2. GPU优化
纹理格式：单通道RedFormat，减少内存占用

采样优化：硬件三线性过滤

批处理：单一draw call渲染

3. 内存管理
及时释放：解压后原始数据可被GC回收

GPU上传：一次性上传纹理数据

动画在GPU：深度计算在着色器中完成

🔄 动画机制
javascript
// 动画序列示意图
时间轴: 0s      1s      2s      3s
深度层: 0 → 54 → 108 → 54 → 0 → ...
        \    平滑三角波动画     /
周期：默认2秒完成一次完整循环（time.mul(0.5)）

平滑性：三角波确保无突变的连续动画

范围覆盖：完整遍历所有109个切片

🌐 浏览器兼容性考虑
支持的浏览器：
Chrome 113+（开启WebGPU标志）

Edge 113+

其他支持WebGPU的浏览器

降级策略（本示例未实现但可扩展）：
javascript
// 伪代码示例
if (supportsWebGPU) {
    renderer = new THREE.WebGPURenderer();
} else if (supportsWebGL2) {
    renderer = new THREE.WebGLRenderer();
    // 使用WebGL2的3D纹理扩展
} else {
    // 显示兼容性警告
} -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：描述页面内容和使用的技术
			three.js - WebGPU渲染器展示2D纹理数组（3D纹理/体渲染）示例
		-->
		<title>Three.js WebGPU - 2D纹理数组体渲染演示</title>
		<!-- 指定文档字符编码为UTF-8，支持中文等多语言字符 -->
		<meta charset="UTF-8">
		<!-- 
			视口（Viewport）设置：
			width=device-width - 宽度等于设备宽度
			user-scalable=no - 禁止用户手动缩放页面
			minimum-scale=1.0 - 最小缩放比例为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样式表，用于页面布局和样式定义
			rel="stylesheet" 表示这是一个样式表
			type="text/css" 指定MIME类型为CSS
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<!-- 
			信息展示区域：包含Logo、标题和说明信息
			id="info" 用于CSS样式和JavaScript选择器识别
		-->
		<div id="info">
			<!-- 
				Three.js官方Logo链接
				href: 链接到Three.js官网
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全属性，防止新页面通过window.opener访问原页面
				class="logo-link": CSS类名，可能用于添加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> - 2D纹理数组体渲染演示</span>
			</div>

			<!-- 数据来源和授权信息（小号字体显示） -->
			<small>
				<!-- 数据来源说明 -->
				头部扫描数据来源：
				<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a>
				<!-- 授权协议信息 -->
				授权协议：<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">CPOL</a>。
				<br>
				<!-- 技术说明 -->
				<em>注：本示例展示256×256×109分辨率的三维医学影像数据的动态切片渲染</em>
			</small>
		</div>

		<!-- 
			Import Map（导入映射表）
			现代JavaScript模块导入系统配置，定义模块别名和路径
			浏览器使用这些映射来解析import语句中的模块标识符
		-->
		<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模块，支持import/export语法
			模块具有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">

			// ==================== 模块导入区域 ====================
			// 导入Three.js核心库的WebGPU版本，包含3D图形编程所需的所有类
			import * as THREE from 'three/webgpu';
			// 导入Three.js着色器语言（TSL）的核心节点函数：
			// texture - 纹理采样节点
			// uv - UV坐标节点（纹理坐标）
			// time - 时间节点（提供着色器时间信息）
			// oscTriangle - 三角波振荡器节点
			import { texture, uv, time, oscTriangle } from 'three/tsl';

			// 导入fflate压缩库的解压缩函数，用于处理ZIP格式的体数据文件
			import { unzipSync } from 'three/addons/libs/fflate.module.js';

			// ==================== 全局变量声明 ====================
			// 定义场景所需的核心Three.js对象
			let camera;      // 相机：定义观察3D场景的视角
			let scene;       // 场景：包含所有3D对象的容器
			let mesh;        // 网格：几何体和材质的组合体，是实际可见的3D对象
			let renderer;    // 渲染器：负责将3D场景绘制到2D画布上

			// 定义平面几何体的尺寸（单位：Three.js世界单位）
			const planeWidth = 50;    // 平面宽度
			const planeHeight = 50;   // 平面高度

			// ==================== 初始化函数调用 ====================
			// 页面加载后立即执行初始化函数，设置整个3D场景
			init();

			/**
			 * 初始化函数 - 整个应用程序的入口点
			 * 功能：创建DOM容器、设置相机、创建场景、加载数据、配置渲染器
			 * 此函数分阶段构建整个3D可视化环境
			 */
			function init() {

				// ---------- 阶段1：创建DOM容器 ----------
				// 创建一个div元素作为Three.js渲染器的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body元素中，使渲染器canvas显示在页面上
				document.body.appendChild( container );

				// ---------- 阶段2：设置相机 ----------
				/**
				 * 创建透视投影相机（PerspectiveCamera）
				 * 参数说明：
				 *   45 - 视野角度（FOV），单位度，垂直方向的可视角度
				 *   window.innerWidth / window.innerHeight - 宽高比，匹配浏览器窗口
				 *   0.1 - 近裁剪平面距离，比此距离近的对象不会渲染
				 *   2000 - 远裁剪平面距离，比此距离远的对象不会渲染
				 */
				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
				// 设置相机位置：沿Z轴正方向移动70个单位，从正前方观察场景
				camera.position.z = 70;

				// ---------- 阶段3：创建场景 ----------
				// 创建Three.js场景对象，是所有3D对象（网格、灯光、相机等）的容器
				scene = new THREE.Scene();

				// ---------- 阶段4：加载和处理3D纹理数据 ----------
				/**
				 * 使用Three.js的FileLoader加载压缩的3D纹理数据
				 * 数据规格说明：
				 *   - 分辨率：256像素(宽) × 256像素(高) × 109层(深)
				 *   - 位深度：8位（每像素0-255灰度值）
				 *   - 格式：ZIP压缩的原始二进制数据
				 *   - 内容：医学CT/MRI头部扫描数据
				 */
				new THREE.FileLoader()                   // 创建文件加载器实例
					.setResponseType( 'arraybuffer' )    // 设置响应类型为ArrayBuffer（二进制数据）
					.load(                               // 开始加载文件
						'textures/3d/head256x256x109.zip', // 文件路径
						function ( data ) {                // 加载完成后的回调函数
							
							// 步骤1：解压ZIP文件
							// unzipSync同步解压Uint8Array格式的压缩数据
							const zip = unzipSync( new Uint8Array( data ) );
							// 从解压结果中获取名为'head256x256x109'的文件数据
							const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );
							
							// 步骤2：创建3D数据纹理
							/**
							 * DataArrayTexture是Three.js中表示3D纹理的类
							 * 参数说明：
							 *   array - 包含所有体素数据的Uint8Array
							 *   256 - 纹理宽度（X轴像素数）
							 *   256 - 纹理高度（Y轴像素数）
							 *   109 - 纹理深度（Z轴切片数）
							 * 内存布局：数据按层存储，每层256×256像素，共109层
							 */
							const map = new THREE.DataArrayTexture( array, 256, 256, 109 );
							map.format = THREE.RedFormat;   // 设置纹理格式为单通道红色（灰度图）
							map.needsUpdate = true;         // 标记纹理需要更新到GPU
							
							// 步骤3：创建纹理坐标节点（在着色器中计算）
							/**
							 * TSL节点系统：在JavaScript中构建着色器程序
							 * uv() - 创建UV坐标节点，返回vec2类型（二维向量）
							 * UV坐标范围：[0,0]（左下角）到[1,1]（右上角）
							 */
							let coord = uv();
							// 翻转Y坐标：WebGL纹理坐标系Y轴向下，常规坐标系Y轴向上
							coord = coord.setY( coord.y.oneMinus() );
							
							// 步骤4：创建动态深度切片动画
							/**
							 * 创建三角波振荡器，用于在纹理深度方向产生循环动画
							 * time.mul(0.5) - 时间乘以0.5，减慢动画速度
							 * oscTriangle - 生成-1到1之间的三角波形
							 */
							let oscLayers = oscTriangle( time.mul( .5 ) );
							// 将振荡范围从[-1, 1]映射到[0, 1]
							oscLayers = oscLayers.add( 1 ).mul( .5 );
							// 将[0, 1]范围缩放到纹理的实际深度范围[0, 108]
							oscLayers = oscLayers.mul( map.image.depth );
							
							// 步骤5：创建节点材质
							/**
							 * MeshBasicNodeMaterial是支持TSL节点系统的基本材质
							 * 与传统材质不同，它允许通过节点图编程方式定义着色器
							 */
							const material = new THREE.MeshBasicNodeMaterial();
							
							// 步骤6：构建复杂的颜色节点网络
							/**
							 * 节点链式调用构建着色器逻辑：
							 * 1. texture(map, coord) - 在指定坐标采样3D纹理
							 * 2. .depth(oscLayers) - 使用动态计算的深度值确定采样哪一层
							 * 3. .r - 提取红色通道值（因为是单通道灰度纹理）
							 * 4. .remap(0, 1, -0.1, 1.8) - 重映射值范围增强对比度
							 *    原范围[0,1] -> 新范围[-0.1,1.8]，使暗部更暗、亮部更亮
							 */
							material.colorNode = texture( map, coord )
								.depth( oscLayers )
								.r
								.remap( 0, 1, - .1, 1.8 );
							
							// 步骤7：创建平面几何体作为显示载体
							/**
							 * PlaneGeometry创建一个二维平面
							 * 参数：宽度50单位，高度50单位
							 * 这个平面将用作体数据的"显示屏幕"
							 */
							const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
							
							// 步骤8：创建网格对象
							/**
							 * Mesh是Three.js中可见的3D对象
							 * 将几何体（形状）和材质（外观）组合在一起
							 */
							mesh = new THREE.Mesh( geometry, material );
							
							// 步骤9：将网格添加到场景中
							scene.add( mesh );
						}
					);

				// ---------- 阶段5：创建和配置WebGPU渲染器 ----------
				/**
				 * WebGPURenderer是Three.js的下一代渲染器
				 * 相比WebGLRenderer，它提供更好的性能、更现代的GPU特性支持
				 */
				renderer = new THREE.WebGPURenderer();
				// 设置设备像素比，确保在高DPI屏幕（如Retina）上清晰显示
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 设置动画循环回调函数，每帧调用render函数
				renderer.setAnimationLoop( render );
				// 将渲染器的canvas元素添加到之前创建的容器中
				container.appendChild( renderer.domElement );

				// ---------- 阶段6：添加事件监听器 ----------
				// 监听浏览器窗口大小变化事件，确保渲染尺寸始终匹配窗口大小
				window.addEventListener( 'resize', onWindowResize );
			}

			/**
			 * 窗口大小调整处理函数
			 * 当浏览器窗口大小改变时调用，更新相机和渲染器设置
			 */
			function onWindowResize() {
				// 更新相机的宽高比，匹配新的窗口尺寸
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机投影矩阵（必须调用此方法使宽高比更改生效）
				camera.updateProjectionMatrix();
				// 更新渲染器尺寸为新的窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 渲染循环函数
			 * 每帧自动调用（通常60fps），负责将3D场景渲染到2D画布上
			 * 这是Three.js应用的核心动画循环
			 */
			function render() {
				// 使用渲染器将场景从相机视角绘制到画布上
				renderer.render( scene, camera );
			}

		</script>
	</body>
</html>