5.8 - Example 4: Textures

This example will hopefully help you get excited about the possibilities of shader programs. We won’t talk through the steps in detail, but the code is shown in the demo below.

Fragment shaders assign colors to pixels. They can be as simple as the examples in the previous demos, or they can be incredibly complex. Only your imagination limits you!

This example does the following:

A Texture Map Example

Show: Code Canvas Run Info

A simple, 3D model where pixel colors are calculated using a procedural texture map.

Please use a browser that supports "canvas"
Shader errors, Shader warnings, Javascript info
Open this webgl program in a new tab or window


Let’s summarize the big picture once more before leaving this topic:

  • A vertex shader program retrieves vertex and other associated data from buffer objects. All buffer objects are 1-dimensional arrays. The data in the buffer objects are organized by vertex. The vertex shader calculates the position a vertex in the scene and prepares any data needed by the fragment shader for calculating colors.
  • A fragment shader program receives data from the vertex shader for each vertex and then interpolates the values over the fragments of the primitive (either a point, line or triangle).
  • A pre-processing step must create appropriate buffer objects and copy the model data to the GPU’s buffer objects.
  • Each time a model is rendered, a shader’s variables must be linked to their appropriate buffer objects and then gl.drawArrays() initiates the rendering process.
Next Section - 5.9 - Interleaved Buffers