# Fabric Material

**URL:** <https://community.cesium.com/t/fabric-material/16763>\
**Category:** CesiumJS\
**Created:** [January 5, 2022, 10:40am UTC](https://community.cesium.com/t/fabric-material/16763 "2022-01-05T10:40:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sergemorvan29](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sergemorvan29/32/2085_2.png) [@sergemorvan29](https://community.cesium.com/u/sergemorvan29)\
**Post date:** [January 5, 2022, 10:40am UTC](https://community.cesium.com/t/fabric-material/16763/1 "2022-01-05T10:40:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [January 6, 2022, 5:45pm UTC](https://community.cesium.com/t/fabric-material/16763/2 "2022-01-06T17:45:54Z")

</div>

Hi @sergemorvan29,

To the best of my knowledge, this should be possible. It likely depends on where you are calling `czm_getMaterial`.

Best,  
Sam

---

<div class="post-metadata">

**Author:** ![sergemorvan29](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sergemorvan29/32/2085_2.png) [@sergemorvan29](https://community.cesium.com/u/sergemorvan29)\
**Post date:** [January 7, 2022, 9:51am UTC](https://community.cesium.com/t/fabric-material/16763/3 "2022-01-07T09:51:03Z")

</div>

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  
} });

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [January 7, 2022, 5:51pm UTC](https://community.cesium.com/t/fabric-material/16763/4 "2022-01-07T17:51:02Z")

</div>

@sergemorvan29

Thank you for sharing some more details on how you are initializing your `Material` object. Where have experimented with calling `czm_getMaterial`?

Best,  
Sam

---

<div class="post-metadata">

**Author:** ![sergemorvan29](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sergemorvan29/32/2085_2.png) [@sergemorvan29](https://community.cesium.com/u/sergemorvan29)\
**Post date:** [January 8, 2022, 9:22am UTC](https://community.cesium.com/t/fabric-material/16763/5 "2022-01-08T09:22:20Z")

</div>

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);

 ![shaders_6](https://global.discourse-cdn.com/cesium/original/3X/c/2/c2bd65345f2e680b741b2f5ce7cb9e66f9a87fe8.jpeg)

---

<div class="post-metadata">

**Author:** ![sergemorvan29](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sergemorvan29/32/2085_2.png) [@sergemorvan29](https://community.cesium.com/u/sergemorvan29)\
**Post date:** [January 10, 2022, 9:07am UTC](https://community.cesium.com/t/fabric-material/16763/6 "2022-01-10T09:07:47Z")

</div>

With function sin() in function mix.

 ![shaders_7](https://global.discourse-cdn.com/cesium/original/2X/c/ce6deccc6a8ff574fd04b834648577bd41dd5fd7.jpeg)

Same, the uniforms seconds is only evaluated once

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [January 10, 2022, 6:43pm UTC](https://community.cesium.com/t/fabric-material/16763/7 "2022-01-10T18:43:39Z")

</div>

Hi @sergemorvan29,

For future posts, if possible I recommend sharing a sandcastle example instead of actual code.

> **[Cesium Sandcastle](https://sandcastle.cesium.com/)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

This allows everyone in the community to run and debug your code much more easily.

Best,  
Sam

---

<div class="post-metadata">

**Author:** ![sergemorvan29](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sergemorvan29/32/2085_2.png) [@sergemorvan29](https://community.cesium.com/u/sergemorvan29)\
**Post date:** [January 11, 2022, 7:52am UTC](https://community.cesium.com/t/fabric-material/16763/8 "2022-01-11T07:52:02Z")

</div>

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.

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=pVZtb9s2EP4rRPahkufIlpx1mRwHK5KuLdAhwdIlQOZhZWTaJkKRAkk5Vov89x4lSqIUzVgxAYlJ3j0P7408LvkOS7Sj5IlItECcPKELomieBrflmrc8Ssr5heAaU07k8sifL/mSJ4IrjbJpF3UtWLER/B0RKdGy8L4uOYIvq5bfUyKxTLZFPIBphF6FqT+rdYGlhhHms2AtRXpJNpIQ9UZKXHh/dRHmOz4JTl+P0clpcDIdD4vD/ySejQ+Sz7rSv/3u3LfoLaGbrY5ROJ0u+XMVwXXOE00FRxuiP9GUeH4ZLZMQRSC8KwWxrVITJEwkj0GSS0l4qRxYlav1JS7mBieJziVHGZaK/MYE1p5VMbs9L3mHSfBPFH7wavV2B4wfqdIEkutZU9wUU/iHeUJ6ma5T/MGK61Rv7HoMtWGdp6sYvXoQe/RE9daG4lUTBuPvWuJNCnbcbPGKyBuRy4SgxedSTJIZSgQT0hhgZl4YTMfT6s9QtBphrWGk4ZBG1OcI+xqzf9Fwdf7sIG47s7vO7L6HrBJvsoOewnDejqN2HDnrUVQick7XQqaoWsWcpthUzk1GyGreF9u0O1vtwwV40rDuo0XoTIuutKilZQl8Sf+BvYikmCEzgQL53c49V/iBZ7lGnZn/tT0LHZ5msKgpL8ka56xl7vKUtlQ0ZfQBl9K9VxXF2KZ+jBTlTcn7cxdx6yJCi4gOIe5cRGQRs0OIexcxs4jpAMKCIP0Lz9tHxx1fA6WDvT/yioH1wvcnJWIfVhpF2NoAFXSA7iVXCT5AFxnrXnI1yt9pXRQdoPtu65AbeFNFZVmMIKQ/VvmGYVQN70bgCqrG96PqPFl8vW2wout1rkhNNO9KMcu2GGTlbyWzV22tYs2CO/bzvLrP0u5d2dS1PRFr/CBpEiPngNgjrDqL5qu2h84R9BtV9xoAFTjFYU+nbiSx2xccyy4wYw84ebyWIiNSF3UDGIONTBE/gPktZjk0J6ezPTu7qPKyjgev8CYuzlWPs/5Lo47OmywjWLq9pA5wjNKGY8knI/TD//7QaFJaVDVFlUD3CzJJU6rpjijTGN0wXdeSfperux/kremTNji4cScunbbLkjCCFXn3kqCMuNVKRJpJotQtJIW2UhOFNpSUg02YXQtFy3dEJ6rD7yUPni4/T6uny09jdDqFz3bAlvBKUkgkfsn5nuAV5ZtrqpPtH4KxDjOwHv8C/6atgVvw8QKn8K4zr0ngstFbEaUpLzeI+17YAIjWhs6R2FYmxAO2BlbmFGdmLB3ULSWOpgR3BhWNoK3jea9kktI7eIxp46HXddifH42PzpQuGDmvd/qVppmQGuWSeUEw0STNGFS5mjzkySPRQaJUfc2dTVzo2Yru4CW1GHiQo4RhpUCyzhm7oV/I8uj8bAL6L6Bw/E2ErnZEMlwYtW14/rFaDILgbALTYaQWAi4K2WP+Bg)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.