const shader1 = ` #version 300 es precision mediump float; uniform vec2 resolution; uniform vec3 ro; uniform float time; uniform float num; float id = 0.0; layout (location = 0) out vec4 fragColor0; layout (location = 1) out vec4 fragColor1; layout (location = 2) out vec4 fragColor2; #define PI acos(-1.0) #define TAU PI*2.0 #define rotate(a) mat2(cos(a),sin(a),-sin(a),cos(a)) mat4 move(vec3 p) { return mat4(1,0,0,0,0,1,0,0,0,0,1,0,p,1); } mat4 rotX(float a) { float s=sin(a),c=cos(a); return mat4(1,0,0,0,0,c,s,0,0,-s,c,0,0,0,0,1); } mat4 rotY(float a) { float s=sin(a),c=cos(a); return mat4(c,0,s,0,0,1,0,0,-s,0,c,0,0,0,0,1); } mat4 rotZ(float a) { float s=sin(a),c=cos(a); return mat4(c,s,0,0,-s,c,0,0,0,0,1,0,0,0,0,1); } mat4 rot(vec3 axis, float t) { vec3 a = normalize(axis); float s=sin(t),c=cos(t),r=1.0-c; return mat4( a.x*a.x*r+c,a.y*a.x*r+a.z*s,a.z*a.x*r-a.y*s,0, a.x*a.y*r-a.z*s,a.y*a.y*r+c,a.z*a.y*r+a.x*s,0, a.x*a.z*r+a.y*s,a.y*a.z*r-a.x*s,a.z*a.z*r+c,0, 0,0,0,1); } float hash(float n) { return fract(sin(n)*7777.0); } vec3 randVec(float n) { vec3 p=vec3(1,0,0); p=(rotZ(asin(hash(n+=215.3)*2.0-1.0))*vec4(p,1)).xyz; p=(rotY((hash(n)*2.0-1.0)*PI)*vec4(p,1)).xyz; return p; } vec3 randCurve(float t,float n) { vec3 p = vec3(0); for (int i=0; i<6; i++) { p += randVec(n+=165.0)*sin((t*=0.8)+sin(t*1.6*hash(n))*0.5); } return p; } vec3 hsv(float h, float s, float v){ vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w)); return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s); } float sdRoundBox( vec3 p, vec3 b, float r ) { vec3 q = abs(p) - b; return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0) - r; } float sdTorus( vec3 p, vec2 t ) { vec2 q = vec2(length(p.xz)-t.x,p.y); return length(q)-t.y; } float map(vec3 p) { mat4 m=mat4(1); m*=rot(randVec(id*53.44+563.21),time*1.5+hash(id*896.23+45678.2)*10.0); m*=move(randCurve(time*1.5,id*89.23+123.7)); m*=move((vec3( hash(id*2.236+455.0), hash(id*5.236+42255.0), hash(id*55.236+42255.0) )*2.0-1.0)*(1.0/hash(id*77.23+852.2))*2.0); m*=rotZ(time*0.2); m*=rotX(time*0.3); p=(m*vec4(p,1)).xyz; return (mod(id,2.0)<1.0)?sdRoundBox(p,vec3(0.3),0.1):sdTorus(p,vec2(0.5,0.2)); } vec3 calcNormal(vec3 p ) { vec3 n = vec3(0.0); for(int i = 0; i < 4; i++) { vec3 e = 0.001*(vec3(9>>i&1, i>>1&1, i&1)*2.0-1.0); n += e * map(p + e); } return normalize(n); } void main(){ vec2 uv = gl_FragCoord.xy/resolution; uv = (gl_FragCoord.xy * 2.0 - resolution) / resolution.y; vec3 rd = normalize(vec3(uv,-2)); vec4 pos =vec4(0); vec4 nor =vec4(0); vec4 col =vec4(0); float depth = 30.0; for(float j=0.0;j maxd) break; } if(d < precis && z < depth){ depth=z; pos = vec4(ro + rd * z,1); nor = vec4(calcNormal(pos.xyz),1); col = vec4(hsv(hash(id*236.5+5631.23),0.5,1.0),1); } } fragColor0 = pos ; fragColor1 = nor ; fragColor2 = col ; } `; shader2 =` #version 300 es precision mediump float; out vec4 fragColor; uniform vec2 resolution; uniform vec3 ro; uniform sampler2D tex[3]; void main() { vec2 uv = gl_FragCoord.xy/resolution; vec3 pos = textureLod(tex[0], uv, 0.0).xyz; vec3 nor = textureLod(tex[1], uv, 0.0).xyz; vec3 col = textureLod(tex[2], uv, 0.0).xyz; if (col == vec3(0)) discard; vec3 rd =normalize(pos-ro); vec3 li = normalize(vec3(1)); float dif = clamp(dot(nor, li), 0.3, 1.0); float amb = max(0.5 + 0.5 * nor.y, 0.0); float spc = pow(clamp(dot(reflect(normalize(pos - ro), nor), li), 0.0, 1.0), 50.0); col *= dif * amb ; float rimd = pow(clamp(1.0 - dot(reflect(-li, nor), -rd), 0.0, 1.0), 2.5); float frn = rimd + 2.2 * (1.0 - rimd); col *= frn*0.8; col += spc; float z= length(pos-ro); col *= exp(-z*z*0.003); col = clamp(col,0.0,1.0); col = pow(col,vec3(0.8)); fragColor = vec4(col,1); } `; const canvas = document.createElement("canvas"); canvas.style.position = "fixed"; canvas.style.cursor = "none"; canvas.style.left = canvas.style.top = 0; canvas.width = window.innerWidth/2; canvas.height = window.innerHeight/2; canvas.style.width = window.innerWidth+"px"; canvas.style.height = window.innerHeight+"px"; document.body.appendChild(canvas); const width = canvas.width; const height = canvas.height; const gl = canvas.getContext("webgl2") || canvas.getContext("experimental-webgl2"); gl.getExtension('EXT_color_buffer_float'); gl.clearColor(0.1, 0.1, 0.15, 1.0); const compileShader = (prog, src, type)=>{ const sh = gl.createShader(type); gl.shaderSource(sh, src.replace(/^\n/, "")); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(sh)); } gl.attachShader(prog, sh); gl.deleteShader(sh); }; const compileProgram = (src)=>{ let program = gl.createProgram(); compileShader(program, ` #version 300 es void main(){ gl_Position = vec4(ivec2(gl_VertexID&1,gl_VertexID>>1)*2-1,0,1); } ` , gl.VERTEX_SHADER); compileShader(program, src, gl.FRAGMENT_SHADER); gl.linkProgram(program); return program; }; const generateTexture = (idx)=>{ const texture = gl.createTexture(); gl.activeTexture(gl.TEXTURE0 + idx); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); return texture; }; const frameBuffers = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffers); for (i = 0; i < 3; i++) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.TEXTURE_2D, generateTexture(i), 0); } gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]); gl.bindFramebuffer(gl.FRAMEBUFFER, null); const ro = [0,0,8]; const prog1 = compileProgram(shader1); gl.useProgram(prog1); gl.uniform2f(gl.getUniformLocation(prog1, "resolution"), width, height); gl.uniform3fv(gl.getUniformLocation(prog1, "ro"), ro); gl.uniform1f(gl.getUniformLocation(prog1, "num"), 200); const prog2 = compileProgram(shader2); gl.useProgram(prog2); gl.uniform2f(gl.getUniformLocation(prog2, "resolution"), width, height); gl.uniform3fv(gl.getUniformLocation(prog2, "ro"), ro); for(let i=0; i<3;i++){ gl.uniform1i(gl.getUniformLocation(prog2, "tex["+i+"]"),i); } const stats = new Stats(); document.body.appendChild(stats.domElement); stats.domElement.style.position = "fixed"; stats.domElement.style.top = "3px"; stats.domElement.style.left = "3px"; (function() { stats.update(); const time = performance.now() * 0.001; gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffers); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(prog1); gl.uniform1f(gl.getUniformLocation(prog1, "time"), time*2.0); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(prog2); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(arguments.callee); })(); // ダブルバッファーで遅延レンダリングをした奴 // 2020/03/04 /* const shader1 = ` #version 300 es precision mediump float; uniform vec2 resolution; uniform vec3 ro; uniform float time; uniform float id; uniform sampler2D tex0; uniform sampler2D tex1; uniform sampler2D tex2; uniform sampler2D tex3; layout (location = 0) out vec4 fragColor0; layout (location = 1) out vec4 fragColor1; layout (location = 2) out vec4 fragColor2; layout (location = 3) out vec4 fragColor3; #define PI acos(-1.0) #define TAU PI*2.0 #define rotate(a) mat2(cos(a),sin(a),-sin(a),cos(a)) mat4 move(vec3 p) { return mat4(1,0,0,0,0,1,0,0,0,0,1,0,p,1); } mat4 rotX(float a) { float s=sin(a),c=cos(a); return mat4(1,0,0,0,0,c,s,0,0,-s,c,0,0,0,0,1); } mat4 rotY(float a) { float s=sin(a),c=cos(a); return mat4(c,0,s,0,0,1,0,0,-s,0,c,0,0,0,0,1); } mat4 rotZ(float a) { float s=sin(a),c=cos(a); return mat4(c,s,0,0,-s,c,0,0,0,0,1,0,0,0,0,1); } mat4 rot(vec3 axis, float t) { vec3 a = normalize(axis); float s=sin(t),c=cos(t),r=1.0-c; return mat4( a.x*a.x*r+c,a.y*a.x*r+a.z*s,a.z*a.x*r-a.y*s,0, a.x*a.y*r-a.z*s,a.y*a.y*r+c,a.z*a.y*r+a.x*s,0, a.x*a.z*r+a.y*s,a.y*a.z*r-a.x*s,a.z*a.z*r+c,0, 0,0,0,1); } float hash(float n) { return fract(sin(n)*7777.0); } vec3 randVec(float n) { vec3 p=vec3(1,0,0); p=(rotZ(asin(hash(n+=215.3)*2.0-1.0))*vec4(p,1)).xyz; p=(rotY((hash(n)*2.0-1.0)*PI)*vec4(p,1)).xyz; return p; } vec3 randCurve(float t,float n) { vec3 p = vec3(0); for (int i=0; i<6; i++) { p += randVec(n+=165.0)*sin((t*=0.8)+sin(t*1.6*hash(n))*0.5); } return p; } vec3 hsv(float h, float s, float v){ vec4 t = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(vec3(h) + t.xyz) * 6.0 - vec3(t.w)); return v * mix(vec3(t.x), clamp(p - vec3(t.x), 0.0, 1.0), s); } float sdRoundBox( vec3 p, vec3 b, float r ) { vec3 q = abs(p) - b; return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0) - r; } float sdTorus( vec3 p, vec2 t ) { vec2 q = vec2(length(p.xz)-t.x,p.y); return length(q)-t.y; } float map(vec3 p) { mat4 m=mat4(1); m*=rot(randVec(id*53.44+563.21),time*1.5+hash(id*896.23+45678.2)*20.0); m*=move(randCurve(time*1.5,id*89.23+123.7)); m*=move((vec3( hash(id*2.236+455.0), hash(id*5.236+42255.0), hash(id*55.236+42255.0) )*2.0-1.0)*(1.0/hash(id*77.23+852.2))*2.0); m*=rotZ(time*0.2); m*=rotX(time*0.3); p=(m*vec4(p,1)).xyz; return (mod(id,2.0)<1.0)?sdRoundBox(p,vec3(0.3),0.1):sdTorus(p,vec2(0.5,0.2)); } vec3 calcNormal(vec3 pos){ vec2 e = vec2(1,-1) * 0.002; return normalize( e.xyy*map(pos+e.xyy)+e.yyx*map(pos+e.yyx)+ e.yxy*map(pos+e.yxy)+e.xxx*map(pos+e.xxx) ); } void main(){ vec2 uv = gl_FragCoord.xy/resolution; vec4 im0=textureLod(tex0, gl_FragCoord.xy/resolution, 0.0); vec4 im1=textureLod(tex1, gl_FragCoord.xy/resolution, 0.0); vec4 im2=textureLod(tex2, gl_FragCoord.xy/resolution, 0.0); vec4 im3=textureLod(tex3, gl_FragCoord.xy/resolution, 0.0); uv = (gl_FragCoord.xy * 2.0 - resolution) / resolution.y; vec3 rd = normalize(vec3(uv,-2)); vec4 pos =im0; vec4 nor =im1; vec4 col =im2; float depth= im3.x; if(id==0.0){ pos=vec4(0); nor=vec4(0); col=vec4(0); depth=100.0; } const float maxd = 30.0, precis = 0.001; float z = 0.0, d; float i; for(i = 0.0; i < 64.0; i++){ z += d = min(map(ro + rd * z),10.); if(d < precis || z > maxd) break; } if(z{ const sh = gl.createShader(type); gl.shaderSource(sh, src.replace(/^\n/, "")); gl.compileShader(sh); if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(sh)); } gl.attachShader(prog, sh); gl.deleteShader(sh); }; const compileProgram = (src)=>{ const program = gl.createProgram(); compileShader(program, ` #version 300 es void main(){ gl_Position = vec4(ivec2(gl_VertexID&1,gl_VertexID>>1)*2-1,0,1); } ` , gl.VERTEX_SHADER); compileShader(program, src, gl.FRAGMENT_SHADER); gl.linkProgram(program); return program; }; const generateTexture = (idx)=>{ const texture = gl.createTexture(); gl.activeTexture(gl.TEXTURE0 + idx); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); return texture; }; const frameBuffers = [gl.createFramebuffer(), gl.createFramebuffer()]; let tidx=0; for (i = 0; i < 2; i++) { gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffers[i]); const texture1 = generateTexture(tidx++); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0); const texture2 = generateTexture(tidx++); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, texture2, 0); const texture3 = generateTexture(tidx++); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, texture3, 0); const texture4 = generateTexture(tidx++); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT3, gl.TEXTURE_2D, texture4, 0); gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2, gl.COLOR_ATTACHMENT3]); } gl.bindFramebuffer(gl.FRAMEBUFFER, null); const ro = [0,0,8]; const prog1 = compileProgram(shader1); gl.useProgram(prog1); gl.uniform2f(gl.getUniformLocation(prog1, "resolution"), width, height); gl.uniform3fv(gl.getUniformLocation(prog1, "ro"), ro); const prog2 = compileProgram(shader2); gl.useProgram(prog2); gl.uniform2f(gl.getUniformLocation(prog2, "resolution"), width, height); gl.uniform3fv(gl.getUniformLocation(prog2, "ro"), ro); const stats = new Stats(); document.body.appendChild(stats.domElement); stats.domElement.style.position = "fixed"; stats.domElement.style.top = "3px"; stats.domElement.style.left = "3px"; let idx = 0; (function() { stats.update(); const time = performance.now() * 0.001; gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(prog1); gl.uniform1f(gl.getUniformLocation(prog1, "time"), time); for(let i=0; i<50; i++){ gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffers[idx]); gl.uniform1f(gl.getUniformLocation(prog1, "id"), i); gl.uniform1i(gl.getUniformLocation(prog1, "tex0"), (1-idx)*4); gl.uniform1i(gl.getUniformLocation(prog1, "tex1"), (1-idx)*4+1); gl.uniform1i(gl.getUniformLocation(prog1, "tex2"), (1-idx)*4+2); gl.uniform1i(gl.getUniformLocation(prog1, "tex3"), (1-idx)*4+3); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.bindFramebuffer(gl.FRAMEBUFFER, null); idx = 1-idx; } gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.useProgram(prog2); gl.uniform1i(gl.getUniformLocation(prog2, "tex0"),idx*4); gl.uniform1i(gl.getUniformLocation(prog2, "tex1"),idx*4+1); gl.uniform1i(gl.getUniformLocation(prog2, "tex2"),idx*4+2); gl.uniform1i(gl.getUniformLocation(prog2, "tex3"),idx*4+3); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(arguments.callee); })(); */