Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created February 18, 2013 18:18
Show Gist options
  • Save enjalot/4979406 to your computer and use it in GitHub Desktop.
Save enjalot/4979406 to your computer and use it in GitHub Desktop.
glsl.js Hello World
{"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"}
//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();
#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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment