<!-- Three.js WebGL2 体积云渲染系统 - 功能与技术详解
📋 一、总体功能概述
这是一个基于WebGL2和Three.js的实时体积云渲染系统，通过光线步进技术在浏览器中实时渲染出逼真的三维云朵效果。系统提供了完整的交互体验，用户可以：

实时观察：通过鼠标/触摸屏自由旋转、缩放、平移视角

参数调节：通过控制面板调整云的密度、透明度、细节等视觉效果

动态效果：云朵缓慢旋转，模拟自然运动

响应式设计：自动适应不同尺寸的显示设备

🎯 二、核心功能模块
1. 3D噪声云数据生成
javascript
// 关键代码片段
const size = 128; // 128x128x128体素
const data = new Uint8Array(size * size * size);
// 使用柏林噪声 + 距离衰减生成云状数据
功能：

生成128×128×128分辨率的3D密度场

使用改进的柏林噪声算法模拟云的随机自然形态

应用球形衰减使云中心密度高、边缘稀薄

将数据打包成GPU可用的3D纹理

2. 天空盒系统
javascript
// 创建渐变天空背景
const gradient = context.createLinearGradient(0, 0, 0, 32);
gradient.addColorStop(0.0, '#014a84'); // 顶部深蓝
gradient.addColorStop(1.0, '#437ab6'); // 底部浅蓝
功能：

创建从深蓝到浅蓝的垂直渐变天空

使用球体贴图技术包裹整个场景

为体积云提供自然的背景环境

3. 光线步进体积渲染器
glsl
// 核心渲染循环
for (float i = 0.0; i < steps; i += 1.0) {
    float density = sample1(p + 0.5);
    float d = smoothstep(threshold - range, threshold + range, density) * opacity;
    
    // 前向alpha混合
    ac.rgb += (1.0 - ac.a) * d * col;
    ac.a += (1.0 - ac.a) * d;
    
    if (ac.a >= 0.95) break; // 提前终止
    p += rayDir * stepSize;
}
功能：

实现光线与体积的求交计算

沿光线路径进行离散采样

累积颜色和透明度（前向alpha混合）

提前终止优化（当透明度接近1时停止）

4. 交互控制系统
javascript
// GUI参数控制
const parameters = {
    threshold: 0.25,  // 密度阈值
    opacity: 0.25,    // 不透明度
    range: 0.1,       // 过渡范围
    steps: 100        // 渲染质量
};
功能：

实时调节云的外观参数

轨道控制器实现3D导航

响应式窗口大小调整

键盘快捷键支持

🔧 三、核心技术点详解
1. 体积渲染算法
text
技术原理：光线步进 (Ray Marching)
1. 光线发射：从相机向每个像素发射光线
2. 求交测试：计算光线与体积包围盒的交点
3. 步进采样：沿光线等间距采样密度值
4. 累积合成：使用alpha混合公式累积颜色
5. 提前终止：当不透明度接近1时停止采样
关键公式：

Alpha混合：C_result = C_dest * (1 - α_src) + C_src * α_src

光线-包围盒求交：Slab方法计算t_min和t_max

密度映射：density = smoothstep(threshold-range, threshold+range, raw_density)

2. 3D纹理技术
text
内存布局：128×128×128 × 1字节 = 2,097,152字节 ≈ 2MB
纹理格式：单通道8位无符号整数 (R8)
过滤方式：线性过滤实现平滑插值
坐标空间：纹理坐标[0,1]³，世界坐标[-0.5,0.5]³
优势：

紧凑的数据存储（仅需密度值）

GPU硬件加速的3D线性插值

支持任意的非结构化访问模式

3. 抗锯齿技术
glsl
// 抖动采样实现
uint seed = uint(gl_FragCoord.x) * 1973u + 
           uint(gl_FragCoord.y) * 9277u + 
           uint(frame) * 26699u;
float randNum = randomFloat(seed) * 2.0 - 1.0;
p += rayDir * randNum * (1.0 / textureSize);
技术细节：

Wang哈希：快速且高质量的伪随机数生成

每像素随机偏移：消除规则采样导致的带状伪影

时间抖动：每帧不同随机种子，实现时间性抗锯齿

4. 简易光照模型
glsl
float shading(vec3 coord) {
    float step = 0.01;
    // 中心差分法计算密度梯度
    return sample1(coord + vec3(-step)) - sample1(coord + vec3(step));
}
原理：

梯度作为法线：密度变化最快的方向近似表面法线

简单阴影：梯度大小表示表面的"陡峭"程度

附加纹理：(p.x + p.y) * 0.25增加空间变化

5. 性能优化策略
优化技术	实现方式	效果
提前终止	α ≥ 0.95时停止步进	减少30-50%采样
包围盒测试	计算有效光线区间	避免空采样
抖动采样	随机起始偏移	用更少采样获得更好质量
自适应步长	固定总步数，变步长	保持帧率稳定
6. WebGL2特性利用
javascript
// 使用的WebGL2特性
const material = new THREE.RawShaderMaterial({
    glslVersion: THREE.GLSL3,  // 使用GLSL 3.0
    uniforms: {
        // 支持3D纹理采样器
        map: { value: texture }  // sampler3D类型
    }
});
WebGL2优势：

3D纹理原生支持：无需扩展

GLSL 3.0语法：更现代的着色器语言

整数运算：精确的随机数生成

多渲染目标：未来扩展可能

🚀 四、渲染管线流程
text
1. 初始化阶段
   ↓ 生成3D噪声数据 → 创建3D纹理
   ↓ 创建天空盒背景
   ↓ 编译GLSL着色器

2. 每帧渲染循环
   ↓ 更新相机参数 → 传递到着色器
   ↓ 光线步进计算 → 像素着色器执行
   ↓ Alpha混合合成 → 输出到帧缓冲区
   ↓ 应用颜色空间转换 → 线性→sRGB

3. 用户交互处理
   ↓ 鼠标/触摸输入 → 更新相机矩阵
   ↓ GUI参数变化 → 更新uniform变量
   ↓ 窗口大小变化 → 调整视口和投影
📊 五、性能特征分析
计算复杂度
纹理采样次数：width × height × steps

示例：1920×1080×100 ≈ 2.07亿次/帧

内存占用：

3D纹理：2MB (128³ × 1字节)

帧缓冲区：8MB (1920×1080 × 4字节 × RGBA)

几何数据：~1KB (立方体顶点)

可扩展性
增加分辨率：提高size参数（64→128→256）

改进光照：添加多重散射、环境光遮蔽

动态效果：时间变化的噪声，风场模拟

LOD系统：根据距离动态调整步数

🎨 六、艺术可控性
通过GUI提供的四个核心参数，艺术家可以调节：

密度阈值：控制云的"厚重感"

低值：稀薄、分散的云

高值：浓厚、结实的云

不透明度：控制云的"可见度"

低值：透明、幽灵般的云

高值：实在、不透明的云

过渡范围：控制云的"边缘柔和度"

小值：锐利、明确的边界

大值：柔和、渐变的边界

光线步数：控制渲染的"质量与性能平衡"

少步数：快速、块状的效果

多步数：平滑、精细的效果

💡 七、教育意义
这个示例展示了多个重要的计算机图形学概念：

体积表示：如何用离散采样表示连续3D数据

光线追踪基础：光线步进是完整光线追踪的简化版

实时渲染优化：在质量与性能间找到平衡

GPU编程模式：大规模并行计算在图形中的应用

物理模拟简化：用数学近似替代复杂物理计算

🔮 八、未来扩展方向
性能优化：

使用计算着色器预积分

实现层次化体积数据结构

屏幕空间自适应采样

效果增强：

多重散射光照模型

动态云形变（风场、对流）

昼夜循环和天气系统

交互增强：

VR/AR支持

云层编辑工具

物理参数控制（湿度、温度） -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			页面标题：WebGL2体积云渲染演示
			使用Three.js库实现的实时体积云渲染
			体积渲染是一种将3D数据可视化的技术，常用于医学成像、科学可视化、云/烟雾等效果
		-->
		<title>Three.js WebGL2 体积云渲染演示</title>
		<!-- 字符编码设置 -->
		<meta charset="utf-8">
		<!-- 
			视口设置：
			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样式文件 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 
			页面信息显示区域
			显示Three.js链接和当前演示的说明
			用户点击可以跳转到Three.js官网
		-->
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> WebGL2 体积云渲染演示 - 使用光线步进技术实现实时体积渲染
		</div>

		<!-- 
			导入映射(Import Map)配置
			现代浏览器模块导入的配置，用于将模块名映射到实际文件路径
			这是ES6模块系统的配置
		-->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 
			主JavaScript模块
			使用type="module"表示这是ES6模块
			包含所有Three.js初始化、渲染和交互逻辑
		-->
		<script type="module">
			// ================ 模块导入区域 ================
			// 导入Three.js核心库的所有功能
			import * as THREE from 'three';
			// 导入轨道控制器：允许用户用鼠标/触摸屏旋转、平移、缩放相机
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			// 导入改进的柏林噪声生成器：用于生成自然随机的云状纹理
			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
			// 导入GUI库：创建用户界面控制面板，调整渲染参数
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// ================ 全局变量声明 ================
			let renderer;   // WebGL渲染器：负责将3D场景渲染到2D Canvas上
			let scene;      // 场景：包含所有3D对象的容器
			let camera;     // 相机：定义观察场景的视角
			let mesh;       // 网格对象：包含几何体和材质，这里用于渲染体积云

			// 立即调用初始化函数
			init();

			// ================ 初始化函数 ================
			/**
			 * 应用程序主初始化函数
			 * 按照以下顺序初始化：
			 * 1. 创建WebGL渲染器和场景
			 * 2. 设置相机和控制器
			 * 3. 创建天空盒背景
			 * 4. 生成3D噪声纹理数据
			 * 5. 创建体积渲染着色器材质
			 * 6. 设置用户界面控制面板
			 * 7. 添加事件监听器
			 */
			function init() {
				// ---------- 1. 创建WebGL渲染器 ----------
				// 创建WebGL2渲染器实例
				renderer = new THREE.WebGLRenderer({
					antialias: true,  // 启用抗锯齿（如果支持）
					alpha: true       // 启用透明度支持
				});
				// 设置设备像素比：适应高清屏幕（Retina显示屏等）
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数，替代传统的requestAnimationFrame
				renderer.setAnimationLoop(animate);
				// 将渲染器的Canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);
				
				// 设置渲染器清除颜色和透明度（备用设置）
				renderer.setClearColor(0x000000, 0); // 黑色背景，完全透明

				// ---------- 2. 创建场景和相机 ----------
				// 创建场景：所有3D对象的容器
				scene = new THREE.Scene();
				// 可以设置场景的背景颜色或环境光
				// scene.background = new THREE.Color(0x87CEEB); // 天蓝色背景

				// 创建透视相机：
				// 参数说明：
				// 60 - 视野角度(FOV)，单位度，类似人眼的视野范围
				// window.innerWidth / window.innerHeight - 宽高比，保持画面不变形
				// 0.1 - 近裁剪面，距离相机小于0.1的物体不会被渲染
				// 100 - 远裁剪面，距离相机大于100的物体不会被渲染
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
				// 设置相机初始位置：x=0, y=0, z=1.5（沿着Z轴正方向1.5个单位）
				camera.position.set(0, 0, 1.5);
				// 设置相机观察点：默认看向场景中心(0,0,0)
				camera.lookAt(0, 0, 0);

				// 创建轨道控制器：
				// 允许用户：
				// - 左键拖动：旋转相机
				// - 右键拖动：平移相机
				// - 滚轮滚动：缩放相机
				const controls = new OrbitControls(camera, renderer.domElement);
				// 设置控制器参数
				controls.enableDamping = true;     // 启用阻尼效果，使旋转更平滑
				controls.dampingFactor = 0.05;     // 阻尼系数
				controls.screenSpacePanning = false; // 禁用屏幕空间平移
				controls.minDistance = 0.5;        // 最小缩放距离
				controls.maxDistance = 5;          // 最大缩放距离
				controls.maxPolarAngle = Math.PI;  // 最大垂直旋转角度（π=180度）

				// ---------- 3. 创建天空盒背景 ----------
				// 天空盒模拟远处的天空，为体积云提供背景
				
				// 创建Canvas元素用于生成渐变纹理
				const canvas = document.createElement('canvas');
				canvas.width = 1;   // 宽度1像素，因为只需要垂直渐变
				canvas.height = 32; // 高度32像素，渐变的分辨率
				
				// 获取2D绘图上下文
				const context = canvas.getContext('2d');
				// 创建线性渐变：从顶部到底部
				const gradient = context.createLinearGradient(0, 0, 0, 32);
				// 添加渐变颜色停止点
				gradient.addColorStop(0.0, '#014a84'); // 顶部：深蓝色
				gradient.addColorStop(0.5, '#0561a0'); // 中间：中蓝色
				gradient.addColorStop(1.0, '#437ab6'); // 底部：浅蓝色
				// 设置填充样式为渐变
				context.fillStyle = gradient;
				// 绘制渐变矩形
				context.fillRect(0, 0, 1, 32);
				
				// 将Canvas转换为Three.js纹理
				const skyMap = new THREE.CanvasTexture(canvas);
				// 设置颜色空间为sRGB，这是Web标准颜色空间
				skyMap.colorSpace = THREE.SRGBColorSpace;
				// 设置纹理重复模式：不重复
				skyMap.wrapS = skyMap.wrapT = THREE.ClampToEdgeWrapping;
				// 设置纹理过滤：线性过滤，使渐变更平滑
				skyMap.minFilter = THREE.LinearFilter;
				skyMap.magFilter = THREE.LinearFilter;
				
				// 创建天空球体网格：
				// 使用球体几何体，半径10（足够大以包含整个场景）
				// 使用基础材质，设置渐变纹理，并设置side为BackSide（内表面渲染）
				const sky = new THREE.Mesh(
					new THREE.SphereGeometry(10, 32, 32), // 球体：半径10，32x32分段
					new THREE.MeshBasicMaterial({ 
						map: skyMap,        // 使用渐变纹理
						side: THREE.BackSide, // 内表面渲染（从内部看球体）
						depthWrite: false   // 禁用深度写入，避免遮挡其他物体
					})
				);
				// 将天空盒添加到场景
				scene.add(sky);

				// ---------- 4. 生成3D噪声纹理数据 ----------
				// 这是体积渲染的核心数据源，定义了云的密度分布
				
				const size = 128; // 纹理每边的体素数量：128x128x128 = 2,097,152个体素
				// 创建Uint8Array存储体素数据：每个体素一个字节（0-255）
				// 大小计算：宽度 × 高度 × 深度 = 128³ = 2,097,152字节 ≈ 2MB
				const data = new Uint8Array(size * size * size);

				let i = 0; // 数据数组索引
				const scale = 0.05; // 噪声缩放因子：控制云的细节程度，值越小细节越多
				const perlin = new ImprovedNoise(); // 创建柏林噪声生成器实例
				const vector = new THREE.Vector3(); // 重用向量对象，避免频繁创建新对象
				
				// 开始时间记录（用于性能调试）
				console.time('生成3D噪声数据');
				
				// 三层嵌套循环生成三维噪声数据
				// 遍历顺序：Z轴（深度）→ Y轴（高度）→ X轴（宽度）
				for (let z = 0; z < size; z++) {
					for (let y = 0; y < size; y++) {
						for (let x = 0; x < size; x++) {
							// 计算距离衰减因子：
							// 1. 将坐标从[0,size]映射到[-0.5,0.5]
							// 2. 计算到中心的距离
							// 3. 计算衰减：1 - 距离（中心为1，边缘为0）
							// 目的：使云在中心区域密度高，边缘区域密度低
							vector.set(x, y, z)               // 设置当前坐标
								.subScalar(size / 2)         // 减去一半大小，使原点在中心
								.divideScalar(size);         // 除以大小，归一化到[-0.5,0.5]
							const distanceToCenter = vector.length(); // 计算到中心的距离
							const d = 1.0 - distanceToCenter; // 距离衰减因子
							
							// 生成柏林噪声值：
							// 柏林噪声特点：连续、平滑、随机性自然
							// 柏林噪声值范围：[-1, 1]
							// 将噪声值从[-1,1]映射到[0,255]范围
							const noiseValue = perlin.noise(
								x * scale / 1.5, // X轴缩放（除以1.5使云在XZ方向拉伸）
								y * scale,       // Y轴缩放
								z * scale / 1.5  // Z轴缩放（除以1.5使云在XZ方向拉伸）
							);
							
							// 计算最终体素值：
							// 1. 128 + 128 * noiseValue：将[-1,1]映射到[0,255]
							// 2. 乘以距离衰减因子d：使边缘变淡
							// 3. 再次乘以d：增强衰减效果（平方衰减）
							// 最终值范围：[0, 255]，表示密度（0完全透明，255完全不透明）
							data[i] = (128 + 128 * noiseValue) * d * d;
							
							i++; // 移动到下一个体素索引
						}
					}
				}
				
				// 结束时间记录
				console.timeEnd('生成3D噪声数据');
				console.log(`生成的3D纹理数据大小: ${(data.length / (1024 * 1024)).toFixed(2)} MB`);

				// 创建3D数据纹理：
				// Data3DTexture专门用于存储三维纹理数据
				const texture = new THREE.Data3DTexture(data, size, size, size);
				// 设置纹理格式：单通道格式（只需存储密度值）
				texture.format = THREE.RedFormat;
				// 设置纹理内部格式：R8（8位红色通道）
				texture.internalFormat = 'R8';
				// 设置缩小过滤器：线性过滤（在缩小时平滑过渡）
				texture.minFilter = THREE.LinearFilter;
				// 设置放大过滤器：线性过滤（在放大时平滑过渡）
				texture.magFilter = THREE.LinearFilter;
				// 设置纹理包装模式：边缘钳制
				texture.wrapS = THREE.ClampToEdgeWrapping;
				texture.wrapT = THREE.ClampToEdgeWrapping;
				texture.wrapR = THREE.ClampToEdgeWrapping; // 第三维的包装模式
				// 设置解包对齐：1字节对齐
				texture.unpackAlignment = 1;
				// 设置生成mipmaps：false（体积纹理通常不需要mipmaps）
				texture.generateMipmaps = false;
				// 标记纹理需要更新（上传到GPU）
				texture.needsUpdate = true;

				// ---------- 5. 创建体积渲染着色器材质 ----------
				/**
				 * 顶点着色器代码
				 * 作用：为每个顶点执行一次，计算变换后的位置和传递变量
				 */
				const vertexShader = /* glsl */`
					// 输入变量：顶点位置（来自几何体）
					in vec3 position;

					// 统一变量（从JavaScript传递的常量）
					uniform mat4 modelMatrix;       // 模型矩阵：局部空间→世界空间
					uniform mat4 modelViewMatrix;   // 模型视图矩阵：局部空间→相机空间
					uniform mat4 projectionMatrix;  // 投影矩阵：相机空间→裁剪空间
					uniform vec3 cameraPos;         // 相机在世界空间的位置

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

					void main() {
						// 计算模型视图空间中的顶点位置
						vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
						
						// 计算光线起点：
						// 1. 将相机位置从世界空间转换到模型空间
						// 2. 这是体积渲染的起点（相机位置）
						vOrigin = vec3(inverse(modelMatrix) * vec4(cameraPos, 1.0)).xyz;
						
						// 计算光线方向：
						// 从相机位置指向当前顶点的方向
						// 注意：这是在模型空间中的方向
						vDirection = position - vOrigin;
						
						// 计算最终裁剪空间位置
						// 这是GPU渲染管线必需的输出
						gl_Position = projectionMatrix * mvPosition;
					}
				`;

				/**
				 * 片段着色器代码
				 * 作用：为每个像素执行一次，执行光线步进体积渲染
				 * 这是体积渲染的核心算法
				 */
				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;

					// 用户可调参数
					uniform vec3 base;       // 基础颜色
					uniform sampler3D map;   // 3D密度纹理
					uniform float threshold; // 密度阈值：高于此值的体素可见
					uniform float range;     // 过渡范围：阈值周围的平滑过渡区域
					uniform float opacity;   // 整体不透明度乘数
					uniform float steps;     // 光线步进步数（质量/性能平衡）
					uniform float frame;     // 当前帧数（用于随机种子）

					// ============ 实用函数 ============
					
					/**
					 * Wang哈希函数
					 * 快速、高质量的伪随机数生成器
					 * 输入：32位无符号整数种子
					 * 输出：哈希后的32位无符号整数
					 */
					uint wang_hash(uint seed) {
						// 哈希运算序列，扩散输入位的随机性
						seed = (seed ^ 61u) ^ (seed >> 16u);
						seed *= 9u;
						seed = seed ^ (seed >> 4u);
						seed *= 0x27d4eb2du;
						seed = seed ^ (seed >> 15u);
						return seed;
					}

					/**
					 * 生成随机浮点数
					 * 输入：种子（引用传递，会被修改）
					 * 输出：[0, 1)范围内的均匀分布随机数
					 */
					float randomFloat(inout uint seed) {
						// 生成哈希值并归一化到[0,1)
						return float(wang_hash(seed)) / 4294967296.0; // 除以2^32
					}

					/**
					 * 计算光线与轴对齐包围盒(AABB)的交点
					 * 算法：Slab方法
					 * 输入：光线起点orig，方向dir（已归一化）
					 * 输出：交点参数t0（进入点），t1（离开点）
					 */
					vec2 hitBox(vec3 orig, vec3 dir) {
						// 定义立方体包围盒边界：[-0.5, 0.5]立方体
						const vec3 box_min = vec3(-0.5);
						const vec3 box_max = vec3(0.5);
						
						// 计算方向分量的倒数（避免除零已在外部处理）
						vec3 inv_dir = 1.0 / dir;
						
						// 计算每个维度的交点参数
						vec3 tmin_tmp = (box_min - orig) * inv_dir;
						vec3 tmax_tmp = (box_max - orig) * inv_dir;
						
						// 对每个维度，获取最小和最大t值
						vec3 tmin = min(tmin_tmp, tmax_tmp);
						vec3 tmax = max(tmin_tmp, tmax_tmp);
						
						// 进入点t0：三个维度最大t值（最远的进入点）
						float t0 = max(tmin.x, max(tmin.y, tmin.z));
						// 离开点t1：三个维度最小t值（最近的离开点）
						float t1 = min(tmax.x, min(tmax.y, tmax.z));
						
						return vec2(t0, t1);
					}

					/**
					 * 从3D纹理采样密度值
					 * 简化包装函数，提高代码可读性
					 */
					float sample1(vec3 p) {
						// 采样红色通道（单通道纹理存储密度值）
						return texture(map, p).r;
					}

					/**
					 * 简单着色计算
					 * 模拟光照效果，通过密度梯度估计表面法线
					 * 输入：纹理坐标
					 * 输出：阴影值（正值为亮，负值为暗）
					 */
					float shading(vec3 coord) {
						// 使用中心差分法计算密度梯度
						// 步长值：较小的值提供更精确的梯度
						float step = 0.01;
						
						// 计算密度在X方向的梯度
						// 近似：f'(x) ≈ [f(x+h) - f(x-h)] / (2h)
						// 这里省略除以2h，因为只需要相对值
						float densityLeft = sample1(coord + vec3(-step, 0.0, 0.0));
						float densityRight = sample1(coord + vec3(step, 0.0, 0.0));
						
						// 梯度值表示密度变化率，用于模拟光照
						return densityLeft - densityRight;
					}

					/**
					 * 线性颜色空间转sRGB颜色空间
					 * sRGB是标准的显示颜色空间
					 * 输入：线性颜色值
					 * 输出：sRGB颜色值
					 */
					vec4 linearToSRGB(in vec4 value) {
						// sRGB转换公式：
						// 对于 <= 0.0031308：线性部分
						// 对于 > 0.0031308：伽马校正部分
						vec3 sRGB = mix(
							pow(value.rgb, vec3(0.41666)) * 1.055 - vec3(0.055), // 伽马校正
							value.rgb * 12.92,                                  // 线性部分
							vec3(lessThanEqual(value.rgb, vec3(0.0031308)))     // 选择条件
						);
						return vec4(sRGB, value.a);
					}

					// ============ 主函数 ============
					void main() {
						// 步骤1：归一化光线方向
						vec3 rayDir = normalize(vDirection);
						
						// 步骤2：计算光线与体积包围盒的交点
						vec2 bounds = hitBox(vOrigin, rayDir);
						
						// 步骤3：检查是否有有效交点
						// 如果进入点大于离开点，说明没有相交或光线方向错误
						if (bounds.x > bounds.y) {
							discard; // 丢弃该片段（不渲染）
						}
						
						// 步骤4：确保光线起点在体积前方
						// 如果进入点小于0，说明相机在体积内部
						bounds.x = max(bounds.x, 0.0);
						
						// 步骤5：计算光线步进步长
						float rayLength = bounds.y - bounds.x; // 光线在体积内的长度
						float stepSize = rayLength / steps;    // 每步前进的距离
						
						// ============ 抖动采样（减少带状伪影）============
						// 使用屏幕坐标和帧数生成唯一随机种子
						// 每个像素、每帧都有不同的随机种子
						uint seed = uint(gl_FragCoord.x) * uint(1973) + 
									uint(gl_FragCoord.y) * uint(9277) + 
									uint(frame) * uint(26699);
						
						// 获取3D纹理的尺寸（体素数量）
						vec3 texSize = vec3(textureSize(map, 0));
						
						// 生成[-1, 1]范围内的随机数
						float randNum = randomFloat(seed) * 2.0 - 1.0;
						
						// 计算光线起点（进入点）
						vec3 rayStart = vOrigin + bounds.x * rayDir;
						
						// 应用抖动偏移：随机移动一个步长以内的距离
						// 除以纹理尺寸确保偏移在单个体素范围内
						rayStart += rayDir * randNum * (1.0 / texSize);
						
						// ============ 光线步进累积（体积渲染核心）============
						// 初始化累积颜色和透明度
						// 使用前向alpha混合公式：over操作符
						vec4 accumulatedColor = vec4(base, 0.0); // RGB + Alpha
						vec3 currentPos = rayStart; // 当前步进位置
						
						// 光线步进循环
						for (float stepIndex = 0.0; stepIndex < steps; stepIndex += 1.0) {
							// 步骤6：采样当前位置的密度
							// 注意：纹理坐标需要从[-0.5,0.5]转换到[0,1]
							vec3 texCoord = currentPos + 0.5;
							float density = sample1(texCoord);
							
							// 步骤7：应用阈值和过渡
							// smoothstep创建平滑的过渡效果
							// 在[threshold-range, threshold+range]范围内平滑过渡
							float densityFactor = smoothstep(
								threshold - range, 
								threshold + range, 
								density
							);
							
							// 应用全局不透明度乘数
							densityFactor *= opacity;
							
							// 步骤8：计算局部颜色（结合光照和纹理）
							// 1. 阴影项：模拟简单光照
							// 2. 纹理项：基于位置的简单纹理变化
							// 3. 基础亮度：确保最小亮度
							float localColor = 
								shading(texCoord) * 3.0 +      // 光照贡献
								((currentPos.x + currentPos.y) * 0.25) + // 简单纹理
								0.2;                          // 基础亮度
							
							// 步骤9：前向alpha混合
							// 公式：C_acc = C_acc + (1 - α_acc) * α_sample * C_sample
							// α_acc = α_acc + (1 - α_acc) * α_sample
							float alphaSample = densityFactor;
							float oneMinusAccumulatedAlpha = 1.0 - accumulatedColor.a;
							
							// 累积颜色
							accumulatedColor.rgb += oneMinusAccumulatedAlpha * alphaSample * localColor;
							// 累积透明度
							accumulatedColor.a += oneMinusAccumulatedAlpha * alphaSample;
							
							// 步骤10：提前终止优化
							// 如果累积透明度接近完全不透明，停止步进以节省性能
							if (accumulatedColor.a >= 0.95) {
								break;
							}
							
							// 步骤11：前进到下一个采样点
							currentPos += rayDir * stepSize;
							
							// 步骤12：检查是否超出体积范围
							// 如果当前位置超出包围盒，提前终止
							if (any(greaterThan(abs(currentPos), vec3(0.5)))) {
								break;
							}
						}
						
						// ============ 后处理 ============
						// 步骤13：颜色空间转换
						// 将线性累积颜色转换为sRGB空间（显示标准）
						color = linearToSRGB(accumulatedColor);
						
						// 步骤14：检查是否完全透明
						// 如果最终alpha为0，丢弃片段以节省性能
						if (color.a < 0.01) {
							discard;
						}
						
						// 可选：应用伽马校正（如果线性ToSRGB未完全覆盖）
						// color.rgb = pow(color.rgb, vec3(1.0/2.2));
						
						// 最终颜色现在在color变量中，将由GPU写入帧缓冲区
					}
				`;

				// 创建几何体：单位立方体（1x1x1）
				// 这个立方体定义了体积的边界，实际渲染的是内部的体积数据
				const geometry = new THREE.BoxGeometry(1, 1, 1);
				
				// 创建原始着色器材质（RawShaderMaterial）
				// 与ShaderMaterial不同，我们需要手动定义所有attributes和uniforms
				const material = new THREE.RawShaderMaterial({
					glslVersion: THREE.GLSL3, // 使用GLSL 3.0版本（WebGL2）
					
					// 统一变量定义：从JavaScript传递到着色器的常量
					uniforms: {
						base: { 
							value: new THREE.Color(0x798aa0) // 基础颜色：蓝灰色
						},
						map: { 
							value: texture // 3D密度纹理
						},
						cameraPos: { 
							value: new THREE.Vector3() // 相机位置（每帧更新）
						},
						threshold: { 
							value: 0.25 // 密度阈值：默认0.25
						},
						opacity: { 
							value: 0.25 // 不透明度：默认0.25
						},
						range: { 
							value: 0.1 // 过渡范围：默认0.1
						},
						steps: { 
							value: 100 // 光线步进步数：默认100
						},
						frame: { 
							value: 0 // 帧计数器：用于随机种子
						}
					},
					
					// 着色器代码
					vertexShader: vertexShader,
					fragmentShader: fragmentShader,
					
					// 材质属性
					side: THREE.BackSide, // 渲染背面（因为相机在立方体内部）
					transparent: true,    // 启用透明度
					depthTest: true,      // 启用深度测试
					depthWrite: false,    // 禁用深度写入（体积渲染的特殊需求）
					
					// 可选的扩展
					extensions: {
						derivatives: false // 不需要导数扩展
					}
				});

				// 创建立方体网格
				// 注意：虽然我们创建了一个立方体几何体，但实际渲染的是体积数据
				// 立方体只是定义了一个坐标系和渲染区域
				mesh = new THREE.Mesh(geometry, material);
				
				// 可选：设置网格的位置、旋转、缩放
				// mesh.position.set(0, 0, 0); // 默认已在原点
				// mesh.scale.set(1, 1, 1);    // 默认已是单位缩放
				
				// 将网格添加到场景
				scene.add(mesh);

				// ---------- 6. 创建GUI控制面板 ----------
				// 定义可调参数对象
				const parameters = {
					threshold: 0.25, // 密度阈值：控制云的可见部分
					opacity: 0.25,   // 不透明度：控制云的整体透明度
					range: 0.1,      // 过渡范围：控制云边缘的柔和度
					steps: 100       // 步进步数：控制渲染质量和性能
				};

				/**
				 * 更新函数：将GUI参数同步到着色器
				 */
				function updateMaterial() {
					// 更新着色器的uniform值
					material.uniforms.threshold.value = parameters.threshold;
					material.uniforms.opacity.value = parameters.opacity;
					material.uniforms.range.value = parameters.range;
					material.uniforms.steps.value = parameters.steps;
					
					// 标记uniforms需要更新
					material.uniformsNeedUpdate = true;
				}

				// 初始化GUI
				const gui = new GUI({
					title: '体积云控制面板', // GUI标题
					width: 300,             // GUI宽度
					autoPlace: true         // 自动放置到页面
				});
				
				// 添加控制器
				// 密度阈值控制器
				const thresholdCtrl = gui.add(parameters, 'threshold', 0, 1, 0.01)
					.name('密度阈值')
					.onChange(updateMaterial);
				thresholdCtrl.onChange(() => {
					console.log(`密度阈值更新为: ${parameters.threshold}`);
				});
				
				// 不透明度控制器
				const opacityCtrl = gui.add(parameters, 'opacity', 0, 1, 0.01)
					.name('不透明度')
					.onChange(updateMaterial);
				opacityCtrl.onChange(() => {
					console.log(`不透明度更新为: ${parameters.opacity}`);
				});
				
				// 过渡范围控制器
				const rangeCtrl = gui.add(parameters, 'range', 0, 1, 0.01)
					.name('过渡范围')
					.onChange(updateMaterial);
				rangeCtrl.onChange(() => {
					console.log(`过渡范围更新为: ${parameters.range}`);
				});
				
				// 步数控制器
				const stepsCtrl = gui.add(parameters, 'steps', 10, 200, 1)
					.name('光线步数')
					.onChange(updateMaterial);
				stepsCtrl.onChange(() => {
					console.log(`光线步数更新为: ${parameters.steps}`);
					console.log(`性能提示：步数越多质量越好，但性能越低`);
				});
				
				// 添加预设按钮（可选功能）
				gui.add({
					'重置默认': () => {
						parameters.threshold = 0.25;
						parameters.opacity = 0.25;
						parameters.range = 0.1;
						parameters.steps = 100;
						gui.controllers.forEach(ctrl => ctrl.updateDisplay());
						updateMaterial();
						console.log('已重置为默认参数');
					},
					'高质量模式': () => {
						parameters.steps = 200;
						gui.controllers.forEach(ctrl => ctrl.updateDisplay());
						updateMaterial();
						console.log('切换到高质量模式（步数：200）');
					},
					'性能模式': () => {
						parameters.steps = 50;
						gui.controllers.forEach(ctrl => ctrl.updateDisplay());
						updateMaterial();
						console.log('切换到性能模式（步数：50）');
					}
				}, '重置默认').name('预设');
				
				// 折叠GUI面板（可选）
				// gui.close();

				// ---------- 7. 添加事件监听器 ----------
				// 窗口大小变化事件监听
				window.addEventListener('resize', onWindowResize);
				
				// 添加键盘快捷键（可选功能）
				window.addEventListener('keydown', (event) => {
					switch(event.key) {
						case 'h': // 隐藏/显示GUI
							gui.show(gui._hidden);
							break;
						case 'r': // 重置相机
							camera.position.set(0, 0, 1.5);
							camera.lookAt(0, 0, 0);
							break;
						case ' ': // 空格键暂停/恢复动画
							// 可以添加动画暂停逻辑
							break;
					}
				});
				
				// 性能监控（可选）
				if (typeof Stats !== 'undefined') {
					const stats = new Stats();
					stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
					document.body.appendChild(stats.dom);
					
					// 在animate函数中调用stats.update()
				}
				
				// 初始化完成日志
				console.log('Three.js体积云渲染器初始化完成');
				console.log('使用方法：');
				console.log('1. 鼠标左键拖动：旋转视角');
				console.log('2. 鼠标右键拖动：平移视角');
				console.log('3. 鼠标滚轮：缩放视角');
				console.log('4. 使用右侧控制面板调整云的外观');
				console.log('5. 按H键隐藏/显示控制面板');
				console.log('6. 按R键重置相机位置');
			}

			// ================ 窗口大小变化处理函数 ================
			/**
			 * 处理浏览器窗口大小变化
			 * 确保渲染器和相机正确适配新窗口尺寸
			 */
			function onWindowResize() {
				// 更新相机宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵（必须调用）
				camera.updateProjectionMatrix();
				
				// 更新渲染器大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				
				// 可选：更新渲染器的像素比（如果用户缩放窗口）
				renderer.setPixelRatio(window.devicePixelRatio);
				
				// 日志输出（调试用）
				console.log(`窗口大小已更新: ${window.innerWidth} × ${window.innerHeight}`);
			}

			// ================ 动画循环函数 ================
			/**
			 * 主动画循环函数
			 * 由渲染器的setAnimationLoop自动调用
			 * 每帧执行一次，更新动画状态并渲染场景
			 */
			function animate() {
				// 性能监控开始（如果有）
				// if (stats) stats.begin();
				
				// 更新相机位置到着色器
				// 这是必要的，因为着色器需要知道相机在模型空间中的位置
				mesh.material.uniforms.cameraPos.value.copy(camera.position);
				
				// 更新云的旋转（创建动画效果）
				// 使用performance.now()获取高精度时间戳
				// 除以7500控制旋转速度（值越大旋转越慢）
				mesh.rotation.y = -performance.now() / 7500;
				
				// 可选：添加其他动画效果
				// mesh.rotation.x = Math.sin(performance.now() / 5000) * 0.1;
				
				// 增加帧计数器（用于随机种子）
				// 每帧递增，确保抖动采样随时间变化
				mesh.material.uniforms.frame.value++;
				
				// 渲染场景
				renderer.render(scene, camera);
				
				// 性能监控结束（如果有）
				// if (stats) stats.end();
				
				// 帧率监控（可选）
				// 可以在此添加自定义的帧率监控逻辑
			}

			// ================ 错误处理（可选） ================
			// 监听WebGL上下文丢失事件
			renderer.domElement.addEventListener('webglcontextlost', (event) => {
				event.preventDefault();
				console.error('WebGL上下文丢失，请刷新页面');
				alert('WebGL上下文丢失，请刷新页面恢复渲染');
			}, false);
			
			// 监听WebGL上下文恢复事件
			renderer.domElement.addEventListener('webglcontextrestored', () => {
				console.log('WebGL上下文已恢复');
				// 可能需要重新初始化部分资源
			}, false);

			// ================ 性能优化提示 ================
			/**
			 * 性能优化建议：
			 * 1. 降低steps值可以提高性能但降低质量
			 * 2. 128x128x128的纹理已经较大，可以尝试减小size到64
			 * 3. 考虑使用HalfFloat格式减少纹理内存
			 * 4. 实现LOD（细节层次）系统：根据距离降低steps
			 * 5. 使用WebGL2的变换反馈或计算着色器优化（如果支持）
			 */
		</script>
	</body>
</html>