Skip to content

Instantly share code, notes, and snippets.

@xem xem/index.html
Last active Apr 22, 2016

Embed
What would you like to do?
webgl experiment
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.