三角形的WebGL代码，但三角形不显示

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);

我从上面的代码中没有收到任何错误，但是我要绘制的三角形不会显示（背景的颜色确实显示了你）。我将创建的着色器和程序包装在单独的函数中，因此更易于阅读。程序和着色器均被创建，并且position返回0。不知道为什么此代码未渲染三角形。 TIA。

Answer 1

您的代码对我有用。也许问题出在您正在使用的库中？

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>