Basic high level presentation on how the GPU works, and the core data structures of APIs like WebGL, OpenGL and DirectX.

1. RENDERING
vertices, indices, uvs
BoosterMedia Lunch & Learn session by David Goemans

2.  All major rasterization techniques use vertices, indices and
texture coordinates to draw
 The GPU can receive and draw these directly as data
 WebGL is based on OpenGL and in theory should allow you to
directly push data to the GPU.
 Canvas is vector based rendering, which doesn't go directly to
the GPU, and so, it's slower.
What?!

3.  All you need to draw vertices are positions in a 3D world
 OpenGL requires buffers ( fancy arrays ) to store them in
 You need to copy your vertex data into an OpenGL buffer
 You also need to bind your buffer to perform operations on it
 Bound buffers actually exist directly on the GPU memory
Vertices

4. UVs & Colors
 Just like with vertices, UVs and colors are just buffers
 UVs are texture coordinates, from 0 to 1 on each axis
 Colors can be specified as an array of color channels for
each vertex. For a triangle: [ r, g, b, a, r, g, b, a, r, g, b, a ]
 Each vertex maps on to either a texture coordinate, a color,
or a combination of both as defined in the shader.

5. Index Buffers
 GPU handles triangles best, but we may want a square.
 Index buffers allow you to reuse vertices.
Instead of adding 6 vertices, we can use an index buffer:
[0, 1, 2, 1, 3, 2] - Keep the direction ( winding ) consistent
 You bind and draw the index buffer.

6.  All drawn buffers are positioned with Matrices
 Matrices can describe the Position, Rotation and Scale of the
object specified by the buffer.
 By default, OpenGL has an identity matrix, which assumes the
center of the 3D world, with a scale of 1 and no rotation.
 Each scene object can have a matrix to describe it's world
position, rotation and scale.
A camera is just a matrix to describe the view
Transforms

7.  Shaders take everything we've covered as input and generate a
color as output.
 There are 2 primary types of shaders, Vertex and Pixel/Fragment
 Vertex shaders normally get a vertex position, and matrices to
transform it. They return a 'screen' position.
 Pixel shaders normally get a screen space vertex and details
such as Color or Texture coordinates. They normally return a color.
 You can write your own to manipulate how the input is used
and what input is given to each.
Shaders

8.  2D image ( sprite ) - That's just a square with a texture
 Text - that's just a collection of sprites, one per character
 3D models - they're just raw data containing all these items
 Easiest to load and understand is .obj
 3D Animations - matrices and timestamps to transform objects.
 Often the objects are bones which just transform a vertex
 Amazing effects from games/demos - mostly shaders & math
That's kewl, but what can i do with this?

9. Demo
Shadertoy
Code
Questions?!
And so it ends...

10.  Learning WebGL
 Definitive reference
 http://learningwebgl.com/blog/?p=28
 Euclidean Space
 For all your math needs ( although site's a bit outdated )
 http://www.euclideanspace.com/
 Obj file format
 Easiest 3D format to load, that most 3D software supports
 http://en.wikipedia.org/wiki/Wavefront_.obj_file
Resources