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