Cesium3Dtilesets 使用customShader的解读以及泛光效果示例

前言：光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过，但还是有不少靓仔靓女可能会感到疑惑，在3Dtilesets里怎么使用？为啥我在网上看到的为数不多的代码示例我看不懂？是由于没理解透彻导致的。借此机会，提供一个小示例，从头到尾的应用一下。

效果

在这里插入图片描述

加载Cesium3Dtilesets

// viewer 实例生成
const viewer = initViewer()
const tileset = new Cesium.Cesium3DTileset({
	url: Cesium.IonResource.fromAssetId(75343) // 或者一些你保存的测试的tileset 的url
})
viewer.scene.primitives.add(tileset)

上述代码即创建了一个tileset，但通常来说，我们会在readyPromise里面进行操作，主要是因为这个加载过程是异步的，在此之前我们读取tileset下加载完成处理的变量是读取不到的。因此

tileset.readyPromise.then((tileset) => {
	// do sth
})

customShader

customShader 是Cesium 在1.87版本推出的一个功能类，主要的目的是在于以前的版本中，我们想要对加载出来的3dtiles编写自定义shader的时候往往是只能修改源码。而现在我们可以直接通过调用此类传入customShader中，对顶点着色器与片源着色器进行修改，当然也包括uniforms 的传值。那么在开始之前，有几个注意事项，以及一些需要了解的前置内容。

在开始之前呢，你可以先下载cesium的源码，目录结构在下图所示，对比应证
在这里插入图片描述

首先从官网给出的例子来看有啥参数，以及参数大致是用来干啥的。

const customShader = new CustomShader({
  uniforms: {
    u_colorIndex: {
      type: Cesium.UniformType.FLOAT,
      value: 1.0
    },
    u_normalMap: {
      type: Cesium.UniformType.SAMPLER_2D,
      value: new Cesium.TextureUniform({
        url: "http://example.com/normal.png"
      })
    }
  },
  varyings: {
    v_selectedColor: Cesium.VaryingType.VEC3
  },
  vertexShaderText: `
  void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
    v_selectedColor = mix(vsInput.attributes.color_0, vsInput.attributes.color_1, u_colorIndex);
    vsOutput.positionMC += 0.1 * vsInput.attributes.normal;
  }
  `,
  fragmentShaderText: `
  void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
    material.normal = texture2D(u_normalMap, fsInput.attributes.texCoord_0);
    material.diffuse = v_selectedColor;
  }
  `
});

那么可以看到，能供我们去处理的，只有传值uniforms，varyings 即从顶点着色器传到片元着色器的传递变量。

特别地： vertexMain 以及 fragmentMain 的参数变量以及相关处理

一个一个说，接着往下

customShader uniforms

uniforms 中需要在customShader的构造器中定义才可通过customShader.setUniform去进行更改，这点在源码以及说明文档中也有提及。
uniformType 即支持的类型
-

customShader varyings

varyingType 支持的类型

customShader vertexShaderText

这个的话得稍微打多点字了，作者在此提出以下几个问题进行探索。

1、为何只能在vertexMain 内部编写着色器代码？
2、cesium 封装的变量 vertexInput 以及vsOutput里面有什么？
3、如何像原生webgl那样在顶点着色器中输出位置信息？

其实搞懂了这三个问题就已经足够了。下面分别解释。

在这里插入图片描述
先观察注释，首先vertexInput 跟这个初始化的inputStuct （input的结构体）是根据JS 动态生成的，我们其实并不太关心其中的实现，有一件事是可以肯定的，Cesium 内部必然是有一个根据各种各样的状态拼接着色器代码的一个渲染管线，在这里，customShader的渲染管线如上图所示，读者若有兴趣可自行研究，这里不多赘述。

那么可以看到 vertexMain 这个变量是作为一个函数执行的。省去大部分内容，我们大致可以理解成以下过程

// ...
void main(){
	// deal variable
	vertexMain(vsInput,vsOutput);
}

这就解释了第一个内容。Cesium 做处理的时候就是把我们填入的vertexShadertext 内的字符串解析作为一个函数执行的。因此，我们必须声明vertexMain 这个函数并且只能在这个函数里面编写代码。

那这里其实也等于回答了 fragmentMain 为何只能在里面编写代码。意思是相同的，所以下文也不会再提。

接着回答第二个问题，cesium 封装的变量 vertexInput 以及vsOutput里面有什么？即使通过上面的着色器代码可以管中窥豹，可是很显然的，它存的都是一系列的结构体（本文这里说只是为了准确，实际上照JS程序员的理解，你可以把它比作对象：有属性，有值）

vertexInput

当然，上图也能看到，vertexInput 下有3个结构体（对象），本文只探索attributes，因为比较常见，且常用。

上表其实也说明了fragmentInput中的属性.不需记住，随时查阅即可。

// 例如 在顶点着色器中 读取 positionMC变量
void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {
	vsInput.attributes.positionMC // 这能正常读取
	vsInput.attributes.positionWC // 不可正常读取 ， 因为在vsInput中 这个值 未被计算.
}

接着回答第三个问题，如何输出位置信息？
Cesium对输出进行了以下包装
在这里插入图片描述
其实从结构上来说，跟原生webgl 差别不大。同样是 pointSize 以及一个position 。
概念大致相同，区别只是需要对这个Output 结构体里面的positionMC 写入位置信息，然后由cesium 进去处理、计算（什么世界坐标啊，根据眼睛的法向量坐标啊等等。）

那重点来了这里肯定还有疑问，即 positionMC 跟我们通常理解上的gl_Position 即顶点坐标是否是同一个意思？
在这里插入图片描述

简单翻译下重点，customShader 可能会修改这个positionMC 即（position Model Coordinates 译为模型坐标），这个结果会被用作计算gl_Position ，即顶点位置，所以两者并不是一个概念！这里注意了。也就是说，你实际修改的positionMC 它并不等同于我们在原生webgl 上的顶点位置信息，这是一个踩坑点！

回答问题：输出顶点的模型位置.修改如

vsOutput.positionMC = ?

customShader fragmentShaderText

照样在此处提出问题

1、czm_modelMaterial 有什么属性？分别是什么含义？

这里本该有两个问题，即fragmentInput 是啥，有啥属性，那么在之前也已经阐述过了，结构体几乎是完全一样的，不再说明。

解决上面的问题很简单，其实只要找到它的声明文件，代码的注释已经写的很明白了，我这里就简单的说明一下我们通常关心的填色
在这里插入图片描述
之前在webgl 的片元着色器中我们填色是通过输出gl_FragColor = vec4(?); 完成的。
在customShader 中，我们想要做到跟gl_FragColor一样的功能，只需声明diffuse 跟alpha 即可，当然这是在不设置emissive 的颜色下。有关于反射光的东西其实我害没深入的去学，这里就不妄加解释。

OK ，前置内容就说明完成了，如果你有充分的webgl 的基础，相信在上面的内容里，你已经完全能理解你如何编写在customShader 里的代码，下面做个小示例去具体的感受一下。

下面代码应该可以直接跑。对了，记得把defaultAccessToken 加上。

泛光（或者说光带）效果

	  const viewer = new Cesium.Viewer("earthContainer", {
      });
      const scene = viewer.scene;
      scene.globe.depthTestAgainstTerrain = true;
      // Set the initial camera view to look at Manhattan
      const initialPosition = Cesium.Cartesian3.fromDegrees(
        -74.01881302800248,
        40.69114333714821,
        753
      );
      const initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
        21.27879878293835,
        -21.34390550872461,
        0.0716951918898415
      );
      scene.camera.setView({
        destination: initialPosition,
        orientation: initialOrientation,
        endTransform: Cesium.Matrix4.IDENTITY,
      });
      Cesium.ExperimentalFeatures.enableModelExperimental = true;

      //       // Load the NYC buildings tileset.
      const tileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
        customShader: new Cesium.CustomShader({
          lightingModel: Cesium.LightingModel.UNLIT,
          uniforms: {
            maxHeight: {
              type: Cesium.UniformType.FLOAT,
              value: 0.0,
            },
            minHeight: {
              type: Cesium.UniformType.FLOAT,
              value: 0.0,
            },
          },
          fragmentShaderText: `
          void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
                  float curz = fsInput.attributes.positionMC.z;
                  float d = (curz - minHeight) / (maxHeight - minHeight);
                  float r = 0.01;
                  r = fract(r * czm_frameNumber);
                  float c = smoothstep(r, r+0.03, d) - smoothstep(r + 0.035,r + 0.04, d);
                  vec3 linearColor = mix(vec3(1.0,1.0,1.0) ,vec3(255.0,48.0,48.0)/255.0,r);
                  vec3 renderColor = mix(vec3(0.0,0.96,1.0) ,linearColor,c);
                  material.diffuse = renderColor;
      }`,
        }),
        backFaceCulling:  false,
      });
      // 547.75 -11.89
      // let [maxHeight,minHeight] = [tileset._properties.Height.maximum,tileset._properties.Height.minimum]

      tileset.readyPromise.then((tileset) => {
        console.log(tileset);
        let [maxheight, minheight] = [
          tileset.properties.Height.maximum,
          tileset.properties.Height.minimum,
        ];
        tileset.customShader.setUniform("maxHeight", maxheight);
        tileset.customShader.setUniform("minHeight", minheight);
        console.log(`Maximum building height: ${maxheight}`);
        console.log(`Minimum building height: ${minheight}`);
      });
      console.log(tileset);
      scene.primitives.add(tileset);

光带在cesium3dtilesets的效果原理思路解读

参考我的之前的光带原理解读这篇文章，其实本质上来说，观察我的着色器代码

float d = (curz - minHeight) / (maxHeight - minHeight);

这篇光带原理解读文章后面的实现是比较潦草的，只是用以空间裁剪坐标的增加控制整个光带的移动，而此时这个呢，你可以稍微对比一下，它其实就是把从空间裁剪坐标的终点1 变为了它的最高点。这么说可能有点模糊，上图。

之前的实现
在这里插入图片描述
现在的实现

所以我说本质上，这跟之前的还是一个内容。其实并不想多做阐述。但无奈确实可能一开始不太好理解，希望你们看到此图能恍然大悟。意味着，从直接的对整个webgl空间的光带，变成了一条只在模型的盒子范围内的光带扫描。

结尾闲聊

今天又是摸鱼的一天，今后这篇文章会又造福了不少靓仔，真想快点到国庆回家，心已疲倦，好想躺平，可是没钱，还得继续当码畜，不知道各位看本文的靓仔靓女有无富婆介绍？年龄在 20 - 28 之间，俺不想码了，不想努力了！