javascript - webgl2，不能一次打印多个对象

Question

我有 2 个函数，每个函数都绘制一个对象，在这两个函数中我都有这样的东西：

  vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  let vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(positions), gl.STATIC_DRAW);



  gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 12, 0);
  gl.enableVertexAttribArray(0); 

当我调用函数时，

firstfunction();
secondfunction();

只打印第二个函数的对象，如何解决这个问题？在 html 文件中，对于 gl_position，我使用运算符“+”来打印不同的对象，对吗？

编辑：这是我的主要，js

"use strict";

let gl;
let vao;
let program;
let modelMatrix = mat4(1.0);
let viewMatrix = mat4(1.0);
let projectionMatrix = mat4(1.0);
let modelMatrix1 = mat4(1.0);
let vertexCounter =5700;

function createGeometry() {
  let positions = [];
  positions.push(vec3(-0.5,0, 0.5));
  positions.push(vec3(0.5, 0, 0.5));
  positions.push(vec3(0.5, 0, -0.5));
  positions.push(vec3(-0.5, 0, 0.5));
  positions.push(vec3(0.5, 0, -0.5));
  positions.push(vec3(-0.5, 0, -0.5));
  //triangle 1
  positions.push(vec3(-0.5, 0, -0.5));
  positions.push(vec3(0.5, 0, -0.5));
  positions.push(vec3(0,-0.5, 0));
  //triangle 2
  positions.push(vec3(0.5, 0, -0.5));
  positions.push(vec3(0.5, 0, 0.5));
  positions.push(vec3(0, -0.5, 0));
  //triangle 3
  positions.push(vec3(-0.5, 0, -0.5));
  positions.push(vec3(-0.5, 0, 0.5));
  positions.push(vec3(0,-0.5, 0));
  //triangle 4
  positions.push(vec3(-0.5, 0, 0.5));
  positions.push(vec3(0.5, 0, 0.5));
  positions.push(vec3(0,-0.5, 0));

  vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  let vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(positions), gl.STATIC_DRAW);



  gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 12, 0);
  gl.enableVertexAttribArray(0);

 // let colors = [];
 // colors.push(vec3(1.0, 0.0, 0.0));
 // colors.push(vec3(1.0, 0.0, 1.0));
 // colors.push(vec3(1.0, 1.0, 0.0));

  //let vboColor = gl.createBuffer();
  //gl.bindBuffer(gl.ARRAY_BUFFER, vboColor);
  //gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

  //gl.vertexAttribPointer(1, 3, gl.FLOAT, gl.FALSE, 12, 0);
  //gl.enableVertexAttribArray(1);
}

function loadModel() {
  let modelData = loadObj(teapotModel);
  let meshData = loadMeshData(modelData[0], "Teapot");
  let popositions = meshData.positions;
  let normals = meshData.normals;
  let colors = meshData.colors;
  let vertexCounter = meshData.vertexCount;

   vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  let vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, popositions, gl.STATIC_DRAW);
  

 

  gl.vertexAttribPointer(1, 3, gl.FLOAT, gl.FALSE, 12, 0);
  gl.enableVertexAttribArray(1);

 //gl.bufferData(gl.ARRAY_BUFFER, flatten(normals), gl.STATIC_DRAW);
 // gl.vertexAttribPointer(3, 3, gl.FLOAT, gl.FALSE, 12, 0);
 // gl.enableVertexAttribArray(3);

 let vboColor = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, vboColor);
 gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

 gl.vertexAttribPointer(2, 3, gl.FLOAT, gl.FALSE, 12, 0);
 gl.enableVertexAttribArray(2);

}


function render(timestamp, previousTimestamp) {
  let light = getLightPosition(); // vec3
  let rotation = getRotation(); // vec3

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.useProgram(program);

 

  gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_projectionMatrix"),
    gl.FALSE,
    flatten(projectionMatrix));


  //  let offset = Math.cos(timestamp / 1000.0) * 2.0;
  //  let cameraPosition = vec3(offset, 2.0, 5.0);
  //  let targetPosition = vec3(0.0, 0.0, 0.0);
  //  let upVector = vec3(0.0, 1.0, 0.0);  
  //  viewMatrix = lookAt(cameraPosition, targetPosition, upVector);

  gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_viewMatrix"),
    gl.FALSE,
    flatten(viewMatrix));

    //scale (2,1,2)
  let t1 = mat4(2.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 2.0, 0.0,
    0.0, 0.0, 0.0, 1.0);
  
  let t2 = translate( 0.0, -0.5, 0.0 );

  let changedmodelMatrix = mat4(1.0)

  changedmodelMatrix =mult(t2,mult(t1,modelMatrix));

  gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_model_matrix"),
    gl.FALSE,
    flatten(changedmodelMatrix));

    //let popositions = meshData.positions;
  //set matrix for teapotposition
  // gl.uniformMatrix4fv(
  //  gl.getUniformLocation(program, "u_teapotposition"),
  //  gl.FALSE,
  //  flatten(popositions));  
    

  

  let t3 = translate(0.0, 0.5, 0.0);
  let changedmodelMatrix1 = mat4(1.0);
  changedmodelMatrix1 = mult(t3,modelMatrix1);
  gl.uniformMatrix4fv(
    gl.getUniformLocation(program, "u_model_matrix1"),
    gl.FALSE,
    flatten(changedmodelMatrix1));

  gl.bindVertexArray(vao);
  gl.drawArrays(gl.TRIANGLES, 0, 18); // pyramid

  gl.bindVertexArray(vao);
  gl.drawArrays(gl.TRIANGLES, 0, vertexCounter); //teapot

  
  
  

  window.requestAnimFrame(function (time) {
    render(time, timestamp);
  });
}

window.onload = function init() {
  let canvas = document.getElementById("rendering-surface");
  gl = WebGLUtils.setupWebGL(canvas);

  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);

  gl.clearColor(0.0, 0.0, 0.0, 0.0);

  
  createGeometry();
  loadModel();  

  // Program.
  program = initShaders(gl, "vertex-shader", "fragment-shader");

  // Camera.
  modelMatrix = mat4(1.0);
    projectionMatrix = perspective(60.0, canvas.width / canvas.height, 0.1, 100.0);

  let eyePos = vec3(0.75, 0.25, 3);
  let lookAtPos = vec3(0.0, 0.0, 0.0);
  let upVector = vec3(0.0, 1.0, 0.0);
  viewMatrix = lookAt(eyePos, lookAtPos, upVector);

  gl.bindVertexArray(vao);
  

  
  // Render.
  render(0, 0);
};

html:

<html>
  <head>
      <meta charset="UTF-8" />   
    <title>Introduction to WebGL</title>
    <script type="x-shader/x-vertex" id="vertex-shader">#version 300 es

          precision mediump float;

          layout(location = 0) in vec3 a_position;
          layout(location = 1) in vec4 a_teapotposition;
          layout(location = 2) in vec3 a_teapotcolor;
         
    
          uniform mat4 u_model_matrix;
          uniform mat4 u_viewMatrix;
          uniform mat4 u_projectionMatrix;
          
          //uniform mat4 u_model_matrix1;
         


          out vec3 v_teapotcolor;  
          

          void main() {
            v_teapotcolor = a_teapotcolor;
            
            gl_Position = 
                  a_teapotposition +
                  u_projectionMatrix
                * u_viewMatrix
               * u_model_matrix
                * vec4(a_position, 1.0)

                ;

          

            
          }
    </script>
    <script type="x-shader/x-fragment" id="fragment-shader">#version 300 es

          precision mediump float;

          in vec3 v_teapotcolor;  
         
          out vec4 color;

          void main() {
            color = vec4(v_teapotcolor, 1.0 ) //*
                   //vec4(0.5,0.2,0.1, 1.0)
                   ;
          }
    </script>

任何帮助表示赞赏。

标签： javascriptwebglvao