WebGL Workshop 1

Intro to GPU Programming with WebGL

Tarek Sherif

We want to do this...

Even the longest journey begins with a single step...

The basic idea...

  • If we can draw triangles and color them, we can build Assassin's Creed
    • (At least the graphical part)

Basic steps

  • Describe surface geometry in triangles
  • Tell the GPU how it should manipulate the triangles and color them
  • Draw

Client/Server Model

  • JavaScript code is the client
  • GPU is the server
  • JavaScript code sends commands and data to the GPU via WebGL
    • gl.bufferData(...)
    • gl.drawArrays(...)

State Machine

  • WebGL commands set up state on the GPU
      E.g. Geometry, colors, etc.
  • That state is used in the next draw command.

State Machine

Describe Geometry

  • Array of vertex data
    var positions = new Float32Array([
      -0.5, -0.5, 0.0,  // Vertex 1
       0.5, -0.5, 0.0,  // Vertex 2
       0.0,  0.5, 0.0   // Vertex 3

Basic steps on the GPU

  • Move vertices around (vertex shader)
  • Map triangles to pixels on the screen (rasterization)
  • Color the pixels (fragment shader)
  • Display the scene

The process

Pipeline Components

We control

  • Vertex shader
  • Set gl_Position to tell WebGL the final vertex position
  // attribute means it comes from the geometry
  // array we created!
  attribute vec4 aPosition;

  void main() {
    gl_Position = aPosition;

Normalized Device Coordinates

  • gl_Position is given in normalized device coordinates

We don't control

  • Rasterization
    • GPU figures out which pixels are covered by each triangle
    • Interpolates vertex data to pixels along triangle surface

We control

  • Fragment shader
  • Set gl_FragColor to tell WebGL the final color of a pixel
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

Let's get started!

What we did

  • Shaders
  • Programs
  • Attributes
  • Array buffers
  • Varyings
  • Uniforms


  • Vertex shader moves each vertex to its final NDC position
  • Fragment shader colors a pixel covered by a triangle


  • Combination of a vertex and a fragment shader


  • Per vertex data passed to vertex shader
  • Includes positions, colors, normals, texture coordinates, etc.

Array buffers

  • Storage location on GPU for vertex data
  • Data has to be passed from the program into an array buffer
  • Array buffer has to be bound to an attribute in the vertex shader
  • Pointer must be enabled to tell GPU how to traverse the array


  • Data passed from vertex to fragment shader
  • Output from vertex shader as per-vertex data
  • Interpolated across triangle surface in rasterization step
  • Interpolated values passed to fragment shader as per-pixel data


  • Data passed from program to both vertex shader and fragment shader
  • Remains constant for all vertices/pixels of a given object
  • E.g. light position, camera position, time

That's pretty much it!

  • That pretty much all the API you need to know to draw with WebGL
  • A couple of important ommissions:
    • Textures
    • Frame buffers