Trying to get it work with webGL 2.0 but cannot render rectangle

[artboard-studio]

Here is the code I am using, but no matter what I do, it fails to draw the shape:

import * as twgl from 'twgl.js';

const vs = `#version 300 es
    precision mediump float;

    in vec2 a_position;

    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
`;

const fs = `#version 300 es
    precision mediump float;

    out vec4 outColor;
    uniform vec4 u_color;

    void main() {
        outColor = u_color;
    }
`;

const gl = canvas.getContext("webgl2");
const programInfo = twgl.createProgramFromSources(gl, [vs, fs]);

const arrays = {
    a_position: [
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, 0.5,

        0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5
    ]
};
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

const uniforms = {
    u_color: [1.0, 1.0, 1.0, 1.0]
};

twgl.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.clearColor(1.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(programInfo.program);

twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, bufferInfo);

Can anyone tell what I am missing?

[greggman]

twgl guesses the number of components per element. 4 for anything with 'color' in the name, 2 for 'coord' in the name, 3 for everything else.

So you need to add numComponents: 2 to tell it it's guess of 3 is wrong

const arrays = {
    a_position: {
      numComponents: 2,
      data: [
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, 0.5,

        0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5
      ],
    },
};

Also you wanted createProgramInfo not createProgramFromSources. The later just makes WebGLProgram, it does not look up uniforms and attributes

const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

https://jsfiddle.net/greggman/5uw4x32q/

[artboard-studio]

I knew this is going to be a silly mistake. Thank you very much for the clarification.

For anyone else who would like to understand this, numComponents is the size of the vec being sent to GPU, twgl by default is looking for vec3 (x, y, z) since I am working in 2D and setting the z to 0.0 inside my vertex shader all the time, I was sending a vec2 (x, y) while twgl was expecting the z too. By setting the size (numComponents) to 2 I am telling TWGL to send in the attrib value as vec2 (or set the z yourself, I don't care).

[greggman]

FYI you can you size:2 as a synonym for numComponents:2. I prefer numComponents as size feels like it has too many meanings.

https://twgljs.org/docs/module-twgl.html#.FullArraySpec

[artboard-studio]

Could there be by any chance more examples for TWGL especially for webGL 2.0 and 2D stuff. Majority of the examples are webGL 1.0 and 3D I am trying to learn, and mostly by comparing examples so it would be very helpful.