<!-- 代码功能概述
这是一个基于WebGL 2.0的实时体积云渲染系统，使用Three.js框架实现。它通过光线步进算法在GPU中模拟和渲染逼真的三维云朵效果。

核心功能：
体积云渲染：将云朵作为三维密度场处理，而非传统表面模型

渐进式云生成：将大体积纹理分割成64个小块，每隔1.5秒生成一块

交互式控制：提供实时参数调整界面

天空环境：创建渐变的天空球体背景

交互式观察：支持鼠标拖拽旋转、滚轮缩放查看云朵

主要技术点
1. 光线步进算法（Ray Marching）
glsl
// 核心算法：沿光线方向逐步采样
for (float t = bounds.x; t < bounds.y; t += delta) {
    float d = sample1(p + 0.5);  // 采样密度
    d = smoothstep(threshold - range, threshold + range, d) * 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 * delta;      // 前进一步
}
原理：从相机发射光线，穿过体积立方体，沿路径逐步采样密度值，累加颜色和透明度。

2. 3D纹理表示
使用128×128×128的3D纹理存储云朵密度数据

每个体素（voxel）一个字节（0-255）

格式：THREE.RedFormat（单通道）

3. 柏林噪声生成
javascript
// 生成自然、连续的云朵形状
data[i] = (128 + 128 * perlin.noise(x * scale / 1.5, y * scale, z * scale / 1.5)) * fadingFactor;
使用改进的柏林噪声（Perlin Noise）

添加距离衰减：使云朵边缘平滑消失

水平方向拉伸（除以1.5）：模拟真实云朵形态

4. 渐进式纹理生成策略
text
总纹理：128×128×128
分割成：4层×4行×4列 = 64个小块
每块尺寸：带边距30体素，实际28体素
生成频率：每1.5秒生成一块
总生成时间：约96秒（64×1.5）
5. 着色与光照模拟
glsl
float shading(vec3 coord) {
    float step = 0.01;
    // 中心差分法估算密度梯度（模拟边缘光）
    return sample1(coord + vec3(-step)) - sample1(coord + vec3(step));
}

float col = shading(p + 0.5) * 3.0 + ((p.x + p.y) * 0.25) + 0.2;
梯度着色：基于密度变化模拟云朵边缘高光

位置着色：添加水平渐变模拟天空光

基础亮度：确保云朵不会过暗

6. 抗条带伪影技术
glsl
// 光线起点随机抖动
uint seed = uint(gl_FragCoord.x) * uint(1973) + 
           uint(gl_FragCoord.y) * uint(9277) + 
           uint(frame) * uint(26699);
float randNum = randomFloat(seed) * 2.0 - 1.0;
p += rayDir * randNum * (1.0 / size);
Wang哈希函数：快速伪随机数生成

基于像素的随机种子：确保每个像素抖动不同

帧数参与计算：消除帧间相关性

7. 性能优化技术
技术	实现方式	效果
提前终止	if (ac.a >= 0.95) break	减少不必要的计算
自适应步长	delta = min(inc.x, min(inc.y, inc.z)) / steps	保证采样密度均匀
分层生成	64个小块渐进生成	避免一次性生成导致的卡顿
线性过滤	THREE.LinearFilter	平滑纹理插值
8. 颜色空间管理
glsl
// 线性空间到sRGB转换
vec4 linearToSRGB(in vec4 value) {
    return vec4(mix(pow(value.rgb, vec3(0.41666)) * 1.055 - vec3(0.055), 
                   value.rgb * 12.92, 
                   vec3(lessThanEqual(value.rgb, vec3(0.0031308)))), 
               value.a);
}
线性颜色空间计算：保证物理正确的颜色混合

sRGB输出：适配显示设备标准

9. 交互控制参数
参数	范围	作用
密度阈值	0-1	控制云的稀疏程度
不透明度	0-1	控制云的整体透明度
过渡范围	0-1	控制云边缘的锐利程度
步进次数	0-200	平衡渲染质量与性能
10. WebGL 2.0特性应用
3D纹理支持：sampler3D和textureSize()函数

高质量过滤：线性插值过滤

计算着色器：在片元着色器中执行复杂计算

纹理复制：copyTextureToTexture()高效纹理操作

算法流程
text
1. 初始化阶段：
   ├─ 创建WebGL渲染器、场景、相机
   ├─ 创建天空球体背景
   ├─ 初始化128×128×128的3D纹理（全零）
   └─ 设置光线步进着色器材质

2. 渐进生成阶段（每1.5秒）：
   ├─ 计算当前块在3D纹理中的位置
   ├─ 生成柏林噪声云朵块（30×30×30）
   ├─ 使用copyTextureToTexture复制到主纹理
   └─ 更新块计数器

3. 渲染阶段（每帧60次）：
   ├─ 更新相机位置uniform
   ├─ 递增帧计数器（用于随机种子）
   ├─ 执行光线步进算法：
   │   ├─ 计算光线与立方体交点
   │   ├─ 应用起点随机抖动
   │   ├─ 步进循环：采样→着色→混合
   │   └─ 提前终止检查
   ├─ 线性到sRGB颜色转换
   └─ 输出最终像素颜色
技术优势
真实感：基于物理的光线传播模拟

实时性：充分利用GPU并行计算

灵活性：参数可调，适应不同云朵形态

渐进体验：避免一次性加载的等待时间

跨平台：基于WebGL，可在任何现代浏览器运行

应用场景
游戏开发：实时天气系统、天空盒

数据可视化：三维数据场渲染

教育演示：云物理教学工具

艺术创作：程序化生成艺术 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：显示这是一个使用three.js实现的WebGL2体积云渲染示例 -->
		<title>Three.js WebGL2 体积云渲染示例</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">
		<!-- 引入CSS样式文件：用于页面基本样式 -->
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>

	<body>
		<!-- 页面顶部信息栏：显示技术和项目信息 -->
		<div id="info">
			<!-- three.js官网链接 -->
			<a href="https://threejs.org" target="_blank" rel="noopener">Three.js</a> 
			WebGL2 - 体积云渲染演示
			<br>
			<small>使用光线步进算法实现的实时3D云朵效果</small>
		</div>

		<!-- 导入映射表：配置ES模块的导入路径，使浏览器知道如何解析模块导入 -->
		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<!-- 主JavaScript模块：包含所有渲染逻辑 -->
		<script type="module">
			// ========== 模块导入区域 ==========
			// 导入three.js核心库的所有功能（THREE是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';

			// ========== 常量定义 ==========
			// 初始云朵纹理尺寸：整个3D纹理的边长（体素数量），这里是128x128x128
			const INITIAL_CLOUD_SIZE = 128;

			// ========== 全局变量声明 ==========
			let renderer;    // WebGL渲染器：负责将3D场景绘制到canvas上
			let scene;       // 场景对象：包含所有要渲染的3D对象（网格、灯光、相机等）
			let camera;      // 相机对象：定义观察者的视角和投影方式
			let mesh;        // 云朵网格对象：包含立方体几何体和体积着色材质
			let prevTime = performance.now();  // 上一次生成云块的时间戳，用于定时生成
			let cloudTexture = null;  // 3D纹理对象：存储云朵的密度数据

			// ========== 函数调用 ==========
			// 程序入口：初始化所有three.js组件
			init();

			/**
			 * 生成单个云朵块的3D纹理数据
			 * 
			 * 这个函数创建一个三维的柏林噪声场，模拟云朵的自然形态。
			 * 通过距离衰减使云朵在边缘处平滑消失，避免生硬的边界。
			 * 
			 * @param {number} size - 纹理的尺寸（立方体的边长），单位是体素
			 * @param {number} scaleFactor - 噪声缩放因子，控制云朵的细节程度
			 *                          值越小噪声频率越高（细节更丰富）
			 *                          值越大噪声频率越低（云朵更大更平滑）
			 * @returns {THREE.Data3DTexture} - 包含云朵密度数据的3D纹理对象
			 */
			function generateCloudTexture(size, scaleFactor = 1.0) {
				// 创建Uint8Array数组存储纹理数据：每个体素一个字节（0-255）
				// 总共 size × size × size 个体素，表示三维空间中的密度分布
				const data = new Uint8Array(size * size * size);
				
				// 计算噪声缩放比例：将世界坐标映射到噪声空间
				// 10.0是经验值，调整这个值可以改变云朵的整体尺寸
				const scale = scaleFactor * 10.0 / size;

				let i = 0;  // 数据数组的索引指针
				const perlin = new ImprovedNoise();  // 创建柏林噪声生成器实例
				const vector = new THREE.Vector3();  // 用于距离计算的临时向量，避免重复创建对象

				// 三层嵌套循环遍历3D纹理的所有体素（体素：三维像素）
				// z轴循环：深度方向（从前到后）
				for (let z = 0; z < size; z++) {
					// y轴循环：垂直方向（从下到上）
					for (let y = 0; y < size; y++) {
						// x轴循环：水平方向（从左到右）
						for (let x = 0; x < size; x++) {
							// 计算当前体素到纹理中心的归一化距离：
							// 1. 设置向量为当前坐标 (x, y, z)
							// 2. 减去size/2使坐标范围从[0,size]变为[-size/2, size/2]
							// 3. 除以size归一化到[-0.5, 0.5]范围
							// 4. 计算向量的长度（欧几里得距离）
							const dist = vector.set(x, y, z).subScalar(size / 2).divideScalar(size).length();
							
							// 计算边缘衰减因子：使用二次衰减函数
							// (1.0 - dist) 使中心为1，边缘为0
							// 平方使衰减更陡峭，云朵边缘更清晰
							const fadingFactor = (1.0 - dist) * (1.0 - dist);
							
							// 生成柏林噪声值并应用衰减：
							// 1. perlin.noise() 返回[-1, 1]范围的噪声值
							// 2. 乘以128并加128，转换到[0, 255]范围（128为中心值）
							// 3. x和z坐标除以1.5，使云朵在水平方向更延展，模拟真实云朵形状
							// 4. 乘以fadingFactor使云朵在边缘衰减为0
							data[i] = (128 + 128 * perlin.noise(x * scale / 1.5, y * scale, z * scale / 1.5)) * fadingFactor;
							
							i++;  // 移动到下一个体素位置
						}
					}
				}

				// 使用生成的体素数据创建3D纹理对象
				// Data3DTexture专门用于处理三维纹理数据
				return new THREE.Data3DTexture(data, size, size, size);
			}

			/**
			 * 初始化整个Three.js应用程序
			 * 
			 * 这个函数设置WebGL渲染器、场景、相机、光照、几何体、材质等所有必要组件。
			 * 它是整个程序的起点，只会在页面加载时执行一次。
			 */
			function init() {
				// ---------- 渲染器初始化 ----------
				// 创建WebGL 2.0渲染器（如果浏览器支持的话）
				renderer = new THREE.WebGLRenderer();
				// 设置设备像素比：确保在高DPI屏幕（如Retina显示器）上清晰渲染
				renderer.setPixelRatio(window.devicePixelRatio);
				// 设置渲染器尺寸为整个浏览器窗口大小
				renderer.setSize(window.innerWidth, window.innerHeight);
				// 设置动画循环回调函数：每帧自动调用animate函数
				renderer.setAnimationLoop(animate);
				// 将渲染器的canvas元素添加到页面body中
				document.body.appendChild(renderer.domElement);

				// ---------- 场景初始化 ----------
				// 创建场景对象：所有3D对象的容器
				scene = new THREE.Scene();

				// ---------- 相机初始化 ----------
				// 创建透视相机：
				// 参数1: 视野角度(FOV) - 60度，类似人眼的视野范围
				// 参数2: 宽高比 - 窗口宽度除以高度，确保画面不变形
				// 参数3: 近裁剪面 - 0.1单位，比这个近的物体不渲染
				// 参数4: 远裁剪面 - 100单位，比这个远的物体不渲染
				camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
				// 设置相机初始位置：在z轴上向后移动1.5个单位，以便看到整个云朵
				camera.position.set(0, 0, 1.5);

				// ---------- 控制器初始化 ----------
				// 创建轨道控制器，连接相机和渲染器的DOM元素
				// 这样用户就可以用鼠标拖拽旋转、滚轮缩放来查看云朵
				new OrbitControls(camera, renderer.domElement);

				// ---------- 天空背景创建 ----------
				// 创建canvas元素用于生成天空渐变纹理
				const canvas = document.createElement('canvas');
				canvas.width = 1;    // 宽度1像素，因为只需要垂直渐变
				canvas.height = 32;   // 高度32像素，渐变的分辨率

				// 获取2D绘图上下文
				const context = canvas.getContext('2d');
				// 创建从上到下的线性渐变（从y=0到y=32）
				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);
				skyMap.colorSpace = THREE.SRGBColorSpace;  // 使用sRGB颜色空间，更符合人眼感知

				// 创建天空球体：一个很大的球体包裹整个场景
				const sky = new THREE.Mesh(
					// 球体几何体：半径10，足够大以包含云朵
					new THREE.SphereGeometry(10),
					// 基本材质：使用渐变纹理，渲染球体内部（因为相机在球体内部）
					new THREE.MeshBasicMaterial({ map: skyMap, side: THREE.BackSide })
				);
				scene.add(sky);  // 将天空球体添加到场景中

				// ---------- 3D纹理初始化 ----------
				// 创建初始的空白3D纹理：所有体素的密度值为0（完全透明）
				const texture = new THREE.Data3DTexture(
					// 创建全零的Uint8Array：INITIAL_CLOUD_SIZE^3 个体素
					new Uint8Array(INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE * INITIAL_CLOUD_SIZE).fill(0),
					INITIAL_CLOUD_SIZE,  // 纹理宽度（x方向体素数）
					INITIAL_CLOUD_SIZE,  // 纹理高度（y方向体素数）
					INITIAL_CLOUD_SIZE   // 纹理深度（z方向体素数）
				);
				texture.format = THREE.RedFormat;        // 使用单通道格式（红色通道存储密度值）
				texture.minFilter = THREE.LinearFilter;  // 纹理缩小时的滤波方式：线性插值
				texture.magFilter = THREE.LinearFilter;  // 纹理放大时的滤波方式：线性插值
				texture.unpackAlignment = 1;             // 内存对齐方式，优化性能
				texture.needsUpdate = true;              // 标记纹理数据已更新，需要上传到GPU

				cloudTexture = texture;  // 保存到全局变量供后续使用

				// ---------- 着色器代码定义 ----------
				// 体积渲染的顶点着色器：主要任务是计算光线参数
				const vertexShader = /* glsl */`
					// 输入属性：顶点位置（来自几何体）
					in vec3 position;

					// 统一变量（uniforms）：由CPU传递到GPU的常量
					uniform mat4 modelMatrix;        // 模型矩阵：物体的位置、旋转、缩放
					uniform mat4 modelViewMatrix;    // 模型视图矩阵：模型矩阵 × 视图矩阵
					uniform mat4 projectionMatrix;   // 投影矩阵：3D到2D的投影变换
					uniform vec3 cameraPos;          // 相机在世界空间中的位置

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

					void main() {
						// 计算顶点在视图空间中的位置（相机空间）
						vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

						// 计算光线起点：
						// 1. 将相机位置从世界空间转换到模型空间
						// 2. inverse(modelMatrix)是模型矩阵的逆矩阵
						// 3. 这相当于找到模型空间中相机的位置
						vOrigin = vec3(inverse(modelMatrix) * vec4(cameraPos, 1.0)).xyz;
						
						// 计算光线方向：从光线起点指向当前顶点
						// 注意：这里假设立方体几何体在[-0.5, 0.5]范围内
						vDirection = position - vOrigin;

						// 设置顶点的最终位置（裁剪空间）
						gl_Position = projectionMatrix * mvPosition;
					}
				`;

				// 体积渲染的片元着色器：核心的体积渲染算法实现
				const fragmentShader = /* glsl */`
					// 精度限定符：指定浮点数和采样器的高精度
					precision highp float;
					precision highp sampler3D;

					// 统一变量
					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哈希函数：快速伪随机数生成
					 * 用于在每个像素生成不同的随机值，消除光线步进的规则图案
					 * @param seed - 输入种子值
					 * @returns 哈希后的随机整数
					 */
					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)范围内的随机浮点数
					 * @param seed - 随机种子（传入传出，每次调用后改变）
					 * @returns [0,1)范围内的随机浮点数
					 */
					float randomFloat(inout uint seed) {
							// 将32位整数转换为[0,1)浮点数
							return float(wang_hash(seed)) / 4294967296.;
					}

					/**
					 * 计算光线与轴对齐包围盒(AABB)的交点
					 * 包围盒范围：[-0.5, 0.5]的立方体
					 * @param orig - 光线起点
					 * @param dir - 光线方向（已归一化）
					 * @returns vec2(t_min, t_max)：进入和离开包围盒的距离
					 */
					vec2 hitBox(vec3 orig, vec3 dir) {
						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;
						
						// 确定每个维度的最近和最远交点
						vec3 tmin = min(tmin_tmp, tmax_tmp);
						vec3 tmax = max(tmin_tmp, tmax_tmp);
						
						// 最近的进入距离：三个维度最大值的最大值（确保在所有平面内）
						float t0 = max(tmin.x, max(tmin.y, tmin.z));
						// 最远的离开距离：三个维度最大值的最小值（确保至少在一个平面内）
						float t1 = min(tmax.x, min(tmax.y, tmax.z));
						
						return vec2(t0, t1);
					}

					/**
					 * 采样3D纹理获取密度值
					 * @param p - 采样点坐标，范围[0,1]（纹理空间）
					 * @returns 密度值，范围[0,1]（从纹理的红色通道读取）
					 */
					float sample1(vec3 p) {
						// texture()函数执行3D纹理查找，.r获取红色通道值
						return texture(map, p).r;
					}

					/**
					 * 简单着色计算：模拟云朵的光照效果
					 * 使用中心差分法估算密度梯度，模拟边缘光照
					 * @param coord - 采样点坐标
					 * @returns 着色强度值
					 */
					float shading(vec3 coord) {
						float step = 0.01;  // 差分步长，控制梯度估算精度
						// 中心差分：f(x-Δ) - f(x+Δ) 估算梯度大小
						return sample1(coord + vec3(-step)) - sample1(coord + vec3(step));
					}

					/**
					 * 线性颜色空间到sRGB颜色空间的转换
					 * sRGB是标准颜色空间，用于显示器和网页
					 * @param value - 线性颜色值
					 * @returns sRGB颜色值
					 */
					vec4 linearToSRGB(in vec4 value) {
						// 分段转换函数：
						// 低亮度部分（≤0.0031308）：线性变换
						// 高亮度部分：伽马变换（2.4次方）
						return vec4(mix(pow(value.rgb, vec3(0.41666)) * 1.055 - vec3(0.055), 
										value.rgb * 12.92, 
										vec3(lessThanEqual(value.rgb, vec3(0.0031308)))), 
									value.a);
					}

					/**
					 * 主片元着色器函数：执行体积渲染
					 * 每个像素调用一次，计算该像素的最终颜色
					 */
					void main() {
						// 归一化光线方向（确保长度为1）
						vec3 rayDir = normalize(vDirection);
						
						// 计算光线与体积立方体的交点
						vec2 bounds = hitBox(vOrigin, rayDir);

						// 如果没有交点（光线完全错过立方体），丢弃这个像素
						if (bounds.x > bounds.y) discard;

						// 确保起点在立方体内部（避免负距离）
						bounds.x = max(bounds.x, 0.0);

						// 计算光线进入立方体的起始点（世界空间）
						vec3 p = vOrigin + bounds.x * rayDir;
						
						// 计算基于光线方向的最大安全步长
						// 使用1.0/abs(rayDir)确保在任意方向都不会错过细节
						vec3 inc = 1.0 / abs(rayDir);
						float delta = min(inc.x, min(inc.y, inc.z));
						delta /= steps;  // 根据用户指定的步数调整步长

						// ---------- 光线起点抖动（减少条带状伪影） ----------
						// 创建基于像素位置和帧数的随机种子
						// 1973、9277、26699是质数，确保良好的随机分布
						uint seed = uint(gl_FragCoord.x) * uint(1973) + 
								   uint(gl_FragCoord.y) * uint(9277) + 
								   uint(frame) * uint(26699);
						
						// 获取3D纹理的尺寸（体素数）
						vec3 size = vec3(textureSize(map, 0));
						
						// 生成[-1,1]范围的随机数
						float randNum = randomFloat(seed) * 2.0 - 1.0;
						
						// 应用抖动：沿光线方向随机偏移起点
						// 抖动幅度为1个体素的长度，确保不影响整体形状
						p += rayDir * randNum * (1.0 / size);

						// ---------- 光线步进累积 ----------
						// 初始化累积颜色（前向alpha混合）
						// base是基础颜色，alpha从0开始累积
						vec4 ac = vec4(base, 0.0);

						// 光线步进循环：从进入点开始，到离开点结束
						for (float t = bounds.x; t < bounds.y; t += delta) {
							// 采样当前点的密度值
							// +0.5将坐标从[-0.5,0.5]转换到[0,1]纹理空间
							float d = sample1(p + 0.5);

							// 应用阈值和范围：使用smoothstep创建平滑过渡
							// smoothstep在[threshold-range, threshold+range]之间平滑插值
							// 低于下限为0，高于上限为1，中间平滑过渡
							d = smoothstep(threshold - range, threshold + range, d) * opacity;

							// 计算当前点的着色：
							// 1. shading(p+0.5)*3.0：基于密度的梯度着色（模拟光照）
							// 2. (p.x + p.y)*0.25：基于位置的渐变着色（模拟天空光）
							// 3. +0.2：基础亮度，确保云朵不会太暗
							float col = shading(p + 0.5) * 3.0 + ((p.x + p.y) * 0.25) + 0.2;

							// 前向alpha混合公式：
							// 新颜色 = 旧颜色 + (1 - 旧透明度) * 新颜色 * 新透明度
							ac.rgb += (1.0 - ac.a) * d * col;
							
							// 累积透明度：
							// 新透明度 = 旧透明度 + (1 - 旧透明度) * 新透明度
							ac.a += (1.0 - ac.a) * d;

							// 提前终止优化：如果已经几乎不透明，停止步进
							if (ac.a >= 0.95) break;

							// 沿光线方向前进到下一个采样点
							p += rayDir * delta;
						}

						// 将线性颜色转换为sRGB颜色空间（用于显示）
						color = linearToSRGB(ac);

						// 如果完全透明，丢弃这个像素（不写入深度缓冲）
						if (color.a == 0.0) discard;
					}
				`;

				// ---------- 几何体和材质创建 ----------
				// 创建立方体几何体：作为体积渲染的边界框
				// 尺寸1x1x1，中心在原点，范围[-0.5, 0.5]
				const geometry = new THREE.BoxGeometry(1, 1, 1);
				
				// 创建自定义着色器材质
				const material = new THREE.RawShaderMaterial({
					glslVersion: THREE.GLSL3,  // 指定GLSL 3.0版本（WebGL 2.0）
					
					// Uniforms：从JavaScript传递到着色器的常量
					uniforms: {
						base: { value: new THREE.Color(0x798aa0) },  // 云朵基础颜色（灰蓝色）
						map: { value: texture },                     // 3D纹理
						cameraPos: { value: new THREE.Vector3() },   // 相机位置（会在animate中更新）
						threshold: { value: 0.25 },                  // 密度阈值默认值
						opacity: { value: 0.25 },                    // 不透明度默认值
						range: { value: 0.1 },                       // 阈值范围默认值
						steps: { value: 100 },                       // 光线步进次数默认值
						frame: { value: 0 }                          // 帧数计数器（用于随机种子）
					},
					
					vertexShader: vertexShader,    // 顶点着色器代码
					fragmentShader: fragmentShader, // 片元着色器代码
					side: THREE.BackSide,           // 渲染背面（因为相机在立方体内部）
					transparent: true               // 启用透明度
				});

				// ---------- 网格对象创建 ----------
				// 创建网格：将几何体和材质组合成可渲染对象
				mesh = new THREE.Mesh(geometry, material);
				scene.add(mesh);  // 将云朵添加到场景中

				// ---------- GUI控制面板 ----------
				// 定义用户可调参数（与着色器中的uniforms对应）
				const parameters = {
					threshold: 0.25,  // 密度阈值：控制哪些区域显示为云
					opacity: 0.25,    // 不透明度：控制云朵的整体透明度
					range: 0.1,       // 阈值范围：控制云朵边缘的锐利/模糊程度
					steps: 100        // 光线步进次数：影响渲染质量和性能
				};

				/**
				 * 更新着色器uniforms
				 * 当GUI控件值改变时调用此函数
				 */
				function update() {
					material.uniforms.threshold.value = parameters.threshold;
					material.uniforms.opacity.value = parameters.opacity;
					material.uniforms.range.value = parameters.range;
					material.uniforms.steps.value = parameters.steps;
				}

				// 创建GUI实例
				const gui = new GUI();
				
				// 添加控件：
				// 参数1: 参数对象
				// 参数2: 参数名
				// 参数3: 最小值
				// 参数4: 最大值
				// 参数5: 步进值
				gui.add(parameters, 'threshold', 0, 1, 0.01)
					.name('密度阈值')
					.onChange(update);  // 值改变时调用update函数
					
				gui.add(parameters, 'opacity', 0, 1, 0.01)
					.name('不透明度')
					.onChange(update);
					
				gui.add(parameters, 'range', 0, 1, 0.01)
					.name('过渡范围')
					.onChange(update);
					
				gui.add(parameters, 'steps', 0, 200, 1)
					.name('步进次数')
					.onChange(update);

				// ---------- 事件监听器 ----------
				// 监听窗口大小变化事件，调整渲染器和相机
				window.addEventListener('resize', onWindowResize);
			}

			/**
			 * 窗口大小变化事件处理函数
			 * 当浏览器窗口大小改变时，调整相机和渲染器以适应新尺寸
			 */
			function onWindowResize() {
				// 更新相机的宽高比（保持画面不变形）
				camera.aspect = window.innerWidth / window.innerHeight;
				// 更新相机的投影矩阵（必须调用此函数使更改生效）
				camera.updateProjectionMatrix();
				// 更新渲染器大小为新的窗口尺寸
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			// ========== 渐进式云朵生成参数 ==========
			// 这些参数控制如何将大纹理分割成小块并逐步生成
			
			let curr = 0;  // 当前已生成的块索引（0到totalCount-1）
			
			const countPerRow = 4;           // 每行块数：4块
			const countPerSlice = countPerRow * countPerRow;  // 每层块数：4×4=16块
			const sliceCount = 4;            // 层数：4层
			const totalCount = sliceCount * countPerSlice;  // 总块数：4×16=64块
			const margins = 8;               // 块之间的边距（体素数）：防止块之间粘连
			
			// 计算每个云朵块的实际尺寸：
			const perElementPaddedSize = (INITIAL_CLOUD_SIZE - margins) / countPerRow;  // 带边距的尺寸
			const perElementSize = Math.floor((INITIAL_CLOUD_SIZE - 1) / countPerRow);   // 实际可用尺寸

			/**
			 * 动画循环函数
			 * 
			 * 这个函数每帧被调用（通常每秒60次），负责：
			 * 1. 定时生成新的云朵块
			 * 2. 更新着色器uniforms
			 * 3. 渲染场景
			 * 
			 * 注意：这是Three.js的渲染循环，不是浏览器的requestAnimationFrame
			 */
			function animate() {
				const time = performance.now();  // 获取当前时间（毫秒）
				
				// ---------- 渐进式云朵生成 ----------
				// 每隔1500毫秒（1.5秒）生成一个新块，直到所有块都生成完
				if (time - prevTime > 1500.0 && curr < totalCount) {
					// 计算当前块在3D纹理中的起始位置（考虑边距）
					// 公式解释：
					// 1. x位置：当前块在行中的索引 × 每块尺寸 + 边距的一半
					// 2. y位置：当前块在层中的行索引 × 每块尺寸 + 边距的一半
					// 3. z位置：当前块所在的层索引 × 每块尺寸 + 边距的一半
					const position = new THREE.Vector3(
						Math.floor(curr % countPerRow) * perElementSize + margins * 0.5,
						(Math.floor(((curr % countPerSlice) / countPerRow))) * perElementSize + margins * 0.5,
						Math.floor(curr / countPerSlice) * perElementSize + margins * 0.5
					).floor();  // 向下取整，确保是整数坐标（体素对齐）
					
					// 定义目标区域（要填充的3D空间范围）
					const maxDimension = perElementPaddedSize - 1;  // 最大索引（0-based）
					const box = new THREE.Box3(
						new THREE.Vector3(0, 0, 0),                  // 最小角点
						new THREE.Vector3(maxDimension, maxDimension, maxDimension)  // 最大角点
					);
					
					// 生成随机缩放因子：0.75到1.25之间
					// 这使不同云朵块有不同的细节程度，增加自然感
					const scaleFactor = (Math.random() + 0.5) * 0.5;
					
					// 生成单个云朵块的3D纹理
					const source = generateCloudTexture(perElementPaddedSize, scaleFactor);
					
					// 将生成的云朵块复制到主3D纹理的指定位置
					// copyTextureToTexture是WebGL 2.0的高效纹理复制函数
					renderer.copyTextureToTexture(source, cloudTexture, box, position);
					
					// 更新上次生成时间
					prevTime = time;
					
					// 递增块索引，准备生成下一个块
					curr++;
					
					// 可选：在控制台显示生成进度
					console.log(`已生成云朵块 ${curr}/${totalCount}`);
				}

				// ---------- 更新着色器uniforms ----------
				// 更新相机位置（用于光线起点的计算）
				mesh.material.uniforms.cameraPos.value.copy(camera.position);
				
				// 可选：如果需要云朵自动旋转，取消注释下面这行
				// mesh.rotation.y = -performance.now() / 7500;  // 缓慢旋转
				
				// 递增帧数计数器（用于随机种子，消除帧间相关性）
				mesh.material.uniforms.frame.value++;

				// ---------- 渲染场景 ----------
				// 调用渲染器将3D场景绘制到canvas上
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>