What is WebGL?

An API for drawing triangles

(Nearly) 1:1 port of OpenGL ES 2.0

Native graphics performance, no plugins

WebGL Support

• Firefox
• Chrome
• IE 11+
• Safari
• Opera
• iOS 8+
• Android

Graphics Pipeline

Shaders

Programs which run on GPU

Written in GLSL

Come in two types: Vertex and fragment

Vertex shaders

Input:

• Uniforms (global)
• Vertex attributes (per vertex)

Output:

• Vertex positions
• Varying variables

Fragment shaders

Input:

• Uniforms
• Varying variables

Output:

• Fragment colors

Learning WebGL

nodeschool.io

shader-school

webgl-workshop

More resources

• webglfundamentals.org
• WebGL specification

WebGL Frameworks

• THREE.js
• Cesium
• Babylon.js
• ...many others

stack.gl

"Do one thing well"

Many small reusable WebGL modules

Uses npm/browserify

Bottom-up instead of top-down

Small modules => well-defined problems; smaller bundles; fewer bugs; simpler, better solutions

WebGL abstractions

• webgl-context
• webglew
• gl-shader
• gl-buffer
• gl-vao
• gl-texture2d
• gl-fbo

Small abstractions over WebGL

Reduce boilerplate, smooth rough edges

Standard interface: .bind()/.update()/.dispose()

glslify

Modules for GLSL/ESSL

Lets you write versioned, reusable GLSL

Can be published/shared on npm

glslify example

//diffuse.glsl
float diffuseLight(vec3 lightDir, vec3 normal) {
	return max(0.0, dot(lightDir, normal));
}

#pragma glslify: export(diffuseLight)

//fragment.glsl
precision mediump float;
uniform vec3 lightDirection, surfaceColor;
varying vec3 normal;

#pragma glslify: diffuse = require('./diffuse.glsl')

void main() {
	float intensity = diffuse(lightDir, normal);
	gl_FragColor = vec4(intensity * color, 1.0);
}

Some glslify modules

• glsl-specular-blinn-phong
• glsl-specular-cook-torrance
• glsl-diffuse-oren-nayar
• glsl-dither
• glsl-fog
• glsl-noise
• glsl-read-float
• glsl-easings

Linear algebra

Prefer flat arrays/matrices over "cute" vector classes

Easier to interface with, lower overhead, no peer dependency

• gl-vec2/3/4
• gl-mat2/3/4
• ...and lots more on npm

Based on gl-matrix by Brandon Jones

Images and voxels

Use ndarray

Flexible and efficient data structure

Large library ecosystem

• get-pixels
• save-pixels
• cwise
• ...many, many more

Meshes and geometry

Store geometry, not drawing commands/scene information

I am looking at *you* Collada/VRML!

Prefer simplicial complexes:

• Cell (simplex): ordered tuple of vertex ids
• Attributes: per-vertex properties (position, normal, etc.)

Example: Tetrahedra

{
 cells:
   [ [ 0, 1, 2 ],
     [ 0, 2, 3 ],
     [ 0, 3, 1 ],
     [ 1, 3, 2 ] ],
  positions:
   [ [ 1, 1, 1 ],
     [ 1, -1, -1 ],
     [ -1, 1, -1 ],
     [ -1, -1, 1 ] ]
}

Test data

• bunny
• teapot
• dragon

File parsers

• PLY
• JSON
• OBJ
• ...lots more

Geometry tools

• conway-hart
• vectorize-text
• surface-nets
• convex-hull
• voxelize
• ...lots more

Data visualization

• gl-axes
• gl-scatter-plot
• gl-surface-plot
• gl-line-plot

Development and productivity

• beefy
• glslify-live
• glslify-optimize
• glsl-testify
• glsl-editor

Future

Better debugging and testing tools

Find abstractions for multipass effects

More stuff! Lighting, geometry, etc.

Contributors

• Hugh S. Kennedy: @hughsk
• Chris Dickinson: @isntivacant
• Matt DesLauriers: @mattdesl
• ...and many others

IRC: #stackgl on freenode

Twitter/GitHub: @stackgl

Thanks for your time!