WebGL code for triangle, but triangle won't show

Question

        let shader: WebGLGameShader = spriteRenderer.getShader();
        var vertexShaderText = [
            'precision highp float;',
            'attribute vec2 positions;',

            'void main() {',
            'gl_Position = vec4(positions, 0.0, 1.0);',    
            '}',
        ].join('\n');

        var fragmentShaderText =
            [
            'precision highp float;',
            '',
            'uniform vec4 color;',
            'void main()',
            '{',
            '  gl_FragColor = vec4(1.0, 0, 0, 1.0);',
            '}'
            ].join('\n');
        let vShader = shader.createShader(gl, gl.VERTEX_SHADER, vertexShaderText);
        let fShader = shader.createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderText);

        // create program
        var program: WebGLProgram = shader.createShaderProgram(gl, vShader, fShader);

        console.log("program:" + program);
        // background color does show thou;
        gl.clearColor(0.22, 0.35, 0.9, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        let vertices = [
            0.0,0.5, 
            -0.5,-0.5, 
            0.0,-0.5,
        ]

        var buffer = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        var position = gl.getAttribLocation(program, "positions")
        console.log("position: " + position)
        gl.useProgram(program);

        gl.enableVertexAttribArray(position)
        gl.vertexAttribPointer(position, 
            2, 
            gl.FLOAT, 
            false, 
            2 * Float32Array.BYTES_PER_ELEMENT,
            0
        );
        let g = gl.drawArrays(gl.TRIANGLES, 0, 3);

I'm not getting any errors from the code above, but the triangle I like to draw won't show(the color for the background does show thou). I wrapped the creating shaders and program in separate functions, so it's easier to read. Both the program and shaders are created, and position returns 0. Any idea why else this code is not rendering the triangle. TIA.

Answer 1

Your code works for me. Maybe the issue is in the library you're using?

const spriteRenderer = {
  getShader() {
    return {
      createShader(gl, type, src) {
        const s = gl.createShader(type);
        gl.shaderSource(s, src);
        gl.compileShader(s);
        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
          throw new Error(gl.getShaderInfoLog(s));
        }
        return s;
      },
      createShaderProgram(gl, vs, fs) {
        const p = gl.createProgram();
        gl.attachShader(p, vs);
        gl.attachShader(p, fs);
        gl.linkProgram(p);
        if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
          throw new Error(gl.getProgramInfoLog(p));
        }
        return p;
      },
    };
  },
};
const gl = document.querySelector('canvas').getContext('webgl'); 

let shader = spriteRenderer.getShader();
var vertexShaderText = [
  'precision highp float;',
  'attribute vec2 positions;',

  'void main() {',
  'gl_Position = vec4(positions, 0.0, 1.0);',
  '}',
].join('\n');

var fragmentShaderText = [
  'precision highp float;',
  '',
  'uniform vec4 color;',
  'void main()',
  '{',
  '  gl_FragColor = vec4(1.0, 0, 0, 1.0);',
  '}'
].join('\n');
let vShader = shader.createShader(gl, gl.VERTEX_SHADER, vertexShaderText);
let fShader = shader.createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderText);

// create program
var program = shader.createShaderProgram(gl, vShader, fShader);

console.log("program:" + program);
// background color does show thou;
gl.clearColor(0.22, 0.35, 0.9, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

let vertices = [
  0.0, 0.5, -0.5, -0.5,
  0.0, -0.5,
]

var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var position = gl.getAttribLocation(program, "positions")
console.log("position: " + position)
gl.useProgram(program);

gl.enableVertexAttribArray(position)
gl.vertexAttribPointer(position,
  2,
  gl.FLOAT,
  false,
  2 * Float32Array.BYTES_PER_ELEMENT,
  0
);
let g = gl.drawArrays(gl.TRIANGLES, 0, 3)

<canvas></canvas>