cesium着色器学习系列2-Appearance对象

先查阅API

 

translucent	Boolean	true	optionalWhen true, the geometry is expected to appear translucent so Appearance#renderState has alpha blending enabled.
closed	Boolean	false	optionalWhen true, the geometry is expected to be closed so Appearance#renderState has backface culling enabled.
material	Material	Material.ColorType	optionalThe material used to determine the fragment color.
vertexShaderSource	String		optionalOptional GLSL vertex shader source to override the default vertex shader.
fragmentShaderSource	String		optionalOptional GLSL fragment shader source to override the default fragment shader.
renderState	RenderState		optionalOptional render state to override the default render state.

translucent：开启时，则renderstate可以设置透明度

closed：图形是否自动闭合

material：材质

vertexShaderSource：顶点着色器

fragmentShaderSource：片元着色器。

由上可以看出

材质是必须指定的参数，cesium默认内置了一些材质，常用的就是颜色材质。

除此之外，可以设置顶点着色器和片元着色器。

 

 

var appearance = new Cesium.Appearance({
    renderState: {
        blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,  //混合
        depthTest: { enabled: true }, //深度测试
        depthMask: true
    },
    fragmentShaderSource: f,
    vertexShaderSource: v
});

renderstate的API没看见。暂时不做研究，主要看两个着色器部分

    let v=`  attribute vec3 position3DHigh;
         attribute vec3 position3DLow;
         attribute vec4 color;
         varying vec4 v_color;
         attribute float batchId;
         void main()
         {
            vec4 p = czm_computePosition();
            v_color =color;
            p = czm_modelViewProjectionRelativeToEye * p;
            gl_Position = p;
            gl_PointSize=20.0;
         }`
        let f=`  varying vec4 v_color;
             void main()
             {
                   float d = distance(gl_PointCoord, vec2(0.5,0.5));
                  if(d < 0.5){
                     gl_FragColor = v_color;
                  }else{
                     discard;
                  }
             }`

 

先看顶点着色器：初接触，感觉完全懵逼，尝试删除一些没有用到过的变量，立马报错；如position3DHigh，batchId等。

将着色器中使用的函数拿出来在源码当中搜索，发现，position3Dhigh等信息时cesium框架自动封装进去的

大佬的解释：

position3DHigh与position3DLow是cesium为了降低传输精度降低，将double拆成两个float，用两个float来模拟double，因为js不支持double

虽然代码逻辑里面没有用到这些变量，但是必须得声明

再看看czm_computePosition ，根据源码就可理解为何这样写，就能设置图形的顶点了。

经尝试，还有另一种写法：，这是搜索czm_translateRelativeToEye函数出来的示例

 let v=`
         attribute vec3 position3DHigh;
         attribute vec3 position3DLow;
         // attribute vec3 position2DHigh;
         // attribute vec3 position2DLow;
         attribute vec4 color;
         varying vec4 v_color;
         attribute float batchId;
         void main()
         {
           vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
               v_color =color;
            p = czm_modelViewProjectionRelativeToEye * p;
                gl_Position =  czm_modelViewProjectionRelativeToEye * p;
            gl_PointSize=20.0;
         }`
    let f=`  varying vec4 v_color;
             void main()
             {
                   float d = distance(gl_PointCoord, vec2(0.5,0.5));
                  if(d < 0.5){
                     gl_FragColor = v_color;
                  }else{
                     discard;
                  }
             }`

至此，顶点着色器的入门函数就理解了

示例中使用的片元着色器就不再赘述了