Program Structure

You may need to read the previous article about WebGL in order to understand this one.

Most of the WebGL API is dedicated to setting up state for the shader program. A typical program that uses the WebGL API follows this structure:

• Initialization step (run once at the beginning of the program).
  • Get the rendering context.
  • Create all of the shaders and link them into shader programs.
  • Look up the locations of every variable in every shader program.
  • Create buffers and upload vertex data to them.
  • Create a vertex array object (VAO) for each "thing" that needs to be rasterized.
    • For each attribute that will accept data from a buffer:
      • Turn on the attribute.
      • Assign a buffer to the attribute.
      • Tell WebGL how to get data out of that buffer.
  • Create textures and upload data to them.
• Render step (run once each frame).
  • Clear the viewport.
  • Resize the viewport.
  • Set global state.
  • For each "thing" that needs to be rasterized:
    • Activate the shader program that is used to rasterize it.
    • Bind the VAO that represents it.
    • Set uniforms to the correct values for it.
      • Assign textures to texture units.
    • Execute the shader program.

The next article walks through a minimal "Hello, world!" WebGL API program.