create cube and add color to gui

sharond106 · Sep 10, 2021 · 891d825 · 891d825
1 parent 309113b
commit 891d825
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 6 deletions.
diff --git a/src/geometry/Cube.ts b/src/geometry/Cube.ts
@@ -0,0 +1,91 @@
+import {vec3, vec4} from 'gl-matrix';
+import Drawable from '../rendering/gl/Drawable';
+import {gl} from '../globals';
+
+class Cube extends Drawable {
+  indices: Uint32Array;
+  positions: Float32Array;
+  normals: Float32Array;
+  center: vec4;
+
+  constructor(center: vec3) {
+    super();
+    this.center = vec4.fromValues(center[0], center[1], center[2], 1);
+  }
+
+  create() {
+    this.indices = new Uint32Array([0, 1, 2, 0, 2, 3, //front face
+                                    4, 5, 6, 4, 6, 7,  // left face
+                                    8, 9, 10, 8, 10, 11,  // back face
+                                    12, 13, 14, 12, 14, 15, // right face
+                                    16, 17, 18, 16, 18, 19, // top face
+                                    20, 21, 22, 20, 22, 23 // bottom face
+                                  ]);
+    this.normals = new Float32Array([0, 0, 1, 0,  // front face
+                                     0, 0, 1, 0,
+                                     0, 0, 1, 0,
+                                     0, 0, 1, 0,
+                                     -1, 0, 0, 0, // left face
+                                     -1, 0, 0, 0,
+                                     -1, 0, 0, 0,
+                                     -1, 0, 0, 0,
+                                     0, 0, -1, 0, // back face 
+                                     0, 0, -1, 0,
+                                     0, 0, -1, 0,
+                                     0, 0, -1, 0,
+                                     1, 0, 0, 0,  // right face
+                                     1, 0, 0, 0,
+                                     1, 0, 0, 0,
+                                     1, 0, 0, 0,
+                                     0, 1, 0, 0,  // top face
+                                     0, 1, 0, 0,
+                                     0, 1, 0, 0,
+                                     0, 1, 0, 0, 
+                                     0, -1, 0, 0, // bottom face
+                                     0, -1, 0, 0,
+                                     0, -1, 0, 0,
+                                     0, -1, 0, 0,
+                                    ]);
+    this.positions = new Float32Array([-1, -1, 1, 1,  // front face
+                                       1, -1, 1, 1,
+                                       1, 1, 1, 1, 
+                                       -1, 1, 1, 1,  
+                                       -1, -1, -1, 1,  // left face
+                                       -1, -1, 1, 1,
+                                       -1, 1, 1, 1,
+                                       -1, 1, -1, 1,
+                                       1, -1, -1, 1,  //back face
+                                       -1, -1, -1, 1,
+                                       -1, 1, -1, 1,
+                                       1, 1, -1, 1, 
+                                       1, -1, 1, 1, // left face
+                                       1, -1, -1, 1,
+                                       1, 1, -1, 1, 
+                                       1, 1, 1, 1,
+                                       -1, 1, 1, 1, // top face
+                                       1, 1, 1, 1, 
+                                       1, 1, -1, 1,
+                                       -1, 1, -1, 1,
+                                       -1, -1, -1, 1, // bottom face
+                                       1, -1, -1, 1,
+                                       1, -1, 1, 1, 
+                                       -1, -1, 1, 1
+                                      ]);
+    this.generateIdx();
+    this.generatePos();
+    this.generateNor();
+    this.count = this.indices.length;
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.bufIdx);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.bufNor);
+    gl.bufferData(gl.ARRAY_BUFFER, this.normals, gl.STATIC_DRAW);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.bufPos);
+    gl.bufferData(gl.ARRAY_BUFFER, this.positions, gl.STATIC_DRAW);
+
+    console.log(`Created cube`);
+  }
+};
+
+export default Cube;
diff --git a/src/main.ts b/src/main.ts
@@ -3,6 +3,7 @@ const Stats = require('stats-js');
 import * as DAT from 'dat.gui';
 import Icosphere from './geometry/Icosphere';
 import Square from './geometry/Square';
+import Cube from './geometry/Cube';
 import OpenGLRenderer from './rendering/gl/OpenGLRenderer';
 import Camera from './Camera';
 import {setGL} from './globals';
@@ -17,13 +18,16 @@ const controls = {
 
 let icosphere: Icosphere;
 let square: Square;
+let cube: Cube;
 let prevTesselations: number = 5;
 
 function loadScene() {
   icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, controls.tesselations);
   icosphere.create();
   square = new Square(vec3.fromValues(0, 0, 0));
   square.create();
+  cube = new Cube(vec3.fromValues(0, 0, 0));
+  cube.create();
 }
 
 function main() {
@@ -39,6 +43,10 @@ function main() {
   const gui = new DAT.GUI();
   gui.add(controls, 'tesselations', 0, 8).step(1);
   gui.add(controls, 'Load Scene');
+  var color = {
+    color: [ 0, 128, 255 ], // RGB array
+  };
+  gui.addColor(color, 'color');
 
   // get canvas and webgl context
   const canvas = <HTMLCanvasElement> document.getElementById('canvas');
@@ -77,9 +85,10 @@ function main() {
       icosphere.create();
     }
     renderer.render(camera, lambert, [
-      icosphere,
-      // square,
-    ]);
+      //icosphere,
+      //square,
+      cube
+    ], color.color);
     stats.end();
 
     // Tell the browser to call `tick` again whenever it renders a new frame

diff --git a/src/rendering/gl/OpenGLRenderer.ts b/src/rendering/gl/OpenGLRenderer.ts
@@ -22,16 +22,16 @@ class OpenGLRenderer {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   }
 
-  render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>) {
+  render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>, color: Array<number>) {
     let model = mat4.create();
     let viewProj = mat4.create();
-    let color = vec4.fromValues(1, 0, 0, 1);
+    //let color = vec4.fromValues(1, 0, 0, 1);
 
     mat4.identity(model);
     mat4.multiply(viewProj, camera.projectionMatrix, camera.viewMatrix);
     prog.setModelMatrix(model);
     prog.setViewProjMatrix(viewProj);
-    prog.setGeometryColor(color);
+    prog.setGeometryColor(vec4.fromValues(color[0]/255, color[1]/255, color[2]/255, 1));
 
     for (let drawable of drawables) {
       prog.draw(drawable);