<!-- Three.js WebGL2 体积渲染示例
🎯 整体功能概述
这是一个基于 Three.js 和 WebGL2 的体积渲染（Volume Rendering）交互式演示程序。它通过光线步进算法（Ray Marching）在浏览器中实时渲染3D体积数据，模拟了类似CT扫描、MRI医学影像或科学数据可视化的效果。

📊 核心功能模块
1. 3D体积数据生成
柏林噪声生成器：创建128×128×128分辨率的3D噪声纹理

实时数据生成：程序化生成体积数据，无需外部数据文件

灰度值存储：使用8位无符号整数（0-255）表示密度值

2. 光线步进体积渲染
等值面提取：通过用户设定的阈值提取体积表面

实时交互渲染：60fps的流畅渲染性能

伪彩色显示：基于法线和位置生成视觉友好的颜色

3. 交互式控制界面
鼠标轨道控制：旋转、缩放、平移视角

实时参数调节：通过GUI调整密度阈值和渲染精度

响应式布局：自动适应不同屏幕尺寸

🛠️ 核心技术实现
1. 光线步进算法（Ray Marching）
text
算法流程：
1. 计算光线与体积包围盒的交点
2. 将交点区间划分为N个步长
3. 沿光线方向逐步采样3D纹理
4. 当采样值超过阈值时，计算表面法线
5. 基于法线和位置计算最终颜色
2. GPU着色器编程
顶点着色器：

glsl
// 计算视线起点和方向
vOrigin = 相机位置（模型空间）
vDirection = 顶点位置 - vOrigin
片元着色器：

glsl
// 关键函数
hitBox()     // 光线-包围盒求交
sample1()    // 3D纹理采样
normal()     // 中心差分法线计算
3. 3D纹理技术
WebGL2 3D纹理支持：使用sampler3D和texture()函数

内存高效存储：每个体素仅需1字节（单通道）

线性插值过滤：确保采样时的平滑过渡

4. 等值面法线计算
中心差分方法：

text
法线 ≈ normalize(vec3(
  f(x-ε,y,z) - f(x+ε,y,z),  // X方向梯度
  f(x,y-ε,z) - f(x,y+ε,z),  // Y方向梯度  
  f(x,y,z-ε) - f(x,y,z+ε)   // Z方向梯度
))
5. 相机空间变换
javascript
// 关键矩阵变换链：
模型空间 → 模型矩阵 → 世界空间 → 视图矩阵 → 相机空间 → 投影矩阵 → 裁剪空间
⚙️ 技术架构层次
应用层
Three.js框架管理场景、相机、渲染器

GUI参数控制系统

用户交互事件处理

渲染层
WebGL2 API调用

自定义着色器编译和执行

GPU资源管理（纹理、缓冲区）

算法层
光线步进核心算法

3D纹理采样策略

等值面提取逻辑

数据层
柏林噪声生成算法

Uint8Array数据缓冲区

GPU纹理数据上传

🔍 关键算法详解
光线-包围盒求交算法
glsl
// 分离轴定理实现
vec2 hitBox(vec3 orig, vec3 dir) {
    vec3 inv_dir = 1.0 / dir;
    vec3 tmin = (box_min - orig) * inv_dir;
    vec3 tmax = (box_max - orig) * inv_dir;
    vec3 t1 = min(tmin, tmax);
    vec3 t2 = max(tmin, tmax);
    float t_near = max(max(t1.x, t1.y), t1.z);
    float t_far = min(min(t2.x, t2.y), t2.z);
    return vec2(t_near, t_far);
}
步进采样优化
glsl
// 自适应终止条件
if (d > threshold) {  // 找到表面
    color.rgb = 计算颜色;
    color.a = 1.0;
    break;  // 提前终止循环
}
🎨 视觉呈现特点
颜色生成策略
text
最终颜色 = 法线 × 0.5 + (位置 × 1.5 + 0.25)

解释：
- 法线部分：基于表面朝向的着色，增强3D感
- 位置部分：基于空间位置的渐变色，提供空间参考
渲染效果特征
半透明效果：通过阈值控制显示不同密度区域

表面细节：法线计算提供精细的表面纹理

动态更新：参数变化时实时更新渲染结果

📈 性能优化策略
GPU优化
提前深度测试：通过discard语句尽早终止不可见像素

纹理缓存：3D纹理存储在GPU显存，快速访问

最小化uniform更新：仅在必要时更新着色器参数

算法优化
固定步长：简化步进计算，减少分支

边界检查：避免纹理坐标越界导致的性能问题

循环优化：使用简单for循环，便于GPU并行化

内存优化
压缩格式：单通道8位纹理，内存占用小

按需生成：运行时生成数据，无需预加载大文件

垃圾回收友好：避免频繁的内存分配

🔧 可扩展性设计
数据源扩展
可替换为医学DICOM数据

支持科学模拟数据（流体、温度场等）

实时传感器数据流

渲染效果扩展
添加光照模型（Phong、PBR）

支持传递函数（Transfer Function）

多等值面同时显示

交互功能扩展
切片视图（正交切面）

体绘制模式切换

动画序列播放

🎯 应用场景
教育演示
计算机图形学教学

体积渲染算法演示

WebGL/Three.js学习案例

原型开发
医学影像查看器原型

科学数据可视化工具

游戏体积效果测试

技术验证
WebGL2功能验证

大体积数据渲染性能测试

跨平台Web图形兼容性测试

📋 系统要求
硬件要求
支持WebGL2的GPU

建议2GB以上显存（用于3D纹理存储）

软件要求
现代浏览器（Chrome 80+、Firefox 76+、Safari 15+）

WebGL2支持启用

性能指标
初始加载时间：< 2秒

渲染帧率：≥ 60fps（中等参数）

内存占用：约20MB（包含纹理数据） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 网页元信息 -->
		<!-- 设置页面标题为"Three.js WebGL2 体积渲染示例" -->
		<title>Three.js WebGL2 体积渲染示例</title>
		<!-- 指定字符编码为UTF-8，确保中文字符正确显示 -->
		<meta charset="utf-8">
		<!-- 
			视口设置:
			- width=device-width: 视口宽度等于设备宽度
			- user-scalable=no: 禁止用户手动缩放页面
			- minimum-scale=1.0: 最小缩放比例为1
			- maximum-scale=1.0: 最大缩放比例为1
			这些设置确保页面在不同设备上保持一致的显示效果
		-->
		<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>

	<body>
		<!-- 
			页面信息区域:
			- id="info": 用于CSS样式选择和JavaScript操作
			- 包含Three.js库的链接和当前示例的描述
		-->
		<div id="info">
			<!-- 
				链接到Three.js官方网站:
				- href="https://threejs.org": 目标网址
				- target="_blank": 在新标签页中打开
				- rel="noopener": 安全设置，防止新页面访问原页面的window对象
			-->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL2 体积渲染示例 - 展示3D体积数据的光线步进渲染技术
		</div>

		<!-- 
			导入映射表 (Import Map):
			这是现代JavaScript模块系统的一部分，用于定义模块路径的映射关系。
			当使用ES模块时，浏览器根据这个映射表来解析import语句中的模块路径。
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块:
			type="module" 表示这是一个ES6模块，支持模块化导入导出
			模块中的代码有自己的作用域，不会污染全局命名空间
		-->
		<script type="module">
			// ==================== 模块导入区域 ====================
			
			// 导入Three.js核心库的所有功能，并命名为THREE
			// THREE是Three.js的全局命名空间，包含所有核心类和方法
			import * as THREE from 'three';
			
			// 从Three.js附加组件中导入轨道控制器
			// OrbitControls允许用户通过鼠标拖拽、滚轮缩放来交互式控制相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 从Three.js附加组件中导入改进的柏林噪声生成器
			// ImprovedNoise用于生成高质量的3D噪声纹理，常用于体积数据生成
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
			
			// 导入轻量级GUI库
			// GUI用于创建调试界面，允许用户实时调整参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ==================== 全局变量声明 ====================
			
			// 渲染器变量: 负责将3D场景渲染到HTML canvas元素上
			let renderer;
			
			// 场景变量: 包含所有需要渲染的3D对象（网格、灯光、相机等）
			let scene;
			
			// 相机变量: 定义观察3D场景的视角
			let camera;
			
			// 网格变量: 包含体积渲染的几何体和材质
			let mesh;

			// ==================== 初始化函数调用 ====================
			
			// 页面加载完成后，立即执行初始化函数
			// 这个函数会设置Three.js的所有核心组件
			init();

			/**
			 * 初始化函数 - Three.js应用程序的启动点
			 * 这个函数负责创建和配置所有Three.js核心组件：
			 * 1. 创建WebGL渲染器
			 * 2. 创建3D场景
			 * 3. 设置相机
			 * 4. 创建控制器
			 * 5. 生成体积数据
			 * 6. 创建着色器材质
			 * 7. 设置GUI控件
			 * 8. 绑定窗口事件
			 */
			function init() {

				// ==================== 创建WebGL渲染器 ====================
				
				// 实例化WebGL渲染器
				// WebGLRenderer是Three.js的主要渲染器，使用WebGL API进行硬件加速渲染
				renderer = new THREE.WebGLRenderer();
				
				// 设置设备像素比
				// 这确保在高DPI设备（如Retina显示器）上渲染清晰的图像
				// window.devicePixelRatio返回设备的物理像素与CSS像素的比率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为浏览器窗口大小
				// 这样3D场景会填满整个浏览器窗口
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环回调函数
				// setAnimationLoop替代了以前的requestAnimationFrame方式
				// animate函数将在每一帧被调用，实现平滑的动画效果
				renderer.setAnimationLoop( animate );
				
				// 将渲染器的canvas元素添加到HTML文档的body中
				// renderer.domElement是渲染器创建的<canvas>元素
				document.body.appendChild( renderer.domElement );

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

				// ==================== 创建透视相机 ====================
				
				/**
				 * 创建透视相机 (PerspectiveCamera):
				 * 透视相机模拟人眼观察世界的方式，远处的物体看起来更小
				 * 
				 * 参数说明:
				 * 1. 视野角度 (60): 垂直视野角度，单位是度。值越大，看到的场景越广
				 * 2. 宽高比 (window.innerWidth / window.innerHeight): 渲染区域的宽高比
				 * 3. 近裁剪面 (0.1): 相机能看到的最近距离，小于此距离的对象不会被渲染
				 * 4. 远裁剪面 (100): 相机能看到的最远距离，大于此距离的对象不会被渲染
				 */
				camera = new THREE.PerspectiveCamera( 
					60,  // 视野角度
					window.innerWidth / window.innerHeight,  // 宽高比
					0.1, // 近裁剪面
					100  // 远裁剪面
				);
				
				// 设置相机初始位置
				// 将相机放在Z轴正方向2个单位处，面向坐标系原点
				camera.position.set( 0, 0, 2 );

				// ==================== 创建轨道控制器 ====================
				
				/**
				 * 实例化轨道控制器 (OrbitControls):
				 * OrbitControls提供鼠标交互功能：
				 * - 左键拖拽：旋转相机视角
				 * - 右键拖拽：平移场景
				 * - 滚轮滚动：缩放视图
				 * - 触摸设备：支持手势操作
				 * 
				 * 参数说明:
				 * 1. camera: 需要控制的相机对象
				 * 2. renderer.domElement: 监听事件的DOM元素（通常是canvas）
				 */
				new OrbitControls( camera, renderer.domElement );

				// ==================== 创建3D体积纹理 ====================
				
				/**
				 * 步骤1: 定义纹理尺寸和数据结构
				 * 体积纹理是3D的，类似于2D纹理但多了一个维度
				 */
				const size = 128;  // 纹理在每个维度上的分辨率（128×128×128个体素）
				
				/**
				 * 创建纹理数据数组:
				 * Uint8Array是8位无符号整数数组，每个元素值范围0-255
				 * size * size * size = 128³ = 2,097,152个体素
				 * 每个体素存储一个灰度值（0-255）
				 */
				const data = new Uint8Array( size * size * size );

				// 用于遍历数据数组的索引
				let i = 0;
				
				// 创建柏林噪声生成器实例
				// 柏林噪声是一种梯度噪声，常用于生成自然的外观（云、地形等）
				const perlin = new ImprovedNoise();
				
				// 创建临时向量，用于计算噪声采样位置
				const vector = new THREE.Vector3();

				/**
				 * 步骤2: 生成柏林噪声数据
				 * 使用三层嵌套循环遍历3D纹理的所有体素
				 * 循环顺序：Z轴 → Y轴 → X轴（从内到外）
				 */
				for ( let z = 0; z < size; z ++ ) {        // 外层循环：深度方向（Z轴）
					for ( let y = 0; y < size; y ++ ) {    // 中层循环：高度方向（Y轴）
						for ( let x = 0; x < size; x ++ ) {  // 内层循环：宽度方向（X轴）

							/**
							 * 步骤2.1: 将体素坐标归一化到[0, 1]范围
							 * 柏林噪声函数期望输入在[0, 1]范围内
							 * vector.set(x, y, z) 设置向量坐标
							 * divideScalar(size) 将每个分量除以size，得到[0, 1]范围
							 */
							vector.set( x, y, z ).divideScalar( size );
							
							/**
							 * 步骤2.2: 计算柏林噪声值
							 * perlin.noise(x, y, z) 返回范围大约在[-1, 1]的噪声值
							 * 乘以6.5增加频率，使噪声图案更复杂、细节更丰富
							 */
							const d = perlin.noise( 
								vector.x * 6.5,  // X坐标乘以频率系数
								vector.y * 6.5,  // Y坐标乘以频率系数
								vector.z * 6.5   // Z坐标乘以频率系数
							);
							
							/**
							 * 步骤2.3: 将噪声值映射到[0, 255]范围并存储
							 * d * 128: 将[-1, 1]映射到[-128, 128]
							 * + 128: 将[-128, 128]映射到[0, 256]
							 * 注意：Uint8Array会自动将大于255的值截断为255
							 */
							data[ i ++ ] = d * 128 + 128;

						}
					}
				}

				/**
				 * 步骤3: 创建3D纹理对象
				 * Data3DTexture用于将原始数据数组转换为WebGL可以使用的3D纹理
				 */
				const texture = new THREE.Data3DTexture( 
					data,  // 纹理数据源
					size,  // 纹理宽度（X维度）
					size,  // 纹理高度（Y维度）
					size   // 纹理深度（Z维度）
				);
				
				// 设置纹理格式为单通道（红色通道）
				// 对于灰度图像，通常只需要一个通道
				texture.format = THREE.RedFormat;
				
				// 设置纹理缩小过滤器为线性过滤
				// 当纹理被缩小时，使用线性插值产生平滑效果
				texture.minFilter = THREE.LinearFilter;
				
				// 设置纹理放大过滤器为线性过滤
				// 当纹理被放大时，使用线性插值
				texture.magFilter = THREE.LinearFilter;
				
				// 设置内存对齐方式为1字节
				// 这确保纹理数据在内存中正确对齐，避免性能问题
				texture.unpackAlignment = 1;
				
				// 标记纹理需要更新
				// 告诉Three.js纹理数据已更改，需要在下次渲染时上传到GPU
				texture.needsUpdate = true;

				// ==================== 体积渲染着色器 ====================
				
				/**
				 * 顶点着色器 - 每个顶点执行一次
				 * 主要任务：
				 * 1. 计算顶点的最终位置
				 * 2. 将数据传递给片元着色器
				 * 
				 * GLSL语法说明:
				 * - in: 输入变量（从JavaScript传递）
				 * - out: 输出变量（传递给片元着色器）
				 * - uniform: 统一变量（所有顶点/片元共享）
				 * - attribute: 属性变量（每个顶点不同，GLSL3中已改为in）
				 */
				const vertexShader = /* glsl */`
					// 输入变量：顶点位置（来自几何体）
					in vec3 position;

					// 统一变量：变换矩阵和相机位置（由Three.js自动提供）
					uniform mat4 modelMatrix;        // 模型矩阵：从模型空间到世界空间
					uniform mat4 modelViewMatrix;    // 模型视图矩阵：从模型空间到相机空间
					uniform mat4 projectionMatrix;   // 投影矩阵：从相机空间到裁剪空间
					uniform vec3 cameraPos;          // 相机在世界空间中的位置

					// 输出变量：传递给片元着色器的数据
					out vec3 vOrigin;     // 视线起点（在模型空间中）
					out vec3 vDirection;  // 视线方向（从相机到当前顶点）

					/**
					 * 主函数：每个顶点执行一次
					 */
					void main() {
						// 计算顶点在相机空间中的位置
						// modelViewMatrix * vec4(position, 1.0) 将顶点从模型空间转换到相机空间
						vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

						/**
						 * 计算视线起点（相机在模型空间中的位置）：
						 * 1. vec4(cameraPos, 1.0): 将相机位置转换为齐次坐标
						 * 2. inverse(modelMatrix): 获取模型矩阵的逆矩阵
						 * 3. 逆矩阵将世界空间坐标转换回模型空间
						 * 4. .xyz: 提取三维坐标部分
						 * 
						 * 原理：视线起点是相机位置，但需要转换到模型空间坐标系
						 */
						vOrigin = vec3( inverse( modelMatrix ) * vec4( cameraPos, 1.0 ) ).xyz;
						
						/**
						 * 计算视线方向：
						 * 方向 = 当前顶点位置 - 相机位置
						 * 注意：都在模型空间坐标系中
						 */
						vDirection = position - vOrigin;

						/**
						 * 计算顶点在裁剪空间中的最终位置：
						 * 1. mvPosition是顶点在相机空间中的位置
						 * 2. projectionMatrix将相机空间转换到裁剪空间
						 * 3. 裁剪空间坐标用于确定顶点是否在视锥体内
						 */
						gl_Position = projectionMatrix * mvPosition;
					}
				`;

				/**
				 * 片元着色器 - 每个像素执行一次
				 * 主要任务：
				 * 1. 执行光线步进算法
				 * 2. 采样3D纹理
				 * 3. 计算等值面
				 * 4. 确定最终颜色
				 */
				const fragmentShader = /* glsl */`
					// 设置浮点数和采样器的高精度
					precision highp float;     // 高精度浮点数（避免精度问题）
					precision highp sampler3D; // 高精度3D采样器

					// 统一变量：变换矩阵
					uniform mat4 modelViewMatrix;    // 模型视图矩阵
					uniform mat4 projectionMatrix;   // 投影矩阵

					// 输入变量：从顶点着色器传递的数据
					in vec3 vOrigin;     // 视线起点
					in vec3 vDirection;  // 视线方向

					// 输出变量：最终像素颜色
					out vec4 color;      // RGBA颜色值

					// 统一变量：用户可调节参数
					uniform sampler3D map;    // 3D纹理采样器
					uniform float threshold;  // 密度阈值（决定哪些部分可见）
					uniform float steps;      // 光线步进步数（影响渲染质量和性能）

					/**
					 * 计算光线与轴对齐包围盒(AABB)的交点
					 * 这是光线步进算法的第一步，确定光线与体积相交的区间
					 * 
					 * 参数:
					 * - orig: 光线起点（模型空间）
					 * - dir: 光线方向（已归一化）
					 * 
					 * 返回值:
					 * - vec2(t0, t1): t0是进入距离，t1是离开距离
					 * - 如果t0 > t1，表示没有交点
					 */
					vec2 hitBox( vec3 orig, vec3 dir ) {
						// 定义轴对齐包围盒的边界（单位立方体，中心在原点）
						const vec3 box_min = vec3( - 0.5 );  // 最小角点(-0.5, -0.5, -0.5)
						const vec3 box_max = vec3( 0.5 );    // 最大角点(0.5, 0.5, 0.5)
						
						// 计算方向向量的倒数，用于快速计算与各平面的交点
						// 注意：需要处理dir分量为0的情况，但这里假设不会发生
						vec3 inv_dir = 1.0 / dir;
						
						// 计算光线与每个平面的交点距离（六个平面）
						// 公式：t = (plane - orig) / dir
						vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
						vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
						
						// 对于每个维度，选择较小的作为进入距离，较大的作为离开距离
						// 这是因为当dir分量为负时，与最大平面的交点可能更近
						vec3 tmin = min( tmin_tmp, tmax_tmp );  // 三个维度的进入距离候选
						vec3 tmax = max( tmin_tmp, tmax_tmp );  // 三个维度的离开距离候选
						
						/**
						 * 计算实际的进入距离t0：
						 * - 光线必须进入所有三个平面定义的空间
						 * - 因此取三个维度进入距离的最大值
						 * - 这确保光线真正进入了立方体内部
						 */
						float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
						
						/**
						 * 计算实际的离开距离t1：
						 * - 光线离开任何一个平面就会离开立方体
						 * - 因此取三个维度离开距离的最小值
						 */
						float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
						
						// 返回交点距离范围
						return vec2( t0, t1 );
					}

					/**
					 * 采样3D纹理的辅助函数
					 * 简化纹理采样代码，提高可读性
					 * 
					 * 参数:
					 * - p: 采样坐标，范围[0, 1]
					 * 
					 * 返回值:
					 * - float: 纹理的红色通道值（灰度值）
					 */
					float sample1( vec3 p ) {
						// texture()是GLSL内置函数，用于采样纹理
						// map是3D纹理采样器，p是3D坐标，.r获取红色通道值
						return texture( map, p ).r;
					}

					// 定义一个小量，用于边界检查和避免数值误差
					#define epsilon .0001

					/**
					 * 计算表面法线向量（通过中心差分法）
					 * 法线对于光照计算和表面显示至关重要
					 * 
					 * 参数:
					 * - coord: 表面点的纹理坐标，范围[0, 1]
					 * 
					 * 返回值:
					 * - vec3: 归一化的法线向量
					 * 
					 * 原理:
					 * 在表面点附近采样6个点，计算梯度（密度变化率）
					 * 梯度方向就是法线方向（垂直于等值面）
					 */
					vec3 normal( vec3 coord ) {
						// 边界检查：如果点在纹理边界附近，返回边界法线
						// 这避免从纹理外部采样，导致错误结果
						if ( coord.x < epsilon ) return vec3( 1.0, 0.0, 0.0 );   // 左边界：法线指向X正方向
						if ( coord.y < epsilon ) return vec3( 0.0, 1.0, 0.0 );   // 下边界：法线指向Y正方向
						if ( coord.z < epsilon ) return vec3( 0.0, 0.0, 1.0 );   // 后边界：法线指向Z正方向
						if ( coord.x > 1.0 - epsilon ) return vec3( - 1.0, 0.0, 0.0 ); // 右边界：法线指向X负方向
						if ( coord.y > 1.0 - epsilon ) return vec3( 0.0, - 1.0, 0.0 ); // 上边界：法线指向Y负方向
						if ( coord.z > 1.0 - epsilon ) return vec3( 0.0, 0.0, - 1.0 ); // 前边界：法线指向Z负方向

						// 中心差分步长：控制法线计算的精度
						// 较小的步长更精确但可能放大噪声，较大的步长更平滑但可能丢失细节
						float step = 0.01;
						
						/**
						 * 使用中心差分法计算梯度（近似法线）：
						 * 梯度 = (f(x+h) - f(x-h)) / (2h)
						 * 这里简化了，只计算差值，因为最后会归一化
						 * 
						 * X方向梯度：在X正负方向各采样一点，计算差值
						 */
						float x = sample1( coord + vec3( - step, 0.0, 0.0 ) ) - sample1( coord + vec3( step, 0.0, 0.0 ) );
						
						// Y方向梯度：在Y正负方向各采样一点
						float y = sample1( coord + vec3( 0.0, - step, 0.0 ) ) - sample1( coord + vec3( 0.0, step, 0.0 ) );
						
						// Z方向梯度：在Z正负方向各采样一点
						float z = sample1( coord + vec3( 0.0, 0.0, - step ) ) - sample1( coord + vec3( 0.0, 0.0, step ) );

						// 归一化梯度向量得到单位法线
						// normalize()是GLSL内置函数，计算向量的单位向量
						return normalize( vec3( x, y, z ) );
					}

					/**
					 * 片元着色器主函数 - 每个像素执行一次
					 * 实现光线步进体积渲染算法：
					 * 1. 计算光线方向
					 * 2. 计算光线与体积的交点
					 * 3. 沿光线步进采样
					 * 4. 找到等值面并计算颜色
					 * 5. 输出最终颜色或丢弃像素
					 */
					void main(){
						/**
						 * 步骤1: 归一化视线方向
						 * normalize()确保方向向量长度为1，方便距离计算
						 * vDirection来自顶点着色器，是从相机到顶点的向量
						 */
						vec3 rayDir = normalize( vDirection );
						
						/**
						 * 步骤2: 计算光线与体积包围盒的交点
						 * hitBox()返回进入距离t0和离开距离t1
						 * vOrigin是相机在模型空间中的位置
						 */
						vec2 bounds = hitBox( vOrigin, rayDir );

						/**
						 * 步骤3: 检查是否有有效交点
						 * 如果t0 > t1，表示光线没有穿过立方体
						 * discard关键字立即终止当前片元的处理，不写入颜色
						 */
						if ( bounds.x > bounds.y ) discard;

						/**
						 * 步骤4: 确保起始点在相机前方
						 * 如果t0是负数，表示进入点在相机后面
						 * max(bounds.x, 0.0)将负值设为0，从相机位置开始步进
						 */
						bounds.x = max( bounds.x, 0.0 );

						/**
						 * 步骤5: 计算光线步进步长
						 * 总距离 = 离开距离 - 进入距离
						 * 步长 = 总距离 / 步数
						 * 步数越多，采样越密集，质量越高但性能越低
						 */
						float stepSize = ( bounds.y - bounds.x ) / steps;

						/**
						 * 步骤6: 光线步进循环
						 * 从进入点开始，以固定步长沿光线前进
						 * 在每一步采样3D纹理，寻找密度超过阈值的点（等值面）
						 */
						for ( float i = 0.0; i < steps; i += 1.0 ) {
							/**
							 * 步骤6.1: 计算当前步的采样距离
							 * t = 进入距离 + 步数索引 × 步长
							 */
							float t = bounds.x + i * stepSize;
							
							/**
							 * 步骤6.2: 计算采样点位置（模型空间）
							 * 光线参数方程：P = Origin + t × Direction
							 */
							vec3 p = vOrigin + t * rayDir;
							
							/**
							 * 步骤6.3: 采样3D纹理
							 * 注意：纹理坐标范围是[0, 1]，但模型空间范围是[-0.5, 0.5]
							 * p + 0.5 将[-0.5, 0.5]映射到[0, 1]
							 * sample1()返回灰度值（密度值）
							 */
							float d = sample1( p + 0.5 );

							/**
							 * 步骤6.4: 检查是否找到等值面
							 * 如果采样密度超过阈值，表示找到了表面
							 * threshold是用户可调节参数，控制显示的"密度水平"
							 */
							if ( d > threshold ) {
								/**
								 * 步骤6.5: 计算表面颜色
								 * 颜色 = 法线 × 0.5 + (位置 × 1.5 + 0.25)
								 * 
								 * 解释：
								 * 1. normal(p + 0.5) * 0.5: 法线部分，产生基于方向的颜色变化
								 * 2. p * 1.5 + 0.25: 位置部分，产生基于位置的渐变色
								 *    - p * 1.5: 放大位置差异
								 *    - + 0.25: 确保颜色值在合理范围内
								 * 
								 * 这种组合产生视觉上有趣的伪彩色效果
								 */
								color.rgb = normal( p + 0.5 ) * 0.5 + ( p * 1.5 + 0.25 );
								
								// 设置完全不透明（找到表面）
								color.a = 1.;
								
								// 找到表面后立即跳出循环，提高性能
								break;
							}
						}

						/**
						 * 步骤7: 检查是否找到表面
						 * 如果循环结束color.a仍然是0，表示没有找到等值面
						 * discard丢弃该像素，显示为透明/背景
						 */
						if ( color.a == 0.0 ) discard;
					}
				`;

				// ==================== 创建网格对象 ====================
				
				/**
				 * 创建几何体：单位立方体
				 * BoxGeometry创建轴对齐的立方体网格
				 * 参数：宽度、高度、深度（都是1个单位）
				 * 这个立方体作为体积渲染的"容器"或"边界框"
				 */
				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
				
				/**
				 * 创建自定义着色器材质
				 * RawShaderMaterial允许完全控制着色器代码
				 * 与ShaderMaterial不同，它不会自动添加Three.js的uniform和attribute
				 */
				const material = new THREE.RawShaderMaterial( {
					// 指定GLSL版本为3.0（WebGL2支持）
					glslVersion: THREE.GLSL3,
					
					// 统一变量定义：从JavaScript传递到着色器的常量数据
					uniforms: {
						map: { value: texture },                    // 3D纹理
						cameraPos: { value: new THREE.Vector3() },  // 相机位置（初始为零向量）
						threshold: { value: 0.6 },                  // 密度阈值初始值
						steps: { value: 200 }                       // 步进次数初始值
					},
					
					// 着色器代码
					vertexShader,     // 顶点着色器源代码
					fragmentShader,   // 片元着色器源代码
					
					/**
					 * 设置渲染面为背面
					 * 因为相机在立方体内部，我们实际看到的是立方体的内表面
					 * THREE.BackSide只渲染多边形的背面
					 * 如果设为THREE.FrontSide，相机将看不到任何东西（在立方体内部）
					 */
					side: THREE.BackSide,
				} );

				/**
				 * 创建网格对象并添加到场景
				 * Mesh是Three.js中基本的渲染对象，包含几何体和材质
				 */
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );

				// ==================== 创建GUI调试界面 ====================
				
				/**
				 * 控制参数对象
				 * 这两个参数会通过GUI控件暴露给用户调节
				 */
				const parameters = { 
					threshold: 0.6,  // 密度阈值：控制显示哪些密度范围
					steps: 200       // 步进步数：控制渲染质量和性能的平衡
				};

				/**
				 * 更新函数 - 当GUI控件值改变时调用
				 * 将JavaScript中的参数值同步到着色器的uniform变量
				 */
				function update() {
					// 更新阈值uniform
					material.uniforms.threshold.value = parameters.threshold;
					
					// 更新步数uniform
					material.uniforms.steps.value = parameters.steps;
				}

				/**
				 * 创建GUI实例
				 * GUI会在屏幕右上角创建一个可折叠的控制面板
				 */
				const gui = new GUI();
				
				/**
				 * 添加阈值控制滑块
				 * 参数说明：
				 * 1. parameters: 目标对象
				 * 2. 'threshold': 目标属性名
				 * 3. 最小值: 0
				 * 4. 最大值: 1
				 * 5. 步长: 0.01
				 * 
				 * onChange(update): 当滑块值改变时调用update函数
				 */
				gui.add( parameters, 'threshold', 0, 1, 0.01 )
				   .name('密度阈值')  // 设置显示名称
				   .onChange( update );
				
				/**
				 * 添加步数控制滑块
				 * 参数说明：
				 * 1. parameters: 目标对象
				 * 2. 'steps': 目标属性名
				 * 3. 最小值: 0（0表示不渲染）
				 * 4. 最大值: 300
				 * 5. 步长: 1
				 */
				gui.add( parameters, 'steps', 0, 300, 1 )
				   .name('光线步数')
				   .onChange( update );

				// ==================== 绑定窗口事件 ====================
				
				/**
				 * 监听窗口大小变化事件
				 * 当用户调整浏览器窗口大小时，需要更新相机和渲染器
				 * 否则渲染内容会被拉伸或压缩
				 */
				window.addEventListener( 'resize', onWindowResize );

			} // init()函数结束

			/**
			 * 窗口大小变化处理函数
			 * 当浏览器窗口大小改变时自动调用
			 */
			function onWindowResize() {
				/**
				 * 更新相机宽高比
				 * 相机需要知道渲染区域的宽高比，以正确计算透视投影
				 */
				camera.aspect = window.innerWidth / window.innerHeight;
				
				/**
				 * 更新相机投影矩阵
				 * 改变aspect后必须调用此方法，否则渲染会变形
				 */
				camera.updateProjectionMatrix();
				
				/**
				 * 更新渲染器尺寸
				 * 确保渲染输出的canvas大小与窗口大小一致
				 */
				renderer.setSize( window.innerWidth, window.innerHeight );
			}

			/**
			 * 动画循环函数 - 每帧自动调用
			 * 这是Three.js应用的核心循环，负责：
			 * 1. 更新动态数据
			 * 2. 渲染场景
			 * 3. 请求下一帧
			 */
			function animate() {
				/**
				 * 更新着色器中的相机位置
				 * 相机位置可能因OrbitControls而改变
				 * 需要将最新位置传递给着色器
				 */
				mesh.material.uniforms.cameraPos.value.copy( camera.position );
				
				/**
				 * 渲染场景
				 * 这是最关键的步骤：将3D场景渲染到2D屏幕上
				 * 参数：
				 * 1. scene: 要渲染的场景
				 * 2. camera: 观察场景的相机
				 */
				renderer.render( scene, camera );
				
				/**
				 * 注意：这里没有显式调用requestAnimationFrame
				 * 因为使用了renderer.setAnimationLoop(animate)
				 * Three.js会自动处理动画循环
				 */
			}

		</script>

	</body>
</html>