• A browser feature that lets you execute code on the GPU
• The coolest thing to happen to the web since the GIF

• CPUs execute in serial, each instruction one after the other
• GPUs execute in parallel, multitudes of instructions executed simultaneously

• Modern GPUs can offer ~5 trillion FLOPS!
• Modern CPUs can offer ~100 billion FLOPS
• GPUs are very well suited to certain types of problems but completely useless at others

• If your problem can be divided up into many independent but similar tasks, it'll run faster on a GPU
• For example
  • Tracing the path of light as it bounces around a scene
  • Fluid physics simulation
  • Video processing

• WebGL was designed for handling graphics but it can be coerced into general purpose computation
• The upcoming WebCL, however, was designed for general purpose computation

• Take a

  <canvas>

  element and grab a WebGL context

  var gl = canvas.getContext("webgl");

• Compile and upload your GPU code

  //gradient pixel shader glsl
  varying vec2 uv;
  void main(){
  	gl_FragColor = vec4(uv.x, uv.y, 0.0, 1.0);
  }

  var pixelShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(pixelShader, pixelShaderSrc);
  gl.compileShader(pixelShader);
  
  var program = gl.createProgram();
  gl.attachShader(program, geometryShader);
  gl.attachShader(program, pixelShader);
  gl.linkProgram(program);

• Upload geometry
  

  var vertices = [
  	 0.0,  1.0,
  	-1.0, -1.0,
  	 1.0, -1.0
  ];
  
  vertices.elementsPerVertex = 2;
  
  var vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  
  //tell the GPU about the format of the vertices
  var attribPositionLoc = gl.getAttribLocation(program, "position");
  gl.enableVertexAttribArray(attribPositionLoc);
  gl.vertexAttribPointer(attribPositionLoc, vertices.elementsPerVertex, gl.FLOAT, false, 0, 0);

• Draw!

  gl.drawArrays(gl.TRIANGLES, 0, vertices.length / vertices.elementsPerVertex);

uniform float time;
uniform vec2 resolution;
varying vec2 uv;
void main(){
	vec3 col = vec3(0);
        float r = distance(uv, vec2(.5));
	col.r = pow(sin(time + r), 4.);
	col.g = cos(time + uv.y + r)*.5 + .5;
	col.b = sin(time * 2.0)*.5 + .5;
	gl_FragColor = vec4(col, 1.0);
}

• We can transform the shape in the geometry shader
• Rotation $$\begin{bmatrix} x^\prime\\y^\prime \end{bmatrix} = \begin{bmatrix} cos(\theta) & -sin(\theta) \\ sin(\theta) & cos(\theta) \end{bmatrix} \begin{bmatrix} x\\y \end{bmatrix}$$
• Scale $$\begin{bmatrix} x^\prime\\y^\prime \end{bmatrix} = S \begin{bmatrix} x\\y \end{bmatrix}$$

attribute vec2 position;
uniform float time;
uniform vec2 resolution;
varying vec2 uv;
void main(){
	vec2 p = position.xy;
	uv = (p + vec2(1.0))*.5; //converts from clip space to graph space
	mat2 transformationMatrix = mat2(
		cos(time), -sin(time),
		sin(time), cos(time)
	);
	float invAspect = resolution.y / resolution.x;
	vec2 scale = vec2(invAspect, 1.0) * .7;
	p = transformationMatrix * p * scale;
	gl_Position = vec4(p, 0.0, 1.0);
}

With WebGL you can

• Draw triangles
• Execute programs to color the pixels within the triangles
• Execute programs to alter the geometry of the triangles

• Camera Projection Matrix
  $$\mathbf{P} = \begin{bmatrix} \frac{1}{\tan(\frac{1}{2} F_x)} & 0 & 0 & 0 \\ 0 & \frac{1}{\tan(\frac{1}{2} F_y)} & 0 & 0 \\ 0 & 0 & \frac{Z_f + Z_n}{Z_n - Z_f} & \frac{2 Z_f Z_n}{Z_n - Z_f} \\ 0 & 0 & -1 & 0 \end{bmatrix}$$
  $F = \text{field of view}$
  $Z_f = \text{maximum view distance}$
  $Z_n = \text{minimum view distance}$

• Rotate Around Y
  $$\begin{bmatrix}x^\prime\\y^\prime\\z^\prime\end{bmatrix} = \begin{bmatrix} \cos(\theta) & 0 & sin(\theta) \\ 0 & 1 & 0 \\ -sin(\theta) & 0 & \cos(\theta) \end{bmatrix} \begin{bmatrix}x\\y\\z\end{bmatrix}$$
• To go from 3D coordinates to 2D screen coordinates
  $$\mathbf{P} \mathbf{R}_y \vec{X}$$

• WebGL recently became supported in all major browser
• Access to a parallel processor expands the limit of what's possible in a web application
• Better to use libraries rather than raw WebGL