San Jewell submission

README.md

@@ -75,3 +75,4 @@ To check if everything is on the right track:
   - Interfaces https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
   - Types https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Types
   - Constants https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants
+- As recommended, code from https://adrianb.io/2014/08/09/perlinnoise.html was translated to glsl    

src/geometry/Cube.ts

@@ -0,0 +1,133 @@
+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() {
+
+      let indices: Array<number>;
+      indices = [];
+
+      for(let i of [0, 1, 2, 3, 4, 5]){
+          let si = i*4
+          indices = indices.concat([si, si+1, si+2]);
+          indices = indices.concat([si, si+2, si+3]);
+      }
+
+      console.log(indices)
+
+  this.indices = new Uint32Array(indices);
+  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([
+      -1, -1, 1, 1,
+      1, -1, 1, 1,
+      1, 1, 1, 1,
+      -1, 1, 1, 1,
+
+      -1, -1, -1, 1,
+      1, -1, -1, 1,
+      1, 1, -1, 1,
+      -1, 1, -1, 1,
+      //
+      -1, -1, -1, 1,
+      -1, -1, 1, 1,
+      -1, 1, 1, 1,
+      -1, 1, -1, 1,
+      //
+      1, -1, 1, 1,
+      1, -1, -1, 1,
+      1, 1, -1, 1,
+      1, 1, 1, 1,
+      //
+      -1, 1, -1, 1,
+      -1, 1, 1, 1,
+      1, 1, 1, 1,
+      1, 1, -1, 1,
+      //
+      1, -1, -1, 1,
+      1, -1, 1, 1,
+      -1, -1, 1, 1,
+      -1, -1, -1, 1,
+
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+      // 0, 0, 0, 0,
+  ]);
+
+
+    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,23 +7,32 @@ 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 defaultColor: Array<number> = [255, 240, 0, 1];
 const controls = {
   tesselations: 5,
-  'Load Scene': loadScene, // A function pointer, essentially
+  'Load Scene': loadScene, // A function pointer, essentially,
+  color1: defaultColor
 };
 
 let icosphere: Icosphere;
 let square: Square;
+let cube: Cube;
 let prevTesselations: number = 5;
+let prevColor: Array<number> = defaultColor;
+
+let time: number = 0.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();
+  //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 +48,7 @@ function main() {
   const gui = new DAT.GUI();
   gui.add(controls, 'tesselations', 0, 8).step(1);
   gui.add(controls, 'Load Scene');
+  gui.addColor(controls, 'color1');
 
   // get canvas and webgl context
   const canvas = <HTMLCanvasElement> document.getElementById('canvas');
@@ -63,22 +73,35 @@ function main() {
     new Shader(gl.VERTEX_SHADER, require('./shaders/lambert-vert.glsl')),
     new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
   ]);
+  lambert.setGeometryColor(vec4.fromValues(defaultColor[0]/255.0, defaultColor[1]/255.0, defaultColor[2]/255.0, defaultColor[3]));
 
   // This function will be called every frame
   function tick() {
+
+
     camera.update();
     stats.begin();
     gl.viewport(0, 0, window.innerWidth, window.innerHeight);
     renderer.clear();
+    if(controls.color1 != prevColor){
+      console.log('changed', controls.color1)
+      prevColor = controls.color1;
+      lambert.setGeometryColor(vec4.fromValues(prevColor[0]/255.0, prevColor[1]/255.0, prevColor[2]/255.0, prevColor[3]));
+    }
+
     if(controls.tesselations != prevTesselations)
     {
       prevTesselations = controls.tesselations;
       icosphere = new Icosphere(vec3.fromValues(0, 0, 0), 1, prevTesselations);
       icosphere.create();
     }
+
+    time += 0.01;
+    lambert.setTime(time);
     renderer.render(camera, lambert, [
-      icosphere,
+      // 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

@@ -25,9 +25,11 @@ class ShaderProgram {
   attrNor: number;
   attrCol: number;
 
+
   unifModel: WebGLUniformLocation;
   unifModelInvTr: WebGLUniformLocation;
   unifViewProj: WebGLUniformLocation;
+  unifTime: WebGLUniformLocation;
   unifColor: WebGLUniformLocation;
 
   constructor(shaders: Array<Shader>) {
@@ -44,6 +46,7 @@ class ShaderProgram {
     this.attrPos = gl.getAttribLocation(this.prog, "vs_Pos");
     this.attrNor = gl.getAttribLocation(this.prog, "vs_Nor");
     this.attrCol = gl.getAttribLocation(this.prog, "vs_Col");
+    this.unifTime = gl.getUniformLocation(this.prog, "u_time");
     this.unifModel      = gl.getUniformLocation(this.prog, "u_Model");
     this.unifModelInvTr = gl.getUniformLocation(this.prog, "u_ModelInvTr");
     this.unifViewProj   = gl.getUniformLocation(this.prog, "u_ViewProj");
@@ -81,10 +84,18 @@ class ShaderProgram {
   setGeometryColor(color: vec4) {
     this.use();
     if (this.unifColor !== -1) {
+      console.log('unifcolor', this.unifColor, color);
       gl.uniform4fv(this.unifColor, color);
     }
   }
 
+  setTime(time: number){
+    this.use();
+    if (this.unifTime !== -1) {
+      gl.uniform1f(this.unifTime, time);
+    }
+  }
+
   draw(d: Drawable) {
     this.use();