2a:null 2b:["$","title",null,{"children":"Fluid Neural Cellular Automata | Zihou Ng | Observable"}] 30:T49f,class Poisson { constructor(gl) { this.gl = gl; const w = gl.drawingBufferWidth, h = gl.drawingBufferHeight; const opts = { width: w, height: h, filter: gl.LINEAR }; this.state = new Flipper(new Buffer(gl, opts), new Buffer(gl, opts)); this.model = makeFluidProgram(gl, [w, h], ` void main() { vec2 uv = v_texcoord; float p0 = texture(u_pressure, uv + vec2(u_px.x * 2.0, 0)).r; float p1 = texture(u_pressure, uv - vec2(u_px.x * 2.0, 0)).r; float p2 = texture(u_pressure, uv + vec2(0, u_px.y * 2.0 )).r; float p3 = texture(u_pressure, uv - vec2(0, u_px.y * 2.0 )).r; float div = texture(u_divergence, uv).r; float newP = (p0 + p1 + p2 + p3) / 4.0 - div; fragColor = vec4(newP); }`, { uniforms: { pressure: ["sampler2D", 0], divergence: ["sampler2D", 1], px: ["vec2", [1 / gl.drawingBufferWidth, 1 / gl.drawingBufferHeight]] } }); } draw(divergence, n = 8) { const { state, model } = this; for (let i = 0; i < n; i++) { state.back.bind(); model.textures = [state.front.texture, divergence.texture]; model.draw(); state.back.unbind(); state.flip(); } } }31:T73f,class Advection { constructor(gl) { this.gl = gl; const size = [gl.drawingBufferWidth, gl.drawingBufferHeight]; this.model = makeFluidProgram(gl, size, ` vec2 getExternalForce() { vec2 p = gl_FragCoord.xy - u_mouse.xy; float d = 1.0 - min(length(p) / u_radius, 1.0); d *= d; return u_mouse.zw * u_strength * d; } void main() { vec2 ratio = max(u_size.x, u_size.y) / u_size; // BFECC vec2 uv = v_texcoord; vec2 spot_new = uv; vec2 vel_old = texture(u_velocity, uv).xy; // back trace vec2 spot_old = spot_new - vel_old * u_dt * ratio; vec2 vel_new1 = texture(u_velocity, spot_old).xy; // forward trace vec2 spot_new2 = spot_old + vel_new1 * u_dt * ratio; vec2 error = spot_new2 - spot_new; vec2 spot_new3 = spot_new - error / 2.0; vec2 vel_2 = texture(u_velocity, spot_new3).xy; // back trace 2 vec2 spot_old2 = spot_new3 - vel_2 * u_dt * ratio; vec2 newVel2 = texture(u_velocity, spot_old2).xy; newVel2 += getExternalForce(); fragColor = vec4(newVel2 * u_decay, 0.0, 1.0); }`, { uniforms: { velocity: ["sampler2D", 0], size: ["vec2", [gl.drawingBufferWidth, gl.drawingBufferHeight]], dt: ["float", 0.014], decay: ["float", .999], // external force mouse: "vec4", radius: ["float", 50], strength: ["float", 20], } }); } draw(input, output, opts = {}) { const { mouse, radius = 50, strength = 20 } = opts; output.bind(); this.model.uniforms.radius = radius; this.model.uniforms.strength = strength; this.model.uniforms.mouse = [...mouse[0], mouse[1][0] / this.gl.drawingBufferWidth, mouse[1][1] / this.gl.drawingBufferHeight]; this.model.textures = [input.texture]; this.model.draw(); output.unbind(); } }32:T973,class NeuralCA { constructor(gl, rule, swirl = true) { this.gl = gl; this.model = makeProgram(gl, ` vec2 p; vec4 R(int dx, int dy, float band) { vec2 pos = mod(p + vec2(dx, dy), u_size); pos.x += band * u_size.x; return texelFetch(u_input, ivec2(pos), 0); } vec4 hash43(vec3 p) { vec4 p4 = fract(vec4(p.xyzx) * vec4(.1031, .1030, .0973, .1099)); p4 += dot(p4, p4.wzxy+33.33); return fract((p4.xxyz+p4.yzzw)*p4.zywx); } ${rule} void main() { p = mod(gl_FragCoord.xy, u_size); float band = floor(gl_FragCoord.x / u_size.x); vec4 y[6]; y[0] = R(0,0,0.), y[1] = R(0,0,1.), y[2] = R(0,0,2.); y[3] = R(-1,-1,0.) + R(1,-1,0.) + R(-1,1,0.) + R(1,1,0.) + (R( 0,-1,0.) + R(0, 1,0.) + R(-1,0,0.) + R(1,0,0.)) * 2. - y[0] * 12.; vec2 vel = texture(u_field, p / u_size).xy; vec2 dir = vec2(0., 1.); if (u_swirl) dir = normalize(vel + vec2(.01)); float s = dir.x, c = dir.y; vec4 vLU = R(-1,-1,1.), vMU = R(0,-1,1.), vRU = R(1,-1,1.), vLM = R(-1, 0,1.), vRM = R(1, 0,1.), vLD = R(-1, 1,1.), vMD = R(0, 1,1.), vRD = R(1, 1,1.); vec4 dx = vRU + vRM * 2. + vRD - vLU - vLD - vLM * 2.; vec4 dy = vLD + vMD * 2. + vRD - vLU - vRU - vMU * 2.; y[4] = dx * c - dy * s; vLU = R(-1,-1,2.), vMU = R(0,-1,2.), vRU = R(1,-1,2.); vLM = R(-1, 0,2.), vRM = R(1, 0,2.); vLD = R(-1, 1,2.), vMD = R(0, 1,2.), vRD = R(1, 1,2.); dx = vRU + vRM * 2. + vRD - vLU - vLD - vLM * 2.; dy = vLD + vMD * 2. + vRD - vLU - vRU - vMU * 2.; y[5] = dx * s + dy * c; vec4 x = y[int(band)] + update(band, y); float d = min(length(vel), 1.0); vec4 noise = hash43(vec3(gl_FragCoord.xy, u_seed)) - .5; vec4 x1 = x + noise * 0.23; fragColor = clamp(mix(x, x1, d), -1.05, 1.05); }`, { declPrefixes: { v: "v_", u: "u_" }, uniforms: { input: ["sampler2D", 0], size: ["vec2", [gl.drawingBufferWidth, gl.drawingBufferHeight]], mouse: ["vec2", [-1,-1]], seed: "float", field: ["sampler2D", 1], swirl: ["bool", swirl] } }); } step(state, field, opts = {}) { const { model } = this; const { mouse, seed = Math.random() * 1000 } = opts; model.uniforms.mouse = mouse; model.uniforms.seed = seed; model.textures = [state.front.texture, field.texture]; state.back.bind(); model.draw(); state.back.unbind(); state.flip(); } }33:T106f,viewof ruleSea = code("glsl", "rule_sea.frag")` // k=5,noise=0.02 vec4 update(float band, vec4 y[6]) { const mat4 wa0_0 = mat4(-47,373,-287,-260,-1080,-931,-93,-83,-94,38,-211,654,-22,-34,-93,-508); const mat4 wb0_0 = mat4(-212,-13,19,6,-62,-396,125,56,-92,80,-448,-66,32,56,-161,-258); const mat4 wa0_1 = mat4(32,15,15,-11,17,-66,-65,-32,-24,-22,-48,67,-61,-40,-32,49); const mat4 wb0_1 = mat4(-37,38,44,4,-17,129,134,74,-8,-34,-40,29,-27,-46,19,0); const mat4 wa0_2 = mat4(142,-20,-80,-53,-23,-90,-78,8,-103,-8,17,-29,-120,-65,-41,17); const mat4 wb0_2 = mat4(-243,-83,42,-41,-40,30,35,25,-2,-56,-34,86,76,40,90,0); const mat4 wa0_3 = mat4(364,-8,-27,-33,12,348,13,29,45,16,339,0,197,-59,-181,370); const mat4 wb0_3 = mat4(305,-66,-61,54,-53,306,3,-90,-52,-1,269,49,-192,57,89,305); const mat4 wa0_4 = mat4(-120,-81,-44,36,87,81,61,7,-31,-11,10,-4,-44,-25,13,-3); const mat4 wb0_4 = mat4(-118,-90,-33,-6,-25,-30,-42,-13,-212,-197,-146,-9,14,18,27,4); const mat4 wa0_5 = mat4(13,2,5,-13,23,33,28,1,-88,-69,-52,8,-73,-58,-34,5); const mat4 wb0_5 = mat4(37,17,18,-2,48,46,43,9,94,60,42,-5,37,30,2,4); const vec4 b0 = vec4(-127,-91,-24,35); const mat4 wa1_0 = mat4(103,297,-189,299,-205,692,-290,-949,418,269,-117,-818,98,-174,65,-11); const mat4 wb1_0 = mat4(-50,-566,12,43,73,1,21,-47,119,123,66,-20,-21,48,-13,14); const mat4 wa1_1 = mat4(-292,-84,50,-11,243,-455,-195,77,308,-110,-242,-28,143,20,179,-703); const mat4 wb1_1 = mat4(-368,-106,234,75,-238,-980,-82,103,6,0,-406,34,52,-126,15,-454); const mat4 wa1_2 = mat4(-59,-138,-160,-203,-176,-47,-255,-129,-33,346,48,-205,-43,-56,-35,192); const mat4 wb1_2 = mat4(67,-59,311,-25,-56,48,12,-238,-260,-185,56,51,107,-12,120,-164); const mat4 wa1_3 = mat4(-129,-48,-14,-180,-87,11,-46,-206,14,-78,1,-74,-141,-274,65,7); const mat4 wb1_3 = mat4(-52,-40,-59,-58,-6,4,-44,-66,63,86,-35,-20,214,197,-12,57); const mat4 wa1_4 = mat4(109,100,75,191,144,42,-335,7,78,-106,-93,123,203,28,89,71); const mat4 wb1_4 = mat4(40,-6,-64,298,150,187,-195,-40,71,-54,68,122,226,-92,77,123); const mat4 wa1_5 = mat4(7,7,42,-1,40,-30,-84,-93,14,48,20,137,23,71,-27,-98); const mat4 wb1_5 = mat4(-32,-14,29,-5,-126,-69,-24,9,37,-14,-15,-115,86,0,45,110); const vec4 b1 = vec4(11,-220,110,73); const mat4 wa2_0 = mat4(312,-55,-84,512,-377,305,58,-115,-645,685,-8,28,-45,3,53,36); const mat4 wb2_0 = mat4(305,96,-261,47,180,-96,65,101,95,-40,212,14,32,26,14,-16); const mat4 wa2_1 = mat4(-65,67,-25,-82,-203,34,32,59,-55,-12,-134,70,-26,-53,54,106); const mat4 wb2_1 = mat4(10,-66,129,57,-23,227,252,-8,-144,-8,11,-79,18,36,-108,22); const mat4 wa2_2 = mat4(-566,-19,-156,289,-161,-348,55,-138,21,-101,-341,-7,-266,-84,93,-372); const mat4 wb2_2 = mat4(-644,-242,46,-196,20,-473,9,5,33,40,-445,12,-14,62,59,-342); const mat4 wa2_3 = mat4(217,-138,-12,100,151,-49,7,85,133,-67,-11,43,124,-141,-147,-83); const mat4 wb2_3 = mat4(184,-110,25,8,34,-32,0,62,48,-15,30,24,-187,79,210,67); const mat4 wa2_4 = mat4(-131,119,33,-74,87,-102,-71,35,-164,-97,-22,-4,26,-76,55,52); const mat4 wb2_4 = mat4(-125,-5,-68,-86,86,84,75,1,-202,89,83,-127,22,149,-19,16); const mat4 wa2_5 = mat4(-10,47,33,-11,-27,-127,1,40,-39,52,-19,-5,21,174,43,114); const mat4 wb2_5 = mat4(70,94,-18,-24,70,-155,-9,38,79,68,34,66,19,-23,5,250); const vec4 b2 = vec4(169,62,196,-108); vec4 dx; if (band == 0.) { dx = b0; dx += wa0_0*max(y[0],0.)+wa0_1*max(y[1],0.)+wa0_2*max(y[2],0.)+wa0_3*max(y[3],0.)+wa0_4*max(y[4],0.)+wa0_5*max(y[5],0.); dx += wb0_0*-max(-y[0],0.)+wb0_1*-max(-y[1],0.)+wb0_2*-max(-y[2],0.)+wb0_3*-max(-y[3],0.)+wb0_4*-max(-y[4],0.)+wb0_5*-max(-y[5],0.); } else if (band == 1.) { dx = b1; dx += wa1_0*max(y[0],0.)+wa1_1*max(y[1],0.)+wa1_2*max(y[2],0.)+wa1_3*max(y[3],0.)+wa1_4*max(y[4],0.)+wa1_5*max(y[5],0.); dx += wb1_0*-max(-y[0],0.)+wb1_1*-max(-y[1],0.)+wb1_2*-max(-y[2],0.)+wb1_3*-max(-y[3],0.)+wb1_4*-max(-y[4],0.)+wb1_5*-max(-y[5],0.); } else if (band == 2.) { dx = b2; dx += wa2_0*max(y[0],0.)+wa2_1*max(y[1],0.)+wa2_2*max(y[2],0.)+wa2_3*max(y[3],0.)+wa2_4*max(y[4],0.)+wa2_5*max(y[5],0.); dx += wb2_0*-max(-y[0],0.)+wb2_1*-max(-y[1],0.)+wb2_2*-max(-y[2],0.)+wb2_3*-max(-y[3],0.)+wb2_4*-max(-y[4],0.)+wb2_5*-max(-y[5],0.); } const float scale = 1./5000.0; dx *= scale; return dx; } `34:T107d,viewof ruleForest = code("glsl", "rule_forest.frag")` // k=7,noise=0.02 vec4 update(float band, vec4 y[6]) { const mat4 wa0_0 = mat4(0,365,-154,-54,-849,169,108,471,-486,375,-23,526,49,-56,-37,-369); const mat4 wb0_0 = mat4(-267,-16,38,-208,-36,-363,8,11,-11,68,-442,38,-49,109,52,-340); const mat4 wa0_1 = mat4(-111,-54,-48,27,53,38,0,-8,3,-2,50,-147,-101,-43,-91,70); const mat4 wb0_1 = mat4(263,220,30,-114,6,5,-77,-5,1,15,30,-37,42,-15,-78,-4); const mat4 wa0_2 = mat4(83,-60,-5,117,1,9,-49,-5,36,120,38,-81,28,43,-3,-60); const mat4 wb0_2 = mat4(-76,-51,-72,-70,-43,2,16,9,33,-39,24,56,14,-194,-215,-111); const mat4 wa0_3 = mat4(449,35,4,-152,68,405,27,-15,105,11,347,-113,134,-6,-6,285); const mat4 wb0_3 = mat4(248,-86,-48,-12,-79,258,-44,-26,-112,-19,312,93,-157,19,7,421); const mat4 wa0_4 = mat4(0,0,-15,1,32,-15,4,11,-169,-113,-45,60,-3,3,13,17); const mat4 wb0_4 = mat4(-16,-22,-20,-13,2,18,3,-9,-74,-61,-16,28,-28,-19,3,-16); const mat4 wa0_5 = mat4(27,43,6,-9,-23,-28,-8,19,-79,-68,-22,49,-68,-44,-38,-3); const mat4 wb0_5 = mat4(10,2,0,-32,5,3,0,10,10,18,-9,-34,6,11,19,-3); const vec4 b0 = vec4(-102,-98,-135,-76); const mat4 wa1_0 = mat4(-496,-697,1072,364,40,701,-496,-240,110,391,-536,-111,-50,-105,260,-37); const mat4 wb1_0 = mat4(-26,-69,-187,-43,0,1,140,83,4,61,-3,73,165,122,-79,182); const mat4 wa1_1 = mat4(-489,45,135,84,-197,-619,-222,29,-347,173,-324,-184,69,144,14,-246); const mat4 wb1_1 = mat4(-598,-221,-16,-91,-108,-487,-192,46,34,-135,-488,-136,-226,-204,53,-708); const mat4 wa1_2 = mat4(220,55,4,50,155,-27,-166,-146,-172,95,149,6,53,116,69,-56); const mat4 wb1_2 = mat4(-118,141,210,50,103,70,187,96,82,-268,66,-77,-37,128,13,124); const mat4 wa1_3 = mat4(-152,139,94,44,-14,189,91,102,-59,113,2,94,-163,150,-187,-87); const mat4 wb1_3 = mat4(61,80,97,126,28,96,93,119,100,68,75,117,259,11,-47,359); const mat4 wa1_4 = mat4(-55,3,-37,-120,39,221,-135,-132,137,-306,-304,-92,-41,-16,-72,30); const mat4 wb1_4 = mat4(-123,76,53,-24,7,110,-195,-2,-19,-176,-197,31,-11,-96,-87,21); const mat4 wa1_5 = mat4(-68,161,189,32,75,-84,-16,-42,144,-150,-22,-56,-21,-89,-4,-23); const mat4 wb1_5 = mat4(13,138,140,277,-3,-64,21,-33,53,-89,126,84,-1,-31,17,-40); const vec4 b1 = vec4(150,-19,-79,170); const mat4 wa2_0 = mat4(-12,86,620,55,345,-41,-786,-95,169,50,-190,-108,-289,224,42,198); const mat4 wb2_0 = mat4(366,39,94,72,211,-35,-15,-94,167,107,-91,94,-4,-62,5,-270); const mat4 wa2_1 = mat4(-108,-7,121,-5,335,-180,100,-41,-275,157,-131,-232,-181,2,76,119); const mat4 wb2_1 = mat4(113,-210,235,-110,97,-324,114,-10,0,37,43,99,154,55,55,-226); const mat4 wa2_2 = mat4(-721,-302,-165,-3,288,-374,4,33,167,-124,-485,39,-104,124,12,-555); const mat4 wb2_2 = mat4(-333,-61,79,-13,-217,-480,111,98,-38,82,-317,115,-17,39,-42,-303); const mat4 wa2_3 = mat4(145,-4,161,7,-23,-4,116,-18,104,17,138,48,214,-133,110,25); const mat4 wb2_3 = mat4(33,-52,10,77,-3,-42,22,68,-57,18,-29,55,-182,181,-69,-217); const mat4 wa2_4 = mat4(100,-49,19,43,94,-71,38,18,112,63,-252,88,3,11,31,-9); const mat4 wb2_4 = mat4(-98,9,100,-2,-90,-138,143,-31,21,89,-63,-33,-9,53,-67,30); const mat4 wa2_5 = mat4(-140,97,73,-1,27,59,-33,50,69,80,-284,38,29,-48,-44,34); const mat4 wb2_5 = mat4(-338,-60,156,-172,89,135,-70,5,40,-44,-86,-48,62,72,-113,18); const vec4 b2 = vec4(96,98,-14,-40); vec4 dx; if (band == 0.) { dx = b0; dx += wa0_0*max(y[0],0.)+wa0_1*max(y[1],0.)+wa0_2*max(y[2],0.)+wa0_3*max(y[3],0.)+wa0_4*max(y[4],0.)+wa0_5*max(y[5],0.); dx += wb0_0*-max(-y[0],0.)+wb0_1*-max(-y[1],0.)+wb0_2*-max(-y[2],0.)+wb0_3*-max(-y[3],0.)+wb0_4*-max(-y[4],0.)+wb0_5*-max(-y[5],0.); } else if (band == 1.) { dx = b1; dx += wa1_0*max(y[0],0.)+wa1_1*max(y[1],0.)+wa1_2*max(y[2],0.)+wa1_3*max(y[3],0.)+wa1_4*max(y[4],0.)+wa1_5*max(y[5],0.); dx += wb1_0*-max(-y[0],0.)+wb1_1*-max(-y[1],0.)+wb1_2*-max(-y[2],0.)+wb1_3*-max(-y[3],0.)+wb1_4*-max(-y[4],0.)+wb1_5*-max(-y[5],0.); } else if (band == 2.) { dx = b2; dx += wa2_0*max(y[0],0.)+wa2_1*max(y[1],0.)+wa2_2*max(y[2],0.)+wa2_3*max(y[3],0.)+wa2_4*max(y[4],0.)+wa2_5*max(y[5],0.); dx += wb2_0*-max(-y[0],0.)+wb2_1*-max(-y[1],0.)+wb2_2*-max(-y[2],0.)+wb2_3*-max(-y[3],0.)+wb2_4*-max(-y[4],0.)+wb2_5*-max(-y[5],0.); } const float scale = 1./5000.0; dx *= scale; return dx; } `35:T922,Model = { class AttribBuffer { constructor(gl, data = null, target = gl.ARRAY_BUFFER, usage = gl.STATIC_DRAW) { this.gl = gl; this.buffer = gl.createBuffer(); this.target = target; this.usage = usage; data && this.set(data); } bind() { this.gl.bindBuffer(this.target, this.buffer); } unbind() { this.gl.bindBuffer(this.target, null); } release() { if (this.buffer) { this.gl.deleteBuffer(this.buffer); delete this.buffer; } } set(data) { this.bind(); this.gl.bufferData(this.target, data, this.usage); } update(data, offset = 0) { this.bind(); this.gl.bufferSubData(this.target, offset, data); } } function initAttribs(gl, spec) { const res = {}; for(const name in spec) { let { buffer, data, size = 3, stride = 0, offset = 0 } = spec[name]; if (!buffer) buffer = new AttribBuffer(gl, data); res[name] = { buffer, size, stride, offset }; } return res; } function initIndices(gl, spec) { const buffer = new AttribBuffer(gl, spec.data, gl.ELEMENT_ARRAY_BUFFER); const type = spec.data instanceof Uint32Array ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT; return { buffer, type }; } return class { constructor(gl, spec) { const { shader, attribs, indices, num, mode = gl.TRIANGLES, uniforms = {}, textures = [] } = spec; this.gl = gl; this.shader = shader; if (attribs) { this.attribs = initAttribs(gl, attribs); shader.setup(this.attribs); } this.indices = indices ? initIndices(gl, indices) : undefined; this.textures = textures; this.uniforms = uniforms; this.num = num; this.mode = mode; } bindTextures() { for(let i = 0, n = this.textures.length; i < n; i++) { this.textures[i].bind(i); } } draw(opts = {}) { const { gl, shader, indices, mode, num, uniforms } = this; shader.bind(); shader.setUniforms(uniforms); shader.prepareState(opts.state); this.bindTextures(); if (indices) { const { buffer, type } = indices; buffer.bind(); gl.drawElements(mode, num, type, 0); } else { gl.drawArrays(mode, 0, num); } } }; }36:T2f4d,Shader = { function compileShader(gl, type, source) { assert(type == "vs" || type == "fs", "type should be `vs` or `fs`"); const shaderType = type == 'vs' ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER; const shader = gl.createShader(shaderType); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { const msg = gl.getShaderInfoLog(shader); gl.deleteShader(shader); throw new Error(`Error compiling shader: ${msg}`); } return shader; } function compileProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, compileShader(gl, "vs", vs)); gl.attachShader(program, compileShader(gl, "fs", fs)); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { const msg = gl.getProgramInfoLog(program); gl.deleteProgram(program); throw new Error(`Couldn't link shader: ${msg}`); } return program; } const setS = fn => (gl, loc, defaultVal = 0) => { let prev; return x => { x = x === undefined ? defaultVal : x; if (x !== prev) { gl[`uniform1${fn}`](loc, x); prev = x; } }; }; const setV = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eq.equivArrayLike(prev, x)) { gl[`uniform${fn}`](loc, x); prev = [...x]; } }; }; const setM = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eq.equivArrayLike(prev, x)) { gl[`uniformMatrix${fn}`](loc, false, x); prev = [...x]; } }; }; const SETTERS = { bool: setS("i"), float: setS("f"), int: setS("i"), uint: setS("ui"), bvec2: setV("2iv", v.ZERO2), bvec3: setV("3iv", v.ZERO3), bvec4: setV("4iv", v.ZERO4), ivec2: setV("2iv", v.ZERO2), ivec3: setV("3iv", v.ZERO3), ivec4: setV("4iv", v.ZERO4), vec2: setV("2fv", v.ZERO2), vec3: setV("3fv", v.ZERO3), vec4: setV("4fv", v.ZERO4), mat2: setM("2fv", m.IDENT22), mat3: setM("3fv", m.IDENT33), mat4: setM("4fv", m.IDENT44), sampler2D: setS("i"), sampler2DShadow: setS("i"), sampler3D: setS("i"), samplerCube: setS("i"), samplerCubeShadow: setS("i") }; function makeUniformSetter(gl, program, name, type, defaultVal = undefined) { const loc = gl.getUniformLocation(program, name); return SETTERS[type](gl, loc, defaultVal); }; const getType = type => { const m = type.match(/(\w+)(?:\[(\d+)\])/); if (m) return [m[1], parseInt(m[2])]; return [type, 0]; }; const makeFieldName = path => { let res = ""; for(let i = 0, n = path.length; i < n; i++) { if (Number.isInteger(path[i])) res += `[${path[i]}]`; else if (path[i].length > 0) { res += `.${path[i]}`; } } return res; }; const getStructFields = (type0, structs) => { const [type, n] = getType(type0); if (!(type in structs)) { if (n > 0) return d3.range(n).map(i => [[i], type]); return [[[''], type]]; } const entries = Object.entries(structs[type] || {}); const res = []; if (n > 0) { for (let i = 0; i < n; i++) { for(const [key, val] of entries) { const [t, _] = getType(val); if (!(t in structs)) res.push([[i, key], t]); else for (const [k, v] of getStructFields(val, structs)) res.push([[i, key].concat(k), v]); } } } else { for(const [key, val] of entries) { const [t, _] = getType(val); if (!(t in structs)) res.push([[key], t]); else for (const [k, v] of getStructFields(val, structs)) res.push([[key].concat(k), v]); } } return res; }; const getVal = (path, val) => { if (path.length == 0) return val; if (path.length == 1 && path[0] === '') return val; return getVal(path.slice(1), val[path[0]]); }; const getDef = def => { let type = def, defaultVal; if (Array.isArray(def)) [type, defaultVal] = def; return [type, defaultVal]; }; const getLocations = (name, def, structs) => { const [type, defaultVal] = getDef(def); const fields = getStructFields(type, structs); const res = []; for (const [path, type] of fields) { const val = defaultVal !== undefined ? getVal(path, defaultVal) : undefined; res.push([`${name}${makeFieldName(path)}`, type, val]); } return res; }; const getAssign = (name, val, types, structs) => { assert(name in types, `Unknown field ${name}`); return getLocations(name, [types[name], val], structs); }; function getDefs(uniforms, structs) { const res = []; for (const [k, v] of Object.entries(uniforms)) { res.push(...getLocations(k, v, structs)); } return res; } function getAssigns(uniforms, types, structs) { const res = []; for (const [k, v] of Object.entries(uniforms)) { if (k in types) res.push(...getAssign(k, v, types, structs)); } return res; } function getTypeInfos(defs) { const res = {}; for (const [k, v] of Object.entries(defs)) { res[k] = Array.isArray(v) ? v[0] : v; } return res; } const HEADER = ` #if defined(GL_FRAGMENT_PRECISION_HIGH) && !defined(MEDIUMP) precision highp int; precision highp float; #else precision mediump int; precision mediump float; #endif #ifndef PI #define PI 3.141592653589793 #endif #ifndef TAU #define TAU 6.283185307179586 #endif #ifndef HALF_PI #define HALF_PI 1.570796326794896 #endif #define saturate(a) clamp(a, 0.0, 1.0) `; const isArray = Array.isArray; const arrayDecl = (qualifier, decl, id) => { const type = isArray(decl) ? decl[0] : decl; return type.indexOf("[]") > 0 ? `${qualifier} ${type.replace("[]", "")} ${id}[${decl[1]}];` : `${qualifier} ${type} ${id};`; }; const NO_PREFIXES = { a: "", v: "", u: "", o: "" }; const DEFAULT_OUTPUT = { fragColor: ["vec4", 0] }; const syntax = { attrib: (id, type, pre) => isArray(type) ? `layout(location=${type[1]}) in ${type[0]} ${pre.a}${id};` : `in ${type} ${pre.a}${id};`, varying: { vs: (id, type, pre) => arrayDecl("out", type, pre.v + id), fs: (id, type, pre) => arrayDecl("in", type, pre.v + id), }, uniform: (id, u, pre) => arrayDecl("uniform", u, pre.u + id), output: (id, type, pre) => isArray(type) ? `layout(location=${type[1]}) out ${type[0]} ${pre.o}${id};` : `out ${type} ${pre.o}${id};`, }; const compileStruct = (name, fields) => { let src = `struct ${name} {\n`; for (const key in fields) { src += ` ${fields[key]} ${key};\n`; } return src + "};\n"; }; const compileStructs = structs => Object.entries(structs).map(x => compileStruct(...x)).join("\n"); const compileDefines = defines => defines.map(x => `#define ${x}\n`).join(""); const compileVars = (attribs, syntax, prefixes) => { const decls = []; for (let id in attribs) { if (attribs.hasOwnProperty(id)) { decls.push(syntax(id, attribs[id], prefixes)); } } decls.push(""); return decls.join("\n"); }; function assembleShader(source, type, opts) { const { attribs = {}, varying = {}, uniforms = {}, outputs = DEFAULT_OUTPUT, pre, structs = {}, defines = [], declPrefixes = NO_PREFIXES } = opts; const prefixes = { ...NO_PREFIXES, ...declPrefixes }; let src = "#version 300 es\n"; if (pre) src += `${pre}\n`; src += compileDefines(defines) + "\n"; src += `${HEADER}\n`; // src += compileDefines(defines) + "\n"; src += compileStructs(structs) + "\n"; if (type == "vs") src += compileVars(attribs, syntax.attrib, prefixes) + "\n"; else src += compileVars(outputs, syntax.output, prefixes) + "\n"; src += compileVars(varying, syntax.varying[type], prefixes) + "\n"; src += compileVars(uniforms, syntax.uniform, prefixes); src += source; return src ; }; return class { constructor(gl, spec) { this.gl = gl; const opts = { attribs: spec.attribs, varying: spec.varying, uniforms: spec.uniforms || {}, outputs: spec.outputs, structs: spec.structs || {}, defines: spec.defines || [], declPrefixes: spec.declPrefixes || {} }; this.vs = assembleShader(spec.vs, "vs", opts); this.fs = assembleShader(spec.fs, "fs", opts); this.program = compileProgram(gl, this.vs, this.fs); this.initUniforms(opts.uniforms, opts.structs, opts.declPrefixes); this.state = spec.state || {}; } initUniforms(uniforms, structs, declPrefixes) { const gl = this.gl; const specs = getDefs(uniforms, structs); this.gl.useProgram(this.program); this.uniformSetters = {}; const prefix = declPrefixes?.u ? declPrefixes.u : ""; for (const [name, type, defaultVal] of specs) { const setter = makeUniformSetter(gl, this.program, prefix + name, type, defaultVal); this.uniformSetters[name] = setter; setter(); } this.uniformTypes = getTypeInfos(uniforms); this.structs = structs; } bind() { assert(this.program, "program already released"); this.gl.useProgram(this.program); this.vao && this.gl.bindVertexArray(this.vao); } unbind() { this.gl.useProgram(null); this.vao && this.gl.bindVertexArray(null); } makeVAO(attribs) { const { gl, program } = this; const vao = gl.createVertexArray(); gl.bindVertexArray(vao); for(const name in attribs) { const { buffer, size, stride, offset } = attribs[name]; buffer.bind(); const loc = gl.getAttribLocation(program, name); assert(loc >= 0, `Unknown attribute: ${name}`); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, size, gl.FLOAT, false, stride, offset); buffer.unbind(); } gl.bindVertexArray(null); return vao; } setup(attribs) { this.vao = this.makeVAO(attribs); return this; } releaseVAO() { if (this.vao) { this.gl.deleteVertexArray(this.vao); delete this.vao; } } setUniforms(vals) { const assigns = getAssigns(vals, this.uniformTypes, this.structs); const setters = this.uniformSetters; for (const [field, _, val] of assigns) { if (!(field in setters)) continue; setters[field](val); } } release() { if (this.program) { this.gl.deleteProgram(this.program); delete this.program; this.releaseVAO(); return true; } return false; } setState(id, val) { if (val) { this.gl.enable(id); } else { this.gl.disable(id); } } prepareState(state = this.state) { const gl = this.gl; state.depth !== undefined && this.setState(gl.DEPTH_TEST, state.depth); if (state.cull !== undefined) { this.setState(gl.CULL_FACE, state.cull); state.cullMode && gl.cullFace(state.cullMode); } if (state.blend !== undefined) { this.setState(gl.BLEND, state.blend); state.blendFn && gl.blendFunc(state.blendFn[0], state.blendFn[1]); state.blendEq !== undefined && gl.blendEquation(state.blendEq); } if (state.stencil !== undefined) { this.setState(gl.STENCIL_TEST, state.stencil); state.stencilFn && gl.stencilFunc(state.stencilFn[0], state.stencilFn[1], state.stencilFn[2]); state.stencilOp && gl.stencilOp(state.stencilOp[0], state.stencilOp[1], state.stencilOp[2]); state.stencilMask !== undefined && gl.stencilMask(state.stencilMask); } } }}37:T4d3,class Buffer { constructor(gl, opts = {}) { const { width, height, data = null, internalFormat = gl.RGBA16F, type = gl.FLOAT, filter = gl.LINEAR, arrayType = Float32Array } = opts; this.gl = gl; this.width = width; this.height = height; this.texture = new Texture(gl, { width, height, internalFormat, type, filter, format: gl.RGBA, wrap: gl.CLAMP_TO_EDGE, image: data }); this.fbo = new FBO(gl, { drawBuffers: [this.texture] }); Object.defineProperties(this, { _out: { value: new arrayType(width * height * 4) } }); } read() { const { format, type, size } = this.texture; this.fbo.bind(); this.gl.readPixels(0, 0, size[0], size[1], format, type, this._out); this.fbo.unbind(); return this._out; } update(data) { const { target, format, type, size } = this.texture; this.texture.bind(); this.gl.texSubImage2D(target, 0, 0, 0, size[0], size[1], format, type, data, 0); this.texture.unbind(); } bind() { this.fbo.bind(); this.gl.viewport(0, 0, ...this.texture.size); } unbind() { this.fbo.unbind(); } release() { this.fbo.release(); this.texture.release(); } }38:T10b4,class Texture { static makeCubemap(gl, faces, opts = {}) { const texture = new Texture(gl, { ...opts, target: gl.TEXTURE_CUBE_MAP, mipmap: false, }); for(let i = 0; i < 6; i++) { const target = gl.TEXTURE_CUBE_MAP_POSITIVE_X + i; const data = faces ? faces[i] : null; if (data) gl.texImage2D(target, 0, texture.internalFormat, texture.format, texture.type, data); else { gl.texImage2D(target, 0, texture.internalFormat, opts.width, opts.height, 0, texture.format, texture.type, data); } } opts.mipmap && texture.generateMipmap(); return texture; } static fromImage(gl, image, opts = {}) { opts = { width: image.width, height: image.height, image, filter: [gl.LINEAR_MIPMAP_LINEAR, gl.LINEAR], mipmap: true, anisotropy: true, ...opts }; return new Texture(gl, opts); } constructor(gl, opts) { this.gl = gl; this.tex = gl.createTexture(); this.target = opts.target || gl.TEXTURE_2D; this.format = opts.format || gl.RGBA; this.internalFormat = opts.internalFormat || gl.RGBA; this.type = opts.type || gl.UNSIGNED_BYTE; this.unpackAlignment = opts.unpackAlignment; this.configure(opts); if (opts.width && opts.height) this.size = [opts.width, opts.height]; } configure(opts) { const { gl, target } = this; gl.bindTexture(this.target, this.tex); opts.unpackAlignment !== undefined && gl.pixelStorei(gl.UNPACK_ALIGNMENT, opts.unpackAlignment); opts.flip !== undefined && gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, opts.flip ? true : false); gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); this.configureFilter(opts); this.configureWrap(opts); if (opts.immutable === true) this.configureStorage(opts); else this.configureImage(opts); opts.mipmap && this.generateMipmap(); } configureStorage(opts) { const { gl, format, type } = this; const { width, height, image, levels = 1, immutable = false } = opts; this.immutable = immutable; this.levels = levels; if (width && height) { gl.texStorage2D(gl.TEXTURE_2D, levels, this.internalFormat, width, height); if (image !== undefined) gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, format, type, image); } } configureImage(opts) { if (opts.image === undefined) return; // 2D const { width, height, image, level = 0 } = opts; const { gl, target, type, format, internalFormat, size } = this; if (width && height) { gl.texImage2D(target, level, internalFormat, width, height, 0, format, type, image); } else gl.texImage2D(target, level, internalFormat, format, type, image); } configureFilter(opts) { const { gl, target, } = this; const flt = opts.filter || gl.NEAREST; let t1, t2; if (Array.isArray(flt)) { t1 = flt[0]; t2 = flt[1] || t1; this.filter = [t1, t2]; } else { this.filter = [flt, flt, flt]; t1 = t2 = flt; } gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, t1); gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, t2); } configureWrap(opts) { const { gl, target } = this; const wrap = opts.wrap || gl.CLAMP_TO_EDGE; let t1, t2, t3; if (Array.isArray(wrap)) { t1 = wrap[0]; t2 = wrap[1] || t1; t3 = wrap[2] || t1; this.wrap = [t1, t2, t3]; } else { t1 = t2 = t3 = wrap; this.wrap = [wrap, wrap, wrap]; } gl.texParameteri(target, gl.TEXTURE_WRAP_S, t1); gl.texParameteri(target, gl.TEXTURE_WRAP_T, t2); } bind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, this.tex); return true; } unbind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, null); return true; } release() { if (this.tex) { this.gl.deleteTexture(this.tex); delete this.tex; delete this.gl; return true; } return false; } generateMipmap() { this.gl.generateMipmap(this.target); } }39:T6b5,class FBO { constructor(gl, opts = {}) { this.gl = gl; this.fbo = gl.createFramebuffer(); this.bind(); opts.drawBuffers && this.setupDrawBuffers(opts.drawBuffers); if (opts.drawBuffers) this.validate(); } setupDrawBuffers(drawBuffers = []) { const gl = this.gl; const attachments = []; for (let i = 0, n = drawBuffers.length; i < n; i++) { const tex = drawBuffers[i].tex; const attach = gl.COLOR_ATTACHMENT0 + i; gl.framebufferTexture2D(gl.FRAMEBUFFER, attach, gl.TEXTURE_2D, tex, 0); attachments.push(attach); } gl.drawBuffers(attachments); } bind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.fbo); return true; } unbind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null); return true; } release() { if (this.fbo) { this.gl.deleteFramebuffer(this.fbo); delete this.fbo; return true; } return false; } validate() { const gl = this.gl; const err = gl.checkFramebufferStatus(gl.FRAMEBUFFER); switch (err) { case gl.FRAMEBUFFER_COMPLETE: return true; case gl.FRAMEBUFFER_UNSUPPORTED: throw new Error("FBO unsupported"); case gl.FRAMEBUFFER_INCOMPLETE_ATTACHMENT: throw new Error("FBO incomplete attachment"); case gl.FRAMEBUFFER_INCOMPLETE_DIMENSIONS: throw new Error("FBO incomplete dimensions"); case gl.FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: throw new Error("FBO incomplete missing attachment"); case gl.FRAMEBUFFER_INCOMPLETE_MULTISAMPLE: throw new Error("FBO incomplete multisample"); default: throw new Error(`FBO error: ${err}`); } } }3a:T495,code = (lang, name, open = false) => { const ID = `code-styles`; const style = html`