glsl.js Hello World

_.md

[ Launch: Tributary inlet ] 4979406 by enjalot

config.json

{"description":"glsl.js Hello World","endpoint":"","display":"div","public":true,"require":[{"name":"glsl.js","url":"https://raw.github.com/gre/glsl.js/master/glsl.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"shader.frag":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/Z7G4Uqm.png"}

inlet.js

//https://github.com/gre/glsl.js
//http://blog.greweb.fr/2013/02/glsl-js-a-javascript-glsl-library-dry-efficient/

var frag = tributary.getCodeEditor("shader.frag").getValue();

var display = d3.select("#display");

display.append("canvas")
.attr({
  id: "viewport",
  width: tributary.sw,
  height: tributary.sh
});

var glsl = Glsl({
    canvas: document.getElementById("viewport"),
    fragment: frag,
    variables: {
      time: 0 // The time in ms
    },
    update: function (time, delta) {
      this.set("time", time);
    }
  })
//.start();

shader.frag

#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 resolution;
void main (void) {
  vec2 p = ( gl_FragCoord.xy / resolution.xy );
  gl_FragColor = vec4(p.x, p.y, (1.0+cos(time/200.0))/3.36, 1.0);
}