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
- 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
- Turn on the attribute.
- Assign a buffer to the attribute.
- Tell WebGL how to get data out of that buffer.
- For each attribute that will accept data from a 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.