[Webkit-unassigned] [Bug 235478] New: WebGL enabling Blend causes high performance drop

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=235478

            Bug ID: 235478
           Summary: WebGL enabling Blend causes high performance drop
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebGL
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: muiznieks.reinis at gmail.com
                CC: dino at apple.com, kbr at google.com, kkinnunen at apple.com

I develop a game using WebGL2. If I enable `gl.enable(gl.BLEND);` it causes the framerate to go down from 30 to 4. (Macbook air M1, but the same is for my iPad and iPhone as well)

In my scene, I have around 60k vertices (Updated every frame) + I use blend to overlay the screen with texture.


```
........

        // Bind uniforms
        gl.uniformBlockBinding(this.glProgram, this.uniBlockMain, 0);
        gl.uniform1i(this.uniTextures, 1); // texture sampler array is bound to texture1
        gl.uniform2fv(this.uniTextureOffsets, this.textureOffsets, 0);

        // We just allow the GL to do face culling. Note this requires the priority renderer
        // to have logic to disregard culled faces in the priority depth testing.
        gl.enable(gl.CULL_FACE);

        // Enable blending for alpha
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

        // Draw buffers
        gl.bindVertexArray(this.vaoHandle);

        gl.enableVertexAttribArray(0);
        gl.bindBuffer(gl.ARRAY_BUFFER, this.tmpVertexBuffer.buffer);
        gl.vertexAttribIPointer(0, 4, gl.INT, 0, 0);

        gl.enableVertexAttribArray(1);
        gl.bindBuffer(gl.ARRAY_BUFFER, this.tmpUvBuffer.buffer);
        gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);

        gl.drawArrays(gl.TRIANGLES, 0, this.vertexBuffer.length() / 4);

        // gl.disable(gl.BLEND);
        gl.disable(gl.CULL_FACE);

        gl.useProgram(null);

        this.vertexBuffer.clear();
        this.uvBuffer.clear();

        this.drawUi(canvasWidth, canvasHeight);

        gl.flush();

.....
```

````
    private drawUi(canvasWidth: number, canvasHeight: number) {
        const gl = this.gl;

        gl.enable(gl.BLEND);
                gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
                gl.bindTexture(gl.TEXTURE_2D, this.interfaceTexture);

                gl.useProgram(this.glUiProgram);
                gl.uniform2i(this.uniTexSourceDimensions, canvasWidth, canvasHeight);

        gl.viewport(0, 0, canvasWidth, canvasHeight);

        gl.uniform2i(this.uniTexTargetDimensions, canvasWidth, canvasHeight);

                // Texture on UI
                gl.bindVertexArray(this.vaoUiHandle);
                gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

                gl.disable(gl.BLEND);
    }

```

Running on chrome I get stable 60fps :/

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220122/69c8501b/attachment-0001.htm>