这篇文章主要介绍“CesiumJS源码分析”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CesiumJS源码分析”文章能帮助大家解决问题。
1. 有什么光
CesiumJS 支持的光的类型比较少，默认场景光就一个太阳光：
// Scene 类构造函数中 this.light = new SunLight();
从上面这代码可知，CesiumJS 目前场景中只支持加入一个光源。
查阅 API，可得知除了
SubLight之外，还有一个
DirectionalLight，即方向光。
官方示例代码《Lighting》中就使用了方向光来模拟手电筒效果（flashLight）、月光效果（moonLight）、自定义光效果。
方向光比太阳光多出来一个必选的方向属性：
const flashLight = new DirectionalLight({
direction: scene.camera.directionWC // 每帧都不一样，手电筒一直沿着相机视线照射
})这个
direction属性是一个单位向量即可（模长是 1）。
说起来归一化、规范化、标准化好像都能在网上找到与单位向量类似的意思，都是向量除以模长。
可见，CesiumJS 并没有内置点光源、聚光灯，需要自己写着色过程（请参考 Primitive API 或 CustomShader API）。
2. 光如何转换成 Uniform 以及何时被调用
既然 CesiumJS 支持的光只有一个，那么调查起来就简单了。先给结论：
光是作为 Uniform 值传递到着色器中的。 先查清楚光是如何从
Scene.light转至 Renderer 中的 uniform 的。
2.1. 统一值状态对象（UniformState）
在 Scene 渲染一帧的过程中，几乎就在最顶部，
Scene.js模块内的函数
render就每帧更新着
Context对象的
uniformState属性：
function render(scene) {
const frameState = scene._frameState;
const context = scene.context;
const us = context.uniformState;
// ...
us.update(frameState);
// ...
}这个
uniformState对象就是 CesiumJS 绝大多数统一值（Uniform）的封装集合，它的更新方法就会更新来自帧状态对象（
FrameState）的光参数：
UniformState.prototype.update = function (frameState) {
// ...
const light = defaultValue(frameState.light, defaultLight);
if (light instanceof SunLight) { /**/ }
else { /**/ }
const lightColor = light.color;
// 计算 HDR 光到 this._lightColor 上
// ...
}那么，这个挂在
Context上的 uniformState 对象包含的光状态信息，是什么时候被使用的呢？下一小节 2.2 就会介绍。
2.2. 上下文（Context）执行 DrawCommand
在 Scene 的更新过程中，最后
DrawCommand对象被
Context对象执行：
function continueDraw(context, drawCommand, shaderProgram, uniformMap) {
// ...
shaderProgram._setUniforms(
uniformMap,
context._us,
context.validateShaderProgram
)
// ...
}
Context.prototype.draw = function (/* ... */) {
// ...
shaderProgram = defaultValue(shaderProgram, drawCommand._shaderProgram);
uniformMap = defaultValue(uniformMap, drawCommand._uniformMap);
beginDraw(this, framebuffer, passState, shaderProgram, renderState);
continueDraw(this, drawCommand, shaderProgram, uniformMap);
}就在
continueDraw函数中，调用了
ShaderProgram对象的
_setUniforms方法，所有 Uniform 值在此将传入 WebGL 状态机中。
ShaderProgram.prototype._setUniforms = function (/**/) {
// ...
const uniforms = this._uniforms;
len = uniforms.length;
for (i = 0; i < len; ++i) {
uniforms[i].set();
}
// ...
}而这每一个
uniforms[i]，都是一个没有公开在 API 文档中的私有类，也就是接下来 2.3 小节中要介绍的 WebGL Uniform 值封装对象。
2.3. 对 WebGL Uniform 值的封装
进入
createUniforms.js模块：
// createUniforms.js
UniformFloat.prototype.set = function () { /* ... */ }
UniformFloatVec2.prototype.set = function () { /* ... */ }
UniformFloatVec3.prototype.set = function () { /* ... */ }
UniformFloatVec4.prototype.set = function () { /* ... */ }
UniformSampler.prototype.set = function () { /* ... */ }
UniformInt.prototype.set = function () { /* ... */ }
UniformIntVec2.prototype.set = function () { /* ... */ }
UniformIntVec3.prototype.set = function () { /* ... */ }
UniformIntVec4.prototype.set = function () { /* ... */ }
UniformMat2.prototype.set = function () { /* ... */ }
UniformMat3.prototype.set = function () { /* ... */ }
UniformMat4.prototype.set = function () { /* ... */ }可以说把 WebGL uniform 的类型都封装了一个私有类。
以表示光方向的
UniformFloatVec3类为例，看看它的 WebGL 调用：
function UniformFloatVec3(gl, activeUniform, uniformName, location) {
this.name = uniformName
this.value = undefined
this._value = undefined
this._gl = gl
this._location = location
}
UniformFloatVec3.prototype.set = function () {
const v = this.value
if (defined(v.red)) {
if (!Color.equals(v, this._value)) {
this._value = Color.clone(v, this._value)
this._gl.uniform3f(this._location, v.red, v.green, v.blue)
}
} else if (defined(v.x)) {
if (!Cartesian3.equals(v, this._value)) {
this._value = Cartesian3.clone(v, this._value)
this._gl.uniform3f(this._location, v.x, v.y, v.z)
}
} else {
throw new DeveloperError(`Invalid vec3 value for uniform "${this.name}".`);
}
}2.4. 自动统一值（AutomaticUniforms）
在 2.2 小节中有一个细节没有详细说明，即
ShaderProgram的
_setUniforms方法中为什么可以直接调用每一个
uniforms[i]的
set()？
回顾一下：
Scene.js的
render函数内，光的信息被
us.update(frameState)更新至
UniformState对象中；
ShaderProgram的
_setUniforms方法，调用
uniforms[i].set()方法， 更新每一个私有 Uniform 对象上的值到 WebGL 状态机中
是不是缺少了点什么？
是的，UniformState 的值是如何赋予给 uniforms[i] 的？
这就不得不提及
ShaderProgram.js模块中为当前着色器对象的 Uniform 分类过程了，查找模块中的
reinitialize函数：
function reinitialize(shader) {
// ...
const uniforms = findUniforms(gl, program)
const partitionedUniforms = partitionUniforms(
shader,
uniforms.uniformsByName
)
// ...
shader._uniformsByName = uniforms.uniformsByName
shader._uniforms = uniforms.uniform
shader._automaticUniforms = partitionedUniforms.automaticUniforms
shader._manualUniforms = partitionedUniforms.manualUniforms
// ...
}它把着色器对象上的 Uniform 全部找了出来，并分类为：
_uniformsByName- 一个字典对象，键名是着色器中 uniform 的变量名，值是 Uniform 的封装对象，例如
UniformFloatVec3等
_uniforms- 一个数组，每个元素都是 Uniform 的封装对象，例如
UniformFloatVec3等，若同名，则与
_uniformsByName中的值是同一个引用
_manualUniforms- 一个数组，每个元素都是 Uniform 的封装对象，例如
UniformFloatVec3等，若同名，则与
_uniformsByName中的值是同一个引用
_automaticUniforms- 一个数组，每个元素是一个 object 对象，表示要 CesiumJS 自动更新的 Uniform 的映射关联关系
举例，
_automaticUniforms[i]用 TypeScript 来描述，是这么一个对象：
type AutomaticUniformElement = {
automaticUniform: AutomaticUniform
uniform: UniformFloatVec3
}而这个
_automaticUniforms就拥有自动更新 CesiumJS 内部状态的 Uniform 值的功能，例如我们所需的光状态信息。
来看
AutomaticUniforms.js模块的默认导出对象：
// AutomaticUniforms.js
const AutomaticUniforms = {
// ...
czm_sunDirectionEC: new AutomaticUniform({ /**/ }),
czm_sunDirectionWC: new AutomaticUniform({ /**/ }),
czm_lightDirectionEC: new AutomaticUniform({ /**/ }),
czm_lightDirectionWC: new AutomaticUniform({ /**/ }),
czm_lightColor: new AutomaticUniform({
size: 1,
datatype: WebGLConstants.FLOAT_VEC3,
getValue: function (uniformState) {
return uniformState.lightColor;
},
}),
czm_lightColorHdr: new AutomaticUniform({ /**/ }),
// ...
}
export default AutomaticUniforms所以，在
ShaderProgram.prototype._setUniforms执行的时候，其实是对自动统一值有一个赋值的过程，然后才到各个
uniforms[i]的
set()过程：
ShaderProgram.prototype._setUniforms = function (
uniformMap,
uniformState,
validate
) {
let len;
let i;
// ...
const automaticUniforms = this._automaticUniforms;
len = automaticUniforms.length;
for (i = 0; i < len; ++i) {
const au = automaticUniforms[i];
au.uniform.value = au.automaticUniform.getValue(uniformState);
}
// 译者注：au.uniform 实际上也在 this._uniforms 中
// 是同一个引用在不同的位置，所以上面调用 au.automaticUniform.getValue
// 之后，下面 uniforms[i].set() 就会使用的是 “自动更新” 的 uniform 值
const uniforms = this._uniforms;
len = uniforms.length;
for (i = 0; i < len; ++i) {
uniforms[i].set();
}
// ...
}也许这个过程有些乱七八糟，那就再简单梳理一次：
Scene 的 render 过程中，更新了 uniformState
Context 执行 DrawCommand 过程中，ShaderProgram 的 _setUniforms 执行所有 uniforms 的 WebGL 设置，这其中就会对 CesiumJS 内部不需要手动更新的 Uniform 状态信息进行自动刷新
而在 ShaderProgram 绑定前，早就会把这个着色器中的 uniform 进行分组，一组是常规的 uniform 值，另一组则是需要根据 AutomaticUniform（自动统一值）更新的 uniform 值
说到底，光状态信息也不过是一种 Uniform，在最原始的 WebGL 学习教材中也是如此，只不过 CesiumJS 是一个更复杂的状态机器，需要更多逻辑划分就是了。
3. 在着色器中如何使用
上面介绍完光的类型、在 CesiumJS 源码中如何转化成 Uniform 并刷入 WebGL，那么这一节就简单看看光的状态 Uniform 在着色器代码中都有哪些使用之处。
3.1. 点云
PointCloud.js 使用了
czm_lightColor。
找到
createShaders函数下面这个分支：
// Version 1.104
function createShaders(pointCloud, frameState, style) {
// ...
if (usesNormals && normalShading) {
vs +=
" float diffuseStrength = czm_getLambertDiffuse(czm_lightDirectionEC, normalEC);
" +
" diffuseStrength = max(diffuseStrength, 0.4);
" + // Apply some ambient lighting
" color.xyz *= diffuseStrength * czm_lightColor;
";
}
// ...
}显然，这段代码在拼凑顶点着色器代码，在 1.104 版本官方并没有改变这种拼接着色器代码的模式。
着色代码的含义也很简单，将漫反射强度值乘上
czm_lightColor，把结果交给
color的 xyz 分量。漫反射强度在这里限制了最大值 0.4。
漫反射强度来自内置 GLSL 函数
czm_getLambertDiffuse（参考
packages/engine/Source/Shaders/Builtin/Functions/getLambertDiffuse.glsl）
3.2. 冯氏着色法
Primitive API 材质对象的默认着色方法是 冯氏着色法（Phong），这个在
LearnOpenGL网站上有详细介绍。
调用链：
MaterialAppearance.js ┗ TexturedMaterialAppearanceFS.js ← TexturedMaterialAppearanceFS.glsl ┗ phong.glsl → vec4 czm_phong()
除了
TexturedMaterialAppearanceFS外，
MaterialAppearance.js还用了
BasicMaterialAppearanceFS、
AllMaterialAppearanceFS两个片元着色器，这俩也用到了
czm_phong函数。
看看
czm_phong函数本体：
// phong.glsl
vec4 czm_phong(vec3 toEye, czm_material material, vec3 lightDirectionEC)
{
// Diffuse from directional light sources at eye (for top-down)
float diffuse = czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 0.0, 1.0), material);
if (czm_sceneMode == czm_sceneMode3D) {
// (and horizon views in 3D)
diffuse += czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 1.0, 0.0), material);
}
float specular = czm_private_getSpecularOfMaterial(lightDirectionEC, toEye, material);
// Temporary workaround for adding ambient.
vec3 materialDiffuse = material.diffuse * 0.5;
vec3 ambient = materialDiffuse;
vec3 color = ambient + material.emission;
color += materialDiffuse * diffuse * czm_lightColor;
color += material.specular * specular * czm_lightColor;
return vec4(color, material.alpha);
}函数内前面的计算步骤是获取漫反射、高光值，走的是辅助函数，在这个文件内也能看到。
最后灯光
czm_lightColor和材质的漫反射、兰伯特漫反射、材质辉光等因子一起相乘累加，得到最终的颜色值。
除了
phong.glsl外，参与半透明计算的
czm_translucentPhong函数（在
translucentPhong.glsl文件中）在 OIT.js 模块中用于替换
czm_phong函数。
3.3. 地球
在
Globe.js中使用的
GlobeFS片元着色器代码中使用到了
czm_lightColor，主要是
main函数中：
void main() {
// ...
#ifdef ENABLE_VERTEX_LIGHTING
float diffuseIntensity = clamp(czm_getLambertDiffuse(czm_lightDirectionEC, normalize(v_normalEC)) * u_lambertDiffuseMultiplier + u_vertexShadowDarkness, 0.0, 1.0);
vec4 finalColor = vec4(color.rgb * czm_lightColor * diffuseIntensity, color.a);
#elif defined(ENABLE_DAYNIGHT_SHADING)
float diffuseIntensity = clamp(czm_getLambertDiffuse(czm_lightDirectionEC, normalEC) * 5.0 + 0.3, 0.0, 1.0);
diffuseIntensity = mix(1.0, diffuseIntensity, fade);
vec4 finalColor = vec4(color.rgb * czm_lightColor * diffuseIntensity, color.a);
#else
vec4 finalColor = color;
#endif
// ...
}同样是先获取兰伯特漫反射值（使用
clamp函数钉死在 [0, 1] 区间内），然后将颜色、
czm_lightColor、漫反射值和透明度一起计算出
finalColor，把最终颜色值交给下一步计算。
这里区分了两个宏分支，受
TerrainProvider影响，有兴趣可以追一下
GlobeSurfaceTileProvider.js模块中
addDrawCommandsForTile函数中
hasVertexNormals参数的获取。
3.4. 模型架构中的光着色阶段
在 1.97 大改的
Model API中，PBR 着色法使用了
czm_lightColorHdr变量。
czm_lightColorHdr也是自动统一值（AutomaticUniforms）的一个。
在 Model 的更新过程中，有一个
buildDrawCommands的步骤，其中有一个函数
ModelRuntimePrimitive.prototype.configurePipeline会增减
ModelRuntimePrimitive上的着色阶段：
ModelRuntimePrimitive.prototype.configurePipeline = function (frameState) {
// ...
pipelineStages.push(LightingPipelineStage);
// ...
}上面是其中一个阶段 ——
LightingPipelineStage，最后在
ModelSceneGraph.prototype.buildDrawCommands方法内会调用每一个 stage 的
process方法，调用 shaderBuilder 构建出着色器对象所需的材料，进而构建出着色器对象。过程比较复杂，直接看其中
LightingPipelineStage.glsl提供的阶段函数：
void lightingStage(inout czm_modelMaterial material, ProcessedAttributes attributes)
{
// Even though the lighting will only set the diffuse color,
// pass all other properties so further stages have access to them.
vec3 color = vec3(0.0);
#ifdef LIGHTING_PBR
color = computePbrLighting(material, attributes);
#else // unlit
color = material.diffuse;
#endif
#ifdef HAS_POINT_CLOUD_COLOR_STYLE
// The colors resulting from point cloud styles are adjusted differently.
color = czm_gammaCorrect(color);
#elif !defined(HDR)
// If HDR is not enabled, the frame buffer stores sRGB colors rather than
// linear colors so the linear value must be converted.
color = czm_linearToSrgb(color);
#endif
material.diffuse = color;
}进入
computePbrLighting函数（同一个文件内）：
#ifdef LIGHTING_PBR
vec3 computePbrLighting(czm_modelMaterial inputMaterial, ProcessedAttributes attributes)
{
// ...
#ifdef USE_CUSTOM_LIGHT_COLOR
vec3 lightColorHdr = model_lightColorHdr;
#else
vec3 lightColorHdr = czm_lightColorHdr;
#endif
vec3 color = inputMaterial.diffuse;
#ifdef HAS_NORMALS
color = czm_pbrLighting(
attributes.positionEC,
inputMaterial.normalEC,
czm_lightDirectionEC,
lightColorHdr,
pbrParameters
);
#ifdef USE_IBL_LIGHTING
color += imageBasedLightingStage(
attributes.positionEC,
inputMaterial.normalEC,
czm_lightDirectionEC,
lightColorHdr,
pbrParameters
);
#endif
#endif
// ...
}
#endif故，存在
USE_CUSTOM_LIGHT_COLOR宏时才会使用
czm_lightColorHdr变量作为灯光颜色，参与函数
czm_pbrLighting计算出颜色值。