GLSL Viewer

gistfile1.html

<p><script>(function(){
/*
	GLSL standalone viewer
	sample from -> http://glsl.heroku.com/e#15472.1
*/
var shader="precision highp float;"
+"uniform float time;uniform vec2 resolution;float M(vec3 p){float r=cos(sin(p.x)"
+")+cos(p.y)+cos(sin(p.z));p*=25.;return r-=cos(cos(p.x)+cos(p.y)+cos(p.z))*.12;}"
+"void main(){float k=time,q=k,f=exp(1.-fract(k+sin(k))),t=0.,dt=5.;vec3 p=vec3(0"
+",-k*2.-f*f,0),d=normalize(vec3(-1.+2.*(gl_FragCoord.xy/resolution),1.));d/=64.;"
+"d.xy=vec2(d.x*cos(k)-d.y*sin(k),d.x*sin(k)+d.y*cos(k));if(mod(k,4.)<2.)d=-d.yzx"
+";for(int i=0;i<150;i++){if(M(t*d+p)<.9-abs(.5*sin(q*.5))){t-=(dt+.1);dt*=.1;}"
+"t+=dt;}vec3 c=d+vec3(2,1,3.*sin(q))*M(t*d+p+.7);gl_FragColor=vec4(f*f*c*.1,4);}"

var c = document.createElement("canvas");
document.body.appendChild(c);
var s = c.style;
s.cursor = "none";
s.position = "fixed";
s.left = s.top = 0;
var g = c.getContext("webgl")||c.getContext("experimental-webgl");
if (!g){ alert("This demo requires WebGL"); return;}
with(g){
	var fs= createShader(FRAGMENT_SHADER);
	var vs= createShader(VERTEX_SHADER);
	shaderSource(vs, "attribute vec4 p;void main(){gl_Position=p;}");
	shaderSource(fs, shader);

	compileShader(vs);
	compileShader(fs);
	pr = createProgram();
	attachShader(pr, vs);
	attachShader(pr, fs);
	linkProgram(pr);
	bindBuffer(ARRAY_BUFFER, createBuffer());
	bufferData(ARRAY_BUFFER, new Float32Array([1,1,1,-3,-3,1]), STATIC_DRAW);

	var stm = new Date().getTime();
	var mW,mH;
	function draw(){with(g){
		var w = window.innerWidth,
		    h = window.innerHeight;
		if (w != mW || h != mH) {
			mW = c.width = w;
			mH = c.height = h;
			g.viewport(0, 0, w, h);
		}
		useProgram(pr);
		uniform2fv(getUniformLocation(pr,"resolution"),[mW,mH]);
		uniform1f(getUniformLocation(pr,"time"),(new Date().getTime() - stm)/1000.0);
		enableVertexAttribArray(0);
		vertexAttribPointer(0, 2, FLOAT, false, 0, 0);
		drawArrays(TRIANGLES, 0, 3);
	}}
setInterval(draw,16);

}})()</script>