<!-- 代码功能和技术点详解
🎯 整体功能概述
这是一个基于 Three.js + WebGPU + TSL（Three.js着色器语言） 实现的高级三维云效果渲染示例。通过GPU计算着色器实时生成动态的3D云纹理，并利用光线步进（Raymarching） 技术在立方体体积内渲染出逼真的半透明云效果。

🌟 核心功能亮点
1. 动态云生成
在GPU上实时计算生成三维云纹理（200x200x200分辨率）

云形状通过 Perlin噪声 算法生成，具有自然有机的外观

云密度在空间中心最高，向外逐渐衰减，形成球状云团

纹理随时间动态变化，云层缓慢流动

2. 高质量体积渲染
使用光线步进技术渲染半透明体积

支持透明度累积，实现真实的半透明效果

内置简单光照模型，通过纹理梯度计算明暗变化

边缘柔化处理，避免硬边和锯齿

3. 实时交互与调节
鼠标/触摸控制相机旋转、缩放和平移

实时参数调节（密度、透明度、边缘柔和度等）

集成调试面板，可查看和修改场景对象

🔧 主要技术点详解
1. WebGPU计算着色器
javascript
// 关键代码示例
const computeCloud = Fn( ({ storageTexture }) => {
    // 在GPU并行计算每个体素
    const noise = mx_noise_vec3( noiseCoord );
    textureStore( storageTexture, vec3( x, y, z ), vec4( vec3( data.x ), 1.0 ) );
}).compute( size * size * size );
并行计算：800万个体素同时计算，充分利用GPU并行能力

存储纹理：使用Storage3DTexture作为计算输出

性能优势：相比CPU计算，速度提升数百倍

2. 三维噪声算法
javascript
// 三维Perlin噪声生成
const noiseCoord = coord3d.mul( scale.div( 1.5 ) ).add( time );
const noise = mx_noise_vec3( noiseCoord );
Perlin噪声：生成自然、连续的随机图案

时间动画：添加time变量使噪声随时间变化

空间变化：不同坐标产生不同噪声值，形成云的不规则形状

3. 光线步进算法
javascript
RaymarchingBox( steps, ({ positionRay }) => {
    // 沿光线逐步采样
    const mapValue = texture.sample( positionRay.add( 0.5 ) ).r;
    
    // Alpha混合公式
    finalColor.rgb.addAssign( finalColor.a.oneMinus().mul( mapValue ).mul( col ) );
    finalColor.a.addAssign( finalColor.a.oneMinus().mul( mapValue ) );
});
逐步采样：从相机出发，沿光线方向逐步前进

累积透明度：使用标准alpha混合公式累加颜色和不透明度

提前终止：当透明度达到95%时停止采样，优化性能

4. 视觉增强技术
平滑阈值处理
javascript
// 使用smoothstep创建柔和边缘
mapValue.assign( smoothstep( 
    threshold.sub( range ), 
    threshold.add( range ), 
    mapValue 
).mul( opacity ) );
smoothstep函数：创建平滑的S形过渡

可调节边缘：range参数控制边缘柔和度

阈值控制：threshold决定云的可见密度

伪光照计算
javascript
// 通过纹理梯度模拟光照
const shading = texture.sample( positionRay.add( vec3( -0.01 ) ) ).r
                     .sub( texture.sample( positionRay.add( vec3( 0.01 ) ) ).r );
梯度计算：比较相邻采样点的密度差异

无需法线：避免复杂的法线计算，性能高效

视觉深度：增强体积感，使云层更有层次

5. 性能优化技术
计算优化
分批计算：800万体素一次性计算完成

纹理复用：计算结果存储在纹理中，供渲染重复使用

提前终止：光线步进中尽早终止完全不透明的光线

内存优化
紧凑存储：只存储密度值（单通道），节省显存

禁用mipmap：计算纹理不需要多级渐远纹理

适度分辨率：200x200x200在质量和性能间取得平衡

🎨 视觉效果特性
1. 真实的体积感
深度感知：远处的云更淡，近处的云更浓

光照变化：云层内部有自然的明暗变化

边缘羽化：云边界自然过渡，没有硬边

2. 动态变化
时间动画：云层缓慢流动，永不重复

交互响应：相机移动时视角自然变化

参数实时反馈：调整参数立即看到效果变化

3. 艺术可控性
风格化调节：通过参数可以创建不同风格的云

低阈值+高不透明度 = 浓厚乌云

高阈值+低不透明度 = 薄雾轻云

大范围值 = 柔软蓬松的云

小范围值 = 锐利分明的云

📊 技术架构
text
Three.js框架
    ├── WebGPU渲染器 (底层图形API)
    ├── TSL着色器语言 (声明式着色器编程)
    ├── 节点材质系统 (可视化着色器构建)
    └── 插件系统
        ├── 轨道控制器 (相机交互)
        ├── 光线步进工具 (体积渲染算法)
        └── 调试检查器 (开发工具)
🔄 工作流程
初始化阶段

检测WebGPU支持性

创建渲染器、场景、相机

设置天空背景

预处理阶段

在GPU上执行计算着色器

生成三维云纹理数据

存储到GPU纹理内存

渲染循环（每帧）

重新计算云纹理（添加时间变化）

执行光线步进渲染

应用后期处理和混合

输出到屏幕

🎯 应用场景
这个技术可以应用于：

游戏开发

动态天空和天气系统

体积雾和特殊效果

科幻场景中的星云效果

数据可视化

三维密度数据展示

气象云图可视化

医学CT/MRI数据渲染

创意艺术

交互式数字艺术

实时生成艺术

沉浸式体验装置

⚡ 性能特点
GPU密集型：大部分计算在GPU并行执行

实时性能：在主流GPU上可达到60FPS

可扩展性：参数可调节以适配不同硬件

内存高效：优化的纹理使用和存储

📈 技术先进性
现代图形API：使用WebGPU而非WebGL，支持更多高级特性

计算着色器：利用GPU通用计算能力

声明式着色器：TSL提供更直观的着色器编程方式

实时交互：完整的GUI和交互控制系统 -->


<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- 页面标题：描述示例功能和使用的技术 -->
		<title>three.js WebGPU - 三维计算纹理示例</title>
		<!-- 字符编码设置为UTF-8，支持多语言字符 -->
		<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="example.css">
	</head>

	<body>

		<!-- 页面顶部信息区域：展示示例信息和链接 -->
		<div id="info">
			<!-- 
				Three.js官网链接：
				- target="_blank": 在新标签页中打开链接
				- rel="noopener": 防止新页面访问原页面的window对象，增强安全性
				- class="logo-link": CSS类名，可能用于添加Three.js图标样式
			-->
			<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>三维计算纹理云效果</span>
			</div>

			<small>
				<!-- 示例描述：说明示例的主要功能 -->
				使用WebGPU计算着色器实时生成三维云纹理，并通过光线步进进行渲染。
			</small>
		</div>

		<!-- 
			导入映射(Import Map)配置：
			这是一个现代JavaScript功能，允许在导入模块时使用自定义名称映射。
			在这里配置Three.js及相关模块的路径，简化导入语句。
		-->
		<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模块 -->
		<script type="module">

			// ==================== 模块导入部分 ====================
			
			// 导入Three.js的WebGPU核心模块
			// WebGPU是新一代的图形API，提供比WebGL更底层的GPU访问
			import * as THREE from 'three/webgpu';
			
			// 导入Three.js着色器语言(TSL)的各种函数和节点
			// TSL是Three.js的着色器库，提供了声明式创建着色器的方法
			import { 
				time,          // 时间变量，用于创建动画效果
				mx_noise_vec3, // 三维噪声函数，用于生成自然纹理
				instanceIndex, // 计算着色器中当前实例的索引
				textureStore,  // 纹理存储函数，用于将数据写入存储纹理
				float,         // 浮点数类型
				vec3, vec4,    // 三维和四维向量类型
				If, Break,     // 流程控制语句（条件判断和中断）
				Fn,            // 函数定义
				smoothstep,    // 平滑插值函数，用于创建渐变效果
				texture3D,     // 三维纹理采样
				uniform        // 统一变量，可在JavaScript中更新
			} from 'three/tsl';

			// 导入光线步进工具函数
			// 光线步进是一种体积渲染技术，通过逐步采样来渲染透明或半透明物体
			import { RaymarchingBox } from 'three/addons/tsl/utils/Raymarching.js';

			// 导入轨道控制器，允许用户通过鼠标/触摸控制相机旋转和缩放
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			// 导入调试检查器，用于调试Three.js场景和材质
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入WebGPU兼容性检测模块
			// 用于检查浏览器是否支持WebGPU，并提供友好的错误信息
			import WebGPU from 'three/addons/capabilities/WebGPU.js';

			// ==================== 全局变量声明 ====================
			
			// 渲染器变量：负责将3D场景渲染到Canvas中
			let renderer;
			
			// 场景变量：包含所有3D对象、光源、相机等的容器
			let scene;
			
			// 相机变量：定义观察3D场景的视角
			let camera;
			
			// 网格变量：包含云效果的立方体对象
			let mesh;
			
			// 计算节点变量：用于执行GPU计算着色器
			let computeNode;

			// ==================== WebGPU兼容性检测 ====================
			
			// 检查浏览器是否支持WebGPU
			if ( WebGPU.isAvailable() === false ) {
				// 如果不支持，获取错误信息元素并添加到页面中
				document.body.appendChild( WebGPU.getErrorMessage() );
				
				// 抛出错误，停止代码执行
				throw new Error( '您的浏览器不支持WebGPU，请使用支持WebGPU的浏览器（如Chrome 113+）' );
			}

			// ==================== 初始化函数调用 ====================
			
			// 调用主初始化函数
			init();

			// ==================== 异步初始化函数 ====================
			
			// async关键字表示这是一个异步函数，可以在其中使用await
			async function init() {

				// ==================== 1. 创建渲染器 ====================
				
				// 创建WebGPU渲染器实例
				// { antialias: true } 启用抗锯齿，使边缘更平滑
				renderer = new THREE.WebGPURenderer( { antialias: true } );
				
				// 设置设备像素比，确保在高DPI屏幕上清晰显示
				// window.devicePixelRatio 返回物理像素与CSS像素的比率
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器尺寸为整个窗口大小
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环，animate函数将在每一帧被调用
				renderer.setAnimationLoop( animate );
				
				// 创建调试检查器实例并附加到渲染器
				// 这将启用场景调试功能，可以查看和修改场景中的对象
				renderer.inspector = new Inspector();
				
				// 获取渲染器的Canvas DOM元素并添加到页面body中
				document.body.appendChild( renderer.domElement );

				// 等待渲染器初始化完成
				// WebGPU初始化是异步的，需要等待其完成
				await renderer.init();

				// ==================== 2. 创建场景 ====================
				
				// 创建新的Three.js场景
				// 场景是所有3D对象的容器
				scene = new THREE.Scene();

				// ==================== 3. 创建相机 ====================
				
				// 创建透视相机
				// 参数说明：
				// 60 - 视野角度(FOV)，单位是度，较大的值会产生鱼眼效果
				// window.innerWidth / window.innerHeight - 宽高比，根据窗口大小自动计算
				// 0.1 - 近裁剪面，距离相机多近的物体开始渲染
				// 100 - 远裁剪面，距离相机多远的物体停止渲染
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
				
				// 设置相机初始位置
				// x: 0（水平中心），y: 1（向上1单位），z: 1.5（向前1.5单位）
				camera.position.set( 0, 1, 1.5 );

				// ==================== 4. 创建轨道控制器 ====================
				
				// 创建轨道控制器实例
				// 将相机和渲染器的DOM元素传递给控制器
				// 用户可以通过鼠标左键旋转、右键平移、滚轮缩放来交互控制相机
				new OrbitControls( camera, renderer.domElement );

				// ==================== 5. 创建天空背景 ====================
				
				// 创建Canvas元素用于生成天空渐变纹理
				// Canvas是一种可以在JavaScript中绘制2D图形的HTML元素
				const canvas = document.createElement( 'canvas' );
				
				// 设置Canvas尺寸
				// 宽度1像素：渐变只需1像素宽，纹理会拉伸填充
				// 高度32像素：渐变有32个像素高度，提供足够的渐变细节
				canvas.width = 1;
				canvas.height = 32;

				// 获取Canvas的2D渲染上下文
				const context = canvas.getContext( '2d' );
				
				// 创建线性渐变
				// 参数：起点x, 起点y, 终点x, 终点y
				// 这里创建垂直方向从上到下的渐变
				const gradient = context.createLinearGradient( 0, 0, 0, 32 );
				
				// 添加颜色停止点
				// 参数：位置(0-1), 颜色值
				gradient.addColorStop( 0.0, '#014a84' ); // 顶部：深蓝色
				gradient.addColorStop( 0.5, '#0561a0' ); // 中间：中等蓝色
				gradient.addColorStop( 1.0, '#437ab6' ); // 底部：浅蓝色
				
				// 设置填充样式为渐变
				context.fillStyle = gradient;
				
				// 用渐变填充整个Canvas区域
				context.fillRect( 0, 0, 1, 32 );

				// 将Canvas转换为Three.js纹理
				// CanvasTexture可以从Canvas元素创建纹理
				const skyMap = new THREE.CanvasTexture( canvas );
				
				// 设置纹理颜色空间为sRGB
				// sRGB是标准的颜色空间，使颜色在不同设备上显示一致
				skyMap.colorSpace = THREE.SRGBColorSpace;

				// 创建天空球体网格
				// 球体将作为天空背景，包裹整个场景
				const sky = new THREE.Mesh(
					// 创建球体几何体
					// 参数：半径10（足够大以包含场景）
					new THREE.SphereGeometry( 10 ),
					// 创建基本节点材质
					// MeshBasicNodeMaterial是节点材质的基础类型
					new THREE.MeshBasicNodeMaterial( { 
						map: skyMap,          // 使用天空渐变纹理
						side: THREE.BackSide   // 渲染球体内表面（从内部看）
					} )
				);
				
				// 将天空球体添加到场景中
				scene.add( sky );

				// ==================== 6. 创建三维计算纹理 ====================
				
				// 定义三维纹理的尺寸
				// 200x200x200 = 8百万体素，这是一个适中的分辨率
				const size = 200;

				// 定义计算云的TSL函数
				// Fn函数用于定义着色器语言中的可重用函数
				const computeCloud = Fn( ( { storageTexture } ) => {

					// 定义噪声缩放因子
					// 较小的值产生更大的噪声特征，较大的值产生更细致的噪声
					const scale = float( 0.05 );
					
					// 获取当前计算实例的索引
					// 在计算着色器中，每个体素由一个独立的计算实例处理
					const id = instanceIndex;

					// 将一维索引转换为三维坐标
					// 这是三维纹理索引的标准转换方法
					
					// 计算x坐标：id % size
					const x = id.mod( size );
					
					// 计算y坐标：(id / size) % size
					// 首先除以size得到行，然后取模得到列
					const y = id.div( size ).mod( size );
					
					// 计算z坐标：id / (size * size)
					// 除以size*size得到深度层
					const z = id.div( size * size );

					// 创建三维坐标向量
					// vec3函数创建一个三维向量
					const coord3d = vec3( x, y, z );
					
					// 将坐标中心化并归一化
					// 步骤：
					// 1. coord3d.sub( size / 2 ): 从[-size/2, size/2]
					// 2. .div( size ): 归一化到[-0.5, 0.5]
					const centered = coord3d.sub( size / 2 ).div( size );
					
					// 计算到中心的距离并创建球体衰减
					// 1.0 - distance 创建一个从中心向外衰减的效果
					const d = float( 1.0 ).sub( centered.length() );

					// 创建噪声坐标
					// 1. 应用缩放：coord3d.mul( scale.div( 1.5 ) )
					// 2. 添加时间变化：.add( time ) 使噪声随时间动画
					const noiseCoord = coord3d.mul( scale.div( 1.5 ) ).add( time );

					// 生成三维Perlin噪声
					// mx_noise_vec3生成三维向量噪声
					// .toConst('noise')将结果标记为常量并命名，便于调试
					const noise = mx_noise_vec3( noiseCoord ).toConst( 'noise' );

					// 计算最终数据值
					// 将噪声值与距离衰减的平方相乘
					// 这创建了中心密集、边缘稀疏的云状效果
					const data = noise.mul( d ).mul( d ).toConst( 'data' );

					// 将计算得到的值存储到三维纹理中
					// textureStore函数将数据写入存储纹理
					// 参数：
					// 1. storageTexture: 目标存储纹理
					// 2. vec3(x, y, z): 纹理坐标
					// 3. vec4(vec3(data.x), 1.0): 存储的值（RGB使用噪声的x分量，A设为1.0）
					textureStore( storageTexture, vec3( x, y, z ), vec4( vec3( data.x ), 1.0 ) );

				} );

				// 创建三维存储纹理
				// Storage3DTexture是专用于计算着色器写入的三维纹理
				const storageTexture = new THREE.Storage3DTexture( size, size, size );
				
				// 禁用mipmap生成
				// mipmap是用于远处纹理的缩小版本，对于计算纹理通常不需要
				storageTexture.generateMipmaps = false;
				
				// 设置纹理名称，便于调试识别
				storageTexture.name = 'cloud';
			
				// 创建计算节点
				// computeCloud({ storageTexture }): 调用计算函数
				// .compute(size * size * size): 指定计算着色器的工作组数量（总计算量）
				// .setName('computeCloud'): 设置节点名称，便于调试
				computeNode = computeCloud( { storageTexture } ).compute( size * size * size ).setName( 'computeCloud' );

				// ==================== 7. 创建光线步进渲染函数 ====================
				
				// 定义透明光线步进纹理的TSL函数
				// 这个函数将使用光线步进技术渲染三维纹理
				const transparentRaymarchingTexture = Fn( ( {
					texture,       // 要渲染的三维纹理
					range = float( 0.14 ),       // 平滑过渡范围，控制边缘的柔和度
					threshold = float( 0.08 ),   // 阈值，决定哪些部分可见
					opacity = float( 0.18 ),     // 基础不透明度
					steps = float( 100 )         // 光线步进的最大步数
				} ) => {

					// 初始化最终颜色变量
					// vec4(0)创建RGBA全为0的颜色
					// .toVar()将其声明为变量，可以在函数中修改
					const finalColor = vec4( 0 ).toVar();

					// 在包围盒内进行光线步进
					// RaymarchingBox函数处理光线与立方体的相交和步进逻辑
					// 参数1: steps - 最大步进次数
					// 参数2: 回调函数，对每个步进点执行
					RaymarchingBox( steps, ( { positionRay } ) => {

						// 采样三维纹理
						// positionRay在[-0.5, 0.5]范围内，所以需要加0.5转换到[0,1]纹理坐标
						// .r获取纹理的红色通道值（因为我们的云数据存储在R通道）
						// 转换为浮点数并声明为变量
						const mapValue = float( texture.sample( positionRay.add( 0.5 ) ).r ).toVar();

						// 使用smoothstep进行阈值处理
						// smoothstep创建平滑的过渡：
						// - threshold - range: 过渡开始点
						// - threshold + range: 过渡结束点
						// - mapValue: 输入值
						// 然后乘以opacity控制整体可见度
						mapValue.assign( smoothstep( 
							threshold.sub( range ), 
							threshold.add( range ), 
							mapValue 
						).mul( opacity ) );

						// 计算简单光照（梯度/法线近似）
						// 通过偏移采样来近似计算梯度，模拟光照效果
						// 这是体积渲染中常用的技巧，无需显式计算法线
						const shading = texture.sample( positionRay.add( vec3( - 0.01 ) ) ).r
						                 .sub( texture.sample( positionRay.add( vec3( 0.01 ) ) ).r );

						// 计算基础颜色
						// 结合光照和位置信息创建变化的颜色
						const col = shading.mul( 4.0 )                    // 增强光照效果
						                  .add( positionRay.x.add( positionRay.y ).mul( 0.5 ) ) // 添加基于位置的变化
						                  .add( 0.3 );                     // 添加基础亮度

						// 累加颜色：使用alpha混合公式
						// 公式：finalColor.rgb += (1 - finalColor.a) * mapValue * col
						// 这是体积渲染的标准alpha混合
						finalColor.rgb.addAssign( 
							finalColor.a.oneMinus()  // 1 - 当前alpha
							.mul( mapValue )         // 乘以当前样本的不透明度
							.mul( col )              // 乘以颜色
						);

						// 累加alpha：使用alpha混合公式
						// 公式：finalColor.a += (1 - finalColor.a) * mapValue
						finalColor.a.addAssign( 
							finalColor.a.oneMinus()  // 1 - 当前alpha
							.mul( mapValue )         // 乘以当前样本的不透明度
						);

						// 提前终止优化
						// 如果alpha值达到0.95（接近完全不透明），则停止步进
						// 这可以显著提高性能，减少不必要的计算
						If( finalColor.a.greaterThanEqual( 0.95 ), () => {
							Break(); // 跳出光线步进循环
						} );

					} );

					// 返回最终计算的颜色
					return finalColor;

				} );

				// ==================== 8. 创建材质和材质参数 ====================
				
				// 创建材质参数（使用uniform以便通过GUI调整）
				// uniform变量可以在JavaScript中更新，并自动同步到着色器
				
				// 基础颜色：云的底色
				const baseColor = uniform( new THREE.Color( 0x798aa0 ) );
				
				// 平滑范围：控制云边缘的柔和度
				const range = uniform( 0.1 );
				
				// 阈值：决定云的密度阈值，高于此值的部分更可见
				const threshold = uniform( 0.08 );
				
				// 不透明度：控制云的整体透明度
				const opacity = uniform( 0.08 );
				
				// 步进次数：光线步进的最大步数，影响渲染质量和性能
				const steps = uniform( 100 );

				// 应用透明光线步进纹理函数
				// 调用之前定义的函数，传入三维纹理和参数
				const cloud3d = transparentRaymarchingTexture( {
					texture: texture3D( storageTexture, null, 0 ), // 创建三维纹理采样节点
					range,
					threshold,
					opacity,
					steps
				} );

				// 将基础颜色添加到云的颜色中
				// .setRGB()方法只修改颜色的RGB通道，保持alpha通道不变
				const finalCloud = cloud3d.setRGB( cloud3d.rgb.add( baseColor ) );

				// 创建节点材质
				// NodeMaterial是Three.js的高级材质系统，支持节点式着色器构建
				const material = new THREE.NodeMaterial();
				
				// 设置材质的颜色节点
				material.colorNode = finalCloud;
				
				// 设置渲染面为背面（因为我们在立方体内部观察）
				material.side = THREE.BackSide;
				
				// 启用透明度
				material.transparent = true;
				
				// 设置材质名称，便于调试识别
				material.name = 'transparentRaymarchingMaterial';

				// ==================== 9. 创建网格对象 ====================
				
				// 创建立方体网格
				// 这个立方体将包含云效果，我们实际渲染的是立方体内的体积
				mesh = new THREE.Mesh(
					// 创建立方体几何体，尺寸10x10x10
					// 这个尺寸决定了云效果的范围
					new THREE.BoxGeometry( 10, 10, 10 ),
					// 使用之前创建的节点材质
					material
				);
				
				// 将网格添加到场景中
				scene.add( mesh );

				// 旋转立方体90度（π/2弧度）
				// 这只是一个视觉效果调整，使云的视角更有趣
				mesh.rotation.y = Math.PI / 2;

				// ==================== 10. 执行计算着色器 ====================
				
				// 执行计算着色器以生成三维纹理数据
				// 这将在GPU上运行computeCloud函数，填充storageTexture
				renderer.compute( computeNode );

				// ==================== 11. 创建GUI控件 ====================
				
				// 使用调试检查器创建参数面板
				const gui = renderer.inspector.createParameters( '设置' );
				
				// 添加阈值滑块
				// 参数：uniform变量, 最小值, 最大值, 步长
				gui.add( threshold, 'value', 0, 1, 0.01 ).name( '密度阈值' );
				
				// 添加不透明度滑块
				gui.add( opacity, 'value', 0, 1, 0.01 ).name( '不透明度' );
				
				// 添加平滑范围滑块
				gui.add( range, 'value', 0, 1, 0.01 ).name( '边缘柔和度' );
				
				// 添加步进次数滑块
				gui.add( steps, 'value', 0, 200, 1 ).name( '光线步数' );

				// ==================== 12. 添加窗口大小变化监听 ====================
				
				// 监听窗口大小变化事件
				// 当用户调整浏览器窗口大小时，调整渲染器和相机
				window.addEventListener( 'resize', onWindowResize );

			}

			// ==================== 窗口大小变化处理函数 ====================
			
			function onWindowResize() {

				// 更新相机宽高比
				// 相机需要知道渲染区域的新宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 更改相机参数后必须调用此方法更新内部矩阵
				camera.updateProjectionMatrix();

				// 更新渲染器大小
				// 确保渲染器Canvas与窗口大小匹配
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			// ==================== 动画循环函数 ====================
			
			function animate() {

				// 每帧执行计算着色器
				// 这会使云纹理随时间变化（因为计算中使用了time变量）
				renderer.compute( computeNode );
				
				// 渲染场景
				// 将3D场景渲染到Canvas中
				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>