Is shader of CesiumJS compatible with threeJs's GLSL?

CesiumJS
1

Hi.

Above demo code
I found weird shader type like FragmentInput, inout, czm_modelMaterial, which doesn’t exist in standard GLSL.

Is shader of CesiumJS compatible with threeJs’s GLSL and webGL’s GLSL?

2

In some ways, no.

Cesium has its own shader structs, methods and constants, and many automatic uniforms.

3

The shader code itself is written in GLSL. So you can use all the built-in functionality of GLSL in your vertex- or fragment shader.

Using “pure” GLSL in WebGL can be a bit cumbersome. Even simple things require a lot of effort and care. That’s why libraries usually introduce structures for simplifying the use of custom shaders.

You mentioned three.js. You can have a look at an example of how they set up the shader for a ShaderMaterial in one of the examples: You have to say, for example, that the object has vertex colors so that you can use the color in the shader. Similarly, values like the modelViewMatrix will automatically be filled with sensible values. If you wanted to do that with plain WebGL, you’d have to use low-level functions like gl.getUniformLocation and gl.uniformMatrix4fv just to set this single matrix! Or for short: three.js is doing a lot of work for you behind the scenes!

Similarly, the CustomShader of CesiumJS is simplifying the setup for you, so that you can focus on the “core” part that should be customized. And this part is exactly the implementation of the vertexMain or fragmentMain function: CesiumJS is setting up all the attributes and uniforms that are required, and collects them in the VertexInput and FragmentInput structures. These structures are passed to the vertexMain/fragmentMain functions, where you can use them to implement custom behavior.

The following is overly simplified, but it can roughly be imagined like that:

// Many attributes that are part of the model:
attribute float position;
attribute float color;
attribute float texCoord;
...

// Many uniforms that are part of the rendering setup
...


void main() {

    // Collect all attributes in the VertexInput
    VertexInput vertexInput;
    vertexInput.attributes.positionMC = position;
    vertexInput.attributes.color = color;
    vertexInput.attributes.texCoord = texCoord;
    
    // Pass the attributes to your main function:
    vertexMain(vertexInput, ...)
}

//============================================================================
// You only have to write this part:

void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput)
{
    float customFactor = 12.34;
    vsOutput.positionMC = vsInput.attributes.positionMC * customFactor;
}

All the work that is required for setting up the attributes and uniforms with low-level WebGL calls is done by CesiumJS. You can focus on the part below the ==== line in the example.

Further documentation, for example, for the VertexInput structure, can be found in the CustomShaderGuide

1 Like
4

Thanks a lot @Marco13. All you explained was exactly what I wanted. Thanks to you, I got a clue! :+1: :+1: :+1: