Beginner: Textures


could you kick me to right direction to start learning how to give texture to a simple custom object in Cesium, e.g. the custom cube’ish wireframe in Custom Rendering example in Sandcastle?

It would be a nice addition to the Custom Rendering example in Sandcastle if you’d demo how to fill the sides of the cube and add a simple texture. Perhaps use of the cubemap?



Hi Karpo,

The material Sandcastle example has examples of applying textures to objects. In the “Common materials” drop-down, select “Image.” This, of course, requires adding material support to the custom rendering example. See the guide on Fabric. In particular, the fragment shader will need to call czm_getMaterial just like PolygonFS.glsl (if you just want to texture the cube, you could get away without computing most of the inputs to start). A bit of JavaScript will need to be written too. See the section “Materials in the Rendering Pipeline.”



Hi again,

Thank you for your reply.

But - could you perhaps give a more detailed instructions of the czm_materialInput usage. The question is what would be the needed materialInputs in GLSL code for just adding a texture to the cube. At this point I don’t really care the positioning of the texture around the cube.

What I have so far:

  • I started with the Custom Rendering example

  • I have a database in the background to control the position of the several cubes on the globe

  • I gave my new objects new Cesium.Material (an image texture as an uniform, example seen in the Fabric blog)

  • Then I am to combine the material uniforms in the object’s update function:

this._colorCommand.uniformMap = Cesium.combine([this._colorCommand.shaderProgram._uniforms, this.material._uniforms]);



If you only care about supporting the Image material so you can apply a texture to each face of the cube, the fragment shader can be as simple as

varying vec2 v_textureCoordinates;

void main()


czm_materialInput materialInput; = v_textureCoordinates;

czm_material material = czm_getMaterial(materialInput);

gl_FragColor = vec4(material.diffuse, material.alpha);


This is not a general purpose shader, and will only work with a few materials.  You'll also need to pass v_textureCoordinates in from the vertex shader, e.g., see [ViewportQuadVS.glsl](, and compute the texture coordinates for each face of the cube (0 to 1 in each direction) that are provided to the vertex shader.  For example, see [ViewportQuad.js](