Mon 16 Nov 2015

WebGL

WebGL Fundamentals WebGL Reference Card

Coordinates go from -1 to 1 (this is clipSpace).

We can pass data from the vertex shader to the fragment shader by declaring the same variable each. Using the keyword varying interpolates the values for pixels between the vertices.

Shaders

Shaders are small programs which run on your GPU, and are specified in GLSL.

They map over a list of graphics primitives, applying lighting and colour and so on:

  • Vertex shaders happen early, before the model has been broken into triangles.
  • Fragment shaders happen late, during rasterization. They are also called pixel shaders.

Data

  • attribute comes from a buffer (vertex shader only)
  • uniform is constant for all vertices over a draw call
  • textures
  • varying (write in vertex shader, read in fragment shader)

To set data in JavaScript, we find it with var offset = gl.getSomethingLocation(program, varName);, then we set it using a function according to its type.

GLSL can support generics using T.

Buffering

Buffering moves data to the GPU. Here's the JS calls:

  • createBuffer makes a buffer
  • bindBuffer makes it the active buffer
  • bufferData moves data into the buffer…