Beginner: Textures

[Karpo]

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

[Patrick Cozzi]

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

--
 
 

--
www.seas.upenn.edu/~pcozzi/

[Karpo]

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

[Patrick Cozzi]

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

Patrick