<!-- Three.js WebGPU 天空效果演示 - 代码功能与技术点详解
🎯 整体功能概述
这是一个基于 Three.js WebGPU 的高级天空渲染演示应用，通过物理准确的大气散射模型，实时模拟不同时间、不同天气条件下的天空效果。用户可以交互式地调整多种大气参数，观察天空颜色、太阳位置和光照效果的实时变化。

📋 主要功能模块
1. 天空渲染系统
物理准确的大气散射模型：实现真实的天空颜色渐变

动态太阳位置：根据仰角和方位角实时计算太阳位置

可调节参数：

大气浊度（影响空气清晰度）

瑞利散射（控制天空蓝色程度）

米氏散射（影响太阳光晕效果）

太阳位置（模拟日出、正午、日落）

曝光度（控制整体亮度）

2. 用户交互系统
轨道控制器：鼠标拖拽旋转视角

实时参数控制面板：右侧GUI可调节所有天空参数

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

3. 视觉效果系统
ACES色调映射：电影级色彩渲染

HDR效果：高动态范围渲染支持

实时渲染：60FPS流畅动画

🔧 核心技术点详解
1. WebGPU渲染引擎
javascript
// 核心特点：
- 下一代Web图形API，替代WebGL
- 更低的CPU开销，更好的多线程支持
- 原生计算着色器支持
- 更现代的API设计
2. 大气散射物理模型
瑞利散射 (Rayleigh Scattering)
原理：大气分子对短波长光（蓝光）的散射

实现：通过rayleigh参数控制散射强度

效果：天空蓝色的主要来源

米氏散射 (Mie Scattering)
原理：大气中较大颗粒（气溶胶）对光的散射

实现：通过mieCoefficient和mieDirectionalG控制

效果：太阳周围光晕、日出日落红色

浊度模型 (Turbidity)
原理：大气中悬浮颗粒的总量

实现：turbidity参数模拟不同空气质量

效果：清澈蓝天 vs 雾霾天空

3. 太阳位置计算
javascript
// 球面坐标转换
const phi = THREE.MathUtils.degToRad(90 - elevation);   // 极角
const theta = THREE.MathUtils.degToRad(azimuth);        // 方位角
sun.setFromSphericalCoords(1, phi, theta);             // 转换为3D坐标
4. 着色器技术
自定义着色器材质：SkyMesh使用专门编写的着色器

Uniform变量：实时传递参数到GPU

基于物理的渲染(PBR)：真实的光照计算

5. Three.js架构模式
模块化导入系统
javascript
// 导入映射表 (Import Maps)
"imports": {
  "three": "../build/three.webgpu.js",       // 主库
  "three/addons/": "./jsm/"                   // 插件系统
}
场景图结构
text
Scene
├── Camera (透视相机)
├── SkyMesh (天空网格)
│   ├── Geometry (球体几何)
│   └── ShaderMaterial (自定义材质)
└── 其他可选对象
6. 动画与渲染循环
javascript
// Three.js渲染循环机制
renderer.setAnimationLoop(animate);

function animate() {
  renderer.render(scene, camera);  // 每帧调用
  // 自动同步到显示器刷新率（通常60Hz）
}
7. GUI控制系统
实时参数绑定：GUI控件直接绑定到效果参数

回调机制：参数变化时自动更新渲染

用户友好设计：滑块控件，范围限制

8. 性能优化技术
渲染优化
远裁剪面设置：2000000单位，覆盖整个天空

天空网格缩放：450000倍，避免精度问题

禁用不必要功能：缩放、平移

内存优化
单一天空网格：重用几何体和材质

智能缓冲区管理：WebGPU自动处理

9. 响应式设计
javascript
// 窗口大小变化处理
window.addEventListener('resize', onWindowResize);

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();  // 更新相机矩阵
  renderer.setSize(window.innerWidth, window.innerHeight);
}
10. 调试与开发工具
Inspector集成：内置调试面板

实时参数调整：开发时快速迭代

错误处理：WebGPU兼容性检查

🚀 技术栈总结
技术	用途	说明
Three.js	3D渲染框架	提供完整的3D渲染管线
WebGPU	图形API	现代、高效的GPU访问
GLSL/TSL	着色器语言	实现大气散射算法
ES6 Modules	代码组织	模块化开发
Import Maps	依赖管理	控制模块解析
ACES Filmic	色调映射	电影级色彩渲染
🌟 创新点与特色
1. 教育价值
实时展示大气散射物理原理

交互式学习光线与大气相互作用

2. 技术前瞻性
首批Three.js WebGPU应用之一

展示下一代Web图形技术

3. 艺术与科学结合
物理准确的数学模型

视觉吸引人的美学效果

4. 跨平台兼容
桌面和移动浏览器支持

自适应不同屏幕尺寸

📊 性能指标
渲染分辨率：匹配显示器原生分辨率

帧率：目标60FPS

内存使用：优化的几何体重用

加载时间：模块化按需加载 -->


<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<!-- 
			文档类型声明：告诉浏览器这是HTML5文档
			语言设置：zh-CN表示简体中文（中国大陆）skinning
		-->
		<title>Three.js WebGPU - 天空效果演示</title> <!-- 浏览器标签页显示的标题 -->
		
		<!-- 
			字符编码声明：UTF-8是万国码，支持包括中文在内的所有字符
			必须放在<head>的最前面，避免乱码
		-->
		<meta charset="UTF-8">
		
		<!-- 
			视口(viewport)元标签：响应式网页设计的关键
			width=device-width: 视口宽度等于设备宽度
			user-scalable=no: 禁止用户手动缩放（为了更好的3D体验）
			minimum-scale=1.0: 最小缩放比例为1（100%）
			maximum-scale=1.0: 最大缩放比例为1（100%）
			这个设置让移动设备不会自动缩放页面
		-->
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		
		<!-- 
			外部CSS样式表链接
			type="text/css": 指定链接文件的MIME类型（可选，现代浏览器会自动识别）
			rel="stylesheet": 定义当前文档与被链接文档之间的关系是样式表
			href="example.css": 样式表文件路径
		-->
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>
		<!-- 
			信息展示区域容器
			id="info": 为这个div元素设置唯一标识符，便于CSS和JavaScript操作
			这个区域通常用于显示标题、说明和链接等内容
		-->
		<div id="info">
			<!-- 
				Three.js官方LOGO链接
				href: 点击后跳转到Three.js官网
				target="_blank": 在新标签页中打开链接
				rel="noopener": 安全措施，防止新页面通过window.opener访问原页面
				class="logo-link": CSS类名，用于设置LOGO的背景图片样式
			-->
			<a href="https://three.js.org/" target="_blank" rel="noopener" class="logo-link"></a>
			
			<!-- 标题包装容器：用于对标题元素进行样式布局 -->
			<div class="title-wrapper">
				<!-- 
					主标题链接：同样是跳转到Three.js官网
					使用<a>标签包装可以让用户直接点击标题访问官网
				-->
				<a href="https://threejs.org/" target="_blank" rel="noopener">Three.js</a>
				
				<!-- 
					副标题文本
					<span>是内联元素，用于对文本的一部分进行样式或操作
					这里显示具体的演示名称"天空效果"
				-->
				<span> - 天空效果演示</span>
			</div>
			
			<!-- 
				详细描述区域
				<small>标签：表示旁注或细则，通常显示较小的文本
				这里用于展示演示的详细说明
			-->
			<small>
				这是一个基于物理的天空和太阳着色器演示。<br>
				您可以使用右侧的控制面板调整大气参数：<br>
				• 浊度：控制大气中的颗粒物含量<br>
				• 瑞利散射：影响天空的蓝色程度<br>
				• 太阳位置：调整太阳的仰角和方位角<br>
				• 曝光度：控制场景的整体亮度<br>
				<br>
				技术：WebGPU渲染 | Three.js框架 | 实时物理光照
			</small>
		</div>

		<!-- 
			导入映射表(Import Map)
			这是JavaScript模块导入的新特性，允许开发者控制模块的解析
			在现代浏览器中，它重写了模块说明符的解析方式
			type="importmap": 指定这个script标签包含导入映射
		-->
		<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模块
			具有模块作用域，支持顶级await，延迟执行等特性
		-->
		<script type="module">

			// 导入Three.js的WebGPU版本
			// * as THREE：将所有导出内容作为一个名为THREE的对象导入
			// 这样可以像THREE.Scene、THREE.Vector3这样使用
			import * as THREE from 'three/webgpu';

			// 导入调试检查器：用于创建参数控制面板和调试界面
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			// 导入轨道控制器：允许用户用鼠标控制相机旋转和平移
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			
			// 导入天空网格：预定义好的天空几何体和材质
			import { SkyMesh } from 'three/addons/objects/SkyMesh.js';

			// 全局变量声明
			// camera：观察场景的虚拟摄像机，决定了我们看到的内容
			let camera;
			
			// scene：包含所有3D对象（网格、灯光等）的容器
			let scene;
			
			// renderer：负责将3D场景渲染到2D屏幕上的引擎
			let renderer;

			// sky：天空对象，一个巨大的球体，内部显示天空纹理
			let sky;
			
			// sun：三维向量，表示太阳在3D空间中的位置
			let sun;

			// 程序入口：调用初始化函数
			init();

			/**
			 * 初始化天空系统和相关控制参数
			 * 
			 * 这个函数：
			 * 1. 创建天空网格并设置其大小
			 * 2. 初始化太阳位置
			 * 3. 设置控制天空效果的GUI参数面板
			 * 4. 定义参数变化时的更新逻辑
			 * 
			 * @returns {void}
			 */
			function initSky() {

				// 创建天空网格实例
				// SkyMesh是一个预定义的类，包含天空的几何体和着色器材质
				sky = new SkyMesh();
				
				// 设置天空的缩放比例
				// setScalar(450000)：在所有三个轴（x, y, z）上设置相同的缩放值
				// 这个值非常大，是为了让天空看起来无限远，模拟真实世界的天空
				sky.scale.setScalar( 450000 );
				
				// 将天空对象添加到场景中
				// scene是之前声明的全局变量，包含所有要渲染的对象
				scene.add( sky );

				// 创建太阳位置向量
				// THREE.Vector3表示三维空间中的一个点或方向
				// 这里用来存储太阳在3D空间中的坐标
				sun = new THREE.Vector3();

				// 效果控制器对象
				// 这个对象的所有属性都会绑定到GUI控件上
				// 用户修改GUI时，这些值会自动更新
				const effectController = {
					// 浊度：大气中悬浮颗粒的数量
					// 影响大气的浑浊程度，值越大，天空越白/灰
					// 范围：0.0（完全清澈）到 20.0（非常浑浊）
					turbidity: 10,
					
					// 瑞利散射系数：控制大气分子散射（主要散射蓝光）
					// 影响天空的蓝色程度，值越大，天空越蓝
					// 范围：0.0（无散射）到 4.0（强散射）
					rayleigh: 3,
					
					// Mie散射系数：控制大气中较大颗粒的散射
					// 主要影响太阳周围的光晕大小和亮度
					// 范围：0.0（无光晕）到 0.1（强烈光晕）
					mieCoefficient: 0.005,
					
					// Mie散射各向异性系数：控制光晕的方向性
					// 值越接近1，光晕越集中在太阳方向
					// 值越接近0，光晕越均匀分散
					// 范围：0.0（均匀）到 1.0（高度定向）
					mieDirectionalG: 0.7,
					
					// 太阳仰角：太阳相对于地平线的高度角度
					// 0度：地平线，90度：头顶正上方
					// 范围：0（日出/日落）到 90（正午）
					elevation: 2,
					
					// 太阳方位角：太阳相对于正北方向的角度
					// 0度：正北，90度：正东，180度：正南，270度：正西
					// 范围：-180 到 180
					azimuth: 180,
					
					// 曝光度：渲染器的色调映射曝光值
					// 控制整个场景的亮度
					// 范围：0（完全黑暗）到 1（最大亮度）
					exposure: renderer.toneMappingExposure
				};

				/**
				 * GUI参数变化回调函数
				 * 
				 * 当用户通过GUI界面修改任何参数时，
				 * 这个函数会被调用，更新天空效果和渲染设置
				 * 
				 * @returns {void}
				 */
				function guiChanged() {

					// 更新天空材质的着色器统一变量(uniforms)
					// sky.turbidity.value：访问天空材质中的浊度uniform
					// 这些uniforms是着色器程序中的全局变量
					sky.turbidity.value = effectController.turbidity;
					sky.rayleigh.value = effectController.rayleigh;
					sky.mieCoefficient.value = effectController.mieCoefficient;
					sky.mieDirectionalG.value = effectController.mieDirectionalG;

					// 将角度转换为弧度（Three.js三角函数使用弧度）
					// 仰角转换为极角(phi)：90度减去仰角，因为极角是从z轴正向开始
					const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
					
					// 方位角转换为方位角(theta)：直接转换
					const theta = THREE.MathUtils.degToRad( effectController.azimuth );

					// 使用球面坐标设置太阳位置
					// setFromSphericalCoords参数：
					// 1. 半径 (radius): 1，表示单位距离
					// 2. 极角 (phi): 纬度角度（从z轴正向开始）
					// 3. 方位角 (theta): 经度角度（从x轴正向开始，绕y轴旋转）
					sun.setFromSphericalCoords( 1, phi, theta );

					// 将计算出的太阳位置复制到天空材质的uniform中
					// 这样着色器就能知道太阳在哪里，计算正确的光照
					sky.sunPosition.value.copy( sun );

					// 更新渲染器的色调映射曝光度
					// 这个值影响最终渲染结果的亮度
					renderer.toneMappingExposure = effectController.exposure;

				}

				// 创建GUI控制面板
				// renderer.inspector：调试检查器实例
				// createParameters('Settings')：创建名为"Settings"的参数面板
				const gui = renderer.inspector.createParameters( '天空参数设置' );

				// 添加浊度控制滑块
				// 参数：控制器对象，属性名，最小值，最大值，步长
				// onChange(guiChanged)：值变化时调用guiChanged函数
				gui.add( effectController, 'turbidity', 0.0, 20.0, 0.1 )
				   .name('大气浊度')
				   .onChange( guiChanged );
				
				// 添加瑞利散射控制滑块
				gui.add( effectController, 'rayleigh', 0.0, 4, 0.001 )
				   .name('瑞利散射')
				   .onChange( guiChanged );
				
				// 添加Mie散射系数控制滑块
				gui.add( effectController, 'mieCoefficient', 0.0, 0.1, 0.001 )
				   .name('Mie散射系数')
				   .onChange( guiChanged );
				
				// 添加Mie散射方向性控制滑块
				gui.add( effectController, 'mieDirectionalG', 0.0, 1, 0.001 )
				   .name('Mie散射方向性')
				   .onChange( guiChanged );
				
				// 添加太阳仰角控制滑块
				gui.add( effectController, 'elevation', 0, 90, 0.1 )
				   .name('太阳仰角')
				   .onChange( guiChanged );
				
				// 添加太阳方位角控制滑块
				gui.add( effectController, 'azimuth', -180, 180, 0.1 )
				   .name('太阳方位角')
				   .onChange( guiChanged );
				
				// 添加曝光度控制滑块
				gui.add( effectController, 'exposure', 0, 1, 0.0001 )
				   .name('曝光度')
				   .onChange( guiChanged );

				// 初始化调用一次guiChanged，确保天空效果与默认参数匹配
				guiChanged();

			}

			/**
			 * 主初始化函数
			 * 
			 * 这个函数初始化Three.js的核心组件：
			 * 1. 创建相机、场景、渲染器
			 * 2. 设置渲染器参数
			 * 3. 添加用户交互控件
			 * 4. 设置窗口大小变化响应
			 * 
			 * @returns {void}
			 */
			function init() {

				// 创建透视相机(PerspectiveCamera)
				// 参数说明：
				// 1. 视野角度(FOV): 60度 - 人眼自然视野范围
				// 2. 宽高比(aspect): 窗口宽度除以高度
				// 3. 近裁剪面(near): 100 - 相机能看到的最近距离
				// 4. 远裁剪面(far): 2000000 - 相机能看到的最远距离
				// 注意：near和far之间的物体才会被渲染
				camera = new THREE.PerspectiveCamera( 
					60, 
					window.innerWidth / window.innerHeight, 
					100, 
					2000000 
				);
				
				// 设置相机初始位置
				// x: 0 (水平中心)
				// y: 100 (离地面100个单位高度)
				// z: 2000 (向后2000个单位，让我们能看清整个天空)
				camera.position.set( 0, 100, 2000 );

				// 创建场景
				// Scene是所有3D对象的容器，包括网格、灯光、相机等
				// 它就像一个虚拟的舞台，我们在上面放置要渲染的一切
				scene = new THREE.Scene();

				// 创建WebGPU渲染器
				// WebGPURenderer是Three.js的WebGPU后端渲染器
				// WebGPU是新一代图形API，比WebGL更高效
				renderer = new THREE.WebGPURenderer();
				
				// 设置设备像素比
				// 在高DPI屏幕（如Retina显示屏）上，这个值大于1
				// 设置它可以让渲染更清晰，但可能影响性能
				renderer.setPixelRatio( window.devicePixelRatio );
				
				// 设置渲染器的输出画布大小
				// 使用窗口的完整宽高，实现全屏效果
				renderer.setSize( window.innerWidth, window.innerHeight );
				
				// 设置动画循环
				// 参数animate是回调函数，会在每一帧自动调用
				// 这是Three.js的渲染循环机制
				renderer.setAnimationLoop( animate );
				
				// 设置色调映射(Tone Mapping)
				// ACESFilmicToneMapping是一种电影级色调映射算法
				// 它模拟人眼对高动态范围(HDR)的响应，让渲染更真实
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				
				// 设置初始曝光度
				// 控制色调映射的亮度强度
				// 0.5是一个中等亮度值
				renderer.toneMappingExposure = 0.5;
				
				// 创建并附加调试检查器
				// 这会在页面上添加一个调试面板，可以查看性能、参数等
				renderer.inspector = new Inspector();
				
				// 将渲染器的DOM元素（canvas画布）添加到页面body中
				// 这样渲染的内容才能显示在网页上
				document.body.appendChild( renderer.domElement );

				// 创建轨道控制器
				// OrbitControls允许用户用鼠标旋转、平移、缩放相机
				// 参数：
				// 1. camera: 要控制的相机对象
				// 2. domElement: 监听事件的DOM元素（通常是渲染器的画布）
				const controls = new OrbitControls( camera, renderer.domElement );
				
				// 注释掉的代码：限制最大极角
				// 如果启用，相机不能向下看到地面以下
				// Math.PI / 2 等于 90度，正好是水平线
				// controls.maxPolarAngle = Math.PI / 2;
				
				// 禁用缩放功能
				// 对于天空演示，我们通常不需要缩放
				controls.enableZoom = false;
				
				// 禁用平移功能
				// 保持观察点固定，只允许旋转
				controls.enablePan = false;

				// 初始化天空系统
				// 调用前面定义的initSky函数
				initSky();

				// 添加窗口大小变化事件监听器
				// 当用户调整浏览器窗口大小时，调用onWindowResize函数
				window.addEventListener( 'resize', onWindowResize );

			}

			/**
			 * 窗口大小变化事件处理函数
			 * 
			 * 当浏览器窗口大小改变时，这个函数会：
			 * 1. 更新相机的宽高比
			 * 2. 更新渲染器的输出大小
			 * 这样就能保持正确的比例和全屏渲染
			 * 
			 * @returns {void}
			 */
			function onWindowResize() {

				// 更新相机的宽高比
				// 使用新的窗口尺寸计算宽高比
				camera.aspect = window.innerWidth / window.innerHeight;
				
				// 更新相机投影矩阵
				// 改变相机参数后必须调用这个函数，否则渲染会出错
				camera.updateProjectionMatrix();

				// 更新渲染器的输出尺寸
				// 让渲染器重新设置画布大小，适应新窗口
				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			/**
			 * 动画循环函数
			 * 
			 * 这是Three.js渲染循环的核心
			 * 每帧（通常是60FPS）自动调用一次
			 * 负责：
			 * 1. 更新所有动画状态
			 * 2. 渲染当前帧
			 * 3. 为下一帧做准备
			 * 
			 * 注意：这个函数会被requestAnimationFrame自动调用
			 * 
			 * @returns {void}
			 */
			function animate() {

				// 渲染场景
				// 这是最关键的渲染调用：
				// 1. 使用指定的相机观察场景
				// 2. 计算光照、阴影、材质等所有效果
				// 3. 将结果绘制到canvas画布上
				renderer.render( scene, camera );

			}

		</script>

	</body>

</html>