today, I start ready to learn write my own custom fragment shader in MaterialAppearance.But when I tried to pass user defined uniform color to custom fragment shader. Chrome tells me that color is undefined, how to pass it,please help!
here is my code:
var redColor = (56.0/255.0) + ((187.0/255.0) - (56.0/255.0))
var greenColor = (139.0/255.0) + ((186.0/255.0) - (139.0/255.0))
var blueColor = (255.0/255.0) + ((236.0/255.0) - (255.0/255.0))
const aper = new Cesium.MaterialAppearance({
translucent: true,
material:new Cesium.Material.fromType('Color', {
color : new Cesium.Color(redColor,greenColor,blueColor,1.0)
}),
vertexShaderSource: `
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 normal;
attribute vec2 st;
attribute float batchId;
varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main()
{
vec4 p = czm_computePosition();
vec4 eyePosition = czm_modelViewRelativeToEye * p;
v_positionEC = czm_inverseModelView * eyePosition; // position in eye coordinates
v_normalEC = czm_normal * normal; // normal in eye coordinates
gl_Position = czm_modelViewProjectionRelativeToEye * p;
}
`,
fragmentShaderSource: `varying vec4 v_positionEC;
varying vec3 v_normalEC;
void main() {
float l = sqrt(pow(v_positionEC.x,2.0) + pow(v_positionEC.y,2.0) + pow(v_positionEC.z,2.0));
float cy3 = fract((abs(l - 100000.0))/600000.0);
float cr = color.r*cy3;
float cg = color.g*cy3;
float cb = color.b*cy3;
gl_FragColor = vec4(cr, cg, cb, 1.0);
}`
})
let instance = new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy : new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
116.0, 29.0,
// 126.0, 25.0,
110.0, 20.0,
126.0, 20.0,
133.0, 29.0
])
),
extrudedHeight: 300000
})
});
var primitive = new Cesium.Primitive({
geometryInstances: [instance],
appearance: aper,
releaseGeometryInstances: false,
compressVertices: false,
})