@kurot/core 1.0.20 → 1.0.22

package/dist/kurot/player/webgl/WebGLRenderContext.js

@@ -1,3 +1,9 @@
+import { splitMesh } from './split-mesh.js';
+import { MultiPassFilter } from '../../filters/MultiPassFilter.js';
+import { WebGLFilterSystem } from './WebGLFilterSystem.js';
+import { CustomFilter } from '../../filters/CustomFilter.js';
+import { uploadCustomUniforms } from './custom-filter-uniforms.js';
+import { WebGLFilterTextures } from './WebGLFilterTextures.js';
 import { ColorMatrixFilter } from '../../filters/ColorMatrixFilter.js';
 import { BlurFilter } from '../../filters/BlurFilter.js';
 import { GlowFilter } from '../../filters/GlowFilter.js';
@@ -10,8 +16,6 @@ import { ShaderLib2, getBlurTier2, makeBlurHFrag2, makeBlurVFrag2 } from './shad
 import { SYM_GL_CONTEXT, SYM_PREMULTIPLIED, SYM_DEFAULT_EMPTY, SYM_SMOOTHING } from './WebGLUtils.js';
 import { WebGLRenderBuffer } from './WebGLRenderBuffer.js';
 import { MultiTextureBatcher, makeMultiCmd } from './MultiTextureBatcher.js';
-const BLUR_FRAMEBUFFER_POOL_LIMIT = 16;
-const BLUR_FRAMEBUFFER_POOL_BYTE_LIMIT = 64 * 1024 * 1024;
 const _gcRegistry = new FinalizationRegistry(({ gl, texture }) => {
     gl.deleteTexture(texture);
 });
@@ -37,6 +41,11 @@ export class WebGLRenderContext {
     resolution = 1;
     // ── Private fields ────────────────────────────────────────────────────────
     _vao;
+    _filterTextures;
+    _filterSystem;
+    _filterPassInputs = {};
+    _filterOutputWidth = 0;
+    _filterOutputHeight = 0;
     _batcher = new MultiTextureBatcher();
     _bufferStack = [];
     _currentBuffer;
@@ -50,10 +59,6 @@ export class WebGLRenderContext {
     _contextRestoredCallbacks = [];
     _trackedBitmapDatas = new Set();
     _uploadedVersions = new WeakMap();
-    // ── Blur FBO pool ─────────────────────────────────────────────────────────
-    _blurFboPool = new Map();
-    _blurFboPoolSize = 0;
-    _blurFboPoolBytes = 0;
     constructor(canvas) {
         this.surface = canvas;
         const gl2 = canvas.getContext('webgl2');
@@ -77,6 +82,8 @@ export class WebGLRenderContext {
             this.makeBlurV = makeBlurVFrag;
         }
         const gl = this.gl;
+        this._filterTextures = new WebGLFilterTextures(this);
+        this._filterSystem = new WebGLFilterSystem(this);
         gl.disable(gl.DEPTH_TEST);
         gl.disable(gl.CULL_FACE);
         gl.enable(gl.BLEND);
@@ -105,11 +112,11 @@ export class WebGLRenderContext {
     // ── Getters ───────────────────────────────────────────────────────────────
     /** Number of reusable framebuffers currently retained by the blur pipeline. */
     get blurFramebufferPoolSize() {
-        return this._blurFboPoolSize;
+        return this._filterSystem.pool.size;
     }
     /** Estimated GPU bytes retained by the reusable blur framebuffer pool. */
     get blurFramebufferPoolBytes() {
-        return this._blurFboPoolBytes;
+        return this._filterSystem.pool.bytes;
     }
     get activatedBuffer() {
         return this._currentBuffer;
@@ -184,10 +191,18 @@ export class WebGLRenderContext {
         this.gl.disable(this.gl.SCISSOR_TEST);
     }
     enableScissor(x, y, width, height) {
-        this.drawCmdManager.pushEnableScissor(x, y, width, height);
+        this.flush();
+        if (this._currentBuffer) {
+            this._currentBuffer.enableScissor(x, y, width, height);
+            this._currentBuffer.hasScissor = true;
+        }
     }
     disableScissor() {
-        this.drawCmdManager.pushDisableScissor();
+        this.flush();
+        if (this._currentBuffer) {
+            this._currentBuffer.disableScissor();
+            this._currentBuffer.hasScissor = false;
+        }
     }
     // ── Mask (stencil-based) ──────────────────────────────────────────────────
     pushMask(x, y, width, height) {
@@ -288,8 +303,13 @@ export class WebGLRenderContext {
             return;
         const buf = this._currentBuffer;
         if (meshVertices && meshIndices) {
-            const meshNum = meshIndices.length / 3;
-            if (this._vao.reachMaxSize(meshNum * 4, meshNum * 6))
+            if (meshVertices.length / 2 > WebGLVertexArrayObject.MAX_VERTICES || meshIndices.length > WebGLVertexArrayObject.MAX_INDICES) {
+                for (const chunk of splitMesh(meshVertices, meshUVs, meshIndices)) {
+                    this.drawTexture(texture, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight, textureWidth, textureHeight, chunk.uvs, chunk.vertices, chunk.indices, _bounds, rotated, smoothing, flipY);
+                }
+                return;
+            }
+            if (this._vao.reachMaxSize(meshVertices.length / 2, meshIndices.length))
                 this.flush();
         }
         else {
@@ -299,8 +319,6 @@ export class WebGLRenderContext {
         if (smoothing !== undefined && texture[SYM_SMOOTHING] !== smoothing) {
             this.drawCmdManager.pushChangeSmoothing(texture, smoothing);
         }
-        if (meshUVs)
-            this._vao.changeToMeshIndices();
         // ── Multi-texture path (plain quads without filter) ───────────────────
         const useMulti = !this.activeFilter && !meshVertices && this._maxTextureUnits > 1;
         if (useMulti) {
@@ -322,6 +340,8 @@ export class WebGLRenderContext {
         // ── Single-texture path (filter, mesh, or single-unit device) ─────────
         if (this._vao.isMultiTexture())
             this.flush();
+        if (meshUVs)
+            this._vao.changeToMeshIndices();
         this._vao.cacheArrays(buf, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight, textureWidth, textureHeight, meshUVs, meshVertices, meshIndices, rotated, 0, flipY);
         const count = meshIndices ? meshIndices.length / 3 : 2;
         this.drawCmdManager.pushDrawTexture(texture, count, this.activeFilter, textureWidth, textureHeight);
@@ -339,129 +359,115 @@ export class WebGLRenderContext {
      * framebuffer feedback and state leakage.
      */
     compositeFilterResult(filters, offscreen) {
-        const target = offscreen.rootRenderTarget;
-        if (!target?.texture) {
-            return;
-        }
-        const w = target.width;
-        const h = target.height;
-        this.flush();
-        for (const filter of filters) {
-            if (filter instanceof BlurFilter && (filter.blurX > 0 || filter.blurY > 0)) {
-                this._drawBlurPingPong(target.texture, w, h, filter, offscreen, offscreen.resolution);
-            }
-        }
-        if (this._currentBuffer) {
-            this._currentBuffer.rootRenderTarget.activate();
-            this.onResize(this._currentBuffer.width, this._currentBuffer.height);
-        }
-        const nonBlurFilter = filters.find(f => !(f instanceof BlurFilter));
-        this._filterResolution = offscreen.resolution;
-        this.activeFilter = nonBlurFilter;
-        this.drawTexture(target.texture, 0, 0, w, h, 0, 0, w / offscreen.resolution, h / offscreen.resolution, w, h);
-        this.activeFilter = undefined;
         this.flush();
-        this._filterResolution = 1;
-    }
-    _drawBlurPingPong(texture, w, h, filter, buffer, resolution) {
+        const parent = this._currentBuffer;
+        if (!parent || !offscreen.rootRenderTarget.texture)
+            return;
         const gl = this.gl;
-        // ── Acquire a temporary FBO from the pool (or create a new one) ───────
-        const poolKey = `${w}x${h}`;
-        let tmpEntry = this._takeBlurFramebuffer(poolKey);
-        if (!tmpEntry) {
-            const tmpTex = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, tmpTex);
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_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);
-            const tmpFbo = gl.createFramebuffer();
-            gl.bindFramebuffer(gl.FRAMEBUFFER, tmpFbo);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tmpTex, 0);
-            tmpEntry = { texture: tmpTex, fbo: tmpFbo, byteSize: w * h * 4 };
-        }
-        gl.bindFramebuffer(gl.FRAMEBUFFER, tmpEntry.fbo);
-        gl.viewport(0, 0, w, h);
-        gl.clearColor(0, 0, 0, 0);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        // ── Select shader tier based on actual blur radius ────────────────────
-        const blurX = filter.blurX * resolution;
-        const blurY = filter.blurY * resolution;
-        const hTier = this.blurTierFn(blurX);
-        const vTier = this.blurTierFn(blurY);
-        const hKey = `blur_h_${hTier}`;
-        const vKey = `blur_v_${vTier}`;
-        // ── Pass 1: horizontal blur → tmpFbo ──────────────────────────────────
-        const hProg = WebGLProgram.get(gl, this.shaders.fullscreen_vert, this.makeBlurH(hTier), hKey);
-        this._drawFullscreenQuad(hProg, texture, w, h, prog => {
-            const uBlurX = prog.uniforms['blurX'];
-            const uSize = prog.uniforms['uTextureSize'];
-            if (uBlurX)
-                gl.uniform1f(uBlurX, blurX);
-            if (uSize)
-                gl.uniform2f(uSize, w, h);
-        });
-        // ── Pass 2: vertical blur → offscreen FBO ────────────────────────────
-        buffer.rootRenderTarget.activate();
-        this.onResize(w, h);
-        const vProg = WebGLProgram.get(gl, this.shaders.fullscreen_vert, this.makeBlurV(vTier), vKey);
-        this._drawFullscreenQuad(vProg, tmpEntry.texture, w, h, prog => {
-            const uBlurY = prog.uniforms['blurY'];
-            const uSize = prog.uniforms['uTextureSize'];
-            if (uBlurY)
-                gl.uniform1f(uBlurY, blurY);
-            if (uSize)
-                gl.uniform2f(uSize, w, h);
-        });
-        // ── Return the temporary FBO to the pool ──────────────────────────────
-        this._returnBlurFramebuffer(poolKey, tmpEntry);
-    }
-    _takeBlurFramebuffer(key) {
-        const entries = this._blurFboPool.get(key);
-        if (!entries)
-            return undefined;
-        const entry = entries.pop();
-        if (!entry)
-            return undefined;
-        this._blurFboPoolSize--;
-        this._blurFboPoolBytes -= entry.byteSize;
-        if (entries.length === 0) {
-            this._blurFboPool.delete(key);
+        const blend = gl.isEnabled(gl.BLEND);
+        const stencil = gl.isEnabled(gl.STENCIL_TEST);
+        const scissor = gl.isEnabled(gl.SCISSOR_TEST);
+        const alpha = parent.globalAlpha;
+        const tint = parent.globalTintColor;
+        const last = filters[filters.length - 1];
+        const finalFilter = last instanceof BlurFilter || last instanceof MultiPassFilter || last instanceof CustomFilter ? undefined : last;
+        try {
+            gl.disable(gl.BLEND);
+            gl.disable(gl.STENCIL_TEST);
+            gl.disable(gl.SCISSOR_TEST);
+            this._filterSystem.render(finalFilter ? filters.slice(0, -1) : filters, offscreen.rootRenderTarget, offscreen.resolution, output => {
+                parent.rootRenderTarget.activate();
+                this.onResize(parent.width, parent.height);
+                if (blend) {
+                    gl.enable(gl.BLEND);
+                }
+                if (stencil) {
+                    gl.enable(gl.STENCIL_TEST);
+                }
+                if (scissor) {
+                    gl.enable(gl.SCISSOR_TEST);
+                }
+                // Subtree vertices already contain world alpha and tint.
+                parent.globalAlpha = 1;
+                parent.globalTintColor = 0xffffff;
+                this._filterResolution = output.width * offscreen.resolution / offscreen.width;
+                this.activeFilter = finalFilter;
+                this.drawFramebufferTexture(output.texture, output.width, output.height, 0, 0, offscreen.width / offscreen.resolution, offscreen.height / offscreen.resolution);
+                this.flush();
+            });
+        }
+        finally {
+            this.activeFilter = undefined;
+            this._filterResolution = 1;
+            this._filterPassInputs = {};
+            parent.globalAlpha = alpha;
+            parent.globalTintColor = tint;
+            parent.rootRenderTarget.activate();
+            this.onResize(parent.width, parent.height);
+            if (blend) {
+                gl.enable(gl.BLEND);
+            }
+            else {
+                gl.disable(gl.BLEND);
+            }
+            if (stencil) {
+                gl.enable(gl.STENCIL_TEST);
+            }
+            else {
+                gl.disable(gl.STENCIL_TEST);
+            }
+            if (scissor) {
+                gl.enable(gl.SCISSOR_TEST);
+            }
+            else {
+                gl.disable(gl.SCISSOR_TEST);
+            }
         }
-        return entry;
     }
-    _returnBlurFramebuffer(key, entry) {
-        if (entry.byteSize > BLUR_FRAMEBUFFER_POOL_BYTE_LIMIT) {
-            this.gl.deleteTexture(entry.texture);
-            this.gl.deleteFramebuffer(entry.fbo);
-            return;
-        }
-        while (this._blurFboPoolSize >= BLUR_FRAMEBUFFER_POOL_LIMIT ||
-            this._blurFboPoolBytes + entry.byteSize > BLUR_FRAMEBUFFER_POOL_BYTE_LIMIT) {
-            const oldest = this._blurFboPool.entries().next().value;
-            if (!oldest)
-                break;
-            const [oldestKey, entries] = oldest;
-            const evicted = entries.pop();
-            if (evicted) {
-                this.gl.deleteTexture(evicted.texture);
-                this.gl.deleteFramebuffer(evicted.fbo);
-                this._blurFboPoolSize--;
-                this._blurFboPoolBytes -= evicted.byteSize;
+    $drawFilterPass(filter, input, output, resolution, textures = {}) {
+        if (input === output || Object.values(textures).some(value => value.texture === output.texture)) {
+            throw new Error('A filter cannot read from its output framebuffer.');
+        }
+        output.activate();
+        this.gl.viewport(0, 0, output.width, output.height);
+        // Custom vertex shaders may cover only part of the output or discard fragments.
+        output.clear();
+        this._filterResolution = filter instanceof CustomFilter ? resolution : resolution * input.width / output.width;
+        this._filterOutputWidth = output.width;
+        this._filterOutputHeight = output.height;
+        this._filterPassInputs = textures;
+        try {
+            this._drawFullscreenQuad(this._getTextureProgram(filter), input.texture, output.width, output.height, program => this._uploadFilterUniforms(program, filter, input.width, input.height));
+        }
+        finally {
+            this._filterPassInputs = {};
+        }
+    }
+    $drawBlurPass(horizontal, input, output, radius) {
+        if (input === output)
+            throw new Error('A blur cannot read from its output framebuffer.');
+        output.activate();
+        this.gl.viewport(0, 0, output.width, output.height);
+        const tier = this.blurTierFn(radius);
+        const source = horizontal ? this.makeBlurH(tier) : this.makeBlurV(tier);
+        const program = WebGLProgram.get(this.gl, this.shaders.fullscreen_vert, source, `blur_${horizontal ? 'h' : 'v'}_${tier}`);
+        this._drawFullscreenQuad(program, input.texture, output.width, output.height, prog => {
+            const radiusLocation = prog.uniforms[horizontal ? 'blurX' : 'blurY'];
+            if (radiusLocation) {
+                this.gl.uniform1f(radiusLocation, radius);
             }
-            if (entries.length === 0) {
-                this._blurFboPool.delete(oldestKey);
+            if (prog.uniforms.uTextureSize) {
+                this.gl.uniform2f(prog.uniforms.uTextureSize, input.width, input.height);
             }
-        }
-        let entries = this._blurFboPool.get(key);
-        if (!entries) {
-            entries = [];
-            this._blurFboPool.set(key, entries);
-        }
-        entries.push(entry);
-        this._blurFboPoolSize++;
-        this._blurFboPoolBytes += entry.byteSize;
+        });
+    }
+    /**
+     * Releases idle effect targets and auxiliary image uploads. Images remain caller-owned.
+     */
+    releaseFilterResources() {
+        this.flush();
+        this._filterSystem.pool.clear();
+        this._filterTextures.clear();
     }
     _drawFullscreenQuad(prog, texture, w, h, setUniforms) {
         const gl = this.gl;
@@ -482,40 +488,44 @@ export class WebGLRenderContext {
             gl.enableVertexAttribArray(aColor);
             gl.vertexAttribPointer(aColor, 4, gl.UNSIGNED_BYTE, true, stride, 16);
         }
+        setUniforms(prog);
         const uProj = prog.uniforms['projectionVector'];
         if (uProj)
             gl.uniform2f(uProj, w / 2, -h / 2);
         const uSampler = prog.uniforms['uSampler'];
         if (uSampler)
             gl.uniform1i(uSampler, 0);
+        gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        setUniforms(prog);
         const f32 = new Float32Array(20);
         const u32 = new Uint32Array(f32.buffer);
         const packed = 0xffffffff;
         f32[0] = 0;
         f32[1] = 0;
         f32[2] = 0;
-        f32[3] = 0;
+        f32[3] = 1;
         u32[4] = packed;
         f32[5] = w;
         f32[6] = 0;
         f32[7] = 1;
-        f32[8] = 0;
+        f32[8] = 1;
         u32[9] = packed;
         f32[10] = w;
         f32[11] = h;
         f32[12] = 1;
-        f32[13] = 1;
+        f32[13] = 0;
         u32[14] = packed;
         f32[15] = 0;
         f32[16] = h;
         f32[17] = 0;
-        f32[18] = 1;
+        f32[18] = 0;
         u32[19] = packed;
         gl.bufferData(gl.ARRAY_BUFFER, f32, gl.STREAM_DRAW);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
         gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+        if (this._currentBuffer) {
+            this._currentBuffer.drawCalls++;
+        }
         gl.bufferData(gl.ARRAY_BUFFER, this._gpuVertexBufferSize, gl.DYNAMIC_DRAW);
         this._bindIndices = false;
     }
@@ -527,7 +537,40 @@ export class WebGLRenderContext {
     }
     // ── Execute ───────────────────────────────────────────────────────────────
     flush() {
-        this._flush();
+        try {
+            this._flush();
+        }
+        catch (error) {
+            this.drawCmdManager.clear();
+            this._vao.clear();
+            this._batcher.reset();
+            this._bindIndices = false;
+            throw error;
+        }
+    }
+    $abortFrame(buffer) {
+        this.drawCmdManager.clear();
+        this._vao.clear();
+        this._batcher.reset();
+        this._bindIndices = false;
+        this.activeFilter = undefined;
+        this._bufferStack.length = 0;
+        this._bufferStack.push(buffer);
+        this._currentBuffer = buffer;
+        buffer.stencilList.length = 0;
+        buffer.stencilHandleCount = 0;
+        buffer.disableStencil();
+        buffer.disableScissor();
+        buffer.hasScissor = false;
+        buffer.rootRenderTarget.activate();
+        this.gl.activeTexture(this.gl.TEXTURE0);
+        this.gl.enable(this.gl.BLEND);
+        this.gl.disable(this.gl.SCISSOR_TEST);
+        this.gl.disable(this.gl.STENCIL_TEST);
+        this.gl.colorMask(true, true, true, true);
+        this.currentBlendMode = 'source-over';
+        this._applyBlend('source-over');
+        this.onResize(buffer.width, buffer.height);
     }
     // ── Private — flush & dispatch ────────────────────────────────────────────
     _onContextRestored() {
@@ -543,15 +586,14 @@ export class WebGLRenderContext {
         gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
         gl.bufferData(gl.ARRAY_BUFFER, this._gpuVertexBufferSize, gl.DYNAMIC_DRAW);
-        WebGLProgram.clearCache();
+        WebGLProgram.clearCache(gl, true);
         this._bindIndices = false;
         this._batcher.reset();
         this.drawCmdManager.clear();
         this._vao.clear();
         this._defaultEmptyTexture = undefined;
-        this._blurFboPool.clear();
-        this._blurFboPoolSize = 0;
-        this._blurFboPoolBytes = 0;
+        this._filterTextures.clear(true);
+        this._filterSystem.pool.clear(true);
         WebGLRenderBuffer.handleContextRestored(this);
         for (const ref of this._trackedBitmapDatas) {
             const bd = ref.deref();
@@ -730,10 +772,14 @@ export class WebGLRenderContext {
         gl.drawElements(gl.TRIANGLES, count * 3, gl.UNSIGNED_SHORT, indexOffset * 6);
     }
     _getTextureProgram(filter) {
+        if (filter instanceof CustomFilter) {
+            const source = filter.$getProgram(this.isWebGL2);
+            return WebGLProgram.get(this.gl, source.vertex ?? this.shaders.fullscreen_vert, source.fragment, 'CustomFilter');
+        }
         if (filter instanceof ColorMatrixFilter) {
             return WebGLProgram.get(this.gl, this.shaders.default_vert, this.shaders.colorTransform_frag, 'colorTransform');
         }
-        if (filter instanceof BlurFilter || filter instanceof GlowFilter || filter instanceof DropShadowFilter) {
+        if (filter instanceof GlowFilter || filter instanceof DropShadowFilter) {
             return WebGLProgram.get(this.gl, this.shaders.default_vert, this.shaders.glow_frag, 'glow');
         }
         return WebGLProgram.get(this.gl, this.shaders.default_vert, this.shaders.texture_frag, 'texture');
@@ -765,6 +811,16 @@ export class WebGLRenderContext {
         if (uSampler)
             gl.uniform1i(uSampler, 0);
         gl.bindTexture(gl.TEXTURE_2D, texture);
+        this._uploadFilterUniforms(prog, filter, texW, texH);
+        gl.drawElements(gl.TRIANGLES, count * 3, gl.UNSIGNED_SHORT, indexOffset * 6);
+    }
+    _uploadFilterUniforms(prog, filter, texW, texH) {
+        const gl = this.gl;
+        if (filter instanceof CustomFilter) {
+            uploadCustomUniforms(gl, prog, filter, texW, texH, this._filterResolution, this._filterOutputWidth || texW, this._filterOutputHeight || texH, this._filterPassInputs);
+            this._filterTextures.bind(prog, filter, this._filterPassInputs);
+            return;
+        }
         if (filter instanceof ColorMatrixFilter) {
             const uMatrix = prog.uniforms['matrix'];
             const uAdd = prog.uniforms['colorAdd'];
@@ -808,7 +864,7 @@ export class WebGLRenderContext {
                     gl.uniform1f(uDist, filter.distance * this._filterResolution);
                 const uAngle = prog.uniforms['angle'];
                 if (uAngle)
-                    gl.uniform1f(uAngle, -(filter.angle / 180) * Math.PI);
+                    gl.uniform1f(uAngle, (filter.angle / 180) * Math.PI);
                 const uHide = prog.uniforms['hideObject'];
                 if (uHide)
                     gl.uniform1f(uHide, filter.hideObject ? 1 : 0);
@@ -829,9 +885,8 @@ export class WebGLRenderContext {
                 gl.uniform1f(uInner, filter instanceof GlowFilter && filter.inner ? 1 : 0);
             const uKnockout = prog.uniforms['knockout'];
             if (uKnockout)
-                gl.uniform1f(uKnockout, filter instanceof GlowFilter && filter.knockout ? 1 : 0);
+                gl.uniform1f(uKnockout, filter instanceof GlowFilter && filter.knockout ? 0 : 1);
         }
-        gl.drawElements(gl.TRIANGLES, count * 3, gl.UNSIGNED_SHORT, indexOffset * 6);
     }
     _drawRectBatch(indexOffset, count) {
         const gl = this.gl;