Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Capture.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
</p>
<p align="center">(source: Ken Perlin)</p>

## Demo
![screenshot](capture2.JPG)
I created five biomes, including ocean, plain, mountain, alpine, cities. The ocean is animated fbm, so it simulates waves. Cities are generated with perlin noise, and only light up in the night. Biomes are generated with fbm and elevated by the noise. For tool box functions, I used bias and gain, sin, mix, and triangle wave to adjust the planet.
Users can control the ambient light, the deformation level, and which reflection model to render the planet.
Link: https://effieyanfei.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
Expand Down Expand Up @@ -75,3 +82,5 @@ 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


Binary file added capture2.JPG
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/.vs/ProjectSettings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"CurrentProjectSetting": null
}
6 changes: 6 additions & 0 deletions src/.vs/VSWorkspaceState.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"ExpandedNodes": [
""
],
"PreviewInSolutionExplorer": false
}
Binary file added src/.vs/slnx.sqlite
Binary file not shown.
Binary file added src/.vs/src/v15/.suo
Binary file not shown.
103 changes: 103 additions & 0 deletions src/geometry/Cube.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
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, 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,
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
]);
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
]);

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;
83 changes: 77 additions & 6 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -13,17 +15,49 @@ import ShaderProgram, {Shader} from './rendering/gl/ShaderProgram';
const controls = {
tesselations: 5,
'Load Scene': loadScene, // A function pointer, essentially
'ambient light': 2,
'deform': 0,
'lambert': lambert,
'gradient': gradient,
'lit': lit,
};



var palette = {
color1: [0, 128, 255], // RGB array
};

let icosphere: Icosphere;
let square: Square;
let cube: Cube;
let prevTesselations: number = 5;
let r: number = 0;
let g: number = 0;
let b: number = 0;
let t: number = 0;
let increase: boolean = true;
let reflectionModel: number = 0;

function lambert() {
reflectionModel = 0;
}

function gradient() {
reflectionModel = 1;
}

function lit() {
reflectionModel = 2;
}

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();
//square = new Square(vec3.fromValues(0, 0, 0));
//square.create();
//cube = new Cube(vec3.fromValues(0, 0, 0));
//cube.create();
}

function main() {
Expand All @@ -38,7 +72,17 @@ function main() {
// Add controls to the gui
const gui = new DAT.GUI();
gui.add(controls, 'tesselations', 0, 8).step(1);
gui.add(controls, 'lambert');
gui.add(controls, 'gradient');
gui.add(controls, 'lit');
gui.add(controls, 'Load Scene');
gui.add(controls, 'ambient light', 0, 10).step(1);
gui.add(controls, 'deform', 0, 10).step(1);

// Add color controller
//var colorController = gui.addColor(palette, 'color1');
//colorChange();
//colorController.onFinishChange(colorChange);

// get canvas and webgl context
const canvas = <HTMLCanvasElement> document.getElementById('canvas');
Expand All @@ -64,26 +108,53 @@ function main() {
new Shader(gl.FRAGMENT_SHADER, require('./shaders/lambert-frag.glsl')),
]);

const custom = new ShaderProgram([
new Shader(gl.VERTEX_SHADER, require('./shaders/custom-vert.glsl')),
new Shader(gl.FRAGMENT_SHADER, require('./shaders/custom-frag.glsl')),
]);

const planetLambert = new ShaderProgram([
new Shader(gl.VERTEX_SHADER, require('./shaders/planet-vert.glsl')),
new Shader(gl.FRAGMENT_SHADER, require('./shaders/planet-frag.glsl')),
]);



/*function colorChange() {
var newColor = colorController.getValue();
r = newColor[0] / 255;
g = newColor[1] / 255;
b = newColor[2] / 255;
}
*/

// This function will be called every frame
function tick() {
camera.update();
stats.begin();
gl.viewport(0, 0, window.innerWidth, window.innerHeight);
renderer.clear();
//var color = vec4.fromValues(r, g, b, 1);
var color = vec4.fromValues(116 / 255, 184 / 255, 121 / 255, 1);
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,
]);
renderer.render(camera, planetLambert, [
icosphere,
//cube,
//square,
], color, t, controls['ambient light'], reflectionModel, controls.deform);

//change t very tick
t = t + 1;
stats.end();

// Tell the browser to call `tick` again whenever it renders a new frame
requestAnimationFrame(tick);

}

window.addEventListener('resize', function() {
Expand Down
7 changes: 5 additions & 2 deletions src/rendering/gl/OpenGLRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,19 @@ class OpenGLRenderer {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>) {
render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>, color: vec4, time: number, ambient: number, mode: number, deform: number) {
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);
prog.setTime(time);
prog.setAmbient(ambient);
prog.setDeform(deform);
prog.setMode(mode);

for (let drawable of drawables) {
prog.draw(drawable);
Expand Down
40 changes: 39 additions & 1 deletion src/rendering/gl/ShaderProgram.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ class ShaderProgram {
unifModelInvTr: WebGLUniformLocation;
unifViewProj: WebGLUniformLocation;
unifColor: WebGLUniformLocation;
unifTime: WebGLUniformLocation;
unifMode: WebGLUniformLocation;
unifAmbient: WebGLUniformLocation;
unifDeform: WebGLUniformLocation;


constructor(shaders: Array<Shader>) {
this.prog = gl.createProgram();
Expand All @@ -44,10 +49,15 @@ 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.unifModel = gl.getUniformLocation(this.prog, "u_Model");
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.unifColor = gl.getUniformLocation(this.prog, "u_Color");
this.unifTime = gl.getUniformLocation(this.prog, "u_Time");
this.unifAmbient = gl.getUniformLocation(this.prog, "u_Ambient");
this.unifDeform = gl.getUniformLocation(this.prog, "u_Deform");
this.unifMode = gl.getUniformLocation(this.prog, "u_Mode");
}

use() {
Expand Down Expand Up @@ -85,6 +95,34 @@ class ShaderProgram {
}
}

setTime(time: number) {
this.use();
if (this.unifTime !== -1) {
gl.uniform1i(this.unifTime, time);
}
}

setMode(mode: number) {
this.use();
if (this.unifMode !== -1) {
gl.uniform1i(this.unifMode, mode);
}
}

setAmbient(ambient: number) {
this.use();
if (this.unifAmbient !== -1) {
gl.uniform1i(this.unifAmbient, ambient);
}
}

setDeform(deform: number) {
this.use();
if (this.unifDeform !== -1) {
gl.uniform1i(this.unifDeform, deform);
}
}

draw(d: Drawable) {
this.use();

Expand Down
Loading