之前对实时渲染(RealTimeRendering)的殿堂就十分向往,也有简单了解过实时渲染中的光,无奈一直没能系统学习。鉴于笔者已经有一点 CesiumJS 源码基础,所以就抽了一个周末跟了跟 CesiumJS 中的光照初步,在简单的代码追踪后,发现想系统学习光照材质,仍然是需要 RTR 知识的,这次仅仅了解了光在 CesiumJS 底层中是如何从 API 传递到 WebGL 着色器中去的,为之后深入研究打下基础。

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.jsrender 函数内,光的信息被 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); \n" +
" diffuseStrength = max(diffuseStrength, 0.4); \n" + // Apply some ambient lighting
" color.xyz *= diffuseStrength * czm_lightColor; \n";
}
// ...
}

显然,这段代码在拼凑顶点着色器代码,在 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 还用了 BasicMaterialAppearanceFSAllMaterialAppearanceFS 两个片元着色器,这俩也用到了 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 计算出颜色值。

3.5. 后记

除了光颜色本身,我在着色器代码中看到被应用的还有光线的方向,主要是 czm_lightDirectionEC 等变量,光照材质仍需一个漫长的学习过程。

CesiumJS 源码杂谈 - 从光到 Uniform的更多相关文章

  1. 【2020-03-28】Dubbo源码杂谈

    前言 本周空闲时间利用了百分之六七十的样子.主要将Dubbo官网文档和本地代码debug结合起来学习,基本看完了服务导出.服务引入以及服务调用的过程,暂未涉及路由.字典等功能.下面对这一周的收获进行一 ...

  2. CesiumJS 2022^ 源码解读[7] - 3DTiles 的请求、加载处理流程解析

    目录 1. 3DTiles 数据集的类型 2. 创建瓦片树 2.1. 请求入口文件 2.2. 创建树结构 2.3. 瓦片缓存机制带来的能力 3. 瓦片树的遍历更新 3.1. 三个大步骤 3.2. 遍历 ...

  3. CesiumJS 2022^ 源码解读[0] - 文章目录与源码工程结构

    很高兴你能在浮躁的年代里还有兴趣阅读源代码,CesiumJS 至今已有十年以上,代码量也积累了三十多万行(未压缩状态). 我也很荣幸自己的文章能被读者看到,如果对你有帮助.有启发,点个赞就是对我最大的 ...

  4. 【曹工杂谈】Maven源码调试工程搭建

    Maven源码调试工程搭建 思路 我们前面的文章<[曹工杂谈]Maven和Tomcat能有啥联系呢,都穿打补丁的衣服吗>分析了Maven大体的执行阶段,主要包括三个阶段: 启动类阶段,负责 ...

  5. CesiumJS 2022^ 源码解读[6] - 三维模型(ModelExperimental)新架构

    目录 1. ModelExperimental 的缓存机制 1.1. 缓存池 ResourceCache 1.2. 缓存对象的键设计 ResourceCacheKey 2. 三维模型的加载与解析 2. ...

  6. 曹工杂谈:为什么很少需要改Spring源码,因为扩展点太多了,说说Spring的后置处理器

    前言 最近发了好几篇,都是覆盖框架源码,但是spring的代码,我是从没覆盖过,毕竟,如果方便扩展,没谁想去改源码,而spring就是不需要改源码的那个,真的是"对扩展开放,对修改关闭&qu ...

  7. Skywalking光会用可不行,必须的源码分析分析 - Skywalking Agent &插件解析

    3 Skywalking源码导入 接上文,已经学习了Skywalking的应用,接下来我们将剖析Skywalking源码,深度学习Skywalking Agent. 3.1 源码环境搭建 当前最新版本 ...

  8. ThreeJS 物理材质shader源码分析(顶点着色器)

    再此之前推荐一款GLTF物理材质在线编辑器https://tinygltf.xyz/ ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib ...

  9. OpenCV人脸识别LBPH算法源码分析

    1 背景及理论基础 人脸识别是指将一个需要识别的人脸和人脸库中的某个人脸对应起来(类似于指纹识别),目的是完成识别功能,该术语需要和人脸检测进行区分,人脸检测是在一张图片中把人脸定位出来,完成的是搜寻 ...

  10. AFNetworking 3.0 源码解读 总结(干货)(下)

    承接上一篇AFNetworking 3.0 源码解读 总结(干货)(上) 21.网络服务类型NSURLRequestNetworkServiceType 示例代码: typedef NS_ENUM(N ...

随机推荐

  1. Stram流 - 随笔

    函数式编程 注重函数 - 关注对数据进行了什么操作 流 中间操作 去重 authors.stream() .distinct() ; 查询指定匹配 .filter(new Predicate<A ...

  2. 《JavaScript高级程序设计》Chapter02 <script>元素

    <script> 现代web应用程序通常将所有JavaScript引用放在<body>元素中的页面内容后面 <!DOCTYPE html> <html> ...

  3. 正向代理和反向代理和spring的动态代理模式有几种?默认是那种?如何切换?

    spring的动态代理模式有几种?默认是那种?如何切换? spring的动态的代理模式有两种 JDK动态代理,基于接口(默认代理模式),CGLIB动态代理(若要使用需要进行配置) JDK动态代理是由j ...

  4. django orm的增删改查 以及django1.x和2.x的区别

    ORM对字段的增删改查 # 建一个作者表 class Author(models.Model): ''' 如果你以后在创建表的时候,主键就叫id名,那么可以省略不写,orm会自动帮你创建出主键名称为i ...

  5. 3-XSS漏洞

    1.XSS原理 跨站脚本攻击是一种针对网站应用程序的安全漏洞攻击技术,是代码注入的一种.它允许恶意用户将代码注入网页,其他用户在浏览网页时会受到影响.恶意用户利用xss代码攻击成功后,可能得到很高的权 ...

  6. FFT及NTT

    FFT--快速傅里叶变换(附NTT--快速数论变换) FFT是一种能在O(nlogn)时空复杂度内求解两个函数卷积的优秀算法. 算法思想(DFT): 对于函数 \(f(x)=\Sigma_{i=0}^ ...

  7. 利用MRT批量处理MOD13Q1原始数据拼接的方法

    一.在存放原始数据的文件夹里,新建立一个result文件夹.新拼接的文件夹处理过后会在这个文件夹里出现 二.利用MRT点点点保存一个prm文件在存放原始数据的文件夹里 具体操作步骤参考 青灯常伴古佛 ...

  8. Nginx http 文件服务器 中文名称文件乱码以及不能访问下载问题 (解决全过程)

    书接上文: 在Windows 环境下使用 Nginx 搭建 HTTP文件服务器 实现文件下载 全步骤(详细) _ 发现的中文乱码问题,终于自己解决了! ^_^ Nginx http 文件服务器 中文名 ...

  9. 【新版】使用 go-cqhttp 扫码登录,一键接入 ChatGPT 机器人到 QQ 群

    目录 项目效果 安装 go-cqhttp 虚拟文件 启动 ChatGPT 项目效果 由于 ChatGPT 目前只能在漂亮国使用,所以想要在国内使用 ChatGPT 必然险阻重重 不仅时时刻刻要跟企鹅公 ...

  10. 对于jsp页面中内嵌Java代码失败的解决方法(总是报出jsp类无法编译的错误)

    准备好接收奥!解决方法来啦! 在我这几天查看了好几遍内嵌的Java代码之后,没有发现什么语法上面的错误,看来错误应该就是出现在环境上面了,或者是有什么我没有注意到的小细节.还好,终于将"罪魁 ...