Hey guys and happy new year,
I want to create a Material that evolves over time. I can use czm_frameNumber, but is it possible to have access to viewer.clock.currentTime in function: czm_material czm_getMaterial (czm_materialInput materialInput)? To have the “real” time of the application.
Hi @sergemorvan29,
To the best of my knowledge, this should be possible. It likely depends on where you are calling czm_getMaterial.
Best,
Sam
Thank you for your reply.
But that’s the question, where is to call czm_getMaterial, I placed a CallbackProperty in the definition of the Material, but the uniforms seconds is only evaluated once
const m = new Cesium.Material({
fabric: {
uniforms: {
alpha : 1.0,
animationSpeed : 0.01,
seconds : new Cesium.CallbackProperty(getTime, false)
},
source: fragmentShaderSource
} });
Thank you for sharing some more details on how you are initializing your Material object. Where have experimented with calling czm_getMaterial?
Best,
Sam
var viewer = new Cesium.Viewer(“cesiumContainer”);
const p0 = new Cesium.PolygonGeometry({
polygonHierarchy: new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
-4.86, 48.40,
-4.81, 48.40,
-4.81, 48.43,
-4.86, 48.43
])
),
height: 100
});
function getTime(){
var seconds = viewer.clock.currentTime.secondsOfDay;
return parseFloat(seconds);
}
viewer.clock.onTick.addEventListener(getTime);
const instance0 = new Cesium.GeometryInstance({
geometry: p0,
id: ‘box with height’
});
var fragmentShaderSource =`
vec3 color0 = vec3(1.0,0.0,0.0);
vec3 color1 = vec3(0.0,1.0,0.0);
vec3 color2 = vec3(1.0,0.0,1.0);
vec3 color3 = vec3(1.0,0.0,1.0);
vec3 colorU;
vec3 colorV;
vec3 colorW;
vec3 colorZ;
vec3 color;
float w11;
float w12;
float w21;
float w22;
uniform float animationSpeed;
uniform float seconds;
float x1=0.0;
float x2=1.0;
float y1=0.0;
float y2=1.0;
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
colorU = mix(color0, color1, sin(seconds));
colorV = mix(color1, color2, sin(seconds));
colorW = mix(color2, color3, sin(seconds));
colorZ = mix(color3, color0, sin(seconds));
w11=((x2-materialInput.st.x)*(y2-materialInput.st.y))/((x2-x1)*(y2-y1));
w12=((x2-materialInput.st.x)*(materialInput.st.y-y1))/((x2-x1)*(y2-y1));
w21=((materialInput.st.x-x1)*(y2-materialInput.st.y))/((x2-x1)*(y2-y1));
w22=((materialInput.st.x-x1)*(materialInput.st.y-y1))/((x2-x1)*(y2-y1));
color = colorU*w11+colorV*w12+colorW*w21 +colorZ*w22;
material.diffuse = color;
material.alpha = alpha;
return material;
}
`;
var m = new Cesium.Material({
fabric: {
uniforms: {
alpha : 1.0,
animationSpeed : 0.01,
seconds : parseFloat(new Cesium.CallbackProperty(getTime, false).getValue())
},
source: fragmentShaderSource
}
});
var aper = new Cesium.MaterialAppearance({
material: m
});
/* ################################################################## */
viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance0,
appearance: aper,
releaseGeometryInstances: false,
compressVertices: false
}));
var initialPosition = new Cesium.Cartesian3.fromDegrees(-4.70, 48.45, 80000.0);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0);
var homeCameraView = {
destination: initialPosition,
orientation: {
heading: initialOrientation.heading,
pitch: initialOrientation.pitch,
roll: initialOrientation.roll
}
};
viewer.scene.camera.setView(homeCameraView);
Hi @sergemorvan29,
For future posts, if possible I recommend sharing a sandcastle example instead of actual code.
This allows everyone in the community to run and debug your code much more easily.
Best,
Sam
Hie Sam,
Here is my code in Sandcastle. My problem is this: visualization of the speed of tidal currents. The data is on a regular grid. On a cell, there are four speed values which vary over time. I first do the speed evaluation: the color at the four points, then a bilinear interpolation, for the colors in the cell.
