Beginner: Textures

CesiumJS
1

Hi,

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?

Br,

Karpo

2

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.”

Regards,

Patrick

3

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

-Karpo

4

Karpo,

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;

materialInput.st = 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](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Shaders/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](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/ViewportQuad.js).

Patrick