use VAOs to allow multiple meshes

src/003-scene/main.ts

@@ -3,14 +3,13 @@ import { WebGLApp } from "../renderer/webgl";
 import { Renderable } from "../renderer/renderable";
 import { Transform, etoq, v3 } from "../renderer/transform";
 import torus from "../meshes/torus";
-import { errorShader } from "../common-shaders/error";
 import plane from "../meshes/plane";
-import { uvRainbow } from "../common-shaders/uv-rainbow";
 import uvsphere from "../meshes/uvsphere";
 import { mat4, quat } from "gl-matrix";
 import trianglething from "../meshes/trianglething";
 import teapot from "../meshes/teapot";
 import { basic } from "../common-shaders/basic";
+import { errorShader } from "../common-shaders/error";
 
 const app = new WebGLApp({ fov: 45 });
 
@@ -18,11 +17,17 @@ const camera = new Transform([3, 3, 5], etoq([-15, 26, 0]));
 const light = new Transform([1, 1, 0]);
 
 const transform = new Transform(v3(0), etoq([0, 0, 0]));
+const transform2 = new Transform([-2, 0, 1], etoq([0, 90 + 62, 0]));
 
 app.onUpdate(() => {
   quat.rotateY(transform.rotation, transform.rotation, 0.001);
 });
 
+new Renderable(
+  app,
+  transform2,
+  new MeshRenderer(app, trianglething, basic(app), camera, light).configure({})
+);
 new Renderable(
   app,
   transform,

src/common-shaders/error.frag

@@ -1,5 +1,18 @@
+#version 300 es
 precision highp float;
 
+uniform float u_time;
+
+// in vec2 uv0;
+// in vec3 normal;
+// in vec4 vertex_color;
+// in vec3 light_pos; 
+
+out vec4 fragColor;
+
+
 void main() {
-  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
-}
+
+
+  fragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}

src/common-shaders/error.ts

@@ -1,7 +1,26 @@
-import { Shader } from "../renderer/shader";
+import { Shader, ShaderConfig } from "../renderer/shader";
 import { WebGLApp } from "../renderer/webgl";
 import frag from "./error.frag";
-import vert from "./error.vert";
+import vert from "./basic.vert";
+
+export const basicShaderConfig: ShaderConfig = {
+  attributes: {
+    vertex: "a_vertex",
+    uv0: "a_uv0",
+    normal: "a_normal",
+    vertexColor: "a_vertex_color",
+  },
+
+  uniforms: {
+    view: "u_view",
+    projection: "u_projection",
+    objectToWorld: "u_object_to_world",
+    objectToWorldInv: "u_object_to_world_inv",
+    light0: "u_light_0",
+    light0Color: "u_light_0_color",
+    time: "u_time",
+  },
+};
 
 export const errorShader = (app: WebGLApp) =>
-  new Shader().vertex(vert).fragment(frag).app(app);
+  new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app);

src/common-shaders/error.vert

@@ -1,8 +0,0 @@
-attribute vec4 aVertexPosition;
-
-uniform mat4 uModelViewMatrix;
-uniform mat4 uProjectionMatrix;
-
-void main() {
-  gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-}

src/renderer/mesh-renderer.ts

@@ -12,9 +12,9 @@ export type MeshRendererConfig = {
 };
 
 export class MeshRenderer extends Behavior {
-  private modelMatrix = mat4.create();
   private projectionMatrix = mat4.create();
   private buffers: {
+    vao?: WebGLVertexArrayObject;
     position?: WebGLBuffer;
     uv?: WebGLBuffer;
     normal?: WebGLBuffer;
@@ -53,6 +53,14 @@ export class MeshRenderer extends Behavior {
   }
 
   initializeBuffers() {
+    const vao = this.app.gl.createVertexArray();
+    if (!vao) {
+      throw new Error("VAO creation failed");
+    }
+
+    this.buffers.vao = vao;
+    this.app.gl.bindVertexArray(vao);
+
     this.buffers.faces = this.makeBuffer(
       this.mesh.config.faces,
       this.app.gl.ELEMENT_ARRAY_BUFFER
@@ -98,6 +106,8 @@ export class MeshRenderer extends Behavior {
         this.app.gl.FLOAT
       );
     }
+
+    this.app.gl.bindVertexArray(null);
   }
 
   bindAttrib(
@@ -166,6 +176,7 @@ export class MeshRenderer extends Behavior {
   onRenderableUpdate(time: number, transform: Transform) {
     const gl = this.app.gl;
 
+    gl.bindVertexArray(this.buffers.vao || null);
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.buffers.faces || null);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers.position || null);
 
@@ -178,11 +189,6 @@ export class MeshRenderer extends Behavior {
       0
     );
 
-    // gl.drawArrays(
-    //   0,
-    //   this.mesh.config.vertexCount
-    // );
-
     const err = gl.getError();
     if (err !== 0) {
       console.log({ err });
@@ -190,5 +196,9 @@ export class MeshRenderer extends Behavior {
         `(MeshRenderer<Mesh#${this.mesh.name}>) webgl failure: ${err}`
       );
     }
+
+    gl.bindVertexArray(null);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
   }
 }