webgl 绘制三角形和矩形的奇怪问题

Question

我创建了两个program，分别创建绑定了一个三角形和正方形的顶点，但是在绘制的时候却只绘制三角形和正方形其中一个（取决于绑定的先后顺序，后绑定的会覆盖先绑定的）。请问这是什么原因呢？

源码如下

const canvas = document.getElementById("canvas-rect");
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    const gl = canvas.getContext("webgl");
    if (!gl) {
      alert("无法初始化WebGL，你的浏览器、操作系统或硬件等可能不支持WebGL。");
      return;
    }
    const vertexShaderSource = `
    attribute vec4 vertexPoint;
      void main(){
        gl_Position = vertexPoint;
      }
    `;
    const fragShanderSource = `
      void main(){
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
    `;
    // 第一个program绘制三角形
    const program1 = createProgram(vertexShaderSource, fragShanderSource);
    const buffer1 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer1);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, 0, 0, 0, 0, 0, -0.5, 0.5, 0]),
      gl.STATIC_DRAW
    );
    const vertexPoint1 = gl.getAttribLocation(program1, "vertexPoint");
    gl.vertexAttribPointer(vertexPoint1, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPoint1);

    // 第二个program绘制正方形
    const program2 = createProgram(vertexShaderSource, fragShanderSource);
    const buffer2 = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer2);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 0]),
      gl.STATIC_DRAW
    );
    const vertexPoint2 = gl.getAttribLocation(program2, "vertexPoint");
    gl.vertexAttribPointer(vertexPoint2, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vertexPoint2);

    //gl.TRIANGLE_FAN  gl.POINTS gl.TRIANGLE_STRIP  gl.TRIANGLES
    
    gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
    gl.clearDepth(1.0); // Clear everything
    gl.enable(gl.DEPTH_TEST); // Enable depth testing
    gl.depthFunc(gl.LEQUAL); // Near things obscure far things
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // 绘制三角形
    gl.useProgram(program1);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    // 绘制正方形
    gl.useProgram(program2);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    function createProgram(vertexShaderSource, fragShanderSource) {
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      const fragShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(vertexShader, vertexShaderSource);
      gl.shaderSource(fragShader, fragShanderSource);
      gl.compileShader(vertexShader);
      gl.compileShader(fragShader);
      const shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragShader);
      gl.linkProgram(shaderProgram);
      gl.useProgram(shaderProgram);
      return shaderProgram;
    }

这段代码要吗绘制一个三角形，要吗绘制一个正方形。怎么同时绘制一个三角形和正方形呢

Answer 1

同问，博主解决了吗