Dineth Meegoda HW #0

README.md

@@ -1,5 +1,30 @@
 # HW 0: Intro to Javascript and WebGL
 
+## Dineth Meegoda
+
+This is my first time really using WebGL and one of my first times working with typescript and a web project in general, but the similarness of the GL and renderer setup with OpenGL really helped me get through it fast. I knew I wanted to use Worley to create some sort of circular noise with some techno looking effects so I used Worley with another Worley noise function passed in to create the ring like effects that panned and expanded on the shape. I also 
+
+[Live Demo](https://dinethmeegoda.github.io/Intro-WebGL-Shader/)
+
+Sample Images
+==================
+Default Blob with Icosphere
+------------
+![](./images/techblob.png)
+
+Icosphere Blob with some COLOR
+-----------
+![](./images/coloredblob.png)
+
+Cube with the same COLOR
+-----------
+![](./images/coloredcube.png)
+
+Candy looking cube
+-----------
+![](./images/candycube.png)
+
+
 <p align="center">
   <img width="360" height="360" src="https://user-images.githubusercontent.com/1758825/132532354-e3a45402-e484-499e-bfa7-2d73b9f2c946.png">
 </p>

src/geometry/Cube.ts

@@ -0,0 +1,70 @@
+import {vec3, vec4, mat4} from 'gl-matrix';
+import Drawable from '../rendering/gl/Drawable';
+import {gl} from '../globals';
+
+export default class Cube extends Drawable {
+  indices: Uint32Array;
+  positions: Float32Array;
+  normals: Float32Array;
+
+  constructor(public size: number) {
+    super(); // Call the constructor of the super class. This is required.
+  }
+
+  create() {
+  // Making Indices
+  const indices = [];
+  for (let i = 0; i < 6; i++) {
+    const x = i * 4
+    indices.push(x, x+1, x+2);
+    indices.push(x, x+2, x+3); 
+  }  
+  this.indices = new Uint32Array(indices);
+  // Making Normals and Positions
+  let rot = mat4.create();
+  const normals = [];
+  const positions = [];
+  for (let i = 0; i < 6; i++) {
+    let n;
+    n = i % 2 == 0 ? 1 : -1;
+    var normal: [number, number, number, number];
+    if (i <= 1) {
+      normal = [n, 0, 0, 0];
+    } else if (i <= 3) {
+      normal = [0, n, 0, 0];
+    } else {
+      normal = [0, 0, n, 0];
+    }
+    mat4.identity(rot);
+    // Rotate 4 times around the normal to get each vertex for each face
+    mat4.rotate(rot, rot, Math.PI / 2 , vec3.fromValues(normal[0], normal[1], normal[2]));
+    // If normal is positive, start from 1,1,1 otherwise start from -1,-1,-1
+    n *= this.size;
+    let pos = vec4.fromValues(n, n, n, 1);
+    // Push normals into the arrays
+    for (let j = 0; j < 4; j++) {
+      normals.push(...normal);
+      vec4.transformMat4(pos, pos, rot);
+      positions.push(...pos);
+    }
+  }
+  this.normals = new Float32Array(normals);
+  this.positions = new Float32Array(positions);
+
+    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`);
+  }
+};

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';
@@ -12,18 +13,25 @@ import ShaderProgram, {Shader} from './rendering/gl/ShaderProgram';
 // 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
+  'Switch Obj': loadScene, // A function pointer, essentially
+  color: [13, 13, 13] as [number, number, number],
 };
 
+// true = cube, false = icosphere, it gets swapped at initialize 
+let shape = true;
 let icosphere: Icosphere;
 let square: Square;
+let cube: Cube;
 let prevTesselations: number = 5;
+let prevColor = [0, 0, 0] as [number, number, number];
+let time = 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(1.5);
+  cube.create();
+  shape = !shape;
 }
 
 function main() {
@@ -38,7 +46,8 @@ function main() {
   // Add controls to the gui
   const gui = new DAT.GUI();
   gui.add(controls, 'tesselations', 0, 8).step(1);
-  gui.add(controls, 'Load Scene');
+  gui.add(controls, 'Switch Obj');
+  gui.addColor(controls, 'color');
 
   // get canvas and webgl context
   const canvas = <HTMLCanvasElement> document.getElementById('canvas');
@@ -64,25 +73,39 @@ function main() {
     new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
   ]);
 
+  const noise = new ShaderProgram([
+    new Shader(gl.VERTEX_SHADER, require('./shaders/noise-vert.glsl')),
+    new Shader(gl.FRAGMENT_SHADER, require('./shaders/noise-frag.glsl')),
+  ]);
+
   // This function will be called every frame
   function tick() {
     camera.update();
     stats.begin();
     gl.viewport(0, 0, window.innerWidth, window.innerHeight);
     renderer.clear();
+    noise.setTime(time);
     if(controls.tesselations != prevTesselations)
     {
       prevTesselations = controls.tesselations;
       icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
       icosphere.create();
     }
-    renderer.render(camera, lambert, [
-      icosphere,
-      // square,
+    if (!vec3.equals(controls.color, prevColor)) {
+      prevColor = controls.color;
+      const newColor = vec4.fromValues(...prevColor, 256);
+      vec4.scale(newColor, newColor, 1 / 256);
+      noise.setGeometryColor(newColor);
+    }
+    const renderedObj = shape ? cube : icosphere;
+    renderer.render(camera, noise, [
+      //icosphere,
+      renderedObj,
     ]);
     stats.end();
 
     // Tell the browser to call `tick` again whenever it renders a new frame
+    time++;
     requestAnimationFrame(tick);
   }
 

src/rendering/gl/OpenGLRenderer.ts

@@ -25,13 +25,11 @@ 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);
 
     mat4.identity(model);
     mat4.multiply(viewProj, camera.projectionMatrix, camera.viewMatrix);
     prog.setModelMatrix(model);
     prog.setViewProjMatrix(viewProj);
-    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();
@@ -48,6 +49,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 +87,13 @@ class ShaderProgram {
     }
   }
 
+  setTime(time: GLfloat) {
+    this.use()
+    if (this.unifTime !== -1) {
+      gl.uniform1f(this.unifTime, time);
+    }
+  }
+
   draw(d: Drawable) {
     this.use();
 

src/shaders/lambert-frag.glsl

@@ -32,7 +32,7 @@ void main()
         // Avoid negative lighting values
         // diffuseTerm = clamp(diffuseTerm, 0, 1);
 
-        float ambientTerm = 0.2;
+        float ambientTerm = 0.99;
 
         float lightIntensity = diffuseTerm + ambientTerm;   //Add a small float value to the color multiplier
                                                             //to simulate ambient lighting. This ensures that faces that are not

src/shaders/lambert-vert.glsl

@@ -28,6 +28,7 @@ in vec4 vs_Col;             // The array of vertex colors passed to the shader.
 out vec4 fs_Nor;            // The array of normals that has been transformed by u_ModelInvTr. This is implicitly passed to the fragment shader.
 out vec4 fs_LightVec;       // The direction in which our virtual light lies, relative to each vertex. This is implicitly passed to the fragment shader.
 out vec4 fs_Col;            // The color of each vertex. This is implicitly passed to the fragment shader.
+out vec4 fs_Pos;
 
 const vec4 lightPos = vec4(5, 5, 3, 1); //The position of our virtual light, which is used to compute the shading of
                                         //the geometry in the fragment shader.
@@ -48,6 +49,8 @@ void main()
 
     fs_LightVec = lightPos - modelposition;  // Compute the direction in which the light source lies
 
+    fs_Pos = vs_Pos;
+
     gl_Position = u_ViewProj * modelposition;// gl_Position is a built-in variable of OpenGL which is
                                              // used to render the final positions of the geometry's vertices
 }