canvas2gl 1.0.0

package/dist/renderer.js

@@ -0,0 +1,871 @@
+const VERT_SRC = `
+attribute vec2 a_position;
+uniform vec2 u_resolution;
+uniform mat3 u_transform;
+void main() {
+  vec3 transformed = u_transform * vec3(a_position, 1.0);
+  vec2 clipspace = (transformed.xy / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);
+}
+`;
+const FRAG_SRC = `
+precision mediump float;
+uniform vec4 u_color;
+void main() {
+  gl_FragColor = u_color;
+}
+`;
+const TEX_VERT_SRC = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+uniform vec2 u_resolution;
+uniform mat3 u_transform;
+varying vec2 v_texCoord;
+void main() {
+  vec3 transformed = u_transform * vec3(a_position, 1.0);
+  vec2 clipspace = (transformed.xy / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`;
+const TEX_FRAG_SRC = `
+precision mediump float;
+varying vec2 v_texCoord;
+uniform sampler2D u_texture;
+uniform float u_alpha;
+void main() {
+  vec4 color = texture2D(u_texture, v_texCoord);
+  color.a *= u_alpha;
+  gl_FragColor = color;
+}
+`;
+const MUL_VERT_SRC = `
+attribute vec2 a_position;
+attribute vec2 a_texCoord;
+uniform vec2 u_resolution;
+uniform mat3 u_transform;
+varying vec2 v_texCoord;
+void main() {
+  vec3 transformed = u_transform * vec3(a_position, 1.0);
+  vec2 clipspace = (transformed.xy / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);
+  v_texCoord = a_texCoord;
+}
+`;
+const MUL_FRAG_SRC = `
+precision mediump float;
+varying vec2 v_texCoord;
+uniform sampler2D u_srcTexture;
+uniform sampler2D u_dstTexture;
+void main() {
+  vec4 src = texture2D(u_srcTexture, v_texCoord);
+  vec4 dst = texture2D(u_dstTexture, v_texCoord);
+  
+  // Canvas2D multiply: 
+  // - Where src is opaque: result = src.rgb * dst.rgb
+  // - Where src is transparent: result = dst.rgb (unchanged)
+  // - Where src is semi-transparent: linear interpolation
+  vec3 multiplyColor = src.rgb * dst.rgb;
+  vec3 resultColor = mix(dst.rgb, multiplyColor, src.a);
+  
+  // Alpha compositing (source-over)
+  float resultAlpha = src.a + dst.a - src.a * dst.a;
+  
+  gl_FragColor = vec4(resultColor, resultAlpha);
+}
+`;
+const GRAD_VERT_SRC = `
+attribute vec2 a_position;
+uniform vec2 u_resolution;
+uniform mat3 u_transform;
+uniform vec2 u_gradP0;
+uniform vec2 u_gradP1;
+varying float v_t;
+void main() {
+  vec3 transformed = u_transform * vec3(a_position, 1.0);
+  vec2 clipspace = (transformed.xy / u_resolution) * 2.0 - 1.0;
+  gl_Position = vec4(clipspace * vec2(1.0, -1.0), 0.0, 1.0);
+  vec2 dir = u_gradP1 - u_gradP0;
+  float len2 = dot(dir, dir);
+  if (len2 < 0.0001) {
+    v_t = 0.0;
+  } else {
+    v_t = dot(transformed.xy - u_gradP0, dir) / len2;
+  }
+}
+`;
+const GRAD_FRAG_SRC = `
+precision mediump float;
+varying float v_t;
+uniform sampler2D u_gradTex;
+uniform float u_alpha;
+void main() {
+  vec4 color = texture2D(u_gradTex, vec2(clamp(v_t, 0.0, 1.0), 0.5));
+  color.a *= u_alpha;
+  gl_FragColor = color;
+}
+`;
+const FULLSCREEN_QUAD = new Float32Array([
+    0, 0, 0, 1,
+    1, 0, 1, 1,
+    0, 1, 0, 0,
+    1, 0, 1, 1,
+    1, 1, 1, 0,
+    0, 1, 0, 0,
+]);
+const SIMPLE_OPS = new Set(['source-over', 'lighter', 'copy']);
+const FBO_OPS = {
+    'source-in': ['ZERO', 'SRC_ALPHA'],
+    'source-out': ['ZERO', 'ONE_MINUS_SRC_ALPHA'],
+    'source-atop': ['ONE_MINUS_DST_ALPHA', 'SRC_ALPHA'],
+    'destination-in': ['DST_ALPHA', 'ZERO'],
+    'destination-out': ['ONE_MINUS_DST_ALPHA', 'ZERO'],
+    'destination-atop': ['DST_ALPHA', 'ONE_MINUS_SRC_ALPHA'],
+    'xor': ['ONE_MINUS_DST_ALPHA', 'ONE_MINUS_SRC_ALPHA'],
+};
+const SHADER_OPS = new Set(['multiply']);
+const IDENTITY_MATRIX = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+export class WebGLRenderer {
+    gl;
+    canvas;
+    program;
+    buffer;
+    aPosition;
+    uResolution;
+    uColor;
+    uTransform;
+    texProgram;
+    texBuffer;
+    aTexCoords;
+    uTexResolution;
+    uTexture;
+    uTexAlpha;
+    uTexTransform;
+    screenTex = null;
+    srcTex = null;
+    screenW = 0;
+    screenH = 0;
+    mulProgram;
+    aMulPosition;
+    aMulTexCoords;
+    uMulResolution;
+    uSrcTexture;
+    uDstTexture;
+    uMulTransform;
+    gradProgram;
+    aGradPosition;
+    uGradResolution;
+    uGradTransform;
+    uGradP0;
+    uGradP1;
+    uGradTex;
+    uGradAlpha;
+    constructor(canvas) {
+        this.canvas = canvas;
+        const gl = canvas.getContext('webgl', { alpha: true, antialias: true, premultipliedAlpha: false });
+        if (!gl)
+            throw new Error('WebGL not supported');
+        this.gl = gl;
+        this.program = this.createProgram(VERT_SRC, FRAG_SRC);
+        this.texProgram = this.createProgram(TEX_VERT_SRC, TEX_FRAG_SRC);
+        this.mulProgram = this.createProgram(MUL_VERT_SRC, MUL_FRAG_SRC);
+        this.gradProgram = this.createProgram(GRAD_VERT_SRC, GRAD_FRAG_SRC);
+        gl.useProgram(this.program);
+        this.aPosition = gl.getAttribLocation(this.program, 'a_position');
+        this.uResolution = gl.getUniformLocation(this.program, 'u_resolution');
+        this.uColor = gl.getUniformLocation(this.program, 'u_color');
+        this.uTransform = gl.getUniformLocation(this.program, 'u_transform');
+        gl.useProgram(this.texProgram);
+        this.aTexCoords = gl.getAttribLocation(this.texProgram, 'a_texCoord');
+        this.uTexResolution = gl.getUniformLocation(this.texProgram, 'u_resolution');
+        this.uTexture = gl.getUniformLocation(this.texProgram, 'u_texture');
+        this.uTexAlpha = gl.getUniformLocation(this.texProgram, 'u_alpha');
+        this.uTexTransform = gl.getUniformLocation(this.texProgram, 'u_transform');
+        gl.useProgram(this.mulProgram);
+        this.aMulPosition = gl.getAttribLocation(this.mulProgram, 'a_position');
+        this.aMulTexCoords = gl.getAttribLocation(this.mulProgram, 'a_texCoord');
+        this.uMulResolution = gl.getUniformLocation(this.mulProgram, 'u_resolution');
+        this.uSrcTexture = gl.getUniformLocation(this.mulProgram, 'u_srcTexture');
+        this.uDstTexture = gl.getUniformLocation(this.mulProgram, 'u_dstTexture');
+        this.uMulTransform = gl.getUniformLocation(this.mulProgram, 'u_transform');
+        gl.useProgram(this.gradProgram);
+        this.aGradPosition = gl.getAttribLocation(this.gradProgram, 'a_position');
+        this.uGradResolution = gl.getUniformLocation(this.gradProgram, 'u_resolution');
+        this.uGradTransform = gl.getUniformLocation(this.gradProgram, 'u_transform');
+        this.uGradP0 = gl.getUniformLocation(this.gradProgram, 'u_gradP0');
+        this.uGradP1 = gl.getUniformLocation(this.gradProgram, 'u_gradP1');
+        this.uGradTex = gl.getUniformLocation(this.gradProgram, 'u_gradTex');
+        this.uGradAlpha = gl.getUniformLocation(this.gradProgram, 'u_alpha');
+        gl.useProgram(this.program);
+        this.buffer = gl.createBuffer();
+        this.texBuffer = gl.createBuffer();
+        this.resize();
+    }
+    resize() {
+        const { gl, canvas } = this;
+        const displayW = canvas.clientWidth;
+        const displayH = canvas.clientHeight;
+        if (canvas.width !== displayW || canvas.height !== displayH) {
+            canvas.width = displayW;
+            canvas.height = displayH;
+        }
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        this.screenW = canvas.width;
+        this.screenH = canvas.height;
+        if (!this.screenTex) {
+            this.screenTex = gl.createTexture();
+        }
+        gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.screenW, this.screenH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.useProgram(this.program);
+        gl.uniform2f(this.uResolution, canvas.width, canvas.height);
+        gl.useProgram(this.texProgram);
+        gl.uniform2f(this.uTexResolution, canvas.width, canvas.height);
+        gl.useProgram(this.mulProgram);
+        gl.uniform2f(this.uMulResolution, canvas.width, canvas.height);
+        gl.useProgram(this.program);
+        if (!this.srcTex) {
+            this.srcTex = gl.createTexture();
+        }
+        gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.screenW, this.screenH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    }
+    clear() {
+        const { gl } = this;
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    readPixels(x, y, w, h) {
+        const { gl, canvas } = this;
+        const glY = canvas.height - y - h;
+        const pixels = new Uint8Array(w * h * 4);
+        gl.readPixels(x, glY, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+        const rowSize = w * 4;
+        const flipped = new Uint8Array(pixels.length);
+        for (let row = 0; row < h; row++) {
+            const srcRow = (h - 1 - row) * rowSize;
+            const dstRow = row * rowSize;
+            flipped.set(pixels.subarray(srcRow, srcRow + rowSize), dstRow);
+        }
+        return flipped;
+    }
+    captureScreen() {
+        const { gl, screenTex, screenW, screenH } = this;
+        gl.bindTexture(gl.TEXTURE_2D, screenTex);
+        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, screenW, screenH, 0);
+    }
+    drawScreenTexture(srcFactor, dstFactor) {
+        const { gl } = this;
+        gl.useProgram(this.texProgram);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+        gl.uniform1i(this.uTexture, 0);
+        gl.uniform1f(this.uTexAlpha, 1);
+        gl.uniform2f(this.uTexResolution, this.screenW, this.screenH);
+        gl.enable(gl.BLEND);
+        gl.blendFunc(srcFactor, dstFactor);
+        const verts = new Float32Array([
+            0, 0, 0, 1,
+            this.screenW, 0, 1, 1,
+            0, this.screenH, 0, 0,
+            this.screenW, 0, 1, 1,
+            this.screenW, this.screenH, 1, 0,
+            0, this.screenH, 0, 0,
+        ]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(this.aTexCoords);
+        gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+    drawCompositeShader() {
+        const { gl } = this;
+        gl.useProgram(this.mulProgram);
+        gl.disable(gl.BLEND);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+        gl.uniform1i(this.uSrcTexture, 0);
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+        gl.uniform1i(this.uDstTexture, 1);
+        gl.uniform2f(this.uMulResolution, this.screenW, this.screenH);
+        gl.uniformMatrix3fv(this.uMulTransform, false, IDENTITY_MATRIX);
+        const verts = new Float32Array([
+            0, 0, 0, 1,
+            this.screenW, 0, 1, 1,
+            0, this.screenH, 0, 0,
+            this.screenW, 0, 1, 1,
+            this.screenW, this.screenH, 1, 0,
+            0, this.screenH, 0, 0,
+        ]);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+        gl.enableVertexAttribArray(this.aMulPosition);
+        gl.vertexAttribPointer(this.aMulPosition, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(this.aMulTexCoords);
+        gl.vertexAttribPointer(this.aMulTexCoords, 2, gl.FLOAT, false, 16, 8);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+    _drawShaderComposite(vertices, color, transform) {
+        const { gl } = this;
+        this.captureScreen();
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(this.program);
+        gl.uniformMatrix3fv(this.uTransform, false, transform);
+        gl.disable(gl.BLEND);
+        gl.disableVertexAttribArray(this.aTexCoords);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+        gl.enableVertexAttribArray(this.aPosition);
+        gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.uniform4fv(this.uColor, color);
+        gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+        gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.screenW, this.screenH, 0);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        this.drawCompositeShader();
+        gl.useProgram(this.program);
+    }
+    _drawTextureShaderComposite(texture, sx, sy, sw, sh, dx, dy, dw, dh, texW, texH, alpha, transform) {
+        const { gl } = this;
+        this.captureScreen();
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.useProgram(this.texProgram);
+        gl.uniformMatrix3fv(this.uTexTransform, false, transform);
+        gl.disable(gl.BLEND);
+        const u0 = sx / texW;
+        const v0 = sy / texH;
+        const u1 = (sx + sw) / texW;
+        const v1 = (sy + sh) / texH;
+        const verts = new Float32Array([
+            dx, dy, u0, v0,
+            dx + dw, dy, u1, v0,
+            dx, dy + dh, u0, v1,
+            dx + dw, dy, u1, v0,
+            dx + dw, dy + dh, u1, v1,
+            dx, dy + dh, u0, v1,
+        ]);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.uniform1i(this.uTexture, 0);
+        gl.uniform1f(this.uTexAlpha, alpha);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+        gl.enableVertexAttribArray(this.aTexCoords);
+        gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+        gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+        gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.screenW, this.screenH, 0);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        this.drawCompositeShader();
+        gl.useProgram(this.program);
+    }
+    draw(vertices, color, compositeOp, transform) {
+        const { gl } = this;
+        if (SHADER_OPS.has(compositeOp)) {
+            this._drawShaderComposite(vertices, color, transform);
+            return;
+        }
+        if (SIMPLE_OPS.has(compositeOp)) {
+            gl.useProgram(this.program);
+            gl.uniformMatrix3fv(this.uTransform, false, transform);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            gl.enable(gl.BLEND);
+            const m = gl;
+            const blendMap = {
+                'source-over': [m.SRC_ALPHA, m.ONE_MINUS_SRC_ALPHA],
+                'lighter': [m.ONE, m.ONE],
+                'copy': [m.ONE, m.ZERO],
+            };
+            const [src, dst] = blendMap[compositeOp] ?? blendMap['source-over'];
+            gl.blendFunc(src, dst);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aPosition);
+            gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.uniform4fv(this.uColor, color);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+        }
+        else if (compositeOp === 'destination-over') {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, IDENTITY_MATRIX);
+            gl.disable(gl.BLEND);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            const verts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, 1);
+            gl.uniform2f(this.uTexResolution, this.screenW, this.screenH);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.program);
+            gl.uniformMatrix3fv(this.uTransform, false, transform);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aPosition);
+            gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.uniform4fv(this.uColor, color);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+        }
+        else {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.program);
+            gl.uniformMatrix3fv(this.uTransform, false, transform);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            gl.disable(gl.BLEND);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aPosition);
+            gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.uniform4fv(this.uColor, color);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+            gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+            gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.screenW, this.screenH, 0);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, IDENTITY_MATRIX);
+            gl.disable(gl.BLEND);
+            const srcVerts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, 1);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, srcVerts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            const [srcName, dstName] = FBO_OPS[compositeOp] ?? ['ONE', 'ZERO'];
+            const m = gl;
+            const factorMap = {
+                'ZERO': m.ZERO,
+                'ONE': m.ONE,
+                'SRC_ALPHA': m.SRC_ALPHA,
+                'ONE_MINUS_SRC_ALPHA': m.ONE_MINUS_SRC_ALPHA,
+                'DST_ALPHA': m.DST_ALPHA,
+                'ONE_MINUS_DST_ALPHA': m.ONE_MINUS_DST_ALPHA,
+            };
+            const srcFactor = factorMap[srcName];
+            const dstFactor = factorMap[dstName];
+            gl.enable(gl.BLEND);
+            gl.blendFunc(srcFactor, dstFactor);
+            const dstVerts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, dstVerts, gl.DYNAMIC_DRAW);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.program);
+        }
+    }
+    drawGradient(vertices, gradient, compositeOp, transform) {
+        const { gl } = this;
+        if (SHADER_OPS.has(compositeOp)) {
+            this.drawGradientFBO(vertices, gradient, compositeOp, transform);
+            return;
+        }
+        if (SIMPLE_OPS.has(compositeOp)) {
+            gl.useProgram(this.gradProgram);
+            gl.uniform2f(this.uGradResolution, this.screenW, this.screenH);
+            gl.uniformMatrix3fv(this.uGradTransform, false, transform);
+            gl.enable(gl.BLEND);
+            const m = gl;
+            const blendMap = {
+                'source-over': [m.SRC_ALPHA, m.ONE_MINUS_SRC_ALPHA],
+                'lighter': [m.ONE, m.ONE],
+                'copy': [m.ONE, m.ZERO],
+            };
+            const [src, dst] = blendMap[compositeOp] ?? blendMap['source-over'];
+            gl.blendFunc(src, dst);
+            const params = gradient.getParams();
+            gl.uniform2f(this.uGradP0, params.x0, params.y0);
+            gl.uniform2f(this.uGradP1, params.x1, params.y1);
+            gl.uniform1f(this.uGradAlpha, 1);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, gradient.getTexture(gl));
+            gl.uniform1i(this.uGradTex, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aGradPosition);
+            gl.vertexAttribPointer(this.aGradPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+        }
+        else {
+            this.drawGradientFBO(vertices, gradient, compositeOp, transform);
+        }
+    }
+    drawGradientFBO(vertices, gradient, compositeOp, transform) {
+        const { gl } = this;
+        if (compositeOp === 'destination-over') {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, IDENTITY_MATRIX);
+            gl.disable(gl.BLEND);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            const verts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, 1);
+            gl.uniform2f(this.uTexResolution, this.screenW, this.screenH);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.disableVertexAttribArray(0);
+            gl.disableVertexAttribArray(this.aTexCoords);
+            gl.useProgram(this.gradProgram);
+            gl.uniform2f(this.uGradResolution, this.screenW, this.screenH);
+            gl.uniformMatrix3fv(this.uGradTransform, false, transform);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            const params = gradient.getParams();
+            gl.uniform2f(this.uGradP0, params.x0, params.y0);
+            gl.uniform2f(this.uGradP1, params.x1, params.y1);
+            gl.uniform1f(this.uGradAlpha, 1);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, gradient.getTexture(gl));
+            gl.uniform1i(this.uGradTex, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aGradPosition);
+            gl.vertexAttribPointer(this.aGradPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+        }
+        else {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.gradProgram);
+            gl.uniform2f(this.uGradResolution, this.screenW, this.screenH);
+            gl.uniformMatrix3fv(this.uGradTransform, false, transform);
+            gl.disable(gl.BLEND);
+            const params = gradient.getParams();
+            gl.uniform2f(this.uGradP0, params.x0, params.y0);
+            gl.uniform2f(this.uGradP1, params.x1, params.y1);
+            gl.uniform1f(this.uGradAlpha, 1);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, gradient.getTexture(gl));
+            gl.uniform1i(this.uGradTex, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+            gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(this.aGradPosition);
+            gl.vertexAttribPointer(this.aGradPosition, 2, gl.FLOAT, false, 0, 0);
+            gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
+            gl.disableVertexAttribArray(this.aGradPosition);
+            gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+            gl.copyTexImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 0, 0, this.screenW, this.screenH, 0);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, IDENTITY_MATRIX);
+            gl.disable(gl.BLEND);
+            const srcVerts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.srcTex);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, 1);
+            gl.uniform2f(this.uTexResolution, this.screenW, this.screenH);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, srcVerts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            const [srcName, dstName] = FBO_OPS[compositeOp] ?? ['ONE', 'ZERO'];
+            const m = gl;
+            const factorMap = {
+                'ZERO': m.ZERO,
+                'ONE': m.ONE,
+                'SRC_ALPHA': m.SRC_ALPHA,
+                'ONE_MINUS_SRC_ALPHA': m.ONE_MINUS_SRC_ALPHA,
+                'DST_ALPHA': m.DST_ALPHA,
+                'ONE_MINUS_DST_ALPHA': m.ONE_MINUS_DST_ALPHA,
+            };
+            const srcFactor = factorMap[srcName];
+            const dstFactor = factorMap[dstName];
+            gl.enable(gl.BLEND);
+            gl.blendFunc(srcFactor, dstFactor);
+            const dstVerts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, dstVerts, gl.DYNAMIC_DRAW);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.gradProgram);
+        }
+    }
+    createTexture(source) {
+        const { gl } = this;
+        const tex = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        return tex;
+    }
+    updateTexture(tex, source) {
+        const { gl } = this;
+        gl.bindTexture(gl.TEXTURE_2D, tex);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    }
+    drawTexture(texture, sx, sy, sw, sh, dx, dy, dw, dh, texW, texH, alpha, compositeOp, transform) {
+        const { gl } = this;
+        if (SHADER_OPS.has(compositeOp)) {
+            this._drawTextureShaderComposite(texture, sx, sy, sw, sh, dx, dy, dw, dh, texW, texH, alpha, transform);
+            return;
+        }
+        if (SIMPLE_OPS.has(compositeOp)) {
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, transform);
+            gl.enable(gl.BLEND);
+            const m = gl;
+            const blendMap = {
+                'source-over': [m.SRC_ALPHA, m.ONE_MINUS_SRC_ALPHA],
+                'lighter': [m.ONE, m.ONE],
+                'copy': [m.ONE, m.ZERO],
+            };
+            const [src, dst] = blendMap[compositeOp] ?? blendMap['source-over'];
+            gl.blendFunc(src, dst);
+            const u0 = sx / texW;
+            const v0 = sy / texH;
+            const u1 = (sx + sw) / texW;
+            const v1 = (sy + sh) / texH;
+            const verts = new Float32Array([
+                dx, dy, u0, v0,
+                dx + dw, dy, u1, v0,
+                dx, dy + dh, u0, v1,
+                dx + dw, dy, u1, v0,
+                dx + dw, dy + dh, u1, v1,
+                dx, dy + dh, u0, v1,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, alpha);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.program);
+        }
+        else if (compositeOp === 'destination-over') {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, IDENTITY_MATRIX);
+            gl.disable(gl.BLEND);
+            const screenVerts = new Float32Array([
+                0, 0, 0, 1,
+                this.screenW, 0, 1, 1,
+                0, this.screenH, 0, 0,
+                this.screenW, 0, 1, 1,
+                this.screenW, this.screenH, 1, 0,
+                0, this.screenH, 0, 0,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, this.screenTex);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, 1);
+            gl.uniform2f(this.uTexResolution, this.screenW, this.screenH);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, screenVerts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, transform);
+            gl.enable(gl.BLEND);
+            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+            const u0 = sx / texW;
+            const v0 = sy / texH;
+            const u1 = (sx + sw) / texW;
+            const v1 = (sy + sh) / texH;
+            const verts = new Float32Array([
+                dx, dy, u0, v0,
+                dx + dw, dy, u1, v0,
+                dx, dy + dh, u0, v1,
+                dx + dw, dy, u1, v0,
+                dx + dw, dy + dh, u1, v1,
+                dx, dy + dh, u0, v1,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, alpha);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            gl.useProgram(this.program);
+        }
+        else {
+            this.captureScreen();
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(this.texProgram);
+            gl.uniformMatrix3fv(this.uTexTransform, false, transform);
+            gl.disable(gl.BLEND);
+            const u0 = sx / texW;
+            const v0 = sy / texH;
+            const u1 = (sx + sw) / texW;
+            const v1 = (sy + sh) / texH;
+            const verts = new Float32Array([
+                dx, dy, u0, v0,
+                dx + dw, dy, u1, v0,
+                dx, dy + dh, u0, v1,
+                dx + dw, dy, u1, v0,
+                dx + dw, dy + dh, u1, v1,
+                dx, dy + dh, u0, v1,
+            ]);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.uniform1i(this.uTexture, 0);
+            gl.uniform1f(this.uTexAlpha, alpha);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.texBuffer);
+            gl.bufferData(gl.ARRAY_BUFFER, verts, gl.DYNAMIC_DRAW);
+            gl.enableVertexAttribArray(0);
+            gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 16, 0);
+            gl.enableVertexAttribArray(this.aTexCoords);
+            gl.vertexAttribPointer(this.aTexCoords, 2, gl.FLOAT, false, 16, 8);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            const [srcName, dstName] = FBO_OPS[compositeOp] ?? ['ONE', 'ZERO'];
+            const m = gl;
+            const factorMap = {
+                'ZERO': m.ZERO,
+                'ONE': m.ONE,
+                'SRC_ALPHA': m.SRC_ALPHA,
+                'ONE_MINUS_SRC_ALPHA': m.ONE_MINUS_SRC_ALPHA,
+                'DST_ALPHA': m.DST_ALPHA,
+                'ONE_MINUS_DST_ALPHA': m.ONE_MINUS_DST_ALPHA,
+            };
+            const srcFactor = factorMap[srcName];
+            const dstFactor = factorMap[dstName];
+            this.drawScreenTexture(srcFactor, dstFactor);
+            gl.useProgram(this.program);
+        }
+    }
+    clearRect(x, y, w, h) {
+        const { gl, canvas } = this;
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(x, canvas.height - y - h, w, h);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.disable(gl.SCISSOR_TEST);
+    }
+    createProgram(vsSource, fsSource) {
+        const { gl } = this;
+        const vs = this.compileShader(gl.VERTEX_SHADER, vsSource);
+        const fs = this.compileShader(gl.FRAGMENT_SHADER, fsSource);
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramInfoLog(program) ?? 'Program link failed');
+        }
+        return program;
+    }
+    compileShader(type, source) {
+        const { gl } = this;
+        const shader = gl.createShader(type);
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            const msg = gl.getShaderInfoLog(shader) ?? 'Shader compile failed';
+            gl.deleteShader(shader);
+            throw new Error(msg);
+        }
+        return shader;
+    }
+}