Hw 01

src/main.js

@@ -3,6 +3,31 @@ const THREE = require('three'); // older modules are imported like this. You sho
 import Framework from './framework'
 import Noise from './noise'
 import {other} from './noise'
+//import { rotateY } from 'gl-matrix/src/gl-matrix/vec3';
+
+var cloud = {
+  myMaterial: {},
+  parameters: {
+    time: 0.0,
+    cloudNoise_strength: 0.3,
+    cloudNoise_frequency: 2.0,
+    cloud_speed: 1.0,
+  },
+  uniforms: {},
+}
+
+var planet = {
+  myMaterial: {},
+  parameters: {
+    time: 0.0,
+    planetNoise_strength: 0.3,
+    planetNoise_frequency: 2.0,
+    cloud_speed: 1.0,
+  },
+  uniforms: {},
+}
+
+var basePlanet;
 
 // called after the scene loads
 function onLoad(framework) {
@@ -12,45 +37,150 @@ function onLoad(framework) {
   var gui = framework.gui;
   var stats = framework.stats;
 
+
   // LOOK: the line below is synyatic sugar for the code above. Optional, but I sort of recommend it.
   // var {scene, camera, renderer, gui, stats} = framework; 
 
-  // initialize a simple box and material
-  var box = new THREE.BoxGeometry(1, 1, 1);
+  //initialize icosahedron and material
+  var icosahedron = new THREE.IcosahedronGeometry(1, 5);
+
+  cloud.uniforms= {
+    u_time: {
+      type: "f",
+      value : cloud.parameters.time, 
+    },
+    u_strength: {
+      type: "f",
+      value : cloud.parameters.cloudNoise_strength,
+    },
+    u_frequency: {
+      type: "f",
+      value : cloud.parameters.cloudNoise_frequency,
+    },
+    u_speed: {
+      type: "f",
+      value: cloud.parameters.cloud_speed,
+    },
+    image: { // Check the Three.JS documentation for the different allowed types and values
+      type: "t", 
+      value: THREE.ImageUtils.loadTexture('./resource/cloud.jpg'),
+    },
+    alpha: { // Check the Three.JS documentation for the different allowed types and values
+      type: "t", 
+      value: THREE.ImageUtils.loadTexture('./resource/alpha2.jpg'),
+    },
+  },
+
+  cloud.myMaterial = new THREE.ShaderMaterial({
+    uniforms: cloud.uniforms,
+    vertexShader: require('./shaders/cloud-vert.glsl'),
+    fragmentShader: require('./shaders/cloud-frag.glsl')
+  });
+  cloud.myMaterial.transparent = true;
+  var myIcosahedronn = new THREE.Mesh(icosahedron, cloud.myMaterial);
+
+
+  //initialize icosahedron and material
+  var baseSphere = new THREE.IcosahedronGeometry(0.95, 5);
 
-  var adamMaterial = new THREE.ShaderMaterial({
-    uniforms: {
-      image: { // Check the Three.JS documentation for the different allowed types and values
-        type: "t", 
-        value: THREE.ImageUtils.loadTexture('./adam.jpg')
-      }
+  planet.uniforms= {
+    u_time: {
+      type: "f",
+      value : planet.parameters.time, 
     },
-    vertexShader: require('./shaders/adam-vert.glsl'),
-    fragmentShader: require('./shaders/adam-frag.glsl')
+    u_strength: {
+      type: "f",
+      value : planet.parameters.planetNoise_strength,
+    },
+    u_frequency: {
+      type: "f",
+      value : planet.parameters.planetNoise_frequency,
+    },
+    u_speed: {
+      type: "f",
+      value: planet.parameters.speed,
+    },
+    image: { // Check the Three.JS documentation for the different allowed types and values
+      type: "t", 
+      value: THREE.ImageUtils.loadTexture('./resource/earth.jpg'),
+    },
+    alpha: { // Check the Three.JS documentation for the different allowed types and values
+      type: "t", 
+      value: THREE.ImageUtils.loadTexture('./resource/alpha2.jpg'),
+    },
+  },
+
+  planet.myMaterial = new THREE.ShaderMaterial({
+    uniforms: planet.uniforms,
+    vertexShader: require('./shaders/basePlanet-vert.glsl'),
+    fragmentShader: require('./shaders/basePlanet-frag.glsl')
   });
-  var adamCube = new THREE.Mesh(box, adamMaterial);
+  basePlanet = new THREE.Mesh(baseSphere, planet.myMaterial);
+
 
+
   // set camera position
   camera.position.set(1, 1, 2);
   camera.lookAt(new THREE.Vector3(0,0,0));
 
-  scene.add(adamCube);
+  scene.add(myIcosahedronn);
+  scene.add(basePlanet);
 
   // edit params and listen to changes like this
   // more information here: https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
   gui.add(camera, 'fov', 0, 180).onChange(function(newVal) {
     camera.updateProjectionMatrix();
   });
+  gui.add(cloud.parameters, 'cloudNoise_frequency').onChange(function(newVal) {
+    cloud.uniforms.u_frequency= {
+      type: "f",
+      value: cloud.parameters.cloudNoise_frequency,
+    }
+  });
+  gui.add(cloud.parameters, 'cloudNoise_strength').onChange(function(newVal) {
+    cloud.uniforms.u_strength= {
+      type: "f",
+      value: cloud.parameters.cloudNoise_strength,
+    }
+  });
+
+  gui.add(planet.parameters, 'planetNoise_frequency').onChange(function(newVal) {
+    planet.uniforms.u_frequency= {
+      type: "f",
+      value: planet.parameters.planetNoise_frequency,
+    }
+  });
+  gui.add(planet.parameters, 'planetNoise_strength').onChange(function(newVal) {
+    planet.uniforms.u_strength= {
+      type: "f",
+      value: planet.parameters.planetNoise_strength,
+    }
+  });
+
+  gui.add(cloud.parameters, 'cloud_speed').onChange(function(newVal) {
+    cloud.uniforms.u_speed= {
+      type: "f",
+      value: cloud.parameters.cloud_speed,
+    }
+  });
 }
 
 // called on frame updates
 function onUpdate(framework) {
-  // console.log(`the time is ${new Date()}`);
+
+  cloud.parameters.time++;
+
+  cloud.uniforms.u_time= {
+      type: "f",
+      value : cloud.parameters.time, 
+  }
+
 }
 
 // when the scene is done initializing, it will call onLoad, then on frame updates, call onUpdate
 Framework.init(onLoad, onUpdate);
 
+
 // console.log('hello world');
 
 // console.log(Noise.generateNoise());

src/noise.js

@@ -1,3 +1,5 @@
+import { vec3 } from "gl-matrix";
+
 
 
 function generateNoise() {
@@ -8,6 +10,7 @@ function whatever() {
   console.log('hi');
 }
 
+
 export default {
   generateNoise: generateNoise,
   whatever: whatever

src/rendering/gl/Drawable.ts

@@ -0,0 +1,67 @@
+import {gl} from '../../globals';
+
+abstract class Drawable {
+  count: number = 0;
+
+  bufIdx: WebGLBuffer;
+  bufPos: WebGLBuffer;
+  bufNor: WebGLBuffer;
+
+  idxBound: boolean = false;
+  posBound: boolean = false;
+  norBound: boolean = false;
+
+  abstract create() : void;
+
+  destory() {
+    gl.deleteBuffer(this.bufIdx);
+    gl.deleteBuffer(this.bufPos);
+    gl.deleteBuffer(this.bufNor);
+  }
+
+  generateIdx() {
+    this.idxBound = true;
+    this.bufIdx = gl.createBuffer();
+  }
+
+  generatePos() {
+    this.posBound = true;
+    this.bufPos = gl.createBuffer();
+  }
+
+  generateNor() {
+    this.norBound = true;
+    this.bufNor = gl.createBuffer();
+  }
+
+  bindIdx(): boolean {
+    if (this.idxBound) {
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.bufIdx);
+    }
+    return this.idxBound;
+  }
+
+  bindPos(): boolean {
+    if (this.posBound) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.bufPos);
+    }
+    return this.posBound;
+  }
+
+  bindNor(): boolean {
+    if (this.norBound) {
+      gl.bindBuffer(gl.ARRAY_BUFFER, this.bufNor);
+    }
+    return this.norBound;
+  }
+
+  elemCount(): number {
+    return this.count;
+  }
+
+  drawMode(): GLenum {
+    return gl.TRIANGLES;
+  }
+};
+
+export default Drawable;

src/rendering/gl/OpenGLRenderer.ts

@@ -0,0 +1,46 @@
+import {mat4, vec4} from 'gl-matrix';
+import Drawable from './Drawable';
+import Camera from '../../Camera';
+import {gl} from '../../globals';
+import ShaderProgram, { Shader } from './ShaderProgram';
+
+// In this file, `gl` is accessible because it is imported above
+class OpenGLRenderer {
+  renderCol= vec4.fromValues(1, 0, 0, 1);
+  time = 0.0;
+  shader : ShaderProgram
+
+  constructor(public canvas: HTMLCanvasElement) {
+  }
+
+  setClearColor(r: number, g: number, b: number, a: number) {
+    gl.clearColor(r, g, b, a);
+  }
+
+  setSize(width: number, height: number) {
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  clear() {
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  }
+
+  render(camera: Camera, drawables: Array<Drawable>) {
+    let model = mat4.create();
+    let viewProj = mat4.create();
+
+    mat4.identity(model);
+    mat4.multiply(viewProj, camera.projectionMatrix, camera.viewMatrix);
+    this.shader.setModelMatrix(model);
+    this.shader.setViewProjMatrix(viewProj);
+    this.shader.setGeometryColor(this.renderCol);
+    this.shader.setTime(this.time);
+
+    for (let drawable of drawables) {
+      this.shader.draw(drawable);
+    }
+  }
+};
+
+export default OpenGLRenderer;