The document discusses various aspects of rendering techniques in graphics, focusing on the use of vertices, indices, and texture coordinates. It explains how WebGL, based on OpenGL, allows for direct data pushing to the GPU and contrasts rasterization with vector-based rendering. Additionally, it covers the role of shaders in processing data, the organization of 3D models, and offers resources for further learning.

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