stack.gl



Mikola Lysenko

GitHub/Twitter: @mikolalysenko

http://0fps.net

Demos

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

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


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

Linear algebra

Prefer flat arrays/matrices over "cute" vector classes

Easier to interface with, lower overhead, no peer dependency



Based on gl-matrix by Brandon Jones

Images and voxels

Use ndarray

Flexible and efficient data structure

Large library ecosystem

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

File parsers

Geometry tools

Data visualization

Development and productivity

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!