main(); function main() { const c = document.querySelector('#c'); const gl = c.getContext('webgl2'); let startTime = 0; if (!gl) { return; } const soundVertexShaderSource = `#version 300 es out vec2 o_sound; uniform float u_blockOffset; uniform float u_sampleRate; #define bpm 108. #define pi acos(-1.) #define pi2 pi*2. float rand(vec2 p) { return fract(sin(dot(p,vec2(12.9898,78.233)))*43478.5453); } float rand(float p) { return fract(sin(p*78.233)*43478.5453); } float noise(float p) { float i=floor(p); float f=fract(p); f=f*f*(3.-2.*f); return mix(rand(i),rand(i+1.),f); } float fbm(float p) { float amp=.5,val; for(int i=0;i<4;i++) { val+=noise(p)*amp; p*=2.; amp*=.5; } return val; } float fm(float t,float f,float i,float r){ return sin(pi2*f*t+i*sin(pi2*f*t*r)); } float sfm(float t,float f,float i1,float r1,float i2,float r2){ return sin(pi2*f*t+i1*fm(t,f,i2,r2)*r1); } float ssaw(float t,float f){ return rand(vec2(t))*0.02+sfm(t,f,0.8,1.8,.8,7.0)+sfm(t,f*1.008,0.8,1.8,0.8,6.0)+0.1*sfm(t,f,0.1,0.0,0.1,3.0); } float calf(float i){ return pow(2.0,i/12.0); } float sigcomp1d(float w,float s){ return (1.0/(1.0+exp(-s*w)) -0.5)*2.0; } float dist(float s, float d) { return clamp(s * d, -1.0, 1.0); } float s(float t,float time) { float o = 0.; float[] amps = float[](1.,1.,.25,1.); float amp = amps[int(mod(t*.125*.25,4.))]; float[] notes = float[](0.,0.,0.,5.); float note = notes[int(mod(t*2.,4.))]; o += sin(220.*calf(0.)*pi2*time); o += sin(220.*calf(0.+note)*pi2*(time*0.99)); //fract o = o * exp(-1.5*fract(t*.5))*.5*amp;// * smoothstep(1.,.75,fract(t*.25)); return o; } float base(float t,float time) { float o = 0.; float[] notes = float[](1.,3.,5.,5.); float note = notes[int(mod(t*.125,4.))]; o += sin(time*40.*calf(note+12.)*pi2)*.5; o = dist(o,2.)*.7; o = o * exp(-.25*fract(t*1.)); return o; } //https://www.shadertoy.com/view/ldfSW2 float kick(float t, float time) { float[] beats = float[](1.,1.,1.,2.); float beat = beats[int(mod(t,4.))]; t = fract(t*(1.*beat))*(.5/beat); float aa = 5.; t = sqrt(t * aa) / aa; float amp = exp(max(t - 0.15, 0.0) * -10.0); float o = sin(t * 100.0 * pi2) * amp; o = dist(o,1.)*.5; return o; } float kickEcho(float t,float time) { float amp = .5; float o = 0.; float[] kickamps = float[](0.,1.,0.,1.); float kickamp = kickamps[int(mod(t*.125*.25,4.))]; for(int i=0;i<4;i++) { o+= kick(t+float(i)*.25,time)*amp; amp*=.5; } return o*kickamp; } float pad(float t,float time) { float o = 0.; float note = 0.; o += sin(220.*calf(3.+note)*pi2*time)*.25; o += sin(440.*calf(0.+note)*pi2*(time))*.25; o += sin(440.*calf(-12.+note)*pi2*(time))*.25; return o*exp(-.5*fract(t*.25+.5))*.5; } vec2 mainSound(float time){ float o = 0.; float t = time*bpm/60.; o += s(t,time); o += base(t,time); o += kickEcho(t,time); o += pad(t,time); o = o*smoothstep(0.,4.,time); o = o*smoothstep(124.,110.,time); o*=1.0; return vec2(o*.5); } void main(void) { float time = u_blockOffset + float(gl_VertexID) / u_sampleRate; o_sound = mainSound(time); } `; const soundFragmentShaderSource = `#version 300 es void main(void){} ` const vertexShaderSource = `#version 300 es layout (location = 0) in vec4 aVertexPosition; void main(){ gl_Position = aVertexPosition; } `; const fragmentShaderSource = `#version 300 es precision highp float; uniform vec2 resolution; uniform float iTime; out vec4 fragColor; #define MAT_SPHERE 0.0 #define MAT_FLOOR 1.0 #define MAT_BOX 2.0 #define bpm 108. #define pi acos(-1.) #define pi2 pi*2. #define rep(p,r) mod(p,r)-r*.5; #define repid(p,r) (floor((p) / r)) #define saturate(x) clamp(x,0.,1.) #define beat iTime*bpm/60. #define speed .1 vec3 hsv(float r) { return sin((vec3(-2./3.,2./3.,0.)+r)*pi)*.5+.5; } float rand(vec2 p) { return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453); } float easeIn(float t) { return t * t; } float easeOut(float t) { return -1.0 * t * (t - 2.0); } float rand(float p) { return fract(sin(p*43758.5453)); } vec3 rand3(vec3 c) { float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0))); vec3 r; r.z = fract(512.0*j); j *= .125; r.x = fract(512.0*j); j *= .125; r.y = fract(512.0*j); return r-0.5; } float noise(vec2 p) { vec2 i=floor(p),f=fract(p); f=f*f*(3.-2.*f); return mix( mix(rand(i),rand(i+vec2(1.,0.)),f.x), mix(rand(i+vec2(0.,1.)),rand(i+vec2(1.)),f.x), f.y); } float fbm(vec2 p) { float amp=.5,val; for(int i=0;i<4;i++) { val +=noise(p)*amp; amp *= .5; p*=2.; } return val; } mat2 rot(float r) { float s=sin(r),c=cos(r); return mat2(c,s,-s,c); } vec2 pmod(vec2 p, float r) { float a = pi/r - atan(p.x, p.y); float n = pi2/r; a = floor(a/n) * n; return p * rot(a); } float luminace(vec3 col) { return dot(vec3(0.298912,0.58611,0.114478),col); } vec3 saturation(vec3 col,float scale) { return mix(vec3(luminace(col)),col,scale); } vec3 contrast(vec3 col,float scale) { return (col-.5)*scale+.5; } vec3 colorCorrect(vec3 col){ col = saturation(col,1.4); col = pow(col,vec3(2.5)); //col = pow(col,vec3(1.5)); col = col*vec3(.6,.9,1.0); return col; } vec3 acesFilm(const vec3 x) { const float a = 2.51; const float b = 0.03; const float c = 2.43; const float d = 0.59; const float e = 0.14; return clamp((x * (a * x + b)) / (x * (c * x + d ) + e), 0.0, 1.0); } float vignette(vec2 p,float s){ p *= 1.-p.yx; float vig = p.x*p.y*30.; vig = clamp(pow(vig,s),.0,1.); return vig; } float sphere(vec3 p, float s) { return length(p) - s; } float sdBox( vec3 p, vec3 b ) { vec3 q = abs(p) - b; return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0); } float sdCappedCylinder( vec3 p, float h, float r ) { vec2 d = abs(vec2(length(p.xz),p.y)) - vec2(h,r); return min(max(d.x,d.y),0.0) + length(max(d,0.0)); } vec2 opU(vec2 d1, vec2 d2) { return (d1.xd2.x) ? d1 : d2; } vec2 map(vec3 p) { vec3 q = p; p.z += iTime*speed*2.; float r = 6.; float t = iTime; float start = step(0.,beat); vec2 d; d = vec2(sphere(p,1.),0); q=p; q.xy *= rot(iTime*.05); vec2 d2; q.xy = pmod(q.xy,3.); for(int i=0;i<1;i++) { q = abs(q)-.5; q.xy *= rot(.1); q.xz *= rot(2.5); } vec3 qq =q; q.y -= r; d2 = vec2(sdCappedCylinder(q,.25,r),0); d = opU(d,d2); vec2 d3; qq.y -=r; d3 = vec2(sphere(qq,.5),0); d = opU(d,d3); return d; } vec3 normal(vec3 p) { float e = 0.001; vec2 k = vec2(1.,-1.); return normalize( k.xyy * map(p+k.xyy*e).x+ k.yxy * map(p+k.yxy*e).x+ k.yyx * map(p+k.yyx*e).x+ k.xxx * map(p+k.xxx*e).x ); } vec4 volMap(vec3 p) { vec3 q = p; vec3 id = repid(q,2.); q = rep(q,2.); float r0 = rand(id.x+id.y+id.z); vec3 r = rand3(id); float d = sphere(q+r,.01); vec3 hsv = hsv(r.x+r.y+r.z); hsv.x = pow(hsv.x,.1)+.2; hsv.y = pow(hsv.y,.1); hsv.z = pow(hsv.z,.1); vec3 col = vec3(hsv)*(.1+0.1*exp(-13.*fract(beat*1.)))*.01*r0; return vec4(col,d); } vec4 volMap2(vec3 p) { p.z += iTime*speed*2.; vec3 q = p; float d = sphere(p,.5); vec3 col = vec3(.9,.5,.2); return vec4(col,d); } vec3 glow(vec3 ro,vec3 rd,float depth) { float t = 0.01; vec4 d; float sd = depth/99.; vec3 ac; float[] parts = float[](0.,1.,0.,1.); float part = parts[int(mod(beat*.125*.25,4.))]; float[] parts2 = float[](1.,1.,0.,1.); float part2 = parts2[int(mod(beat*.125*.25,4.))]; for(int i = 0;i<60;i++) { vec3 pos = ro+rd*t; if(t>depth) break; d = volMap(pos); d.w = max(0.01,d.w); ac += (d.rgb)/(pow(d.w,2.)); d = volMap2(pos); d.w = max(0.01,d.w); ac += (d.rgb)/(pow(d.w,4.*pow(1.-iTime/128.,.5))); t += .5; } return ac; } float shadow(in vec3 p, in vec3 l) { float t = 0.01; float t_max = 20.0; float res = 1.0; for (int i = 0; i < 64; ++i) { if (t > t_max) break; float d = map(p + t*l).x; if (d < 0.001) { return 0.0; } t += d; res = min(res, 10.0 * d / t); } return res; } vec3 lighting(vec3 ro,vec3 p,vec3 ray ,float depth,vec2 mat) { vec3 col; vec3 n = normal(p); float start = saturate(iTime-2.5); vec3 ld = normalize(vec3(1.,1.,.2)); float NdotL = max(0.,dot(n,ld)); float metalness = .0; float roughness = .0; vec3 albedo = vec3(.5,.5,.5); float checker = mod(floor(p.x)+floor(p.z),2.); if(depth>200.) { return vec3(.1); } else if(mat.y == MAT_SPHERE){ albedo = vec3(.25); roughness = .1; metalness = 1.; } else if(mat.y == MAT_FLOOR){ albedo = vec3(.025); metalness = .5; roughness = .8; } else if(mat.y == MAT_BOX){ albedo = vec3(.5,.5,.5); metalness = 1.; roughness = 0.1; } else { col = vec3(.1); } float aoRange = depth/30.; float k = 2.; float spec = pow(clamp(dot(reflect(ld,n),ray),0.,1.),10.); col = vec3(NdotL*vec3(1.,1.,1.)+spec*vec3(1.,1.,1.)); NdotL = max(0.,dot(n,normalize(vec3(0.1,1.,1.)))); col += NdotL*vec3(.1,.1,.2); float ambientOcclusion = max( 0.0, 1.0 - map( p + n*aoRange ).x/aoRange ); ambientOcclusion = min(exp2( -.8 * pow(ambientOcclusion, 2.0) ), 1.0) * min(1.0, 1.0+0.5*n.y); col *= ambientOcclusion; float fog = exp(-.0006*depth); vec3 fog2 = .02*vec3(1.,1.,1.)*depth; fog2 *= start*.5; col = mix(vec3(.0),col+fog2,fog); return col; } void trace(vec3 ro,out vec3 p, vec3 ray,out float t,out vec2 mat) { t=0.01; vec3 pos; for (int i = 0; i < 99; i++) { pos = ro + ray * t; mat = map(pos); if (mat.x < 0.01) { break; } t += abs(mat.x); } p = pos; } vec3 ray(vec2 p,vec3 ro,vec3 ta,float fov) { vec3 fo = normalize(ta - ro); vec3 si = normalize(cross(vec3(0.,1.,0.),fo)); vec3 up = normalize(cross(fo,si)); return normalize(fo*fov+si*p.x+up*p.y); } void main(){ vec2 uv = gl_FragCoord.xy /resolution.xy; vec2 p = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y); float time = iTime*speed; vec2 fbm = vec2(fbm(vec2(iTime*.05)),fbm(vec2(iTime*.05+100.)))*2.-1.; vec3 ro = vec3(5.,4.,10.-time); vec3 ta = vec3(1.,2.,0.-time); ta.xy += fbm; vec3 ray = ray(p,ro,ta,1.2); vec3 pos,rpos; vec2 mat; float t=0.01; trace(ro,pos,ray,t,mat); vec3 col = lighting(ro,pos, ray, t, mat); vec3 n = normal(pos); col += glow(ro,ray,t); col = colorCorrect(col); col = acesFilm(col*.2); col = pow(col,vec3(1./2.2)); col *= vignette(uv,.5); //col *= step(abs(p.y),.8); fragColor = vec4(col,1.0); } `; const shaderProgram = initShaderProgram(gl, vertexShaderSource, fragmentShaderSource); const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: 0,//gl.getAttribLocation(shaderProgram, 'aVertexPosition'), }, uniformLocations: { resolution: gl.getUniformLocation(shaderProgram, 'resolution'), time: gl.getUniformLocation(shaderProgram, 'iTime') }, }; const buffers = initBuffers(gl); function render() { let now = (Date.now() - startTime) / 1000; drawScene(gl, programInfo, buffers, now); requestAnimationFrame(render); } window.addEventListener('click', function play() { const start = document.getElementById('start'); start.remove(); const node = createAudio(gl, soundVertexShaderSource, soundFragmentShaderSource); node.start(0); startTime = Date.now(); requestAnimationFrame(render); this.removeEventListener('click', play); }, false); } function initShaderProgram(gl, vertexShaderSource, fragmentShaderSource, varying = null) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); if (varying != null) gl.transformFeedbackVaryings(shaderProgram, varying, gl.SEPARATE_ATTRIBS); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert('Unable to inisialize the shader program:' + gl.getProgramInfoLog(shaderProgram)); return null; } return shaderProgram; } function initSoundShaderProgram(gl, vertexShaderSource, fragmentShaderSource, varying) { const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { alert('Unable to inisialize the shader program:' + gl.getProgramInfoLog(shaderProgram)); return null; } return shaderProgram; } function createVbo(gl, array, usage) { const vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, array, usage !== undefined ? usage : gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return vbo; } function loadShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { alert(`An error occurred compiling the shaders:` + gl.getShaderInfoLog(shader)); gl.deleteShader(shader); return null; } return shader; } function initBuffers(gl) { const positionBuffer = gl.createBuffer(); const positions = [ -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0 ] gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); return { position: positionBuffer }; } function resize(canvas) { let displayWidth = canvas.clientWidth; let displayHeight = canvas.clientHeight; if (canvas.width != displayWidth || canvas.height != displayHeight) { canvas.width = displayWidth; canvas.height = displayHeight; } } function drawScene(gl, programInfo, buffers, now) { gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); resize(gl.canvas); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); { const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position); gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition); } gl.useProgram(programInfo.program); gl.uniform2f( programInfo.uniformLocations.resolution, gl.canvas.clientWidth, gl.canvas.clientHeight ); gl.uniform1f( programInfo.uniformLocations.time, now ) { const offset = 0; const vertexCount = 4; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); } } //https://qiita.com/aa_debdeb/items/5e1204987236f7b52393 function createAudio(gl, vs, fs) { const DURATION = 180; const SAMPLES = 65536; const audioCtx = new AudioContext(); const audioBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * DURATION, audioCtx.sampleRate); const program = initShaderProgram(gl, vs, fs, ['o_sound']); const uniforms = { sampleRate: gl.getUniformLocation(program, 'u_sampleRate'), blockOffset: gl.getUniformLocation(program, 'u_blockOffset') }; const array = new Float32Array(2 * SAMPLES); const vbo = createVbo(gl, array, gl.DYNAMIC_COPY); const transformFeedback = gl.createTransformFeedback(); console.log(audioCtx.sampleRate); const numBlocks = (audioCtx.sampleRate * DURATION) / SAMPLES; console.log(array.length); const outputL = audioBuffer.getChannelData(0); const outputR = audioBuffer.getChannelData(1); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback); gl.enable(gl.RASTERIZER_DISCARD); gl.useProgram(program); gl.uniform1f(uniforms.sampleRate, audioCtx.sampleRate); for (let i = 0; i < numBlocks; i++) { gl.uniform1f(uniforms.blockOffset, i * SAMPLES / audioCtx.sampleRate); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, vbo); gl.beginTransformFeedback(gl.POINTS); gl.drawArrays(gl.POINTS, 0, SAMPLES); gl.endTransformFeedback(); gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, array); for (let j = 0; j < SAMPLES; j++) { outputL[i * SAMPLES + j] = array[j * 2]; outputR[i * SAMPLES + j] = array[j * 2 + 1]; } } const node = audioCtx.createBufferSource(); node.connect(audioCtx.destination); node.buffer = audioBuffer; node.loop = false; gl.disable(gl.RASTERIZER_DISCARD) return node; }

space