Skip to content

Commit

Permalink
added gui elements and stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@sharond106
sharond106 committed Sep 25, 2021
1 parent 9783aeb commit 8da1fcf
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 97 deletions.
28 changes: 23 additions & 5 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ let icosphere: Icosphere;
let square: Square;
let cube: Cube;
let prevTesselations: number = 8;
let prevColor = [171., 224., 237.];
let time: number = 0;

function loadScene() {
Expand All @@ -42,12 +43,24 @@ 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, 'tesselations', 0, 8).step(1).name('Tesselations');
// gui.add(controls, 'Load Scene');
var color = {
color: [255, 128, 128], // RGB array
color: [171., 224., 237.], // RGB array
};
gui.addColor(color, 'color');
gui.addColor(color, 'color').name('Background Color');
var sea = {
level : 0
};
gui.add(sea, 'level', 0, 5).name('Sea Level');
var terrain = {
mountains : 10
};
gui.add(terrain, 'mountains', 0, 10).name('Mountains');
var fragments = {
level : 5
};
gui.add(fragments, 'level', 0, 8).name('Fragmentation');

// get canvas and webgl context
const canvas = <HTMLCanvasElement> document.getElementById('canvas');
Expand Down Expand Up @@ -91,6 +104,11 @@ function main() {
camera.update();
stats.begin();
gl.viewport(0, 0, window.innerWidth, window.innerHeight);
if(color.color[0] != prevColor[0] || color.color[1] != prevColor[1] || color.color[2] != prevColor[2])
{
prevColor = color.color;
renderer.setClearColor(color.color[0] / 255.0, color.color[1] / 255.0, color.color[2] / 255.0, 1);
}
renderer.clear();
if(controls.tesselations != prevTesselations)
{
Expand All @@ -102,7 +120,7 @@ function main() {
icosphere,
//square,
//cube
], color.color, time);
], color.color, time, sea.level, terrain.mountains, fragments.level);
stats.end();

// Tell the browser to call `tick` again whenever it renders a new frame
Expand Down
7 changes: 6 additions & 1 deletion src/rendering/gl/OpenGLRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ class OpenGLRenderer {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>, color: Array<number>, time: number) {
render(camera: Camera, prog: ShaderProgram, drawables: Array<Drawable>, color: Array<number>,
time: number, sea: number, mtn: number, frag: number) {
let model = mat4.create();
let viewProj = mat4.create();
//let color = vec4.fromValues(1, 0, 0, 1);
Expand All @@ -33,6 +34,10 @@ class OpenGLRenderer {
prog.setViewProjMatrix(viewProj);
prog.setGeometryColor(vec4.fromValues(color[0]/255, color[1]/255, color[2]/255, 1));
prog.setTime(time);
prog.setCamPos(vec4.fromValues(camera.position[0], camera.position[1], camera.position[2], 1.));
prog.setSea(sea);
prog.setMountains(mtn);
prog.setFragments(frag);

for (let drawable of drawables) {
prog.draw(drawable);
Expand Down
36 changes: 36 additions & 0 deletions src/rendering/gl/ShaderProgram.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@ class ShaderProgram {
unifViewProj: WebGLUniformLocation;
unifColor: WebGLUniformLocation;
unifTime: WebGLUniformLocation;
unifCamPos: WebGLUniformLocation;
unifSeaLevel: WebGLUniformLocation;
unifMountains: WebGLUniformLocation;
unifFragments: WebGLUniformLocation;

constructor(shaders: Array<Shader>) {
this.prog = gl.createProgram();
Expand All @@ -50,6 +54,10 @@ class ShaderProgram {
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_CameraPos");
this.unifSeaLevel = gl.getUniformLocation(this.prog, "u_Sea");
this.unifMountains = gl.getUniformLocation(this.prog, "u_Mountains");
this.unifFragments = gl.getUniformLocation(this.prog, "u_Fragments");
}

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

setCamPos(pos: vec4) {
this.use();
if (this.unifCamPos !== -1) {
gl.uniform4fv(this.unifCamPos, pos);
}
}

setSea(sea: number) {
this.use();
if(this.unifSeaLevel != -1) {
gl.uniform1f(this.unifSeaLevel, sea);
}
}

setMountains(mtn: number) {
this.use();
if(this.unifMountains != -1) {
gl.uniform1f(this.unifMountains, mtn);
}
}

setFragments(frag: number) {
this.use();
if(this.unifFragments != -1) {
gl.uniform1f(this.unifFragments, frag);
}
}

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

Expand Down
75 changes: 43 additions & 32 deletions src/shaders/planet-frag.glsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ precision highp float;

uniform highp int u_Time;
uniform vec4 u_Color; // The color with which to render this instance of geometry.
uniform vec4 u_CameraPos;

// These are the interpolated values out of the rasterizer, so you can't know
// their specific values without knowing the vertices that contributed to them
Expand All @@ -22,6 +23,7 @@ in vec4 fs_LightVec;
in vec4 fs_Col;
in float noise;
in float terrain_Type;
in vec4 fs_LightPos;

out vec4 out_Col; // This is the final output color that you will see on your
// screen for the pixel that is currently being processed.
Expand Down Expand Up @@ -107,6 +109,10 @@ float fbm(float x, float y, float z, float octaves) {

void main()
{
vec4 view = normalize(u_CameraPos - fs_Pos);
vec4 H = normalize(view + normalize(fs_LightVec));
vec3 specularIntensity = pow(max(dot(H, normalize(fs_Nor)), 0.), 50.) * vec3(230./255., 233./255., 190./255.);

// Material base color (before shading)
vec4 diffuseColor = u_Color;

Expand All @@ -123,39 +129,44 @@ void main()
vec3 color;
// Compute final shaded color
if (terrain_Type < 0.5) { // ocean color
float f = fbm(fs_Pos.x, fs_Pos.y, fs_Pos.z, 6.);
vec4 pos = fs_Pos;
pos = fs_Pos + f;
f = fbm(pos.x + .008*float(u_Time), pos.y, pos.z, 6.);
vec3 a = vec3(0.040, 0.50, 0.60);
vec3 b = vec3(0.00 ,0.4, 0.3);
vec3 c = vec3(0.00 , .8, .8);
vec3 d = vec3(0.050 ,0.1, 0.08);
color = a + b * cos(6.28 * (f * c + d));
float f = fbm(fs_Pos.x, fs_Pos.y, fs_Pos.z, 6.);
vec4 pos = fs_Pos;
pos = fs_Pos + f;
f = fbm(pos.x + .008*float(u_Time), pos.y, pos.z, 6.);
vec3 a = vec3(0.040, 0.50, 0.60);
vec3 b = vec3(0.00 ,0.4, 0.3);
vec3 c = vec3(0.00 , .8, .8);
vec3 d = vec3(0.050 ,0.1, 0.08);
color = a + b * cos(6.28 * (f * c + d));
specularIntensity = vec3(0.);
} else if (terrain_Type < 1.5) { // mountains
float f = fbm(fs_Pos.x * 2., fs_Pos.y * 2., fs_Pos.z * 2., 16.);
vec3 a = vec3(0.68, .66, .6);
vec3 b = vec3(0.250);
vec3 c = vec3(1.000);
vec3 d = vec3(0);
color = a + b * cos(6.28 * (worley(vec3(f)) * c + d));
} else { // terrace tops
float f = fbm(fs_Pos.x*1.5, fs_Pos.y*1.5, fs_Pos.z*1.5, 16.);
vec3 a = vec3(0.350, 0.658, 0.000);
vec3 b = vec3(.25);
vec3 c = vec3(.9);
vec3 d = vec3(0);
color = a + b * cos(6.28 * (f * c + d));
}
// else { // terrace sides
// float f = fbm(fs_Pos.x*1.5, fs_Pos.y*1.5, fs_Pos.z*1.5, 16.);
// vec3 a = vec3(0.38, .36, .3);
// vec3 b = vec3(0.150);
// vec3 c = vec3(1.000);
// vec3 d = vec3(0);
// color = a + b * cos(6.28 * (f * c + d));
// }
out_Col = vec4(color * lightIntensity, 1.);
float f = fbm(fs_Pos.x * 2., fs_Pos.y * 2., fs_Pos.z * 2., 16.);
vec3 a = vec3(0.68, .66, .6);
vec3 b = vec3(0.250);
vec3 c = vec3(1.000);
vec3 d = vec3(0);
color = a + b * cos(6.28 * (worley(vec3(f)) * c + d));
} else if (terrain_Type < 2.5) { // terrace
float f = fbm(fs_Pos.x*1.5, fs_Pos.y*1.5, fs_Pos.z*1.5, 16.);
vec3 a = vec3(0.40, 0.7, 0.000);
vec3 b = vec3(.25);
vec3 c = vec3(.9);
vec3 d = vec3(0);
color = a + b * cos(6.28 * (f * c + d));
specularIntensity = vec3(0.);
} else if (terrain_Type <= 3.5) { // sand
float f = fbm(fs_Pos.x*2.5, fs_Pos.y*2.5, fs_Pos.z*2.5, 8.);
vec3 a = vec3(.9, .8, .7);
vec3 b = vec3(0.20);
vec3 c = vec3(1.000);
vec3 d = vec3(0);
color = a + b * cos(6.28 * (f * c + d));
} else {
color = vec3(0);
}

out_Col = vec4(color * lightIntensity + specularIntensity, 1.);
// out_Col = vec4(color, 1.);

vec3 height = vec3(noise);
height = (height + vec3(1.)) / 2.;
Expand Down
Loading

0 comments on commit 8da1fcf

Please sign in to comment.