做数字地球相关开发的同学可能都有过类似感觉Cesium 这么多年一直跑在 WebGL 之上切换 WebGPU 后表面上看只是换一个渲染上下文实际上从绘制管线的组织到着色器写法几乎每个模块都要重新设计。尤其是地球最外层那圈 Atmosphere大气它既不是单纯贴一张纹理也不是用一个发光圆环就能模拟——你的相机越贴近地面大气对景物颜色的衰减越明显当镜头被拉高到太空边缘大气又变成一圈带有蓝紫色渐变的明亮边缘。这篇文章作为 WebGPU 数字地球引擎系列的第 3 篇重点围绕基础大气散射与动态光照展开我会从散射原理、WGSL 实现、光照联动到性能优化拆开讲尽量让没有相关经验的读者也能照着搭建起来。本篇文章更适合两类读者一类是已经开始接触 WebGPU希望在项目里实现地球场景效果的初级开发者另一类是使用过 Cesium想理解其大气、光照是如何被抽象成一整套可编程模块的进阶读者。最终你会掌握大气散射的基础公式、WGSL 中的屏幕绘制方式、太阳方向对地表光照的影响以及如何用 LUT查找表优化实时计算。读完以后你可以在自己的 WebGPU 引擎中加入一套最基础的数字地球大气光照模块。1. 数字地球引擎中的 Atmosphere它到底在算什么1.1 大气不是贴图而是一段光学计算在传统 WebGL 项目里做数字地球平台时最常用的一种做法是烘焙天空盒把天空环境提前渲染到六张立方体贴图或者一张全景 HDR 图里运行时直接采样。这个方法速度快、实现简单但有一个明显问题光照是静态的。一旦太阳方向变化、云层移动或相机从地面飞到太空中天空盒往往会出现明显的不自然感。Cesium 这类三维数字地球引擎在追求真实感时通常不会只用天空盒。大气层本质上是一层很薄的介质当太阳光穿过这层介质时不同波长的光会被空气分子和气溶胶粒子散射向四面八方。我们眼睛看到的天空是蓝色本质上是因为蓝光波长较短被瑞利散射得更严重。到了日出日落时段太阳光在大气中穿过的路径变长蓝光在到达眼睛之前就被散射掉了剩下的红光比例更高所以天空会呈现红橙色。进入 WebGPU 时代后我们更希望把这种光学现象实时算出来而不是烘焙成静态贴图。WebGPU 对计算着色器、纹理存储、缓冲区更新都有更灵活的控制能够将大气的光学深度、散射能量、透射率等中间量存入 LUT并在后续帧中反复采样这让动态光照下的数字地球有了更高的可靠性。1.2 本文引擎场景与组件边界我们这里说的“WebGPU 版 Cesium”并不是指当前官方 Cesium 发布版已经彻底迁移到 WebGPU而是指以 Cesium 的地球场景组织思路为参考搭建一套基于 WebGPU 的数字地球渲染实验引擎。在这样一个引擎里Scene 负责管理对象Renderer 负责管线调度而 Atmosphere 是其中比较接近后期效果的一层。为了让范围更聚焦本文不会去实现完整的 Cesium 架构只把基础版本的大气与光照模块限定为以下目标支持相机位于地面和太空两种状态下的基础大气散射表现太阳方向可作为动态 Uniform 每帧更新从而模拟一天内不同时段的光线变化地球表面物体能被太阳平行光照亮并受到大气透射率影响在外太空视角地球边缘能产生柔和的大气光晕预留 Compute Shader / LUT 优化空间方便后续做更高精度的多重散射。1.3 学完本节后你应该建立的模块认知建议在开发前先建立这样的模块划分GlobeMaterial只管表面材质、法线、PBR 参数AtmosphereLighting管太阳方向和辐照度AtmosphereScattering负责光学深度和散射能量计算AtmosphereRenderPass负责把最终颜色合成到屏幕。这样分开之后后文要实现的代码结构会更清晰后续要叠加云层、可视域分析、夜光效果也不容易互相污染。2. 环境准备与最小工程结构2.1 运行环境与版本说明WebGPU 当前仍处于快速迭代阶段本文不会绑定某一个浏览器固定版本而是以“Chrome 系列现代版本”作为示例环境。考虑到 Firefox 和 Safari 对 WebGPU 的支持进度与特性存在差异开发时建议优先使用 Chrome 或 Edge确认渲染结果稳定后再逐步适配其他浏览器。其余开发环境可以参考如下版本范围Node.js18 包管理器npm 或 pnpm 均可 构建工具Vite 5 编程语言TypeScript 5 WebGPU 类型声明webgpu/types如果你使用 Vite 开发建议在tsconfig.json中引入 WebGPU 的 DOM 类型否则navigator.gpu会报类型错误。也可以直接使用现代浏览器自带的类型推断但为了编辑器提示更友好安装webgpu/types是比较省事的方案。版本不需要完全照抄只要保证你的浏览器支持navigator.gpu.requestAdapter()即可。2.2 最小项目目录为了把大气
做数字地球相关开发的同学可能都有过类似感觉Cesium 这么多年一直跑在 WebGL 之上切换 WebGPU 后表面上看只是换一个渲染上下文实际上从绘制管线的组织到着色器写法几乎每个模块都要重新设计。尤其是地球最外层那圈 Atmosphere大气它既不是单纯贴一张纹理也不是用一个发光圆环就能模拟——你的相机越贴近地面大气对景物颜色的衰减越明显当镜头被拉高到太空边缘大气又变成一圈带有蓝紫色渐变的明亮边缘。这篇文章作为 WebGPU 数字地球引擎系列的第 3 篇重点围绕基础大气散射与动态光照展开我会从散射原理、WGSL 实现、光照联动到性能优化拆开讲尽量让没有相关经验的读者也能照着搭建起来。本篇文章更适合两类读者一类是已经开始接触 WebGPU希望在项目里实现地球场景效果的初级开发者另一类是使用过 Cesium想理解其大气、光照是如何被抽象成一整套可编程模块的进阶读者。最终你会掌握大气散射的基础公式、WGSL 中的屏幕绘制方式、太阳方向对地表光照的影响以及如何用 LUT查找表优化实时计算。读完以后你可以在自己的 WebGPU 引擎中加入一套最基础的数字地球大气光照模块。1. 数字地球引擎中的 Atmosphere它到底在算什么1.1 大气不是贴图而是一段光学计算在传统 WebGL 项目里做数字地球平台时最常用的一种做法是烘焙天空盒把天空环境提前渲染到六张立方体贴图或者一张全景 HDR 图里运行时直接采样。这个方法速度快、实现简单但有一个明显问题光照是静态的。一旦太阳方向变化、云层移动或相机从地面飞到太空中天空盒往往会出现明显的不自然感。Cesium 这类三维数字地球引擎在追求真实感时通常不会只用天空盒。大气层本质上是一层很薄的介质当太阳光穿过这层介质时不同波长的光会被空气分子和气溶胶粒子散射向四面八方。我们眼睛看到的天空是蓝色本质上是因为蓝光波长较短被瑞利散射得更严重。到了日出日落时段太阳光在大气中穿过的路径变长蓝光在到达眼睛之前就被散射掉了剩下的红光比例更高所以天空会呈现红橙色。进入 WebGPU 时代后我们更希望把这种光学现象实时算出来而不是烘焙成静态贴图。WebGPU 对计算着色器、纹理存储、缓冲区更新都有更灵活的控制能够将大气的光学深度、散射能量、透射率等中间量存入 LUT并在后续帧中反复采样这让动态光照下的数字地球有了更高的可靠性。1.2 本文引擎场景与组件边界我们这里说的“WebGPU 版 Cesium”并不是指当前官方 Cesium 发布版已经彻底迁移到 WebGPU而是指以 Cesium 的地球场景组织思路为参考搭建一套基于 WebGPU 的数字地球渲染实验引擎。在这样一个引擎里Scene 负责管理对象Renderer 负责管线调度而 Atmosphere 是其中比较接近后期效果的一层。为了让范围更聚焦本文不会去实现完整的 Cesium 架构只把基础版本的大气与光照模块限定为以下目标支持相机位于地面和太空两种状态下的基础大气散射表现太阳方向可作为动态 Uniform 每帧更新从而模拟一天内不同时段的光线变化地球表面物体能被太阳平行光照亮并受到大气透射率影响在外太空视角地球边缘能产生柔和的大气光晕预留 Compute Shader / LUT 优化空间方便后续做更高精度的多重散射。1.3 学完本节后你应该建立的模块认知建议在开发前先建立这样的模块划分GlobeMaterial只管表面材质、法线、PBR 参数AtmosphereLighting管太阳方向和辐照度AtmosphereScattering负责光学深度和散射能量计算AtmosphereRenderPass负责把最终颜色合成到屏幕。这样分开之后后文要实现的代码结构会更清晰后续要叠加云层、可视域分析、夜光效果也不容易互相污染。2. 环境准备与最小工程结构2.1 运行环境与版本说明WebGPU 当前仍处于快速迭代阶段本文不会绑定某一个浏览器固定版本而是以“Chrome 系列现代版本”作为示例环境。考虑到 Firefox 和 Safari 对 WebGPU 的支持进度与特性存在差异开发时建议优先使用 Chrome 或 Edge确认渲染结果稳定后再逐步适配其他浏览器。其余开发环境可以参考如下版本范围Node.js18 包管理器npm 或 pnpm 均可 构建工具Vite 5 编程语言TypeScript 5 WebGPU 类型声明webgpu/types如果你使用 Vite 开发建议在tsconfig.json中引入 WebGPU 的 DOM 类型否则navigator.gpu会报类型错误。也可以直接使用现代浏览器自带的类型推断但为了编辑器提示更友好安装webgpu/types是比较省事的方案。版本不需要完全照抄只要保证你的浏览器支持navigator.gpu.requestAdapter()即可。2.2 最小项目目录为了把大气
