GLSL.io – the ultimate transition language – by @greweb

View Github Repository Open presentation in a new window

gre

See all presentation from gre

GLSL.io – the ultimate transition language – by @greweb

0 0

webglparis2014

slides of glsl.io for webglparis2014

On Github gre / webglparis2014

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

pipeline de rendu du webgl. architecture parallele qui convient au GPU. fragment shader et vertex shader sont 2 languages dédiés qui compile dans le GPU, et qui ne nécessite pas d'accès CPU/GPU (très couteux). on peut envoyer des données à travers les vertex (coord triangles) et les uniforms (paramètres d'entrée des shaders).

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);
}
Expliquer comment ça marche: gl_FragCoord, resolution, pos, gl_FragColor

Functional rendering

paradigm

on exprime la couleur de notre pixel en fonction de sa position. C'est un paradigme que j'aime appeler le Rendu Fonctionnel. car c'est simplement une fonction d'une Point vers une Color.

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

Very different from classical graphics APIs

Penser le rendu complètement différement des APIs classiques (Canvas2D / java Graphics2D) qui sont très impérative. + fonctionnel et + mathématique.
| "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. WebGL: bas niveau. API très proche de l'API OpenGL C, possibilités de base limités, à vous de tout construire. Donc: utiliser des libs. pour ne pas start from scratch, Ne pas réinventer la roue. stackgl: communauté pour créer un écosystème de libs WebGL. stack-gl: approche bottom up, prenez ce que vous voulez. Si vous avez l'habitude de faire du WebGL pure sans lib, vous aimerez l'initiative, vous pouvez choisir le niveau d'abstraction.

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 Open GLSL.io and show home.

Live coding?

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