webgl experiment

index.html

<canvas id=a>
<script>
g=a.getContext("webgl");



/*

// Coral reef
// -----------

P = g.createProgram()
g.shaderSource(A=g.createShader(35633),"attribute vec2 P;void main(){gl_Position=vec4(P,0,1);}")
g.compileShader(A);
g.attachShader(P,A)
g.shaderSource(A=g.createShader(35632),"precision mediump float;uniform float T;void main(){ float t=0.;for( float i=0.;i<32.;i++){vec3 p=vec3(0,1.3,0)+vec3(gl_FragCoord.xy/200.-1.,-2).xzy*t; float c=1.; float a=ceil(T*.3+gl_FragCoord.x/2e3)+T*.1;p.zy*=mat2(cos(a),-sin(a),sin(a),cos(a));a=a/2.;p.xy*=mat2(cos(a),-sin(a),sin(a),cos(a));a=a/2.;p.zx*=mat2(cos(a),-sin(a),sin(a),cos(a));vec3 z=p;for( float i=0.;i<9.;i++){if(dot(z,z)>4.){t+=log(length(z))*length(z)/c/2./2.;break;} float a=acos(z.z/length(z))*5.; float b=atan(z.y,z.x)*5.;c=pow(length(z),5.)*5.*c/length(z)+1.;z=pow(length(z),5.)*vec3(sin(a)*cos(b),sin(a)*sin(b),cos(a))+p;}gl_FragColor=vec4(1.-i/32.-t+p/2.,1);if(log(length(z))*length(z)/c/2.<1e-4||t>1.)break;}}")
g.compileShader(A);
g.attachShader(P,A)
g.linkProgram(P);
g.useProgram(P)
g.bindBuffer(A=34962,
g.createBuffer())
g.bufferData(A,new Int8Array([-3,1,1,-3,1,1]),35044)
a.width=a.height=400;
g.enableVertexAttribArray(z=0)
g.vertexAttribPointer(0,2,5120,0,0,0)
g.uniform2f(g.getUniformLocation(P,"M"),0,0);
setInterval('g.uniform1f(g.getUniformLocation(P,"T"),A+=.01);g.drawArrays(6,0,3)',16);

// ==== Mouse and audio stuff: can be ignored ===
f = new AudioContext();
w = f.createScriptProcessor(4096,1,1)
w.connect(f.destination)
if(true)w.onaudioprocess=function(e){
  z++
  q=e.outputBuffer.getChannelData(0)
  for(i=4096;i--;){
  q[i]/=1.5
  for(j=7;--j;)                             
      q[i]+=Math.sin(i/326*(5/2+(48<z%96))*(j+j*(1>z%j)))*Math.sin(z/j)/j/(3+((i>>(z%24))&1)/5)
  }
}
// ===============================================
*/



// Romanesco 2.0
// --------------


P=g.createProgram();
g.shaderSource(A=g.createShader(35633),"attribute vec2 P;void main(){gl_Position=vec4(P,0,1);}");
g.compileShader(A);
g.attachShader(P,A);
g.shaderSource(A=g.createShader(35632),"precision mediump float;uniform vec2 R,M;uniform float T; float t=5e-3;void main(){for( float i=0.;i<64.;i++){vec3 p=vec3((2.*gl_FragCoord.xy-R)/R.yy,t-1.),b=vec3(.707,.707,0); float a=T;p.xz*=mat2(cos(a),-sin(a),sin(a),cos(a));for( float i=0.;i<20.;i++){ a=(M/R*6.).x;p.xz*=mat2(cos(a),-sin(a),sin(a),cos(a)); a=(M/R*6.).y;p.xy*=mat2(cos(a),-sin(a),sin(a),cos(a));p-=min(0.,dot(p,b))*b*2.;b=b.zxx;p-=min(0.,dot(p,b))*b*2.;b=b.zxz;p-=min(0.,dot(p,b))*b*2.;b=b.xxy;p=p*1.5-.25;}t+=length(p)/3325.;if(length(p)/3325.<5e-3||t>2.){b=vec3(1);p*=.5;gl_FragColor=vec4(p/length(p)*(t<2.?5./i:i/64.),dot(p,b));break;}}}");
g.compileShader(A);
g.attachShader(P,A);
g.linkProgram(P);
g.useProgram(P);
g.bindBuffer(A=34962,g.createBuffer());
g.bufferData(A,new Int8Array([-3,1,1,-3,1,1]),35044);
g.enableVertexAttribArray(0);
g.vertexAttribPointer(b=0,2,5120,0,0,0);
g.uniform2f(g.getUniformLocation(P,"R"),a.width*=.8,a.height*=.8);
g.uniform2f(g.getUniformLocation(P,"M"),0,0);
(s=function(e){g.uniform1f(g.getUniformLocation(P,"T"),A+=.01);g.drawArrays(6,0,3);requestAnimationFrame(s)})();

// ==== Mouse and audio stuff: can be ignored ===
onmousemove=function(e){g.uniform2f(g.getUniformLocation(P,"M"),b=e.pageX,e.pageY)};
f = new AudioContext();
a = f.createScriptProcessor(8192,1,1);
a.connect(f.destination);
a.onaudioprocess = function(e)
{
  q = e.outputBuffer.getChannelData(0);
  
  for(i=8192;i--;)
  {
    q[i] *= .8
    for(j=7;--j;) q[i] += Math.sin(i*(A*50%j)*Math.floor(b/150)*j/326) * Math.sin(i/2606) * Math.sin(A)/j/4;
  }
}
// ===============================================









/*

// Shadertoy example
// ------------------


// the goal is to make this code work with the shortest possible context.

// Shadertoy's shader inputs:

*/

/*

uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iGlobalTime;           // shader playback time (in seconds)
uniform float     iTimeDelta;            // render time (in seconds)
uniform int       iFrame;                // shader playback frame
uniform float     iChannelTime[4];       // channel playback time (in seconds)
uniform vec3      iChannelResolution[4]; // channel resolution (in pixels)
uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
uniform samplerXX iChannel0..3;          // input channel. XX = 2D/Cube
uniform vec4      iDate;                 // (year, month, day, time in seconds)
uniform float     iSampleRate;           // sound sample rate (i.e., 44100)

*/


/* Shadertoy's source code about these inputs */

/*

var times = [ 0.0, 0.0, 0.0, 0.0 ];

var dates = [ d.getFullYear(), // the year (four digits)
              d.getMonth(),	   // the month (from 0-11)
              d.getDate(),     // the day of the month (from 1-31)
              d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()  + d.getMilliseconds()/1000.0 ];

var mouse = [  mousePosX, mousePosY, mouseOriX, mouseOriY ];

var resos = [ 0.0,0.0,0.0, 0.0,0.0,0.0, 0.0,0.0,0.0, 0.0,0.0,0.0 ];

//------------------------

var texID = [ null, null, null, null];
    
// (...)

this.mRenderer.AttachShader(prog);

this.mRenderer.SetShaderConstant1F(  "iGlobalTime", time);
this.mRenderer.SetShaderConstant3F(  "iResolution", xres, yres, 1.0);
this.mRenderer.SetShaderConstant4FV( "iMouse", mouse);
this.mRenderer.SetShaderConstant1FV( "iChannelTime", times );              // OBSOLETE
this.mRenderer.SetShaderConstant4FV( "iDate", dates );
this.mRenderer.SetShaderConstant3FV( "iChannelResolution", resos );        // OBSOLETE
this.mRenderer.SetShaderConstant1F(  "iSampleRate", this.mSampleRate);
this.mRenderer.SetShaderTextureUnit( "iChannel0", 0 );
this.mRenderer.SetShaderTextureUnit( "iChannel1", 1 );
this.mRenderer.SetShaderTextureUnit( "iChannel2", 2 );
this.mRenderer.SetShaderTextureUnit( "iChannel3", 3 );
this.mRenderer.SetShaderConstant1I(  "iFrame", this.mFrame );
this.mRenderer.SetShaderConstant1F(  "iTimeDelta", dtime);
this.mRenderer.SetShaderConstant1F(  "iFrameRate", fps );

this.mRenderer.SetShaderConstant1F(  "iChannel[0].time",       times[0] );
this.mRenderer.SetShaderConstant1F(  "iChannel[1].time",       times[1] );
this.mRenderer.SetShaderConstant1F(  "iChannel[2].time",       times[2] );
this.mRenderer.SetShaderConstant1F(  "iChannel[3].time",       times[3] );
this.mRenderer.SetShaderConstant3F(  "iChannel[0].resolution", resos[0], resos[ 1], resos[ 2] );
this.mRenderer.SetShaderConstant3F(  "iChannel[1].resolution", resos[3], resos[ 4], resos[ 5] );
this.mRenderer.SetShaderConstant3F(  "iChannel[2].resolution", resos[6], resos[ 7], resos[ 8] );
this.mRenderer.SetShaderConstant3F(  "iChannel[3].resolution", resos[9], resos[10], resos[11] );
    
*/

// Shader code:

/*

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = fragCoord.xy / iResolution.xy;
	fragColor = vec4(uv,0.5+0.5*sin(iGlobalTime),1.0);
}

*/

</script>