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 138. #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 metalic(float t,float time) { float o = 0.; //o += mix(sin(time*pi2*440.*calf(4.)),fm(time,440.*calf(4.),1.,1.5),1.5)*.5; float[] amps = float[](1.,1.,.25,1.); float amp = amps[int(mod(t*.125*.25,4.))]; o+=fm(time,440.*calf(1.+12.+12.),.35,4.5+floor(sin(t*pi2*2.)))*((noise(time*pi2*220.*calf(2.)*.75))*1.-.25); o = o * exp(-7.*fract((t*.5+.5)))*.7*amp;// * smoothstep(1.,.75,fract(t*.25)); return o; } float base(float t,float time) { float o = 0.; float note = 4.5; o += fm(time,40.*calf(note),2.,1.); o += sin(time*40.*calf(note+12.)*pi2)*.5; //o += fm(time,40.*calf(5.+note),2.,1.); //o += fm(time,40.*calf(31.+note),2.,1.5); o *= .4; o = dist(o,2.)*.5; o = o * exp(-.75*fract(t*2.)); return o; } float saw(float t,float time) { float o = 0.; float[] notes = float[](-3.,-3.,-5.,-3.); float note = notes[int(mod(t*4.,4.))]+2.; float[] amps = float[](1.,1.,.5,1.); float amp = amps[int(mod(t*.125*.25,4.))]; o += ssaw(time,220.*calf(0.+note))*.25; o += ssaw(time,220.*calf(-5.+note))*.25*amp; o += fm(time,220.*calf(-12.+note),1.,1.)*.5; o = o * exp(-.25*fract(t*2.))*.25; return o; } float hihat(float t,float time) { float o = 0.; float[] notes = float[](-3.,-3.,-5.,-3.); float note = notes[int(mod(t*2.,4.))]; o += sin(1760.*pi2*time*calf(24.+note))*.25; o += noise(time*1e4)+fbm(time*1e4)*.5+rand(time)*.5; o = o* exp(-11.*fract(t+.5))*.5; //o = dist(o,2.)*1.; return o; } //kick //https://www.shadertoy.com/view/ldfSW2 float kick(float t, float time) { t = fract(t*1.)*.5; 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.); 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; } vec2 mainSound(float time){ float o = 0.; float t = time*bpm/60.; o += metalic(t,time); o += base(t,time); o += kickEcho(t,time); //o += hihat(t,time); o += saw(t,time); o = o*smoothstep(0.,4.,time); o = o*smoothstep(64.,56.,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 138. #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 16. 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)); } 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) { float t = iTime; float start = step(0.,beat); float end=saturate(beat-120.); vec3 q = p; vec3 sp = vec3(0.,0.,-t*speed); q+=sp; float l1 = easeOut(1.-clamp(7.*.2-length(q.xz*.05)-t*.2,0.,1.)); float l2 = easeOut(clamp(64.*.8-length(q.xz*.05)-t*.8,0.,1.)); float l = 1.; l = mix(l,l1,start); l = mix(l,l2,end); float d1 = sphere(q,.5*l); q=p; q+=sp; for(int i=0;i<2;i++) { q = abs(q)-.25; q.xz *= rot(1.); q.xy *= rot(1.+iTime); } float d2 = sdBox(q,vec3(.125,.5,.124)*l); d1 = mix(d1,d2,pow(sin(fract(beat)*pi)*.5+.5,8.)); vec2 s = vec2(d1,MAT_SPHERE); q=p; q= -abs(q); vec2 fl = vec2(q.y+10.5*l+.05,MAT_FLOOR); //vec2 fl2 = vec2 (q.x+10.5*l+.05,MAT_FLOOR); q=p; q.xz = rep(q.xz,2.); //fl = opS(fl,fl2); vec2 tri = vec2(1.); //q.xy *= rot(.2); q = p; q.xy = pmod(p.xy,3.); q.z = rep(p.z,10.); vec2 box = vec2(sdBox(q-vec3(0.,5.,0.),vec3(.5)),MAT_BOX); q = p; q.y = abs(q.y)-2.1; q.xz = rep(q.xz,14.); for(int i=0;i<4;i++) { q = abs(q)-2.4; q.xy *= rot(2.025+(1.-l)); } vec2 w = vec2(sdBox(q,vec3(2.,1.2,.2)),MAT_BOX); q=p; vec2 d = opU(s,fl); //d = opU(d,box); d = opU(d,w); return d; } vec4 volMap(vec3 p) { vec3 q = p; q.xy *= rot(pi*.25); float zid = repid(q.z,10.); q.z = rep(q.z,10.); q = abs(q); q.xy =abs(q.xy)-5.; float d = length(q.xz)-.05; d = min(d,length(q.yz)-.05); float r0 = rand(zid); vec3 col = vec3(.2,.8,.8)*(.1+0.9*exp(-13.*fract(beat*4.)))*.01; return vec4(col,d); } vec4 volMap2(vec3 p) { vec3 q=p; q.xy = pmod(q.xy,3.); //float d = sdCappedCylinder(q-vec3(0.,5.,0.),.1,2.1); q.y -=5.; float d = length(q.yx)-.1; vec3 col = vec3(.9,.2,.2)*(.00+1.*exp(-13.*fract(beat*.5)))*.2; return vec4(col,d); } vec4 volMap3(vec3 p) { vec3 q=p; q.xy *= rot(pi); q.xy = pmod(q.xy,3.); //float d = sdCappedCylinder(q-vec3(0.,5.,0.),.1,2.1); q.y -=5.; float d = length(q.yx)-.1; vec3 col = vec3(.2,.2,.9)*(.00+1.*exp(-13.*fract(beat*.5+.5)))*.2; return vec4(col,d); } vec4 volMap4(vec3 p) { vec3 q=p; //q.xz = rep(q.xz,14.); //float d = sdCappedCylinder(q-vec3(0.,5.,0.),.1,2.1); //q.y =abs(q.y)-1.7; vec3 id = repid(q,7.); q.z = rep(q.z,7.); q.y = abs(q.y)-8.; float d = length(q.zy)-.025; vec3 col = vec3(.6,.4,.7)*.025*(0.01+1.*exp(-13.*fract(beat+.5))); return vec4(col,d); } vec4 volMap5(vec3 p) { vec3 q=p; vec3 sp = vec3(0.,0.,-iTime*speed); q+=sp; float d = length(q)-.125; vec3 col = vec3(.98,.2,.2)*.025;//*(0.01+1.*exp(-1.*fract(beat))); return vec4(col,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 ); } 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 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++) { if(t>depth) break; vec3 pos = ro+rd*t; d = volMap(pos); d.w = max(0.01,d.w); ac += (d.rgb*sd)/(pow(d.w,2.))*part2 * smoothstep(4.,12.,iTime); d = volMap2(pos); d.w = max(0.01,d.w); ac += (d.rgb*sd)/(pow(d.w,2.))*part; d = volMap3(pos); d.w = max(0.01,d.w); ac += (d.rgb*sd)/(pow(d.w,2.))*part; d = volMap4(pos); d.w = max(0.01,d.w); ac += (d.rgb*sd)/(pow(d.w,2.)); d = volMap5(pos); d.w = max(0.01,d.w); ac += (d.rgb*sd)/(pow(d.w,2.)); t += sd; } return ac; } float ndfGGX(float NdotH, float roughness) { float alpha = roughness * roughness; float alphaSq = alpha * alpha; float denom = (NdotH * NdotH) * (alphaSq - 1.0) + 1.0; return alphaSq / (pi * denom * denom); } float gaSchlickG1(float cosTheta, float k) { return cosTheta / (cosTheta * (1.0 - k) + k); } float gaSchlickGGX(float NdotL, float NdotV, float roughness) { float r = roughness + 1.0; float k = (r * r) / 8.0; return gaSchlickG1(NdotL, k) * gaSchlickG1(NdotV, k); } vec3 fresnelSchlick(vec3 F0, float cosTheta) { return F0 + (1.0 - F0) * pow(1.0 - cosTheta, 5.0); } vec3 fresnelSchlickWithRoughness(vec3 F0, float cosTheta, float roughness) { return F0 + (max(vec3(1.0 - roughness), F0) - F0) * pow(1.0 - cosTheta, 5.0); } //Kaneta SkyColor //https://www.shadertoy.com/view/3lXfzS vec3 skyColor(vec3 rd, float roughness) { vec3 baseColor = mix(vec3(0.3,0.5,0.8)*0.8, vec3(0.3,0.5,0.8) * 0.5, rd.y); baseColor = mix( baseColor, vec3(0.2,0.5,0.85)*0.5, 1.0 - pow(1.0-max(-rd.y,0.0), 1.5)); vec3 skyColor = baseColor; skyColor = mix( skyColor, vec3(0.9,1.1,1.2) * 1.5, pow( 1.0-max(rd.y,0.0), 8.0 ) ); skyColor = mix( skyColor, vec3(0.2,0.5,0.85)*0.2, 1.0 - pow(1.0-max(-rd.y,0.0), 6.0)); return mix(skyColor, baseColor, pow(roughness, 0.1)) * 10.0; } float so(float NoV, float ao, float roughness) { return clamp(pow(NoV + ao, exp2(-16.0 * roughness - 1.0)) - 1.0 + ao, 0.0, 1.0); } vec3 ambientLighting(vec3 pos, vec3 albedo, float metalness, float roughness, vec3 N, vec3 V, float aoRange) { vec3 diffuseIrradiance = skyColor(N, 1.0); vec3 diffuseAmbient = diffuseIrradiance * albedo * (1.0 - metalness); vec3 R = reflect(-V, N); vec3 F0 = mix(vec3(0.04), albedo, metalness); vec3 F = fresnelSchlickWithRoughness(F0, max(0.0, dot(N, V)), roughness); vec3 specularIrradiance = skyColor(R, roughness); vec3 specularAmbient = specularIrradiance * F; float ambientOcclusion = max( 0.0, 1.0 - map( pos + N*aoRange ).x/aoRange ); ambientOcclusion = min(exp2( -.8 * pow(ambientOcclusion, 2.0) ), 1.0) * min(1.0, 1.0+0.5*N.y); diffuseAmbient *= ambientOcclusion; specularAmbient *= so(max(0.0, dot(N, V)), ambientOcclusion, roughness); return vec3(diffuseAmbient + specularAmbient); } vec3 directLighting(vec3 pos, vec3 albedo, float metalness, float roughness, vec3 N, vec3 V, vec3 L, vec3 lightColor) { vec3 H = normalize(L + V); float NdotV = max(0.0, dot(N, V)); float NdotL = max(0.0, dot(N, L)); float NdotH = max(0.0, dot(N, H)); float HdotL = max(0.0, dot(H, L)); vec3 F0 = mix(vec3(0.04), albedo, metalness); vec3 F = fresnelSchlick(F0, HdotL); float D = ndfGGX(NdotH, roughness); float G = gaSchlickGGX(NdotL, NdotV, roughness); vec3 specularBRDF = (F * D * G) / max(0.0001, 4.0 * NdotL * NdotV); vec3 kd = mix(vec3(1.0) - F, vec3(0.0), metalness); vec3 diffuseBRDF = kd * albedo / pi; //float shadow = shadow(pos + N * 0.01, L); vec3 irradiance = lightColor * NdotL;// * shadow; return (diffuseBRDF + specularBRDF) * irradiance; } 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.; col += directLighting(p, albedo, metalness, roughness, n, -ray, normalize(ld), vec3(.98, 0.18, 0.18) * 10.*(sin(beat*pi*.25)*.5+.5)); col += ambientLighting(p, albedo, metalness, roughness, n, -ray, depth / 30.0)*.05; col += glow(ro,ray,depth); float fog = exp(-.0006*depth); vec3 fog2 = .02*vec3(1.,1.,1.4)*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*.1)),fbm(vec2(iTime*.1+100.)))*2.-1.; vec3 camPos1 = vec3(0.,0.,-5.+time); vec3 camPos2 = vec3(0.,-1.,2.+time); vec3 camPos3 = vec3(.6,2.,-3.+time); vec3 camPos4 = vec3(7.,-1.,-8.+time); vec3[] Poss = vec3[](camPos1,camPos2,camPos3,camPos4); vec3 ro = vec3(0.,-1.,2.+time); ro = mix(Poss[int(mod((beat-8.)*.125*.25,4.))],Poss[int(mod((beat-8.)*.125*.25+1.,4.))],smoothstep(0.,1.,saturate(mod(beat-8.,32.)-24.))); ro.xy += fbm*2.; vec3 ta = vec3(0.,0.,0.+time); 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); ray = reflect(ray,n); trace(pos,rpos,ray,t,mat); col += lighting(pos,rpos+n*.01, ray, t, mat)*.5; col = colorCorrect(col); col = acesFilm(col*.3); 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); setTimeout(render,1000/45); } 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(); const numBlocks = (audioCtx.sampleRate * DURATION) / SAMPLES; 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; }

reflection