HW00: Wenqing Wang

README.md

@@ -5,6 +5,12 @@
 </p>
 <p align="center">(source: Ken Perlin)</p>
 
+## Screenshots
+I use a 3D perlin noise to animate the vertex position and use worley noise in frag shader to set the color.
+
+![566-1](https://user-images.githubusercontent.com/33616958/189788175-65a7976c-2dcc-4265-872d-dec8674f5bf7.gif)
+
+
 ## Objective
 - Check that the tools and build configuration we will be using for the class works.
 - Start learning Typescript and WebGL2

src/geometry/cube.ts

@@ -0,0 +1,110 @@
+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 = new Uint32Array([0, 1, 2,
+                                    0, 2, 3,
+                                    4, 5, 6,
+                                    4, 6, 7,
+                                    8, 9, 10,
+                                    8, 10, 11,
+                                    12, 13, 14,
+                                    12, 14, 15,
+                                    16, 17, 18,
+                                    16, 18, 19,
+                                    20, 21, 22,
+                                    20, 22, 23]);
+
+this.normals = new Float32Array([0, 0, 1, 0,
+                                 0, 0, 1, 0,
+                                 0, 0, 1, 0,
+                                 0, 0, 1, 0,
+
+                                 0, 0, -1, 0,
+                                 0, 0, -1, 0,
+                                 0, 0, -1, 0,
+                                 0, 0, -1, 0,
+
+                                 -1, 0, 0, 0,
+                                 -1, 0, 0, 0,
+                                 -1, 0, 0, 0,
+                                 -1, 0, 0, 0,
+
+                                 1, 0, 0, 0,
+                                 1, 0, 0, 0,
+                                 1, 0, 0, 0,
+                                 1, 0, 0, 0,
+
+                                 0, 1, 0, 0,
+                                 0, 1, 0, 0,
+                                 0, 1, 0, 0,
+                                 0, 1, 0, 0,
+
+                                 0, -1, 0, 0,
+                                 0, -1, 0, 0,
+                                 0, -1, 0, 0,
+                                 0, -1, 0, 0]);
+
+this.positions = new Float32Array([-0.5, -0.5, 0.5, 1,
+                                    0.5, -0.5, 0.5, 1,
+                                    0.5, 0.5, 0.5, 1,
+                                    -0.5, 0.5, 0.5, 1,
+
+                                    -0.5, -0.5, -0.5, 1,
+                                    0.5, -0.5, -0.5, 1,
+                                    0.5, 0.5, -0.5, 1,
+                                    -0.5, 0.5, -0.5, 1,
+
+                                    -0.5, -0.5, -0.5, 1,
+                                    -0.5, -0.5, 0.5, 1,
+                                    -0.5, 0.5, 0.5, 1,
+                                    -0.5, 0.5, -0.5, 1,
+
+                                    0.5, -0.5, -0.5, 1,
+                                    0.5, -0.5, 0.5, 1,
+                                    0.5, 0.5, 0.5, 1,
+                                    0.5, 0.5, -0.5, 1,
+
+                                    -0.5, 0.5, -0.5, 1,
+                                    -0.5, 0.5, 0.5, 1,
+                                    0.5, 0.5, 0.5, 1,
+                                    0.5, 0.5, -0.5, 1,
+
+                                    -0.5, -0.5, -0.5, 1,
+                                    -0.5, -0.5, 0.5, 1,
+                                    0.5, -0.5, 0.5, 1,
+                                    0.5, -0.5, -0.5, 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;

src/main.ts

@@ -1,4 +1,4 @@
-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';
@@ -7,21 +7,28 @@ import OpenGLRenderer from './rendering/gl/OpenGLRenderer';
 import Camera from './Camera';
 import {setGL} from './globals';
 import ShaderProgram, {Shader} from './rendering/gl/ShaderProgram';
+import Cube from './geometry/cube';
 
 // Define an object with application parameters and button callbacks
 // This will be referred to by dat.GUI's functions that add GUI elements.
 const controls = {
   tesselations: 5,
   'Load Scene': loadScene, // A function pointer, essentially
+  color: [ 255, 255, 0, 255 ], // RGB with alpha
 };
 
 let icosphere: Icosphere;
 let square: Square;
 let prevTesselations: number = 5;
+let preGeoColor: number[] = [255, 255, 0, 255];
+let cube: Cube;
+let time: number = 0;
 
 function loadScene() {
   icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, controls.tesselations);
   icosphere.create();
+  cube = new Cube(vec3.fromValues(0, 0, 0));
+  cube.create();
   square = new Square(vec3.fromValues(0, 0, 0));
   square.create();
 }
@@ -39,6 +46,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');
@@ -73,17 +81,24 @@ function main() {
     if(controls.tesselations != prevTesselations)
     {
       prevTesselations = controls.tesselations;
-      icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
-      icosphere.create();
+      // icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
+      // icosphere.create();
     }
+    if (controls.color != preGeoColor) {
+      preGeoColor = controls.color;
+      renderer.setGeoColor(preGeoColor[0], preGeoColor[1], preGeoColor[2], preGeoColor[3]);
+    }
+
     renderer.render(camera, lambert, [
       icosphere,
       // square,
+      // cube,
     ]);
     stats.end();
 
     // Tell the browser to call `tick` again whenever it renders a new frame
     requestAnimationFrame(tick);
+    lambert.setTime(++time);
   }
 
   window.addEventListener('resize', function() {

src/rendering/gl/OpenGLRenderer.ts

@@ -6,6 +6,8 @@ import ShaderProgram from './ShaderProgram';
 
 // In this file, `gl` is accessible because it is imported above
 class OpenGLRenderer {
+  geoCol: vec4;
+
   constructor(public canvas: HTMLCanvasElement) {
   }
 
@@ -18,6 +20,10 @@ class OpenGLRenderer {
     this.canvas.height = height;
   }
 
+  setGeoColor(r: number, g: number, b: number, a: number) {
+    this.geoCol = vec4.fromValues(r/255, g/255, b/255, a/255);
+  }
+
   clear() {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   }
@@ -31,7 +37,7 @@ class OpenGLRenderer {
     mat4.multiply(viewProj, camera.projectionMatrix, camera.viewMatrix);
     prog.setModelMatrix(model);
     prog.setViewProjMatrix(viewProj);
-    prog.setGeometryColor(color);
+    prog.setGeometryColor(this.geoCol);
 
     for (let drawable of drawables) {
       prog.draw(drawable);

src/rendering/gl/ShaderProgram.ts

@@ -29,6 +29,8 @@ class ShaderProgram {
   unifModelInvTr: WebGLUniformLocation;
   unifViewProj: WebGLUniformLocation;
   unifColor: WebGLUniformLocation;
+  unifTime: WebGLUniformLocation;
+  unifTexture: WebGLUniformLocation;
 
   constructor(shaders: Array<Shader>) {
     this.prog = gl.createProgram();
@@ -48,6 +50,7 @@ class ShaderProgram {
     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.unifTime       = gl.getUniformLocation(this.prog, "u_Time");
   }
 
   use() {
@@ -85,6 +88,13 @@ class ShaderProgram {
     }
   }
 
+  setTime(time: number){
+    this.use();
+    if (this.unifTime !== -1){
+      gl.uniform1f(this.unifTime, time);
+    }
+  }
+
   draw(d: Drawable) {
     this.use();