gl.drawArrays() doesn't draw pixels to Canvas

[davychxn]

Hi there,

As I run "npm run test-render" I see a few fails there, and I'm trying to fix them.

"npm run test-render custom-layer-js/depth" is the one I'm working on.

The test draws 3 Layers:
1, The green Background Layer
2, The white square Fill Layer
3, The red point Custom Layer.

Only the Custom Layer is not seen from WebGL color buffer. We read it back from Canvas with gl.readPixels() to do the images comparison.

Custom Layer is rendered here: maplibre-gl-js\test\integration\render\custom_layer_implementations.ts

I added following code to the Class:

    initBuffers(gl) {
        // Vertices
        var dim = 3;
        var vertices = new Float32Array([-0.6, -0.6, 0.0, // 0
            -0.6, 0.6, 0.0, // 1
            0.6, 0.6, 0.0, // 2
            0.6, -0.6, 0.0, // 3
        ]);
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
        var vertexPositionAttribute = gl.getAttribLocation(gl.program, "a_Position");
        gl.enableVertexAttribArray(vertexPositionAttribute);
        gl.vertexAttribPointer(vertexPositionAttribute, dim, gl.FLOAT, false, 0, 0);

        // Colors
        var colors = new Float32Array([
            1.0, 0.0, 0.0,
            0.0, 1.0, 0.0,
            0.0, 0.0, 1.0,
            1.0, 0.0, 1.0,
        ]);
        gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
        var vertexColorAttribute = gl.getAttribLocation(gl.program, "a_Color");
        gl.enableVertexAttribArray(vertexColorAttribute);
        gl.vertexAttribPointer(vertexColorAttribute, dim, gl.FLOAT, false, 0, 0);

        // Indices
        var indices = new Uint16Array([
            0, 1, 2,
            0, 2, 3,
        ]);
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

        // Return number of vertices
        return indices.length;
    }

    initShaders(gl, vs_source, fs_source) {
        // Compile shaders
        var vertexShader = this.makeShader(gl, vs_source, gl.VERTEX_SHADER);
        var fragmentShader = this.makeShader(gl, fs_source, gl.FRAGMENT_SHADER);

        // Create program
        var glProgram = gl.createProgram();

        // Attach and link shaders to the program
        gl.attachShader(glProgram, vertexShader);
        gl.attachShader(glProgram, fragmentShader);
        gl.linkProgram(glProgram);
        if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
            alert("Unable to initialize the shader program");
            return false;
        }

        // Use program
        gl.useProgram(glProgram);
        gl.program = glProgram;

        return true;
    }

    makeShader(gl, src, type) {
        var shader = gl.createShader(type);
        gl.shaderSource(shader, src);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
            return;
        }
        return shader;
    }

    render(gl, matrix) {

        if (!gl) {
            console.log("Failed to get the rendering context for WebGL");
            return;
        }

        // Init shaders
        var vs = `
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        varying highp vec4 v_Color;
        void main() {
            gl_Position = a_Position;
            v_Color = a_Color;
        }
        `;
        var fs = `
        varying highp vec4 v_Color;
        void main() {
            gl_FragColor = v_Color;
        }
        `;
        if (!this.initShaders(gl, vs, fs)) {
            console.log('Failed to intialize shaders.');
            return;
        }

        // Init buffers
        var n = this.initBuffers(gl);
        if (n < 0) {
            console.log('Failed to init buffers');
            return;
        }

        // Draw
        gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);


        //gl.useProgram(this.program);
        //gl.uniformMatrix4fv(gl.getUniformLocation(this.program, 'u_matrix'), false, matrix);
        //gl.drawArrays(gl.POINTS, 0, 1);
    }

And we can see gl.drawElements() works well:

If I change the code in render() method into:

// Draw //gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); gl.drawArrays(gl.TRIANGLES, 0, 1);

We should see 1 triangle, but not:

We can see from the indices order the triangle is not in the opposite side.

I tried to catch exceptions from gl.drawArrays(), but see nothing:
// Draw //gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0); try { gl.drawArrays(gl.TRIANGLES, 0, 1); } catch (e) { console.info(e); }

So, any suggestions for me? Thanks!

[HarelM]

Can you try and run the tests under wsl?
The tests are basically passing when running them in CI so the problem is related to the difference between windows and linux/mac I guess...
I'm also not very strong with gl code and custom layers, maybe @Kanahiro can help here?

[davychxn]

Thanks, Harel. Your idea brought us thinking of software/hardware low level imcompatible issue.

I run the test on 2 computers: 1 is with NV 2080, another NV 3050. Both on Win11 platform and both can reproduce the issue. Not a Video Card driver issue of a single device.

One of our colleagues recalls a "gl_PointSize" issue in Chrome Angle reported since 2019. And remains unfixed till now.
https://groups.google.com/g/angleproject-review/c/ePB6yEDa1Vg?pli=1

In MapLibre project we use "headless-gl" as the WebGL library. And it is built on Angle.

Our version in MapLibre is: "gl": "^5.0.3",
Letest "headless-gl" version is: 6.0.1

I installed the latest and still reproduce the issue.

I think might be a Chrome Angle render layer library issue in specific versions?

I don't know how to switch to another WebGL simulation library to verify further.

2 other options are:
1, Setup Vertices buffers to provide positions and colors and we can see the point.
2, Replace the point with other geometries, like triangle or quad.

Do you have suggestions?

[HarelM]

Did you try it on wsl? On a mac?
In any case, I don't have a good idea.
Also worth trying to see if this was present in version 1.x if not, it might have been introduced somewhere...

[davychxn]

Hi Harel,

My colleague finds some guy already did a fix to "tent-3d" in the same test group "test-render". But looks he didn't fix "depth" at that time.

We'll reference his change to submit a PR. Thanks.

[davychxn]

Did you try it on wsl? On a mac? In any case, I don't have a good idea. Also worth trying to see if this was present in version 1.x if not, it might have been introduced somewhere...

I'll verify both on Windows and Linux.

[HarelM]

Cool, thanks!