HW00: Christine Kneer

README.md

@@ -1,3 +1,17 @@
+# Dancing Cube
+## Name: Christine Kneer
+
+In this assignment, I did the following:
+- Added a "Cube" class that inherits from drawable.
+- Updated the existing GUI with a color parameter.
+- Implemented Perlin Noise & FBM based on https://web.archive.org/web/20150316212611/http://freespace.virgin.net/hugo.elias/models/m_perlin.htm & https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83.
+- Created a custom vertex and fragment shader using noise functions to distort the vertices and texture the cube.
+- Live Demo: https://jiaomama.github.io/hw00-intro-base/
+
+<p align="center">
+  <img src="dancingCube.gif">
+</p>
+
 # HW 0: Intro to Javascript and WebGL
 
 <p align="center">

package.json

@@ -7,7 +7,7 @@
     "@types/dat.gui": "^0.7.7",
     "@types/webgl2": "0.0.6",
     "ts-loader": "^9.2.5",
-    "typescript": "^4.4.2",
+    "typescript": "^5.5.4",
     "webpack": "^5.52.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.1.1",
@@ -17,6 +17,8 @@
     "3d-view-controls": "^2.2.2",
     "dat.gui": "^0.7.7",
     "gl-matrix": "^3.3.0",
-    "stats-js": "^1.0.1"
+    "stats-js": "^1.0.1",
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0"
   }
 }

src/geometry/Cube.ts

@@ -0,0 +1,134 @@
+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(); // Call the constructor of the super class. This is required.
+    this.center = vec4.fromValues(center[0], center[1], center[2], 1);
+    }
+
+  create() {
+
+      this.indices = this.createIndices();
+      this.normals = this.createNormals();
+      this.positions = this.createPositionsFromCenter();
+
+      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`);
+  }
+
+    createIndices(): Uint32Array {
+        let indices = [];
+
+        for (let i = 0; i < 24; i += 4) {
+            indices.push(i);
+            indices.push(i + 1);
+            indices.push(i + 2);
+            indices.push(i);
+            indices.push(i + 2);
+            indices.push(i + 3);
+        }
+
+        return new Uint32Array(indices);
+    }
+
+    createNormals(): Float32Array {
+        let normals = [];
+
+        //top
+        for (let i = 0; i < 4; i++) {
+            normals.push(0, 1, 0, 0);
+        }
+
+        //bottom
+        for (let i = 0; i < 4; i++) {
+            normals.push(0, -1, 0, 0);
+        }
+
+        //front
+        for (let i = 0; i < 4; i++) {
+            normals.push(0, 0, 1, 0);
+        }
+
+        //back
+        for (let i = 0; i < 4; i++) {
+            normals.push(0, 0, -1, 0);
+        }
+
+        //left-side
+        for (let i = 0; i < 4; i++) {
+            normals.push(-1, 0, 0, 0);
+        }
+
+        //right-side
+        for (let i = 0; i < 4; i++) {
+            normals.push(1, 0, 0, 0);
+        }
+
+        return new Float32Array(normals);
+    }
+
+    createPositionsFromCenter(): Float32Array {
+        let positions = [];
+        let sideLength = 2; 
+
+        //top
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+
+        //bottom                                                                                     
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+
+        //front                                                                                           
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+
+        //back                                                                                           
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+
+        //left-side                                                                                      
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] - sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+
+        //right-side                                                                                      
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] - sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] - sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] + sideLength / 2, 1);
+        positions.push(this.center[0] + sideLength / 2, this.center[1] + sideLength / 2, this.center[2] - sideLength / 2, 1);
+
+        return new Float32Array(positions);
+    }
+};
+
+export default Cube;

src/main.ts

@@ -1,8 +1,9 @@
-import {vec3} from 'gl-matrix';
+import {vec3, vec4} from 'gl-matrix';
 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';
@@ -13,17 +14,21 @@ import ShaderProgram, {Shader} from './rendering/gl/ShaderProgram';
 const controls = {
   tesselations: 5,
   'Load Scene': loadScene, // A function pointer, essentially
+  'Color': [255, 0, 0],
 };
 
 let icosphere: Icosphere;
 let square: Square;
+let cube: Cube;
 let prevTesselations: number = 5;
-
+let time: number = 0;
 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 +44,7 @@ function main() {
   const gui = new DAT.GUI();
   gui.add(controls, 'tesselations', 0, 8).step(1);
   gui.add(controls, 'Load Scene');
+  gui.addColor(controls, 'Color');
 
   // get canvas and webgl context
   const canvas = <HTMLCanvasElement> document.getElementById('canvas');
@@ -60,8 +66,10 @@ function main() {
   gl.enable(gl.DEPTH_TEST);
 
   const lambert = new ShaderProgram([
-    new Shader(gl.VERTEX_SHADER, require('./shaders/lambert-vert.glsl')),
-    new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
+    //new Shader(gl.VERTEX_SHADER, require('./shaders/lambert-vert.glsl')),
+    //new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
+    new Shader(gl.VERTEX_SHADER, require('./shaders/custom-vert.glsl')),
+    new Shader(gl.FRAGMENT_SHADER, require('./shaders/custom-frag.glsl')),
   ]);
 
   // This function will be called every frame
@@ -76,9 +84,17 @@ function main() {
       icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
       icosphere.create();
     }
+
+    const normalizedColor = vec4.fromValues(controls.Color[0] / 255, controls.Color[1] / 255, controls.Color[2] / 255, 1);
+    lambert.setGeometryColor(normalizedColor);
+
+    time++;
+    lambert.setTime(time);
+
     renderer.render(camera, lambert, [
-      icosphere,
-      // square,
+      //icosphere,
+      //square,
+      cube,
     ]);
     stats.end();
 

src/rendering/gl/OpenGLRenderer.ts

@@ -25,13 +25,13 @@ class OpenGLRenderer {
   render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>) {
     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(color);
 
     for (let drawable of drawables) {
       prog.draw(drawable);

src/rendering/gl/ShaderProgram.ts

@@ -29,6 +29,7 @@ class ShaderProgram {
   unifModelInvTr: WebGLUniformLocation;
   unifViewProj: WebGLUniformLocation;
   unifColor: WebGLUniformLocation;
+  unifTime: WebGLUniformLocation;
 
   constructor(shaders: Array<Shader>) {
     this.prog = gl.createProgram();
@@ -47,7 +48,8 @@ class ShaderProgram {
     this.unifModel      = gl.getUniformLocation(this.prog, "u_Model");
     this.unifModelInvTr = gl.getUniformLocation(this.prog, "u_ModelInvTr");
     this.unifViewProj   = gl.getUniformLocation(this.prog, "u_ViewProj");
-    this.unifColor      = gl.getUniformLocation(this.prog, "u_Color");
+    this.unifColor = gl.getUniformLocation(this.prog, "u_Color");
+    this.unifTime = gl.getUniformLocation(this.prog, "u_Time");
   }
 
   use() {
@@ -85,6 +87,13 @@ class ShaderProgram {
     }
   }
 
+  setTime(time: number) {
+      this.use();
+      if (this.unifTime !== -1) {
+          gl.uniform1f(this.unifTime, time);
+      }
+  }
+
   draw(d: Drawable) {
     this.use();