Through the looking glass - programming on the GPU using WebGL

Overview

• WebGL overview
• Building Tetris
• Quirks & Demos

Slides: felixpalmer.github.io/tetris.gl/presentation.html

WebGL basics

• Ask canvas for a WebGL context
• Build quad to render
• Write shaders: vertex & fragment
• Compile into program (in browser)
• Pass data into program using uniforms and attributes
• Output is rendered into canvas element

Getting a WebGL context

Define a quad

Vertex shader

Fragment shader

Pipeline

• 3 types of variables to pass around data:
1. uniform global information
2. varying flow from vertex to fragment shader, interpolated
3. attribute per vertex information

WebGL basics - recap

• Ask canvas for a WebGL context
• Build quad to render
• Write shaders: vertex & fragment
• Compile into program (in browser)
• Pass data into program using uniforms and attributes
• Output is rendered into canvas element

All interesting program state kept on CPU

JavaScript controls all state, WebGL just doing display

Render to Texture

• I lied...
• ...you don't have to render directly to the screen
• Enables setting up of "pipeline"

Render to Texture

Why stop with a pipeline when we can have feedback loop?

Gives us state on the GPU!

Shaders

• Each stage will take as input texture
• ...and uniforms from JavaScript
• Each stage will output single texture
• All state in textures

Building a (very) simple Tetris game

• Black pixels represent empty squares
• Green pixels settled squares
• Red pixels moving squares

Process as pipeline

• Split into discrete processing steps
• Orchestrate flow from JavaScript

Drawing the ground

Spawning blocks

Spawning blocks at position

Shifting blocks along

Hit detection

Oddities: GPUs != CPUs

• GPUs are massively parallel
• Hundreds of cores process hundreds of pixels at once
• What used to be obvious, no longer holds

Oddities: Branching

Oddities: Branching

Oddities: Lying loops

Oddities: Lying loops

Some examples

• Birds: threejs.org/examples/webgl_gpgpu_birds.html
• Fluid: haxiomic.github.io/GPU-Fluid-Experiments/html5