GLSL.io

the ultimate transition language

by @greweb

  • WebGL as a 2D API
  • Functional rendering paradigm
  • Esoteric experiments
  • stack.gl
  • GLSL Transitions
  • GLSL.io

WebGL as a 2D API

WebGL = draw points, lines or triangles.

an extra work is required to make 3D.


"WebGL is a 2D API" – greggman @ html5rocks.com
"2D and 3D are just two possible usage patterns" – hacks.mozilla.org

Rendering pipeline

Credits: hacks.mozilla.org

Classical boilerplate for 2D

We can just make 2 triangles filling the whole viewport

then with a simple Vertex shader...


attribute vec2 position;
void main () {
  gl_Position = vec4(2.0*position-1.0, 0.0, 1.0);
}

...we can implement WebGL hello world!


uniform vec2 resolution;
void main () {
  vec2 pos = gl_FragCoord.xy / resolution;
  gl_FragColor = vec4(pos, 0.5, 1.0);
}

Functional rendering

paradigm

ƒ: Point(x,y) => Color(r,g,b,a)

Very different from classical graphics APIs

| "Procedural" style | "Functional" style | |---------------- |:------------:| | set of drawing primitives | `ƒ: Point => Color` | | **bitmap** (generally) | **vectorial** (by design) | | *"draw here"* | *"am I here?"* | | what? / where? | how? | | simple, imperative | math, functional | | restricted to primitives | powerful, composable | | generally faster | easily scalable on GPU |

Esoteric experiments

WaveGL

https://github.com/gre/wavegl

Hackday at Zengularity

IBEX

a js13k game made with pure WebGL

The world simulated with Cellular Automata in a logic shader.

All game graphics and UI rendered in another render shader.

More infos on greweb.me

stack.gl

micro libraries for WebGL

stackgl is an open software ecosystem for WebGL, built on top of browserify and npm.
It is easy to use parts of stackgl à la carte, and because it is written from the bottom up, you can always drill down a layer.

gl-shader

More JavaScript-ish API:

infer uniforms, bind them with JavaScript setters, DRY,...

glslify

module system for GLSL
### Code example ```javascript var shell = require('gl-now')(); var createShader = require("gl-shader"); var createTexture = require("gl-texture2d"); var drawTriangle = require("a-big-triangle"); var baboon = require("baboon-image"); var glslify = require('glslify'); var createShader = glslify({ vertex: './vertex.glsl', fragment: './fragment.glsl' }); var shader, texture; shell.on("gl-init", function() { var gl = shell.gl; texture = createTexture(gl, baboon); shader = createShader(gl); shader.attributes.position.location = 0; }); shell.on("gl-render", function() { shader.bind(); shader.uniforms.texture = texture.bind(); drawTriangle(shell.gl); }); ```

stack.gl

GLSL Transitions

iPhoto like slideshow transitions using WebGL – @devongovett
WebGL/GLSL transitions in your browser. Some of these blow my mind – @zeh
The last place you'd expect to see WebGL – @creativejs

Like CSS Transitions but in WebGL

## The API ```javascript var T = GlslTransition(canvas); var swap = T(swapFragmentCode); swap({ from: fromImage, to: toImage }, 1000, BezierEasing(0.1, 0.5, 0.4, 0.9)) .then(...); ``` [more infos](https://github.com/glslio/glsl-transition)
## GLSL Transition: fade ```glsl uniform sampler2D from, to; uniform float progress; uniform vec2 resolution; void main() { vec2 p = gl_FragCoord.xy / resolution.xy; gl_FragColor = mix(texture2D(from, p), texture2D(to, p), progress); } ``` [Open in the editor](https://glsl.io/transition/new)

Some examples

Some NPM modules

  • glsl-transition
  • glsl-transitions
  • bezier-easing
  • kenburns
  • diaporama (WIP)

GLSL.io

platform for GLSL Transitions

Currently 53 transitions made by 18 contributors.

GLSL.io

Future of GLSL.io?

GLSL.io will remain

  • Free Software (open-source, libre)
  • community-driven (people create/judge content)
  • decentralized (deploy your own)
## Goals - Embrace integration in existing Video Software - [@rectalogic started a shad0r](https://github.com/rectalogic/shad0r) + `melt` PoC - `ffmpeg` - Graphical Video Software integration! - Improve collaboration between creators - Encourage more creation with awards?

The source code

Thanks

Questions?

@greweb