31:T5dd,[Line Integral Convolution](https://en.wikipedia.org/wiki/Line_integral_convolution) (LIC) is a technique originally proposed by [Brian Cabral and Leith Leedom](http://www8.cs.umu.se/kurser/TDBD13/VT00/extra/p263-cabral.pdf) in 1993 to visualize a vector field, such as fluid motion. Further development by [Bruno Jobard et al.](https://www.cs.ucdavis.edu/~ma/ECS276/readings/Jobard_TVCG02.pdf) in 2002 makes it suitable for computation on GPU, thus real-time applications. [Nicolas Belmonte](http://philogb.github.io/) has a very easy to understand [reference implementation](http://philogb.github.io/blog/2012/08/14/playing-with-line-integral-convolutions/) using WebGL, and [Ricky Reusser](https://rreusser.github.io/) also has a a nice [implementation](https://rreusser.github.io/line-integral-convolution/) using [regl](https://github.com/regl-project/regl). One little drawback of these implementations is that they used multiple-passes for a single frame, and since WebGL2 [achieving pervasive support](https://www.khronos.org/blog/webgl-2-achieves-pervasive-support-from-all-major-web-browsers) now, I found that it is actually possible to reduce it to a more efficient two-passes process using multiple output buffers: one for advection and one for line convolution. The following is a proof of concept demo: * Choose a field to visualize. * Check **quiver** to enable a overlaying quiver plot. * Check **fluid** and drag on the canvas to see how it react to fields that evolve over time.32:T6be,fields = { const aspect = gl.drawingBufferWidth / gl.drawingBufferHeight; const extent = [-5 * aspect, 5 * aspect, -5, 5]; return { circle: { h: 1 / (5 * aspect), range: [0, Math.hypot(5 * aspect, 5) * .7], field: new Field(gl, ` vec2 field(vec2 p) { return vec2(-p.y, p.x); }`, extent), }, vortex: { h: 0.4944, range: [0, 2.3776], field: new Field(gl, ` vec2 field(vec2 p) { const float RADIUS = 2.0, PULL = .25; float sqSum = p.x * p.x + p.y * p.y; float divisor = 1. / sqrt(sqSum); float factor = exp(-sqSum / RADIUS); float u = p.y * factor * divisor - PULL * p.x; float v = -p.x * factor * divisor - PULL * p.y; return vec2(u, v); }`, extent), }, twirls: { h: 0.5003, range: [0.0086, 2.3036], field: new Field(gl, ` vec2 field(vec2 p) { const float H_FREQ = 1.0, V_FREQ = 0.5, V_FLOW = 0.5; float u = cos(H_FREQ * p.x) + cos(p.y * 2.5); float v = sin(2.0 * p.x) * cos(V_FREQ * p.y + 1.5) - V_FLOW; return vec2(u, v); }`, extent), }, circulate: { h: 1, range: [0.0131, 1.4140], field: new Field(gl, ` vec2 field(vec2 p) { return vec2(cos(p.y), sin(p.x)); }`, extent), }, swirls: { h: 1, range: [0.02189, 1.4140], field: new Field(gl, ` vec2 field(vec2 p) { return vec2(sin(p.x + p.y), cos(p.x - p.y)); }`, extent), }, churn: { h: 1, range: [0.0082, 1.4140], field: new Field(gl, ` vec2 field(vec2 p) { float u = cos(hypot(p, p)); float v = cos(p.x - p.y); return vec2(u,v); }`, extent), }, lines: { h: 1, range: [0, 1.4140], field: new Field(gl, ` vec2 field(vec2 p) { return vec2(1.0, sin(p.x)); }`, extent), } }; }33:T6bd,class LIC { programs = {} constructor(gl, opts = {}) { this.gl = gl; this.programs['initialize'] = new Initialize(gl); this.programs['advection'] = new Advection(gl); this.programs['alic'] = new ALIC(gl); this.initialize(opts); } initialize(opts) { const gl = this.gl; const { width, height } = { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight, ...opts }; const optsN = { width, height, levels: 1, internalFormat: gl.R32F, format: gl.RED, type: gl.FLOAT, }; const optsNLinear = { ...optsN, sampler: new Sampler(gl, { filter: gl.LINEAR }) }; const optsC = { width, height, levels: 1, internalFormat: gl.RG32F, format: gl.RG, type: gl.FLOAT, }; this.buffer = new DoubleBuffer( new DrawBuffer(gl, [new Texture2D(gl, optsC), new Texture2D(gl, optsN), new Texture2D(gl, optsNLinear)]), new DrawBuffer(gl, [new Texture2D(gl, optsC), new Texture2D(gl, optsN), new Texture2D(gl, optsNLinear)])); this.buffer.front.bind(); this.programs['initialize'].run(); this.buffer.front.unbind(); } step(fieldTex, h, time) { const { buffer, programs } = this; buffer.back.bind(); programs.advection.run({ uniforms: { time, h }, textures: [fieldTex, ...buffer.front.textures] }); buffer.flip(); } render(fieldTex, h, range, quiverEnable = false) { this.programs['alic'].run({ uniforms: { h, range, quiverEnable, quiver: { range } }, textures: [fieldTex, this.buffer.front.textures[2]] }); } }34:T573,class Advection extends QuadProgram { constructor(gl) { super(gl, ` ${glslCommon} vec2 rk2(vec2 C, vec2 toUV) { vec2 f1 = texture(u_field, C * toUV).xy; vec2 f2 = texture(u_field, (C - .5 * u_h * f1) * toUV).xy; return C - u_h * f2; } void main() { vec2 coord = texelFetch(u_C, ivec2(gl_FragCoord.xy), 0).xy; vec2 size = vec2(textureSize(u_C, 0)); vec2 ToUV = 1. / size; o_C = rk2(floor(gl_FragCoord.xy) + fract(coord), ToUV); float texel, Na; if (coord.x > size.x || coord.x < 0. || coord.y > size.y || coord.y < 0.) { texel = Na = step(.5, hash13(vec3(coord, u_time))); } else { texel = texelFetch(u_N, ivec2(coord), 0).r; Na = texture(u_N, coord * ToUV).r; } float inject = step(u_inject, hash13(vec3(coord, mod(u_time, 257.0)))); Na = mix(1. - Na, Na, inject); texel = mix(1. - texel, texel, inject); o_N = texel; float Nb = texelFetch(u_Nb, ivec2(gl_FragCoord.xy), 0).r; o_Nb = mix(Na, Nb, u_alpha); }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { time: ["float", 0], inject: ["float", .02], alpha: ["float", .97], h: "float", field: ["sampler2D", 0], C: ["sampler2D", 1], N: ["sampler2D", 2], Nb: ["sampler2D", 3], }, outputs: { C: ["vec2", 0], N: ["float", 1], Nb: ["float", 2] } }); } }35:T6a5,class ALIC extends QuadProgram { constructor(gl) { super(gl, ` ${glslCommon} float quiver(vec2 p, vec2 dir, Quiver opts) { p = mod(p, opts.cellSize) / opts.cellSize; p = p * 2. - 1.; float mag = length(dir); float len = fit(mag, opts.range.x, opts.range.y, .05, .75); vec2 v = dir / mag * len; float d = arrow(p, -v, v, opts.arrow); return 1. - smoothstep(0., opts.lineWidth, d); } void main() { vec2 coord = gl_FragCoord.xy; vec2 size = vec2(textureSize(u_Nb, 0)); vec2 ToUV = 1. / size; float k = 1. / (u_L + 1.); float res = texelFetch(u_Nb, ivec2(coord), 0).r * k; vec2 Cb = coord, Cf = coord; for (float i = 0., n = u_L * .5; i < n; i++) { Cb = mod(Cb + texture(u_field, Cb * ToUV).xy * u_h, size); Cf = mod(Cf - texture(u_field, Cf * ToUV).xy * u_h, size); res += texture(u_Nb, Cb * ToUV).r * k; res += texture(u_Nb, Cf * ToUV).r * k; } vec2 vel = texture(u_field, coord * ToUV).xy; float mask = fit(length(vel), u_range.x, u_range.y, .05, 1.0); vec3 color = viridis(mask) * res * 1.5; if (u_quiverEnable) color = mix(color * .8, vec3(1.), quiver(coord, vel, u_quiver)); fragColor = vec4(color, 1.0); }`, { structs: { Quiver: { cellSize: "float", range: "vec2", arrow: "vec2", lineWidth: "float" } }, uniforms: { field: ["sampler2D", 0], Nb: ["sampler2D", 1], L: ["float", 12], h: "float", range: "vec2", quiverEnable: ["bool", 1], quiver: ["Quiver", { cellSize: 30, range: [0,2], arrow: [.4, .2], lineWidth: .1 }] } }); } }36:T814,viewof glslCommon = code("common.glsl")` // Hash without Sine (https://www.shadertoy.com/view/4djSRW) float hash13(vec3 p3) { p3 = fract(p3 * .1031); p3 += dot(p3, p3.zyx + 31.32); return fract((p3.x + p3.y) * p3.z); } vec2 hash23(vec3 p3) { p3 = fract(p3 * vec3(.1031, .1030, .0973)); p3 += dot(p3, p3.yzx+33.33); return fract((p3.xx+p3.yz)*p3.zy); } // by Sean Kelley (https://observablehq.com/@flimsyhat/webgl-color-maps) vec3 viridis(float t) { const vec3 c0 = vec3(0.2777273272234177, 0.005407344544966578, 0.3340998053353061); const vec3 c1 = vec3(0.1050930431085774, 1.404613529898575, 1.384590162594685); const vec3 c2 = vec3(-0.3308618287255563, 0.214847559468213, 0.09509516302823659); const vec3 c3 = vec3(-4.634230498983486, -5.799100973351585, -19.33244095627987); const vec3 c4 = vec3(6.228269936347081, 14.17993336680509, 56.69055260068105); const vec3 c5 = vec3(4.776384997670288, -13.74514537774601, -65.35303263337234); const vec3 c6 = vec3(-5.435455855934631, 4.645852612178535, 26.3124352495832); return c0+t*(c1+t*(c2+t*(c3+t*(c4+t*(c5+t*c6))))); } float fit(float x, float a, float b, float c, float d) { return mix(d, c, saturate((x - b) / (a - b))); } vec2 fit(vec2 x, vec2 a, vec2 b, vec2 c, vec2 d) { return mix(d, c, saturate((x - b) / (a - b))); } float fit01(float x, float a, float b) { return fit(x, a, b, 0., 1.); } vec2 fit01(vec2 x, vec2 a, vec2 b) { return fit(x, a, b, vec2(0.), vec2(1.)); } float hypot(vec2 a, vec2 b) { return sqrt(dot(a, b)); } // by Inigo Quilez (https://iquilezles.org/articles/distfunctions2d/) float udSegment(vec2 p, vec2 a, vec2 b) { vec2 ba = b - a, pa = p - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - h * ba); } float arrow(vec2 p, vec2 a, vec2 b, vec2 size) { vec2 dir = b - a, dirP = vec2(-dir.y, dir.x); float shaft = udSegment(p, a, b); float head = min(udSegment(p, b, b - dir * size.x + size.y * dirP), udSegment(p, b, b - dir * size.x - size.y * dirP)); return min(head, shaft); }`37:T1557,class FluidSim { programs = {} buffers = {} constructor(gl, size) { this.size = size; this.programs['advection'] = new PaddedProgram(gl, size, ` vec2 bfecc(sampler2D tex, vec2 A, float dt) { vec2 v0 = texture(tex, A / u_size).xy; vec2 C = A - v0 * dt; vec2 v1 = texture(tex, C / u_size).xy; vec2 D = C + v1 * dt; vec2 E = A - (D - A) * .5; vec2 v2 = texture(tex, E / u_size).xy; return E - v2 * dt; } void main() { vec2 p = bfecc(u_field, gl_FragCoord.xy, u_dt); o_result = texture(u_subject, p / u_size); }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { field: ["sampler2D", 0], subject: ["sampler2D", 1], size: ["vec2", size], dt: ["float", 1] }, outputs: { result: "vec4" } }); this.programs['divergence'] = new QuadProgram(gl, ` void main() { ivec2 coord = ivec2(gl_FragCoord.xy); float x0 = texelFetchOffset(u_field, coord, 0, ivec2(-1,0)).x; float x1 = texelFetchOffset(u_field, coord, 0, ivec2( 1,0)).x; float y0 = texelFetchOffset(u_field, coord, 0, ivec2(0,-1)).y; float y1 = texelFetchOffset(u_field, coord, 0, ivec2(0, 1)).y; float divergence = (x1 - x0 + y1 - y0) * .5; o_div = divergence * u_dtInv; }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { field: ["sampler2D", 0], dtInv: ["float", 1], }, outputs: { div: "float" } }); this.programs['relaxation'] = new QuadProgram(gl, ` void main() { ivec2 coord = ivec2(gl_FragCoord.xy); ivec2 limit = textureSize(u_pressure, 0) - 1; float p0 = texelFetch(u_pressure, min(coord + ivec2(2,0), limit), 0).x; float p1 = texelFetch(u_pressure, max(coord - ivec2(2,0), 0), 0).x; float p2 = texelFetch(u_pressure, min(coord + ivec2(0,2), limit), 0).x; float p3 = texelFetch(u_pressure, max(coord - ivec2(0,2), 0), 0).x; float div = texelFetch(u_divergence, coord, 0).x; o_result = (p0 + p1 + p2 + p3 - div) * .25; }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { pressure: ["sampler2D", 0], divergence: ["sampler2D", 1], }, outputs: { result: "float" } }); this.programs['update'] = new QuadProgram(gl, ` void main() { ivec2 coord = ivec2(gl_FragCoord.xy); ivec2 limit = textureSize(u_pressure, 0) - 1; float p0 = texelFetch(u_pressure, min(coord + ivec2( 1,0), limit), 0).x; float p1 = texelFetch(u_pressure, max(coord + ivec2(-1,0), 0), 0).x; float p2 = texelFetch(u_pressure, min(coord + ivec2(0, 1), limit), 0).x; float p3 = texelFetch(u_pressure, max(coord + ivec2(0,-1), 0), 0).x; vec2 grad = vec2(p0 - p1, p2 - p3) * .5; vec2 v = texelFetch(u_field, coord, 0).xy; o_result = v - grad * u_dt; }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { field: ["sampler2D", 0], pressure: ["sampler2D", 1], dt: ["float", 1 / 60], }, outputs: { result: "vec2" } }); this.programs['force'] = new PaddedProgram(gl, size, ` void main() { vec2 p = gl_FragCoord.xy - u_mouse.xy; float d = 1.0 - min(length(p) / u_radius, 1.0); d *= d; o_result = vec4(u_mouse.zw * u_strength * d, 0.0, 1.0); }`, { declPrefixes: { v: "v_", u: "u_", o: "o_" }, uniforms: { mouse: "vec4", radius: ["float", 50], strength: ["float", 20], }, outputs: { result: "vec4" } }, { state: { depth: false, cull: true, blend: true, blendFn: [gl.SRC_ALPHA, gl.ONE] } }); this.buffers['field'] = new DrawBuffer(gl, [new Texture2D(gl, { width: size[0], height: size[1], levels: 1, internalFormat: gl.RG32F, format: gl.RG, type: gl.FLOAT, })]); this.buffers['divergence'] = new DrawBuffer(gl, [new Texture2D(gl, { width: size[0], height: size[1], levels: 1, internalFormat: gl.R32F, format: gl.RED, type: gl.FLOAT, })]); const opts = { width: size[0], height: size[1], levels: 1, internalFormat: gl.R32F, format: gl.RED, type: gl.FLOAT, }; this.buffers['pressure'] = new DoubleBuffer( new DrawBuffer(gl, [new Texture2D(gl, opts)]), new DrawBuffer(gl, [new Texture2D(gl, opts)])); } advect(field, subject, dt) { this.programs.advection.run({ uniforms: { dt }, textures: [field.textures[0], subject.textures[0]] }); } step(field, opts) { const { buffers, programs } = this; const { mouse, dt = 1, n = 16 } = opts; buffers.field.bind(); this.advect(field, field, dt); if (mouse[0][0] > 0 && mouse[0][1] > 0) { programs.force.run({ uniforms: { strength: 18, radius: 80, mouse: [...mouse[0], mouse[1][0] / this.size[0], mouse[1][1] / this.size[1]] } }); } buffers.divergence.bind(); programs.divergence.run({ uniforms: { dtInv: 1 / dt }, textures: buffers.field.textures }); for (let i = 0; i < n; i++) { buffers.pressure.back.bind(); programs.relaxation.run({ textures: [buffers.pressure.front.textures[0], buffers.divergence.textures[0]] }); buffers.pressure.flip(); } field.bind(); programs.update.run({ uniforms: { dt }, textures: [buffers.field.textures[0], buffers.pressure.front.textures[0]] }); } }38:Tbea,class Program { static initAttribs(gl, spec) { const res = {}; for (const name in spec) { let { buffer, data, size = 3, stride = 0, offset = 0 } = spec[name]; assert(buffer || data, "[Program] either bufer or data should be present"); if (!buffer) buffer = new GLBuffer(gl, data); res[name] = { buffer, size, stride, offset }; } return res; } static initIndices(gl, spec) { const buffer = new GLBuffer(gl, spec.data, gl.ELEMENT_ARRAY_BUFFER); const type = spec.data instanceof Uint32Array ? gl.UNSIGNED_INT : gl.UNSIGNED_SHORT; return { buffer, type }; } static makeVAO(gl, program, attribs) { const vao = gl.createVertexArray(); gl.bindVertexArray(vao); for (const name in attribs) { const { buffer, size = 3, stride = 0, offset = 0, type = gl.FLOAT } = attribs[name]; const loc = gl.getAttribLocation(program, name); assert(loc >= 0, `Unknown attribute: ${name}`); buffer.bind(); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, size, type, false, stride, offset); buffer.unbind(); } gl.bindVertexArray(null); return vao; } constructor(gl, spec) { this.gl = gl; const { shader, attribs, indices, num, state = {}, mode = gl.TRIANGLES, textures = [] } = spec; this.attribs = Program.initAttribs(gl, attribs); this.shader = shader; this.indices = indices ? Program.initIndices(gl, indices) : undefined; this.textures = textures; this.num = num; this.mode = mode; this.state = state; this.vao = Program.makeVAO(gl, shader.program, this.attribs); } setState(state = this.state) { const gl = this.gl; state.depth !== undefined && webgl.setState(gl, gl.DEPTH_TEST, state.depth); if (state.cull !== undefined) { webgl.setState(gl, gl.CULL_FACE, state.cull); state.cullMode && gl.cullFace(state.cullMode); } if (state.blend !== undefined) { webgl.setState(gl, 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) { webgl.setState(gl, 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); } } run(opts = {}) { const { gl, vao, shader, indices, mode, num } = this; gl.bindVertexArray(vao); shader.bind(); shader.setUniforms(opts.uniforms || {}); this.setState(opts.state); if (opts.textures) opts.textures.forEach((tex, i) => tex.bind(i)); if (indices) { indices.buffer.bind(); gl.drawElements(mode, num, indices.type, 0); } else { gl.drawArrays(mode, 0, num); } } }39:T2c7f,Shader = { const eqArr = (a, b) => a.length == b.length && a.every((x, i) => x == b[i]); const setS = fn => (gl, loc, defaultVal = 0) => { let prev; return x => { x = x === undefined ? defaultVal : x; if (x !== prev) gl[`uniform1${fn}`](loc, prev = x); }; }; const setV = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eqArr(prev, x)) gl[`uniform${fn}`](loc, prev = [...x]); }; }; const setM = (fn, sysDefault) => (gl, loc, defaultVal = sysDefault) => { let prev = []; return x => { x = x === undefined ? defaultVal : x; if (!eqArr(prev, x)) gl[`uniformMatrix${fn}`](loc, false, prev = [...x]); }; }; const SETTERS = { bool: setS("i"), float: setS("f"), int: setS("i"), uint: setS("ui"), bvec2: setV("2iv", [0, 0]), bvec3: setV("3iv", [0, 0, 0]), bvec4: setV("4iv", [0, 0, 0, 0]), ivec2: setV("2iv", [0, 0]), ivec3: setV("3iv", [0, 0, 0]), ivec4: setV("4iv", [0, 0, 0, 0]), vec2: setV("2fv", [0, 0]), vec3: setV("3fv", [0, 0, 0]), vec4: setV("4fv", [0, 0, 0, 0]), mat2: setM("2fv", [1, 0, 0, 1]), mat3: setM("3fv", [1, 0, 0, 0, 1, 0, 0, 0, 1]), mat4: setM("4fv", [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]), sampler2D: setS("i"), sampler2DShadow: setS("i"), sampler3D: setS("i"), samplerCube: setS("i"), samplerCubeShadow: setS("i") }; const makeUniformSetter = (gl, program, name, type, defaultVal = undefined) => { const loc = gl.getUniformLocation(program, name); return SETTERS[type](gl, loc, defaultVal); }; 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 NO_PREFIXES = { a: "", v: "", u: "", o: "" }; const DEFAULT_OUTPUT = { fragColor: ["vec4", 0] }; const varDecl = (decl, id) => `${Array.isArray(decl) ? decl[0] : decl} ${id};`; const declare = (qualifier, decl, id) => `${qualifier} ${varDecl(decl, id)}`; const syntax = { attrib: (id, type, pre) => Array.isArray(type) ? `layout(location=${type[1]}) in ${type[0]} ${pre.a}${id};` : `in ${type} ${pre.a}${id};`, varying: inout => (id, type, pre) => declare(inout, type, pre.v + id), uniform: (id, type, pre) => declare("uniform", type, pre.u + id), output: (id, type, pre) => Array.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 (const id in attribs) decls.push(syntax(id, attribs[id], prefixes)); decls.push(""); return decls.join("\n"); }; const compileUniformBlocks = (blocks, prefixes) => { let src = ""; const syntax = (id, type, pre) => ` ${varDecl(type, pre.u + id)}`; for (const name in blocks) { src += `layout(std140) uniform ${name} {\n`; const block = blocks[name]; if (Array.isArray(block)) { src += compileVars(block[0], syntax, { u: "" }); src += `} ${prefixes.u}${block[1]};\n`; } else { src += compileVars(block, syntax, prefixes); src += "};\n"; } } return src; }; const assembleGLSL = (source, type, opts) => { const { attribs = {}, varying = {}, uniforms = {}, uniformBlocks = {}, 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 += 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 == "vs" ? "out" : "in"), prefixes) + "\n"; src += compileVars(uniforms, syntax.uniform, prefixes); src += compileUniformBlocks(uniformBlocks, prefixes); src += source; return src; }; const getType = type => { const m = type.match(/(\w+)(?:\[(\d+)\])/); return m ? [m[1], parseInt(m[2])] : [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); }; const getNameTypes = (block, structs) => { const names = [], types = []; for (const key in block) { const type = block[key]; if (type in structs) { for (const [path, typ] of getStructFields(type, structs)) { path.unshift(key); names.push(path.join(".")); types.push(typ); } } else { names.push(key); types.push(type); } } return { names, types }; } const getDefs = (uniforms, structs) => { const res = []; for (const [k, v] of Object.entries(uniforms)) res.push(...getLocations(k, v, structs)); return res; }; const 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; }; const getTypeInfos = defs => { const res = {}; for (const [k, v] of Object.entries(defs)) res[k] = Array.isArray(v) ? v[0] : v; return res; }; 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 || {} }; const ubos = spec.uniformBlocks || {}; const uniformBlocks = Object.fromEntries(Object.entries(ubos).map( ([name, ubo]) => [ubo.name, [ubo.fields, name]])); const glslOpts = { ...opts, uniformBlocks }; this.vs = assembleGLSL(spec.vs, "vs", glslOpts); this.fs = assembleGLSL(spec.fs, "fs", glslOpts); this.program = webgl.createProgram(gl, this.vs, this.fs); this.uniformBlocks = this.setupUniformBlocks(glslOpts, ubos); this.initUniforms(opts.uniforms, opts.structs, opts.declPrefixes); } initUniforms(uniforms, structs, declPrefixes) { const gl = this.gl; const specs = getDefs(uniforms, structs); gl.useProgram(this.program); this.uniformSetters = {}; const prefix = 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; } setupUniformBlocks(opts, ubos) { const { gl, program } = this; const prefix = opts.declPrefixes?.u || ""; const blocks = {}; for (const name in opts.uniformBlocks) { const [block, key] = opts.uniformBlocks[name]; let { names, types } = getNameTypes(block, opts.structs); const names1 = names.map(k => `${name}.${k}`); const index = gl.getUniformBlockIndex(program, name); const size = gl.getActiveUniformBlockParameter(program, index, gl.UNIFORM_BLOCK_DATA_SIZE); const indices = gl.getUniformIndices(program, names1); const offsets = gl.getActiveUniforms(program, indices, gl.UNIFORM_OFFSET); const vs = gl.getActiveUniformBlockParameter( program, index, gl.UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER); const fs = gl.getActiveUniformBlockParameter( program, index, gl.UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER); const fields = Object.fromEntries(names.map((k, i) => [k, { offset: offsets[i], type: types[i], index: indices[i] }])); blocks[key] = { name, index, size, vs, fs, fields }; gl.uniformBlockBinding(program, index, ubos[key].index); } return blocks; } setUniforms(vals) { const assigns = getAssigns(vals, this.uniformTypes, this.structs); const setters = this.uniformSetters; for (const [field, _, val] of assigns) { if (field in setters) setters[field](val); } } bind() { assert(this.program, "program already released"); this.gl.useProgram(this.program); } unbind() { this.gl.useProgram(null); } release() { if (this.program) { this.gl.deleteProgram(this.program); delete this.program; return true; } return false; } }}3a:T7ae,class Sampler { constructor(gl, opts) { this.gl = gl; this.sampler = gl.createSampler(); this.configureFilter(opts); this.configureWrap(opts); this.configureLOD(opts); this.configureCompare(opts); } configureFilter(opts) { const { gl, sampler } = 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.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, t1); gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, t2); } configureWrap(opts) { const { gl, sampler } = 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.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, t1); gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, t2); gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_R, t3); } configureLOD(opts) { const { gl, sampler } = this; if (opts.lod) { const [t1, t2] = opts.lod; gl.samplerParameterf(sampler, gl.TEXTURE_MIN_LOD, t1); gl.samplerParameterf(sampler, gl.TEXTURE_MAX_LOD, t2); } } configureCompare(opts) { const { gl, sampler } = this; const [mode, func] = opts.compare || [gl.NONE, gl.LEQUAL]; gl.samplerParameteri(sampler, gl.TEXTURE_COMPARE_MODE, mode); gl.samplerParameteri(sampler, gl.TEXTURE_COMPARE_FUNC, func); } bind(unit) { this.gl.bindSampler(unit, this.sampler); } unbind(unit) { this.gl.bindSampler(unit, null); } release() { if (this.sampler) { this.gl.deleteSampler(this.sampler); delete this.sampler; return true; } return false; } }3b:T99a,class Texture2D { // https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE constructor(gl, opts) { this.gl = gl; this.target = opts.target || gl.TEXTURE_2D; this.format = opts.format || gl.RGBA; this.internalFormat = opts.internalFormat || gl.RGBA8; this.type = opts.type || gl.UNSIGNED_BYTE; this.sampler = opts.sampler; this.tex = gl.createTexture(); this.bind(); this.configure(opts); this.configureStorage(opts); this.configureAnisotropy(opts); opts.mipmap && this.generateMipmap(); } configure(opts) { const gl = this.gl; this.packAlignment = opts.packAlignment; this.unpackAlignment = opts.unpackAlignment; this.packAlignment !== undefined && gl.pixelStorei(gl.PACK_ALIGNMENT, this.packAlignment); this.unpackAlignment !== undefined && gl.pixelStorei(gl.UNPACK_ALIGNMENT, this.unpackAlignment); } configureStorage(opts) { const { gl, target, internalFormat, format, type } = this; const { width, height, data, levels = Math.log2(Math.min(width, height)) } = opts; this.size = [width, height]; this.levels = levels; gl.texStorage2D(target, levels, internalFormat, width, height); if (data) gl.texSubImage2D(target, 0, 0, 0, width, height, format, type, data); } configureAnisotropy(opts) { if (opts.anisotropy !== true) return; const gl = this.gl; const ext = webgl.ensureExtension(gl, "EXT_texture_filter_anisotropic"); if (gl.maxAnisotropy === undefined) gl.maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT); gl.texParameterf(this.target, ext.TEXTURE_MAX_ANISOTROPY_EXT, gl.maxAnisotropy); } read(out) { const { gl, format, type, size } = this; gl.readPixels(0, 0, size[0], size[1], format, type, out); } bind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, this.tex); if (this.sampler) this.sampler.bind(id); } unbind(id = 0) { const gl = this.gl; gl.activeTexture(gl.TEXTURE0 + id); gl.bindTexture(this.target, null); if (this.sampler) this.sampler.unbind(id); } 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); } }3c:T8b2,class FBO { constructor(gl, opts = {}) { this.gl = gl; this.fbo = gl.createFramebuffer(); this.bind(); this.setupDrawBuffers(opts.drawBuffers); if (opts.drawBuffers || opts.renderBuffers) this.validate(); } setupDrawBuffers(drawBuffers = []) { if (drawBuffers.length == 0) return; 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.DRAW_FRAMEBUFFER, attach, gl.TEXTURE_2D, tex, 0); attachments.push(attach); } gl.drawBuffers(attachments); } bind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.fbo); } unbind() { this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null); } blit(rhs, opts = {}) { const { gl, fbo } = this; const { width = gl.drawingBufferWidth, height = gl.drawingBufferHeight, mask = gl.COLOR_BUFFER_BIT, filter = gl.NEAREST } = opts; gl.bindFramebuffer(gl.READ_FRAMEBUFFER, rhs.fbo); gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, fbo); gl.clearBufferfv(gl.COLOR, 0, [0, 0, 0, 0]); gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, mask, filter ); } release() { if (this.fbo) { this.gl.deleteFramebuffer(this.fbo); delete this.fbo; delete this.gl; 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}`); } } }3d:T91c,webgl = { function getExtension(gl, extension, required = true) { const ext = gl.getExtension(extension); if (ext === null && required) throw new Error(`Extension ${extension} not supported!`); return ext; } function ensureExtension(gl, ext){ if (gl[ext] === undefined) gl[ext] = getExtension(gl, ext, true); return gl[ext]; } 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 createProgram(gl, vSource, fSource) { const program = gl.createProgram(); const vs = compileShader(gl, "vs", vSource), fs = compileShader(gl, "fs", fSource); gl.attachShader(program, vs); gl.attachShader(program, 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}`); } gl.detachShader(program, vs); assert(gl.getError() == gl.NO_ERROR, "failed to detach vertex shader"); gl.deleteShader(vs); assert(gl.getError() == gl.NO_ERROR, "failed to delete vertex shader"); gl.detachShader(program, fs); assert(gl.getError() == gl.NO_ERROR, "failed to detach fragment shader"); gl.deleteShader(fs); assert(gl.getError() == gl.NO_ERROR, "failed to delete fragment shader"); return program; } function setState(gl, id, val) { if (val) { gl.enable(id); } else { gl.disable(id); } } function clear(gl, opts = {}){ const { color = [0,0,0,0], viewport = [0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight] } = opts; gl.viewport(...viewport); gl.clearColor(...color); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); } return { getExtension, ensureExtension, createProgram, compileShader, setState, clear, }; }3e:T51b,code = (name, opts = {}) => { let { lang, open = false } = opts; if (!lang) { const match = name.match(/.*\.(.*)$/); lang = match ? match[1] : "" } const ID = `code-styles`; const style = html`