The fragment shader within appearance is unable to properly receive the uniform variable

CesiumJS
1

I am currently using Cesium.Primitive and passing uniform data through fs and vs in appearance , finding that fs and vs cannot receive this uniform data, but ms can.
I wish to pass a float type value of ‘u_time’ as a uniform. However, when ‘u_time’ is utilized in ‘fragment shader’, an error occurs. Could you identify any mistakes in this transfer method?
My code and error are shown in the picture.

let material = new Cesium.Material({
    fabric: {
        type: 'Flow',
        uniforms: {
            image: '../image/blank.jpg',
            time: 0.0,
            u_time: 0.0,
        },
        source: `
        czm_material czm_getMaterial(czm_materialInput materialInput) {
                czm_material material = czm_getDefaultMaterial(materialInput);
                ...
                material.diffuse = texture2D(image, newCoords).rgb;
                return material;
            }
                `
    }
});

let fs = getFS();

function getFS() {
    source = `
    uniform float u_time;
    void main() {
        czm_materialInput materialInput;
        vec2 uv = gl_FragCoord.xy;
        uv.y += u_time;
    }
    `;
    return source;
}

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: coneInstance,
    appearance: new Cesium.Appearance({
        material: material,
        renderState: {
            blending: Cesium.BlendingState.ALPHA_BLEND,
            depthTest: {
                enabled: true
            },
            cull: {
                enabled: true,
                face: Cesium.CullFace.BACK
            },
            depthMask: true,
        },
        fragmentShaderSource: fs,
        vertexShaderSource : vs,
    }),
}));

微信图片_20230830160124

1 Like
2

Hi there,

You’re trying to offset a vertex base on the value of u_time correct?

I’m not sure this way of offsetting vertices based on materials is the intended use case of the material system. I think the best way to do this would be to specify a BumpMap and create a texture from the u_time value.

3

Thank you for your advise, but I’ve used a data structure BumpMap to pass a two-dimensional array named u_time to the Material Shader (MS) before .

// adding bumpMapTexture
let bumpMapTexture = new Cesium.Texture({
    context: viewer.scene.context,
    pixelFormat: Cesium.PixelFormat.RG,
    pixelDatatype: Cesium.PixelDatatype.FLOAT,
    flipY: false,
    source: {
        arrayBufferView: u_time,
        width: 2,
        height: 2,
    }
});    

let material = new Cesium.Material({
    fabric: {
        type: 'Flow',
        uniforms: {
            image: '../image/blank.jpg',
            time: 0.0,
            u_time: 0.0,
			bumpMapTexture: bumpMapTexture,
        },
        source: `
        czm_material czm_getMaterial(czm_materialInput materialInput) {
                czm_material material = czm_getDefaultMaterial(materialInput);
                ...
				vec2 timeRG = texture2D(bumpMapTexture, materialInput.st).rg; // adding bumpMapTexture
				newCoords = materialInput.st + timeRG * time;
                material.diffuse = texture2D(image, newCoords).rgb;
                return material;
            }
                `
    }
});

let fs = getFS();

function getFS() {
    source = `
    uniform float u_time;
    void main() {
        czm_materialInput materialInput;
        vec2 uv = gl_FragCoord.xy;
        uv.y += u_time;
    }
    `;
    return source;
}

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: coneInstance,
    appearance: new Cesium.Appearance({
        material: material,
        renderState: {
            blending: Cesium.BlendingState.ALPHA_BLEND,
            depthTest: {
                enabled: true
            },
            cull: {
                enabled: true,
                face: Cesium.CullFace.BACK
            },
            depthMask: true,
        },
        fragmentShaderSource: fs,
        vertexShaderSource : vs,
    }),
}));'

However, I found that the value is not being passed correctly. When I retrieve this value in the MS and add it to the coordinates, the result is not as expected. Do you know what could be the potential reasons?

4

It may help to know the final effect you’re looking to achieve.

If you’re looking to create a “flow” affect with the bumpMap (I’m just assuming this from your material name), I would recommend doing something like this sandcastle example.