<!-- 代码功能与技术点详解
一、项目概述
这是一个基于Three.js和WebGL 2.0的医学体数据可视化系统，主要用于展示和浏览3D医学影像数据（如CT、MRI扫描）。系统通过先进的可视化技术，将三维体数据以二维切片的形式动态展示，并支持实时交互。

二、核心功能
1. 三维体数据加载与处理
从ZIP压缩文件中加载256×256×109分辨率的头部CT扫描数据

数据格式为8位无符号整数（灰度值0-255）

自动解压缩并转换为GPU可处理的纹理格式

2. 动态切片浏览
自动循环播放109个横截面切片

平滑的切片过渡动画（通过深度值插值）

支持正反双向播放，到达边界时自动反弹

3. 实时参数调节
通过GUI控制面板调节显示强度（0-1范围）

强度参数实时影响视觉效果

响应式设计，适应不同屏幕尺寸

4. 高质量可视化
医学图像专用坐标系处理（Y轴翻转）

颜色增强处理（1.5倍亮度提升）

保持原始数据精度的高质量渲染

三、核心技术点
1. WebGL 2.0高级特性
1.1 纹理数组（Texture Arrays）
javascript
// 核心特性：将多个2D纹理组织为单一对象
uniform sampler2DArray uTexture;  // 声明纹理数组采样器
texture(uTexture, vec3(uv, layer));  // 三维坐标采样
优势：相比传统方法（多个单独纹理），显著提升性能

应用：存储109个256×256的医学图像切片

1.2 分层渲染目标（Layered Render Targets）
javascript
const renderTarget = new THREE.WebGLArrayRenderTarget(256, 256, 109);
renderer.setRenderTarget(renderTarget, specificLayer);
功能：允许渲染到纹理数组的特定层

用途：实现离屏渲染和后处理管线

2. 双通道渲染架构
2.1 后处理通道（离线渲染）
javascript
// 通道1：数据处理
function renderTo2DArray() {
    // 将原始体数据渲染到纹理数组
    // 应用强度调节等处理
}
2.2 显示通道（屏幕渲染）
javascript
// 通道2：结果展示
function render() {
    renderTo2DArray();  // 先处理数据
    renderer.render(scene, camera);  // 再显示结果
}
优势对比：
通道	渲染目标	主要任务	性能要求
后处理通道	纹理数组	数据预处理	计算密集型
显示通道	屏幕	最终显示	实时响应
3. 自定义着色器编程
3.1 后处理着色器
顶点着色器：全屏四边形，传递UV坐标

片段着色器：执行核心数据处理逻辑

glsl
// 关键代码：从纹理数组特定层采样
float voxel = texture(uTexture, vec3(vUv, uDepth)).r;
gl_FragColor.r = voxel * uIntensity;
3.2 显示着色器
坐标转换：模型空间→纹理空间

图像增强：亮度提升，改善视觉效果

glsl
vec4 color = texture(diffuse, vec3(vUv, depth));
gl_FragColor = vec4(color.rrr * 1.5, 1.0);
4. 数据流架构
text
原始数据 (ZIP压缩)
    ↓
解压缩 (fflate库)
    ↓
Uint8Array (8位数据)
    ↓
DataArrayTexture (GPU纹理)
    ↓
后处理着色器 (强度调整)
    ↓
WebGLArrayRenderTarget (中间结果)
    ↓
显示着色器 (视觉增强)
    ↓
屏幕显示 (最终图像)
5. 性能优化策略
5.1 内存优化
纹理格式：使用THREE.RedFormat（单通道），相比RGBA节省75%内存

数据精度：8位数据满足医学图像需求，平衡精度与性能

压缩传输：ZIP压缩减少网络传输时间

5.2 渲染优化
离屏渲染：分离数据处理和显示，避免阻塞主线程

纹理复用：渲染目标纹理可重复使用，减少内存分配

合理批处理：全屏四边形一次渲染完成

5.3 GPU优化
着色器优化：

使用适当的精度限定符（高精度采样，中精度计算）

减少条件分支

向量化操作

纹理采样优化：

利用纹理缓存

相邻切片的空间局部性

6. 医学图像特定处理
6.1 坐标系转换
glsl
// 医学图像通常以左上角为原点，WebGL以左下角为原点
vUv.y = 1.0 - vUv.y;  // Y轴翻转
6.2 数据规范化
原始值范围：0-255（8位）

着色器内范围：0.0-1.0（浮点标准化）

强度调节：通过统一变量动态控制

6.3 视觉增强
伽马校正：线性值→感知亮度

对比度增强：乘以1.5倍提升细节可见性

单通道→三通道：灰度数据扩展为RGB显示

7. 系统架构设计
7.1 模块化结构
text
入口文件 (index.html)
    ├── 着色器模块 (GLSL代码)
    ├── JavaScript主模块
    │   ├── 初始化模块 (init())
    │   ├── 数据加载模块 (FileLoader)
    │   ├── 渲染模块 (render(), renderTo2DArray())
    │   ├── 动画模块 (animate())
    │   └── 交互模块 (GUI, 事件处理)
    └── 样式模块 (main.css)
7.2 事件处理机制
自动动画：requestAnimationFrame循环

用户交互：GUI滑块控制

响应式设计：窗口大小变化自适应

8. 关键技术难点与解决方案
8.1 WebGL 2.0兼容性
问题：纹理数组需要WebGL 2.0支持

解决方案：现代浏览器自动检测，必要时提供降级方案

8.2 大数据量处理
问题：256×256×109 ≈ 710万体素

解决方案：

使用压缩格式传输

分批处理数据

GPU并行计算

8.3 实时性能
挑战：60FPS的平滑动画

优化：

双缓冲渲染

增量更新

避免每帧内存分配

四、技术栈详情
前端框架
Three.js r128+：3D渲染核心

ES6模块系统：现代JavaScript模块化

Import Maps：模块路径映射

辅助库
Stats.js：性能监控

fflate：ZIP解压缩

lil-gui：轻量级控制面板

WebGL特性
核心特性：纹理数组、分层渲染、变换反馈

着色语言：GLSL ES 3.0

扩展支持：根据需要启用WebGL扩展

五、应用价值与扩展性
医学应用
临床诊断：多角度观察病变

手术规划：三维解剖结构分析

医学教育：交互式解剖学习

技术扩展方向
体渲染：实现真正的3D体渲染

多模态融合：CT+MRI数据融合显示

AI集成：自动病变检测与标注

VR/AR支持：沉浸式医学可视化

性能扩展
WebGPU迁移：下一代图形API

WebAssembly加速：复杂算法优化

分布式处理：云端数据预处理

六、总结
这个示例展示了现代WebGL技术在科学可视化领域的强大能力，通过：

先进技术栈：WebGL 2.0 + Three.js + ES6模块

优化架构：双通道渲染 + 纹理数组 + 离屏渲染

专业处理：医学图像特定坐标转换和增强

良好交互：实时参数调节 + 平滑动画 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 页面标题：Three.js WebGL - 2D纹理数组帧缓冲附件 -->
		<title>Three.js WebGL - 2D纹理数组帧缓冲附件示例</title>
		<!-- 设置文档字符编码为UTF-8，支持中文显示 -->
		<meta charset="UTF-8">
		<!-- 视口设置：适配移动设备，禁止用户缩放，设置最小和最大缩放比例为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 for Post-processing)
		功能：这是一个全屏四边形的顶点着色器，用于后处理渲染通道
		作用：将顶点从模型视图空间转换到裁剪空间，并传递UV坐标给片段着色器
		应用场景：在渲染到纹理数组时使用
	-->
	<script id="vertex-postprocess" type="x-shader/x-vertex">
		// 输出变量：二维UV坐标，传递给片段着色器
		out vec2 vUv;

		void main()
		{
			// 将模型的UV坐标传递给片段着色器
			// uv是Three.js提供的默认属性，表示纹理坐标
			vUv = uv;
			
			// 计算顶点在裁剪空间中的位置
			// projectionMatrix: 投影矩阵，将视图空间转换到裁剪空间
			// modelViewMatrix: 模型视图矩阵，将模型空间转换到视图空间
			// position: 顶点位置，vec4中的w分量设为1.0表示这是一个点
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
		}
	</script>

	<!-- 
		后处理片段着色器 (Fragment Shader for Post-processing)
		功能：处理输入的2D纹理数组，并将处理结果写入帧缓冲的特定层
		技术说明：这个着色器是渲染管线的关键部分，它执行实际的体数据处理
		帧缓冲配置：帧缓冲应该绑定一个2D纹理数组作为颜色附件
		性能考虑：使用高精度采样器确保数据精度，中等精度浮点数平衡性能和质量
	-->
	<script id="fragment-postprocess" type="x-shader/x-fragment">
		// 精度限定符：为sampler2DArray使用高精度，确保纹理采样精度
		// 注意：sampler2DArray是WebGL 2.0特有的类型，用于采样纹理数组
		precision highp sampler2DArray;
		// 精度限定符：为浮点数计算使用中等精度，平衡性能和质量
		precision mediump float;

		// 输入变量：从顶点着色器传递过来的UV坐标
		// 这些坐标用于在纹理上进行采样
		in vec2 vUv;

		// 统一变量 (Uniform Variables)：由JavaScript程序传入的常量
		// uTexture: 输入纹理，是一个2D纹理数组，包含体数据的所有切片
		uniform sampler2DArray uTexture;
		// uDepth: 整数类型，指定当前要处理的纹理数组层（深度层）
		uniform int uDepth;
		// uIntensity: 浮点类型，强度调节参数，用于控制体数据的显示强度
		uniform float uIntensity;

		void main()
		{
			// 从纹理数组的指定深度层采样体素值
			// texture()函数：采样纹理，参数为采样器和三维纹理坐标
			// vec3(vUv, uDepth): 三维纹理坐标，xy是UV坐标，z是深度层索引
			// .r: 只取红色通道，因为体数据通常是单通道的灰度数据
			float voxel = texture(uTexture, vec3( vUv, uDepth )).r;
			
			// 输出处理后的颜色到帧缓冲
			// gl_FragColor: 片段着色器的输出变量，表示该像素的最终颜色
			// 这里只写入红色通道，其他通道保持默认值（通常是0）
			// 乘以uIntensity参数可以调节显示亮度
			gl_FragColor.r = voxel * uIntensity;
			// 注意：如果输出到帧缓冲纹理，需要确保纹理格式匹配（这里是单通道）
		}
	</script>

	<!-- 
		显示用顶点着色器 (Vertex Shader for Display)
		功能：用于渲染最终显示到屏幕的平面几何体
		应用场景：在将处理后的纹理数组渲染到屏幕时使用
		特殊处理：包含坐标转换逻辑，将模型坐标转换为适合显示的UV坐标
	-->
	<script id="vs" type="x-shader/x-vertex">
		// 统一变量：平面尺寸（宽度和高度），用于坐标转换
		uniform vec2 size;
		// 输出变量：转换后的UV坐标，传递给片段着色器
		out vec2 vUv;

		void main() {
			// 计算顶点在裁剪空间中的位置（标准顶点变换）
			// 与后处理着色器类似，但这里的几何体是实际要显示的对象
			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			// 坐标转换：将顶点位置从模型空间转换到纹理空间
			// position.xy / size: 将位置坐标归一化到[-0.5, 0.5]范围
			// + 0.5: 将范围转换到[0.0, 1.0]，符合纹理坐标要求
			vUv.xy = position.xy / size + 0.5;
			
			// Y轴翻转：原始医学图像数据通常是倒置存储的
			// 1.0 - vUv.y: 将Y坐标翻转，使图像正立显示
			vUv.y = 1.0 - vUv.y;
			
			// 技术说明：这种翻转是因为图像数据的坐标系（左上角为原点）
			// 与OpenGL/WebGL的坐标系（左下角为原点）不同
		}
	</script>

	<!-- 
		显示用片段着色器 (Fragment Shader for Display)
		功能：将处理后的纹理数组渲染到屏幕
		特点：使用高精度确保图像质量，包含简单的颜色增强处理
		渲染目标：最终输出到屏幕（默认帧缓冲）
	-->
	<script id="fs" type="x-shader/x-fragment">
		// 精度限定符：所有计算都使用高精度，确保显示质量
		precision highp float;      // 高精度浮点数
		precision highp int;        // 高精度整数
		precision highp sampler2DArray;  // 高精度纹理数组采样器

		// 统一变量：输入纹理（经过后处理生成的2D纹理数组）
		uniform sampler2DArray diffuse;
		// 输入变量：从顶点着色器传递的UV坐标
		in vec2 vUv;
		// 统一变量：当前要显示的深度层
		uniform int depth;

		void main() {
			// 从纹理数组的指定深度层采样颜色
			// 使用三维纹理坐标：xy来自vUv，z来自depth统一变量
			vec4 color = texture( diffuse, vec3( vUv, depth ) );

			// 颜色增强：稍微提亮图像以便更好显示
			// color.rrr: 使用红色通道的三份复制创建灰度颜色
			// * 1.5: 将亮度提高50%，增强对比度
			// vec4(..., 1.0): 最终颜色，alpha通道设为1.0（完全不透明）
			gl_FragColor = vec4( color.rrr * 1.5, 1.0 );
			
			// 技术说明：这里使用.rrr是因为体数据是单通道的
			// 乘以1.5是一个简单的伽马校正，改善视觉表现
		}
	</script>
	
	<body>
		<!-- 
			信息面板：显示项目信息和数据来源声明
			位置：通常显示在页面左上角，使用CSS定位
			内容：包含项目描述、技术说明和版权信息
		-->
		<div id="info">
			<!-- Three.js官方链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">
				Three.js
			</a>
			- 2D纹理数组帧缓冲颜色附件演示
			<br />

			<!-- 项目描述和技术说明 -->
			<p>
				本示例演示如何渲染到2D纹理数组。<br/>
				WebGL 2.0允许渲染到3D纹理和纹理数组的特定"图层"。<br/>
				<br/>
			</p>

			<!-- 数据来源和版权声明 -->
			头部扫描数据由
			<a href="https://www.codeproject.com/Articles/352270/Getting-started-with-Volume-Rendering" target="_blank" rel="noopener">Divine Augustine</a> 提供<br />
			使用许可：
			<a href="https://www.codeproject.com/info/cpol10.aspx" target="_blank" rel="noopener">Code Project Open License (CPOL)</a><br />
			<br />
		</div>

		<!-- 
			模块导入映射 (Import Map)
			功能：定义JavaScript模块的导入路径别名
			作用：简化模块导入语句，避免冗长的相对路径
			说明：这是现代JavaScript模块系统的标准配置
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			类型：module - 使用ES6模块系统
			功能：包含所有Three.js初始化、数据处理和渲染逻辑
			结构：模块化组织，便于维护和扩展
		-->
		<script type="module">
			// ========== 模块导入部分 ==========
			// 导入Three.js核心库的所有导出
			// Three.js是一个强大的3D图形库，基于WebGL
			import * as THREE from 'three';

			// 导入辅助模块
			// Stats：性能监视器，显示FPS、内存使用等信息
			import Stats from 'three/addons/libs/stats.module.js';
			// unzipSync：ZIP解压库，用于解压缩体数据文件
			import { unzipSync } from 'three/addons/libs/fflate.module.js';
			// GUI：图形用户界面库，用于创建控制面板
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ========== 常量定义部分 ==========
			// 体数据维度常量：定义数据的空间分辨率
			// 这些值必须与实际的体数据文件匹配
			const DIMENSIONS = {
				width: 256,    // 数据宽度（X轴分辨率）
				height: 256,   // 数据高度（Y轴分辨率）
				depth: 109     // 数据深度（Z轴切片数量）
			};

			// GUI控制参数对象
			// 这些参数可以通过界面实时调整
			const params = {
				intensity: 1  // 显示强度，范围0-1，默认值1
			};

			// ========== 全局变量声明部分 ==========
			/** 
			 * 后处理相关对象
			 * 这些对象用于将体数据渲染到纹理数组
			 */
			// postProcessScene：后处理场景，包含一个全屏四边形
			const postProcessScene = new THREE.Scene();
			// postProcessCamera：后处理相机，使用正交投影
			// 正交相机适合2D渲染，不会产生透视变形
			const postProcessCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );

			/**
			 * WebGL数组渲染目标 (WebGLArrayRenderTarget)
			 * 功能：这是一个特殊类型的渲染目标，可以渲染到纹理数组
			 * 参数：宽度、高度、深度（图层数量）
			 * 注意：这需要WebGL 2.0支持
			 */
			const renderTarget = new THREE.WebGLArrayRenderTarget( 
				DIMENSIONS.width,     // 渲染目标宽度，与数据宽度一致
				DIMENSIONS.height,    // 渲染目标高度，与数据高度一致
				DIMENSIONS.depth      // 渲染目标深度（图层数），与数据深度一致
			);
			// 设置渲染目标纹理的格式
			// RedFormat：单通道格式，适合存储灰度体数据
			// 其他可选格式：RGBAFormat（四通道）、RGBFormat（三通道）
			renderTarget.texture.format = THREE.RedFormat;

			/**
			 * 后处理材质 (ShaderMaterial)
			 * 功能：使用自定义着色器处理体数据
			 * 特点：完全可编程，可以执行复杂的图像处理
			 */
			const postProcessMaterial = new THREE.ShaderMaterial( {
				// 统一变量定义：这些值由JavaScript程序设置
				uniforms: {
					// uTexture：输入体数据纹理，初始为null，加载数据后设置
					uTexture: { value: null },
					// uDepth：当前处理的深度层，初始设为中间层（55）
					uDepth: { value: 55 },
					// uIntensity：强度参数，控制显示亮度
					uIntensity: { value: 1.0 }
				},
				// 着色器代码：从HTML中的script标签获取
				vertexShader: document.getElementById( 'vertex-postprocess' ).textContent.trim(),
				fragmentShader: document.getElementById( 'fragment-postprocess' ).textContent.trim()
				// .trim()：去除字符串两端的空白字符
			} );

			// ========== 动画和渲染相关变量 ==========
			// depthStep：深度变化步长，控制切片动画速度
			// 正值：向前移动，负值：向后移动
			let depthStep = 0.4;

			// 主要Three.js对象声明（在init函数中初始化）
			let camera;      // 主相机（透视相机）
			let scene;       // 主场景（显示最终结果）
			let mesh;        // 显示平面网格
			let renderer;    // WebGL渲染器
			let stats;       // 性能监视器

			// 显示平面的物理尺寸（世界单位）
			// 这些值决定平面在3D空间中的大小
			const planeWidth = 50;    // 平面宽度
			const planeHeight = 50;   // 平面高度

			// ========== 初始化函数调用 ==========
			// 程序入口点：初始化所有Three.js对象和加载数据
			init();

			// ========== 函数定义部分 ==========
			
			/**
			 * 初始化函数
			 * 功能：设置Three.js环境，创建场景、相机、渲染器
			 * 流程：1. 创建DOM容器 2. 设置相机和场景 3. 创建渲染器 4. 加载数据
			 */
			function init() {
				// 步骤1：创建DOM容器
				// 创建一个div元素作为Three.js的容器
				const container = document.createElement( 'div' );
				// 将容器添加到body中
				document.body.appendChild( container );

				// 步骤2：创建主相机（透视相机）
				// 透视相机模拟人眼视角，有近大远小的透视效果
				camera = new THREE.PerspectiveCamera( 
					45,                            // 视野角度（Field of View），单位：度
					window.innerWidth / window.innerHeight, // 宽高比，匹配窗口比例
					0.1,                           // 近裁剪面（Near Clipping Plane）
					2000                           // 远裁剪面（Far Clipping Plane）
				);
				// 设置相机位置：沿Z轴向后移动70个单位
				camera.position.z = 70;

				// 步骤3：创建主场景
				// 场景是所有3D对象的容器
				scene = new THREE.Scene();

				/** 步骤4：设置后处理场景 */
				// 创建全屏四边形的几何体：宽度2，高度2
				// 这个几何体将覆盖整个视口
				const planeGeometry = new THREE.PlaneGeometry( 2, 2 );
				// 创建全屏四边形网格，使用后处理材质
				const screenQuad = new THREE.Mesh( planeGeometry, postProcessMaterial );
				// 将四边形添加到后处理场景
				postProcessScene.add( screenQuad );

				// 步骤5：创建WebGL渲染器
				// 注意：2D纹理数组需要WebGL 2.0支持
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比，适配高DPI屏幕（Retina显示等）
				renderer.setPixelRatio( window.devicePixelRatio );
				// 设置渲染器尺寸为窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				// 将渲染器的canvas元素添加到容器中
				container.appendChild( renderer.domElement );

				// 步骤6：创建性能监视器
				stats = new Stats();
				// 将性能监视器的DOM元素添加到容器
				container.appendChild( stats.dom );

				// 步骤7：添加窗口大小变化事件监听器
				// 当窗口大小改变时，重新调整相机和渲染器
				window.addEventListener( 'resize', onWindowResize );

				// 步骤8：创建图形用户界面（GUI）
				const gui = new GUI();
				// 添加强度控制滑块
				gui.add( params, 'intensity', 0, 1 )  // 参数：对象，属性名，最小值，最大值
				   .step( 0.01 )                      // 步长：0.01，控制调整精度
				   .onChange( value => {              // 值变化时的回调函数
					   // 更新后处理材质的强度参数
					   postProcessMaterial.uniforms.uIntensity.value = value;
				   } );
				gui.open();  // 默认打开GUI面板

				// 步骤9：加载和处理体数据
				// 数据文件说明：head256x256x109.zip
				// - 宽度：256像素，高度：256像素，深度：109层
				// - 数据类型：8位无符号整数（0-255）
				// - 存储格式：ZIP压缩的原始二进制数据
				new THREE.FileLoader()
					.setResponseType( 'arraybuffer' )  // 设置响应类型为ArrayBuffer（二进制数据）
					.load( 
						'textures/3d/head256x256x109.zip',  // 数据文件路径
						function ( data ) {  // 加载完成后的回调函数
							// 步骤9.1：解压ZIP文件
							// 使用fflate库的unzipSync函数同步解压
							const zip = unzipSync( new Uint8Array( data ) );
							// 从解压结果中获取体数据文件
							// 'head256x256x109'是ZIP文件中的文件名
							const array = new Uint8Array( zip[ 'head256x256x109' ].buffer );

							// 步骤9.2：创建数据数组纹理
							// DataArrayTexture是Three.js中用于存储体数据的特殊纹理类型
							const texture = new THREE.DataArrayTexture( 
								array,                // 原始数据：Uint8Array
								DIMENSIONS.width,     // 纹理宽度：256
								DIMENSIONS.height,    // 纹理高度：256
								DIMENSIONS.depth      // 纹理深度：109
							);
							// 设置纹理格式为单通道（红色通道）
							texture.format = THREE.RedFormat;
							// 标记纹理需要更新（将数据上传到GPU）
							texture.needsUpdate = true;

							// 步骤9.3：创建显示材质
							// 这个材质用于将处理后的纹理渲染到屏幕
							const material = new THREE.ShaderMaterial( {
								// 统一变量
								uniforms: {
									// diffuse：输入纹理，使用渲染目标纹理（后处理结果）
									diffuse: { value: renderTarget.texture },
									// depth：当前显示的深度层，初始设为中间层
									depth: { value: 55 },
									// size：平面尺寸，用于坐标转换
									size: { value: new THREE.Vector2( planeWidth, planeHeight ) }
								},
								// 着色器代码
								vertexShader: document.getElementById( 'vs' ).textContent.trim(),
								fragmentShader: document.getElementById( 'fs' ).textContent.trim()
							} );

							// 步骤9.4：创建平面几何体
							// 这个平面将显示体数据的切片
							const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );

							// 步骤9.5：创建网格对象
							mesh = new THREE.Mesh( geometry, material );
							// 将网格添加到主场景
							scene.add( mesh );

							// 步骤9.6：设置后处理材质的输入纹理
							// 将加载的体数据纹理传递给后处理材质
							postProcessMaterial.uniforms.uTexture.value = texture;

							// 步骤9.7：启动动画循环
							// setAnimationLoop替代了过时的requestAnimationFrame
							renderer.setAnimationLoop( animate );
						}
					);
			}

			/**
			 * 窗口大小变化处理函数
			 * 功能：当浏览器窗口大小改变时，调整渲染器和相机
			 * 确保3D场景正确适配新的窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机的宽高比
				// 窗口大小改变后，宽高比也会改变
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵
				// 必须调用此方法使宽高比变化生效
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 使canvas元素的大小与窗口大小一致
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数
			 * 功能：每一帧执行的更新和渲染逻辑
			 * 调用方式：由renderer.setAnimationLoop自动调用
			 * 频率：通常是每秒60次（取决于显示器刷新率）
			 */
			function animate() {
				// 步骤1：获取当前深度值
				// 从显示材质的统一变量中获取当前深度
				let value = mesh.material.uniforms[ 'depth' ].value;

				// 步骤2：更新深度值（创建动画效果）
				// 每次调用增加depthStep，使深度值随时间变化
				value += depthStep;

				// 步骤3：边界检查和反弹逻辑
				// 当深度值超出有效范围（0-109）时，改变移动方向
				if ( value > 109.0 || value < 0.0 ) {
					// 如果超出上限，反弹回来
					// 公式：109.0 * 2.0 - value 实现反弹效果
					if ( value > 1.0 ) value = 109.0 * 2.0 - value;
					// 如果低于下限，取绝对值反弹
					if ( value < 0.0 ) value = - value;
					
					// 反转移动方向
					// depthStep为正时向前，为负时向后
					depthStep = - depthStep;
				}

				// 步骤4：更新显示材质的深度值
				// 这个值将在片段着色器中用于纹理采样
				mesh.material.uniforms[ 'depth' ].value = value;

				// 步骤5：执行渲染
				// 调用render函数执行完整的渲染流程
				render();

				// 步骤6：更新性能监视器
				// 显示当前的FPS、帧时间等性能指标
				stats.update();
			}

			/**
			 * 渲染到2D纹理数组函数
			 * 功能：将体数据渲染到纹理数组的特定层
			 * 技术核心：使用WebGL 2.0的layered rendering功能
			 * 流程：设置渲染目标到特定层 -> 渲染后处理场景 -> 重置渲染目标
			 */
			function renderTo2DArray() {
				// 步骤1：计算要渲染的图层
				// 使用Math.floor取整，确保是有效的纹理数组索引
				const layer = Math.floor( mesh.material.uniforms[ 'depth' ].value );
				
				// 步骤2：更新后处理材质的深度参数
				// 告诉后处理着色器要处理哪个深度层
				postProcessMaterial.uniforms.uDepth.value = layer;
				
				// 步骤3：设置渲染目标
				// setRenderTarget将后续的渲染输出到指定的渲染目标
				// 第二个参数layer指定渲染到纹理数组的哪一层
				renderer.setRenderTarget( renderTarget, layer );
				
				// 步骤4：渲染后处理场景
				// 这将执行后处理着色器，将体数据渲染到纹理数组的指定层
				renderer.render( postProcessScene, postProcessCamera );
				
				// 步骤5：重置渲染目标
				// 将渲染目标设回null，表示后续渲染输出到默认帧缓冲（屏幕）
				renderer.setRenderTarget( null );
				
				// 技术说明：这个过程类似于离屏渲染（Off-screen Rendering）
				// 但目标是纹理数组而不是普通的2D纹理
			}

			/**
			 * 主渲染函数
			 * 功能：执行完整的双通道渲染流程
			 * 通道1：将体数据渲染到纹理数组（离屏渲染）
			 * 通道2：将纹理数组渲染到屏幕（屏幕渲染）
			 * 优势：分离渲染逻辑，便于优化和扩展
			 */
			function render() {
				// 通道1：渲染到2D纹理数组
				// 将原始体数据处理后存储到纹理数组
				renderTo2DArray();

				// 通道2：渲染到屏幕
				// 使用主相机渲染主场景，显示处理后的纹理
				renderer.render( scene, camera );
				
				// 性能考虑：这种双通道渲染虽然增加了一次渲染调用
				// 但可以实现更复杂的效果，且纹理数组可以重复使用
			}
		</script>
	</body>
</html>