❤WebGL For More Than Graphics

Seth Samuel (NY ↝ PDX ↝ Elsewhere ↝ PDX ↝ NYC)

@sethfsamuelsethsamuel

Follow along:

sethsamuel.github.io

Disclaimer

What is WebGL?

Shaders

Simple Gradient

gl_FragColor = vec4(s, t, 0, 1);

Edge Finder

if(distance(pixelLeft, pixel) > uThreshold) {
   gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
 } else {
   gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
 }

Particles

gl_Position = vec4(
  sin(math),
  cos(math),
  z,
  1.0
);

Why so powerful?

CPU v GPU

OpenCL

OpenGL:WebGL::OpenCL:?

WebCL: Coming Soon(™)

Compute Shaders: Coming Soon(™)

How could we get data out of WebGL?

PIXELS

rgba(255, 255, 255, 255)

canvas.getImageData

Implementation Challenges

The high cost of serialization

Matrix Muliplication

Matrix Muliplication

float sum = 0.0;
for(int i = 0; i < size; i++) {
  sum = sum + (cLeftRow[i] * cRightCol[i]);
}
gl_FragColor = sum;

Why?

O(n) < O(n3)

n ∈ [0, 5]

n ∈ [0, 10]

n ∈ [0, 100]

n ∈ [0, 1024]

Potential Applications

Hash collision

Bitcoin mining

Media encoding

Machine learning

Signal analysis/processing

Protein folding

Actual Applications

Hash collision

Bitcoin mining

Media encoding

Machine learning!

Signal analysis/processing?

Protein folding?

Implementation Blockers

No bit operations

Unresponsive window

OS level timeouts

What do we need to make it work?

Newer shader glsl version (1.3)

Canvas/WebGL in web worker

Try It out

https://github.com/turbo/js

Summary

Danke schön!

@sethfsamuelsethsamuel