Gulum/WebOcean
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

brute force specular reflection

Browse Source
This commit is contained in:
Julian
2020-01-28 17:08:41 +01:00
parent bc3c9bc140
commit 34d6863a4b
2 changed files with 104 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@@ -98,6 +98,7 @@
varying vec3 v_fragPos;
varying vec2 v_uv;
uniform vec3 eyePos;
uniform sampler2D displace_map;
vec3 lightPos = vec3(0.,0.,10.); //should be an directional light
@@ -111,10 +112,10 @@
//calculate normal
float gridPointDelta = (1. / 256.);
vec3 currPoint = vec3(0.0,0.0,displace.x);
vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x);
vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x);
vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x);
vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x);
vec3 right = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x + gridPointDelta,v_uv.y)).x*0.1);
vec3 left = vec3(-gridPointDelta,0.0,texture2D(displace_map,vec2(v_uv.x - gridPointDelta,v_uv.y)).x*0.1);
vec3 up = vec3(0.,gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y + gridPointDelta)).x*0.1);
vec3 down = vec3(0.,-gridPointDelta,texture2D(displace_map,vec2(v_uv.x ,v_uv.y - gridPointDelta)).x*0.1);
//vec3 tangent = normalize(right - currPoint);
//vec3 biTangent = normalize(up - currPoint);
@@ -124,26 +125,28 @@
vec3 normal = cross(tangent, biTangent);
vec3 norm = normalize(normal);
vec3 lightDir = normalize(lightPos- v_fragPos);
norm.y *= -1.; //Normal y direction is somehow inverted
vec3 lightDir = normalize(lightPos - v_fragPos);
float diff = max(dot(norm,lightDir),0.0);
vec3 diffuse = diff * lightColor;
vec3 result = (diffuse) * vec3(0.0,0.0,1.0);
//Old lightning
//vec3 toCameraVector = v_fragPos - vec3(0.,0.,0.);
//vec3 reflec = normalize(reflect(toCameraVector, normal));
vec3 toCameraVector = normalize(v_fragPos - eyePos);
vec3 reflec = normalize(reflect(toCameraVector, norm));
//Schlicks approximation to Fresnelfactor
//float n1 = 1., n2 = 1.33333;
//float R0 = pow((n1-n2)/(n1+n2), 2.);
//float fresnel = R0 + (1. - R0)*pow((1.-dot(normal,reflec)),5.) ;
float n1 = 1., n2 = 1.33333;
float R0 = pow((n1-n2)/(n1+n2), 2.);
float fresnel = R0 + (1. - R0)*pow((1.-dot(norm,reflec)),5.) ;
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
//vec3 lightColor = vec3(1.,1.,1.);
//vec3 waterColor = vec3(34./255.,154./255.,211./255.);
vec3 oceanColor = vec3(0,.04,.04) * 10.; // under-sea colour
vec3 skyColor = vec3(1.,1.,1.);
//gl_FragColor = vec4(mix(waterColor, vec3(1.,1.,1.),fresnel).xyz, 1.);
gl_FragColor = vec4(result,1.0);
gl_FragColor = vec4(mix(oceanColor,skyColor,fresnel).xyz, 1.);
//gl_FragColor = vec4(result,1.0);
//gl_FragColor = vec4(normal,1.0);
//gl_FragColor = vec4(displace.x,displace.x,displace.x,1.0); //Show Perlin Noise texture deactivate vertex distrotion before
}
@@ -151,9 +154,9 @@
<script id="default-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr;
uniform mat4 view;
uniform mat4 model;
uniform mat4 projection;
uniform float uTime;
uniform sampler2D displace_map;
varying vec2 v_uv;
@@ -162,7 +165,7 @@
void main(void) {
vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
gl_Position = projection * worldPos;
gl_Position = projection * view * worldPos;
v_fragPos = worldPos.xyz;
v_uv = positionAttr.xy;
}

97
src/main.ts
View File

@@ -1,9 +1,76 @@
import { vec3, mat4 } from 'gl-matrix'
import { vec3, mat4, vec4 } from 'gl-matrix'
var gl: WebGL2RenderingContext;
var viewportWidth = 0;
var viewportHeight = 0;
/** A camera that always looks at the world origin. Can have an offset and be rotated. */
class Camera {
pos: vec3;
target: vec3;
up: vec3;
xRot: number;
yRot: number;
offset: number;
constructor() {
this.pos = vec3.create();
vec3.set(this.pos, 0.0, 0.0, 0.0);
this.target = vec3.create();
vec3.set(this.target, 0.0, 0.0, 0.0);
this.up = vec3.create();
vec3.set(this.up, 0.0, 1.0, 0.0);
this.xRot = 0.0;
this.yRot = 0.0;
this.offset = 0.0;
}
setRotationX(rotX: number): void {
this.xRot = rotX;
this.updatePos();
}
setRotationY(rotY: number): void {
this.yRot = rotY;
this.updatePos();
}
/** Sets the offset to world origin. */
setOffset(off: number): void {
this.offset = off;
this.updatePos();
}
/** Reculcates the position according to xy-rotation and offset. */
private updatePos(): void {
var transformation: mat4 = mat4.create();
mat4.identity(transformation);
//2. xy-Rotation
mat4.rotateX(transformation, transformation, this.xRot);
mat4.rotateY(transformation, transformation, this.yRot);
//1. Translation
var translation = vec3.create();
vec3.set(translation, 0.0, 0.0, this.offset);
mat4.translate(transformation, transformation, translation);
var temp: vec4 = vec4.create();
vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
vec4.transformMat4(temp, temp, transformation);
vec3.set(this.pos, temp[0], temp[1], temp[2]);
}
getViewMatrix(): mat4 {
var ret: mat4;
ret = mat4.create();
mat4.lookAt(ret, this.pos, this.target, this.up);
return ret;
}
}
/** Init OpenGL and gets the viewport/canvas sizes */
function initGL(canvas: HTMLCanvasElement) {
var gltemp;
@@ -247,7 +314,8 @@ var fps = 0;
/** Input states*/
var mouseXVel = 0;
var mouseYVel = 0;
/** Object state*/
/** Objects and states*/
var camera: Camera;
var curRotX = 0;
var curRotY = 0;
function drawScene() {
@@ -304,29 +372,33 @@ function drawScene() {
var projection = mat4.create();
mat4.identity(projection);
mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.);
mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
camera.setOffset(15.0);
camera.setRotationX((curRotX += mouseYVel * 0.001));
camera.setRotationY((curRotY += mouseXVel * 0.001));
var view = camera.getViewMatrix();
var model = mat4.create();
mat4.identity(model);
let translation = vec3.create();
vec3.set(translation, .0, .0, -15.);
mat4.translate(model, model, translation); //3. Then translate it back so that we can see something
mat4.rotateX(model, model, (curRotY += mouseYVel * 0.001)); //2.2 Then rotate it around the origin according to mouse input.
mat4.rotateY(model, model, (curRotX += mouseXVel * 0.001)); //2.1 Then rotate it around the origin according to mouse input.
let xyScaling = vec3.create();
vec3.set(xyScaling, 10., 10., 1.0);
mat4.scale(model, model, xyScaling); //Scale the surface in xy by factor 10
mat4.scale(model, model, xyScaling); //2. Then scale the surface xy by factor 10
let translationCentering = vec3.create();
vec3.set(translationCentering, -0.5, -0.5, 0.0);
mat4.translate(model, model, translationCentering); //1. First Center the Surface in the origin.
gl.useProgram(defaultProgram);
let view_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "view");
gl.uniformMatrix4fv(view_loc, false, view);
let model_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "model");
gl.uniformMatrix4fv(model_loc, false, model);
let projection_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "projection");
gl.uniformMatrix4fv(projection_loc, false, projection);
let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
gl.uniform1f(uTime_loc, timeSpent);
let eye_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "eyePos");
gl.uniform3fv(eye_loc, camera.pos);
//let uTime_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "uTime");
//gl.uniform1f(uTime_loc, timeSpent);
let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
gl.bindVertexArray(gridVAO);
@@ -376,6 +448,7 @@ function main() {
initFBO();
initGridVAO();
camera = new Camera();
//Check if any errors apeared during init.
if (gl.getError() != gl.NO_ERROR) {
console.log("OpenGL Error!: ");