Emma Holthouser Project 0

README.md

@@ -5,6 +5,21 @@
 </p>
 <p align="center">(source: Ken Perlin)</p>
 
+## Process
+--------------------
+In this project I created a cube object and used a mix of fbm and perlin noise to color the cube in a fragment shader and sin functions with Time to modifuly the shape of the cube in a new fragment shader. I also modified the gui by adding a color variable that controls the main color used in the noise function. 
+
+![](images/cube1.png)
+
+![](images/cube2.png)
+
+![](images/cube3.png)
+
+Here is the link to my project! 
+
+https://emmaholthouser16.github.io/hw00-webgl-intro/
+
+
 ## 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,99 @@
+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() {
+
+ //indices for individual triangles
+  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,
+                                   -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,
+                                   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, 0, -1, 0,
+                                   0, 0, -1, 0,
+                                   0, 0, -1, 0,
+                                   0, 0, -1, 0]);
+  this.positions = new Float32Array([-1, -1, 0, 1,
+                                     1, -1, 0, 1,
+                                     1, 1, 0, 1,
+                                     -1, 1, 0, 1,
+                                     -1, -1, -2, 1,  //left side
+                                     -1, 1, -2, 1,
+                                     -1, 1, 0, 1,
+                                     -1, -1, 0, 1,
+                                     -1, 1, -2, 1,  //top side
+                                     1, 1, -2, 1,
+                                     1, 1, 0, 1,
+                                     -1, 1, 0, 1,  //right side
+                                     1, -1, 0, 1,
+                                     1, -1, -2, 1,
+                                     1, 1, -2, 1,
+                                     1, 1, 0, 1,   //bottom side
+                                     -1, -1, -2, 1,
+                                     1, -1, -2, 1,
+                                     1, -1, 0, 1,
+                                     -1, -1, 0, 1, //back side
+                                     1, -1, -2, 1,
+                                     -1, -1, -2, 1,
+                                     -1, 1, -2, 1,
+                                     1, 1, -2, 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,8 +1,10 @@
 import {vec3} from 'gl-matrix';
+import {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,20 +15,39 @@ import ShaderProgram, {Shader} from './rendering/gl/ShaderProgram';
 const controls = {
   tesselations: 5,
   'Load Scene': loadScene, // A function pointer, essentially
+  colorR: 1,
+  colorG: 0,
+  colorB: 0,
+  color3: [0, 128, 255, 1],
+  moonSize: .2,
+  lightColor: [255, 255, 255, 1],
+  shadowColor:  [255, 255, 255, 1],
 };
 
 let icosphere: Icosphere;
+let moon: Icosphere;
 let square: Square;
-let prevTesselations: number = 5;
-
+let cube: Cube;
+let prevTesselations: number = 6;
+let iTime: number = 0.0;
+let prevMoon: number = 0.2;
+//let lightColo
 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();
+  moon = new Icosphere(vec3.fromValues(3.5, 0, 0), controls.moonSize, 7.0);
+  moon.create();
+
+
 }
 
 function main() {
+
+  //this.iTime = 0.0;
   // Initial display for framerate
   const stats = Stats();
   stats.setMode(0);
@@ -39,6 +60,10 @@ function main() {
   const gui = new DAT.GUI();
   gui.add(controls, 'tesselations', 0, 8).step(1);
   gui.add(controls, 'Load Scene');
+  gui.addColor(controls, "color3");
+  gui.add(controls, 'moonSize');
+  gui.addColor(controls, "lightColor")
+  gui.addColor(controls, "shadowColor")
 
   // get canvas and webgl context
   const canvas = <HTMLCanvasElement> document.getElementById('canvas');
@@ -64,8 +89,25 @@ function main() {
     new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
   ]);
 
+  const cool = new ShaderProgram([
+    //new Shader(gl.VERTEX_SHADER, require('./shaders/cool-vert.glsl')),
+   // new Shader(gl.FRAGMENT_SHADER, require('./shaders/cool-frag.glsl')),
+   new Shader(gl.VERTEX_SHADER, require('./shaders/cool-vert.glsl')),
+    new Shader(gl.FRAGMENT_SHADER, require('./shaders/cool-frag.glsl')),
+  ]);
+
+  const planet = new ShaderProgram([
+   new Shader(gl.VERTEX_SHADER, require('./shaders/planet-vert.glsl')),
+    new Shader(gl.FRAGMENT_SHADER, require('./shaders/cool-frag.glsl')),
+  ]);
+
+  const moonShader = new ShaderProgram([
+    new Shader(gl.VERTEX_SHADER, require('./shaders/moon-vert.glsl')),
+    new Shader(gl.FRAGMENT_SHADER, require('./shaders/moon-frag.glsl')),
+  ])
   // This function will be called every frame
   function tick() {
+    iTime += 1;
     camera.update();
     stats.begin();
     gl.viewport(0, 0, window.innerWidth, window.innerHeight);
@@ -76,9 +118,23 @@ function main() {
       icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
       icosphere.create();
     }
-    renderer.render(camera, lambert, [
+    if(controls.moonSize != prevMoon)
+    {
+      prevMoon = controls.moonSize;
+      moon = new Icosphere(vec3.fromValues(3.5, 0, 0), controls.moonSize, 7.0);
+      moon.create();
+
+    }
+    let R = controls.colorB;
+    let color = vec4.fromValues((controls.color3[0] / 255), (controls.color3[1] / 255), (controls.color3[2] / 255), 1);
+    let light = vec4.fromValues((controls.lightColor[0] / 255), (controls.lightColor[1] / 255), (controls.lightColor[2] / 255), 1);
+    let shadow = vec4.fromValues((controls.shadowColor[0] / 255), (controls.shadowColor[1] / 255), (controls.shadowColor[2] / 255), 1);
+    renderer.render(iTime, color, camera, planet, light, shadow,[
       icosphere,
-      // square,
+
+    ]);
+    renderer.render(iTime, color, camera, moonShader, light, shadow,[
+      moon,
     ]);
     stats.end();
 

src/rendering/gl/OpenGLRenderer.ts

@@ -5,8 +5,11 @@ import {gl} from '../../globals';
 import ShaderProgram from './ShaderProgram';
 
 // In this file, `gl` is accessible because it is imported above
+
 class OpenGLRenderer {
+  iTime: number;
   constructor(public canvas: HTMLCanvasElement) {
+    this.iTime = 0;
   }
 
   setClearColor(r: number, g: number, b: number, a: number) {
@@ -22,17 +25,19 @@ class OpenGLRenderer {
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   }
 
-  render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>) {
+  render(newTime: number, setColor: vec4, camera: Camera, prog: ShaderProgram, lightCol: vec4, shadowCol: vec4, drawables: Array<Drawable>) {
     let model = mat4.create();
     let viewProj = mat4.create();
-    let color = vec4.fromValues(1, 0, 0, 1);
-
+    let color = vec4.fromValues(1, 1, 0, 1);
     mat4.identity(model);
     mat4.multiply(viewProj, camera.projectionMatrix, camera.viewMatrix);
     prog.setModelMatrix(model);
     prog.setViewProjMatrix(viewProj);
-    prog.setGeometryColor(color);
-
+    prog.setGeometryColor(setColor);
+    prog.setTime(newTime);
+    prog.setLightCol(lightCol);
+    prog.setShadowCol(shadowCol);
+    prog.setCamPos(camera.controls.eye);
     for (let drawable of drawables) {
       prog.draw(drawable);
     }

src/rendering/gl/ShaderProgram.ts

@@ -1,4 +1,4 @@
-import {vec4, mat4} from 'gl-matrix';
+import {vec4, mat4, vec3} from 'gl-matrix';
 import Drawable from './Drawable';
 import {gl} from '../../globals';
 
@@ -29,6 +29,10 @@ class ShaderProgram {
   unifModelInvTr: WebGLUniformLocation;
   unifViewProj: WebGLUniformLocation;
   unifColor: WebGLUniformLocation;
+  unifLight: WebGLUniformLocation;
+  unifShadow: WebGLUniformLocation;
+  unifTime: WebGLUniformLocation;
+  unifCamPos: WebGLUniformLocation;
 
   constructor(shaders: Array<Shader>) {
     this.prog = gl.createProgram();
@@ -48,6 +52,10 @@ 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");
+    this.unifCamPos = gl.getUniformLocation(this.prog, "u_CamPos");
+    this.unifLight = gl.getUniformLocation(this.prog, "u_Light");
+    this.unifShadow = gl.getUniformLocation(this.prog, "u_Shadow");
   }
 
   use() {
@@ -85,6 +93,39 @@ class ShaderProgram {
     }
   }
 
+  setTime(t: number) {
+    this.use;
+    if(this.unifTime != -1)
+    {
+        gl.uniform1f(this.unifTime, t);
+    }
+  }
+
+  setCamPos(pos: vec3)
+  {
+    this.use;
+    if(this.unifCamPos != -1)
+    {
+      gl.uniform3fv(this.unifCamPos, pos);
+    }
+  }
+
+  setLightCol(col: vec4)
+  {
+    this.use();
+    if (this.unifColor !== -1) {
+      gl.uniform4fv(this.unifLight, col);
+    }
+  }
+
+  setShadowCol(col: vec4)
+  {
+    this.use();
+    if (this.unifColor !== -1) {
+      gl.uniform4fv(this.unifShadow, col);
+    }
+  }
+
   draw(d: Drawable) {
     this.use();