var startTime = 0.0; var time = 0.0; var unilocation = new Array(6); var cw,ch; var fps = 1000 / 60; onload = function(){ var c = document.getElementById('canvas'); cw = window.innerWidth; ch = window.innerHeight; var size = Math.min(cw,ch); cw = size; ch = size; c.width = cw; c.height = ch; var gl = c.getContext('webgl') || c.getContext('experimental-webgl'); gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); var VERTEXSHADER =` attribute vec3 position; void main(void){ gl_Position = vec4(position,1.0); } `; const FRAGMENTSHADER = ` precision highp float; uniform vec2 resolution; uniform float time; struct Ray{ vec3 origin; vec3 dir; }; struct Info{ vec3 pos; vec3 normal; float type; int steps; int hit; }; #define PI 3.14159265356 #define ITERATION 128 #define farLength 30.0 float hash(vec2 n){ return fract(45361.53631*sin(dot(n,vec2(12.536,68.516)))); } float hash(vec3 n){ return fract(45361.53631*sin(dot(n,vec3(12.536,68.516,96.435)))); } mat2 rot(float a){ float c= cos(a),s =sin(a); return mat2(c,s,-s,c); } vec2 pmod(vec2 p, float n,out float id){ float a = atan(p.y,p.x) + PI/n; float r = 2.0 * PI /n; id = floor(a/r); a = id * r; return rot(-a)*p; } vec3 rep(vec3 p, vec3 s){ return mod(p,s) - s * 0.5; } vec2 opU(vec2 d1, vec2 d2){ return d1.x < d2.x ? d1 : d2; } float sphere(vec3 p, float r){ return length(p) - r; } float box(vec3 p,vec3 s){ vec3 d = abs(p) - s; return length(max(d,0.0)) + min(max(d.x,max(d.y,d.z)),0.0); } float ring(vec3 p, vec3 s, float r){ float a = atan(p.y,p.x); p.xy *= rot(a); p.x -= r; return box(p,s); } vec2 map(vec3 p){ vec3 p0 = p; vec3 p1 = p; vec3 p2 = p; vec3 p3 = p; float id0; p0.xy = pmod(p0.xy,24.0,id0); p0.x -= 3.0; p0.z = mod(p0.z,2.0) - 1.0; float d = box(p0,vec3(0.01,0.2,0.5)); float id1; p1.xy *= rot(PI/24.0); p1.xy = pmod(p1.xy,24.0,id1); p1.x -= 3.0; p1.z -= 0.5; p1.z = mod(p1.z,2.0) - 1.0; float d2 = box(p1,vec3(0.01,0.1,0.5)); d = min(d,d2); vec2 d0 = vec2(d,0.0); vec2 id2; id2.x = floor(p2.z/0.25); p2.z = mod(p2.z,0.25) - 0.25 * 0.5; p2.xy *= rot(time * (hash(vec2(id2.x)) * 2.0 -1.0)* 2.0); p2.xy *=rot(id2.x); p2.xy = pmod(p2.xy,24.0,id2.y); p2.x -= 2.5; float h1 = hash(id2) * 0.9 + 0.1; vec2 d1 = vec2(box(p2,vec3(0.025,PI/16.0 * h1 - 0.005,0.025)),1.0); p3.z -= time * 2.0; p3.z = mod(p3.z,1.0) - 0.5; vec2 r0 = vec2(ring(p3,vec3(0.005,0.01,0.1),2.0),2.0); vec2 o = vec2(1.0); o = opU(d0,d1); o = opU(o,r0); vec3 p4 = p; p4.z -= -0.0 + time * 0.3; vec2 bt = vec2(999.0); p4.yz *= rot(-time * 2.0); for(int i = 0; i < 3; i++){ p4 = abs(p4); p4.xz *= rot(float(i) * PI *0.3); p4.xy -= 0.35; p4.xy *= rot(time); p4.z = abs(p4.z); p4.xz *= rot(p4.y); vec2 b0 = vec2(box(p4,vec3(0.1,0.25,0.1)),3.0); p4.z -= 0.1; vec2 b1 = vec2(box(p4,vec3(0.2,0.2,0.2)),4.0); bt = opU(bt,b0); bt = opU(bt,b1); } bt.x = max(bt.x,-sphere(p + vec3(0.0,0.0,-time * 0.3),0.85)); bt = opU(bt,vec2(sphere(p + vec3(0.0,0.0,-time * 0.3),0.25),7.0)); o = opU(o,bt); vec3 p5 = p; vec3 id3 = floor(p5/vec3(10.0)); p5 = mod(p5,10.0) - 5.0; p5.xz *=rot(hash(id3) * PI * 2.0); p5.xy *=rot(hash(id3 + vec3(61.16)) * PI * 2.0); vec2 b2 = vec2(box(p5,vec3(3.0 * hash(id3))),5.0); o = opU(o,b2); vec3 p6 = p; vec3 lp = vec3(0.0, 2.0,-2.0); lp.xy *= rot(time); lp.xz *= rot(time); lp.z += time * 0.3; float l = sphere(p6 - lp,0.05); o = opU(o,vec2(l,6.0)); o = opU(o,vec2(sphere(p - vec3(0.0,0.0,5.0 + time *0.3),0.1),6.0)); return o; } vec3 normal(vec3 p, float eps){ vec2 d = vec2(eps,0.0); return normalize(vec3(map(p + d.xyy).x - map(p - d.xyy).x, map(p + d.yxy).x - map(p - d.yxy).x, map(p + d.yyx).x - map(p - d.yyx).x)); } float trace(Ray ray, inout Info info){ vec2 t = vec2(0.0); float h = 1.0; vec3 p = ray.origin; for(int i = 0; i < ITERATION;i++){ info.steps = i; t = map(p + h * ray.dir); if(abs(t.x) < 0.001 || h > farLength * 0.9){ info.pos = p + h*ray.dir; info.normal = normal(info.pos,0.001); info.type = t.y; info.hit = 1; return 1.0; } h += t.x; } info.pos = vec3(1e8); info.hit = 0; return 0.0; } vec3 voronoi(vec2 uv){ uv *= 2.0; vec2 i = floor(uv); vec2 f = fract(uv); vec2 res = vec2(8.0); for(int x = -1; x <=1; x++){ for(int y = -1; y <=1; y++){ vec2 n = vec2(x,y); vec2 np = vec2(hash(i + n),hash(i + n + vec2(12.56,64.66))); vec2 p = n + np - f; float d = abs(p.x) + abs(p.y); if(d < res.x){ res.y = res.x; res.x = d; } else if(d < res.y){ res.y = d; } } } float c = res.y - res.x; c = sqrt(c); c = smoothstep(0.4,0.0,c); return vec3(c); } vec3 cubeTex(vec2 uv){ vec3 c = vec3(1.0); vec2 i = floor(uv); vec2 f = fract(uv); float h = hash(i); vec2 o = vec2(0.0); if(f.x < h){ o.x = h; f.x /= h; h = hash(i + vec2(h)); } else{ f.x = (f.x - h)/(1.0 - h); o.x = 1.0 - h; h = hash(i - vec2(h)); } if(f.y < h){ o.y = h; f.y /= h; h = hash(i + vec2(h)); } else{ f.y = (f.y - h)/(1.0 - h); o.y = 1.0 -h; h = hash(i - vec2(h)); } float w = 0.025; float l = step(1.0 - w/o.x,f.x) + step(1.0 -w/o.y,f.y); c = vec3(l); return c; } void lighting(inout vec3 color,vec3 pos, vec3 normal, vec3 dir){ vec3 lp = vec3(0.0, 2.0,-2.0); lp.xy *= rot(time); lp.xz *= rot(time); lp.z += time * 0.3; vec3 ldir = lp - pos; float ndl = clamp(dot(normalize(ldir),normal),0.0,1.0); color *= ndl/length(ldir); vec3 hfv = normalize(normalize(ldir) + dir); float s = pow(clamp(dot(hfv,normal),0.0,1.0),25.0); color += vec3(s); } vec3 render(Ray ray, inout Info info){ float t = trace(ray,info); vec3 color = vec3(0.0); if(t > 0.0){ float type = info.type; vec3 pos = info.pos; vec3 n = info.normal; color = vec3(1.0); if(abs(type) < 0.001){ color = vec3(1.0); } else if(abs(type - 1.0) < 0.001){ color = vec3(0.0); } else if(abs(type -2.0) < 0.001){ color = vec3(0.0); } else if(abs(type - 3.0) < 0.001){ color = vec3(0.0); } else if(abs(type - 4.0) < 0.001){ color = vec3(1.25); } else if(abs(type - 5.0) < 0.001){ color = vec3(0.0); } lighting(color,pos,n,ray.dir); color *= 1.0 - float(info.steps)/float(ITERATION); color = clamp(color,0.0,1.0); if(abs(type) < 0.001){ vec3 bf = abs(n); bf /= dot(bf,vec3(1.0)); pos *= 2.0; vec3 c0 = voronoi(pos.yz) * bf.x + voronoi(pos.xz) * bf.y; c0 *= 0.05 + 0.95 * smoothstep(0.0,0.5,mod(pos.z + time * 2.0,2.0)) * smoothstep(0.75,0.25,mod(pos.z + time * 2.0,2.0)); c0 *= vec3(0.1,0.8,1.0); c0 *= 10.0; color += c0; } else if(abs(type - 4.0) < 0.001){ vec3 n2 = normal(pos,0.015) - n; vec3 c3 = smoothstep(0.3,0.7,length(n2)) * vec3(1.0,0.05,0.05); color += c3; } else if(abs(type - 3.0) < 0.001){ color += vec3(sin(time * 4.0) *0.5 + 0.5,0.0,0.0); } else if(abs(type - 5.0) < 0.001){ vec3 n = info.normal; vec3 bf0 = abs(n); bf0 /= dot(bf0,vec3(1.0)); vec3 c5 = cubeTex(pos.yz)*bf0.x + cubeTex(pos.zx)*bf0.y + cubeTex(pos.xy)*bf0.z; c5 *=10.0; color += c5; } else if(abs(type - 6.0) < 0.001){ color = vec3(1.0); } else if(abs(type - 7.0) < 0.001){ color = vec3(1.5,1.5,1.5); } } vec3 lp = vec3(0.0,0.0,0.0); lp.z += time * 0.3; vec3 d = (lp - ray.origin); float e = length(dot(normalize(d),ray.dir) * length(d) * ray.dir - d); if(length(d) < length(info.pos - ray.origin)){ color += pow(e,-1.0); } return color; } void main(void) { vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); Ray ray; float t = mod(time * 0.5, 4.0); float ti = t; vec3 lkt = vec3(0.0,0.0,0.0); vec3 cup = vec3(0.0,1.0,0.0); if(ti < 1.0){ ray.origin = vec3(0.0,0.0,-5.0 + ti); cup.xy *= rot(time * 0.5); } else if(ti < 2.0){ ray.origin = vec3(4.0,0.0,-ti); lkt.z += -ti; } else if(ti < 3.0){ ray.origin = vec3(0.5 + 0.5 * ti,0.0,0.0); cup = vec3(0.0,0.0,1.0); } else { ray.origin = vec3(-4.0,0.0,3.0 - 2.0 * ti); } vec3 cdir = normalize(lkt - ray.origin); vec3 cs = cross(cdir,normalize(cup)); ray.origin += vec3(0.0,0.0,time * 0.3); ray.dir = normalize(cdir * 1.0 + cup * uv.y + cs * uv.x); Info info; vec3 c = render(ray, info); c = mix(c,vec3(0.45,0.45,0.5),pow(clamp(length(info.pos - ray.origin)/farLength + 0.1,0.0,1.0),0.4)); c = clamp(c,0.0,1.0); gl_FragColor = vec4(c,1.0); } `; const POSTSHADER = ` precision mediump float; uniform float time; uniform vec2 resolution; uniform sampler2D texture; float hash(vec2 uv){ return fract(43631.4617 * sin(dot(uv, vec2(12.536,78.515)))); } vec3 text(vec2 uv){ uv *= 4.0; uv.y += mod(floor(time * 4.0),16.0); uv *= 8.0; vec2 i = floor(uv); float hl = hash(vec2(i.y)) + 0.1; hl *= mod(time*16.0 + i.y,16.0)/16.0; uv = fract(uv); vec2 p = uv; p *= 7.0; vec2 ip = floor(p); float h = hash(i); if(h < 0.25){ h = hash(ip + i); } else if(h > 0.25 && h < 0.5){ h = hash(vec2(abs(ip.x - 3.0),ip.y) + i); } else if(h > 0.5 && h < 0.75){ h = hash(vec2(ip.x,abs(ip.y - 3.0)) + i); } else { h = hash(abs(ip - 3.) + i); } float c = h < 0.25 ? 1.0 : 0.0; if(ip.x == 0. || ip.x == 6. || ip.y == 0. || ip.y == 6.){ c = 0.0; } if(i.x <= 0.0 || i.x >= floor(hl * 16.0)){ c = 0.0; } return vec3(c); } void main(void){ vec2 uv = gl_FragCoord.xy/resolution.x; vec2 uv0 = uv; vec2 p = uv; p *= vec2(16.0,64.0); vec2 ip = floor(p); vec2 fp = fract(p); float h = hash(ip); float hy = hash(vec2(ip.y + floor(time * 16.0))); if(hy < 0.125){ uv.x += (hy - 0.5) * 0.05; } float d = 1.0/resolution.x * 5.0; float texr = texture2D(texture, uv + vec2(-d,0.0)).r; float texg = texture2D(texture, uv + vec2(0.0,0.0)).g; float texb = texture2D(texture, uv + vec2( d,0.0)).b; vec3 tex = vec3(texr,texg,texb); float r = length(uv0 - vec2(0.5)); tex = mix(tex,vec3(0.0),r); tex += text(uv0) * vec3(0.4,0.9,1.0); gl_FragColor = vec4(tex,0.0); } `; var vshader = create_shader(gl.createShader(gl.VERTEX_SHADER),VERTEXSHADER); var fshader = create_shader(gl.createShader(gl.FRAGMENT_SHADER),FRAGMENTSHADER); var f2shader = create_shader(gl.createShader(gl.FRAGMENT_SHADER),POSTSHADER); var prg = create_program(vshader,fshader); var prg2 = create_program(vshader,f2shader); unilocation[0] = gl.getUniformLocation(prg, 'time'); unilocation[1] = gl.getUniformLocation(prg, 'resolution'); unilocation[2] = gl.getUniformLocation(prg, 'texture'); unilocation[3] = gl.getUniformLocation(prg2, 'time'); unilocation[4] = gl.getUniformLocation(prg2, 'resolution'); unilocation[5] = gl.getUniformLocation(prg2, 'texture'); var attlocation = new Array(2); var attStride = new Array(2); attlocation[0] = gl.getAttribLocation(prg,'position'); attStride[0] = 3; attlocation[1] = gl.getAttribLocation(prg2,'position'); attStride[1] = 3; var vp = [ -1.0,-1.0,0.0, -1.0,1.0,0.0, 1.0,1.0,0.0, -1.0,-1.0,0.0, 1.0,-1.0,0.0, 1.0,1.0,0.0 ]; startTime = new Date().getTime(); var fw,fh; fw = 512; fh = 512; var fbuffer = create_buffer(fw,fh); var pvbo = create_vbo(vp); (function(){ gl.bindFramebuffer(gl.FRAMEBUFFER, fbuffer.f); gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.bindBuffer(gl.ARRAY_BUFFER, pvbo); gl.enableVertexAttribArray(attlocation[0]); gl.vertexAttribPointer(attlocation[0], attStride[0], gl.FLOAT, false, 0, 0); time = (new Date().getTime() - startTime) * 0.001; gl.useProgram(prg); gl.uniform1f(unilocation[0], time); gl.uniform2fv(unilocation[1], [fw,fh]); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.bindFramebuffer(gl.FRAMEBUFFER,null); gl.useProgram(prg2); gl.clearColor(0.0,0.0,0.0,1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.bindTexture(gl.TEXTURE_2D, fbuffer.t); gl.bindBuffer(gl.ARRAY_BUFFER, pvbo); gl.enableVertexAttribArray(attlocation[1]); gl.vertexAttribPointer(attlocation[1], attStride[1], gl.FLOAT, false, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(unilocation[3],time); gl.uniform2fv(unilocation[4], [cw,ch]); gl.uniform1i(unilocation[5], 0); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.flush(); setTimeout(arguments.callee,fps); })(); function render(){ time = (new Date().getTime() - startTime) * 0.001; gl.clear(gl.COLOR_BUFFER_BIT); gl.uniform1f(unilocation[0],time); gl.uniform2fv(unilocation[1], [cw,ch]); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.flush(); setTimeout(render,fps); } function create_buffer(width, height){ var framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); var depthbuffer = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depthbuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16 ,width, height); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthbuffer); var fTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, fTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, fTexture, 0); gl.bindTexture(gl.TEXTURE_2D, null); gl.bindRenderbuffer(gl.RENDERBUFFER, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return {f : framebuffer, d : depthbuffer, t : fTexture}; } function create_shader(shader,source){ gl.shaderSource(shader, source); gl.compileShader(shader); if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){ return shader; } else { alert(gl.getShaderInfoLog(shader)); } } function create_program(vs, fs){ var program = gl.createProgram(); gl.attachShader(program,vs); gl.attachShader(program,fs); gl.linkProgram(program); if(gl.getProgramParameter(program, gl.LINK_STATUS)){ return program; } else { alert(gl.getProgramInfoLog(program)); } } function create_vbo(data){ var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data),gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; } };

Cause