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

add normal calculation to vertex shader

Browse Source
This commit is contained in:
Julian
2020-01-25 19:39:07 +01:00
parent 119dbd2053
commit 4bb5a4e162
2 changed files with 132 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -78,10 +78,10 @@
}
void main(void) {
float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.0001,uTime*0.00005),8,2.0); //Should be scaled along arbitary axis
float n = octavedPerlinNoise(vec3(gl_FragCoord.x*0.001,gl_FragCoord.y*0.007+uTime*0.00005,uTime*0.00005),8,2.0); //Should be scaled along arbitary axis
//float n = noise(vec3(gl_FragCoord.xy*0.01,uTime));
//vec3 cloudEffect = clouds(gl_FragCoord.x*0.005, gl_FragCoord.y*0.005);
vec3 color = n + (vec3(1., 1., 1.)/2.);
vec3 color = n + (vec3(1., 1., 1.)/2.); //Scales the height off the waves (/8.0)
gl_FragColor = vec4(color,1.0);
}
</script>
@@ -95,21 +95,79 @@
<script id="default-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 v_normal;
varying vec3 v_fragPos;
vec3 lightPos = vec3(0.,-1.,10.);
vec3 lightColor = vec3(1.0,1.0,1.0);
void main(void) {
gl_FragColor = vec4(0.0,0.0,1.0,1.0);
//gl_FragColor = vec4(0.0,0.0,1.0-v_height,1.0);
vec3 norm = normalize(v_normal);
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);
//gl_FragColor = vec4(v_normal,1.0);
gl_FragColor = vec4(result,1.0);
}
</script>
<script id="default-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr;
uniform mat4 MVP;
uniform mat4 model;
uniform mat4 projection;
uniform float uTime;
uniform sampler2D displace_map;
//Normal vectors are compute as: https://www.scratchapixel.com/lessons/procedural-generation-virtual-worlds/perlin-noise-part-2/perlin-noise-computing-derivatives
//using forward difference
varying vec3 v_normal;
varying vec3 v_fragPos;
void main(void) {
vec4 displace = texture2D(displace_map, vec2(positionAttr.x,positionAttr.y));
gl_Position = MVP * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
gl_PointSize = 10.;
vec4 worldPos = model * vec4(positionAttr.x,positionAttr.y,positionAttr.z + displace.x, 1.0);
gl_Position = projection * worldPos;
v_fragPos = worldPos.xyz;
//calculate normal
float gridPointDelta = 1. / (128. + 1.);
vec3 currPoint = vec3(0.0,0.0,displace.x);
vec3 nextPoint = vec3(gridPointDelta,0.0,texture2D(displace_map,vec2(positionAttr.x + gridPointDelta,positionAttr.y)).x);
vec3 biNormal = normalize(nextPoint - currPoint);
vec3 upperPoint = vec3(0.0,gridPointDelta,texture2D(displace_map,vec2(positionAttr.x,positionAttr.y+gridPointDelta)).x);
vec3 biTangent = normalize(upperPoint - currPoint);
//v_normal = binormDelta;
v_normal = cross(biNormal, biTangent);
}
</script>
<script id="texture-fs" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_uv;
void main(void) {
gl_FragColor = texture2D(u_texture, v_uv);
}
</script>
<script id="texture-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr;
attribute vec2 a_uv;
varying vec2 v_uv;
uniform mat4 u_mvp;
void main(void) {
gl_Position = u_mvp * vec4(positionAttr, 1.0);
v_uv = a_uv;
}
</script>
</header>

90
src/main.ts
View File

@@ -60,7 +60,7 @@ function generateGrid(N: number) {
}
var gridVAO: WebGLVertexArrayObject | null = null;
function initGridVAO() {
generateGrid(64);
generateGrid(128);
gridVAO = gl.createVertexArray();
gl.bindVertexArray(gridVAO);
@@ -132,6 +132,7 @@ function getShader(id: string) {
/** Init all Shaders that are needed */
var perlinNoiseProgram: WebGLProgram | null;
var defaultProgram: WebGLProgram | null;
var textureProgram: WebGLProgram | null;
function initShaders() {
{ //Get perlinNoiseProgram
@@ -155,16 +156,33 @@ function initShaders() {
if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(perlinNoiseProgram);
let positionAttr = gl.getAttribLocation(perlinNoiseProgram, "positionAttr");
gl.enableVertexAttribArray(positionAttr);
}
{ //Get textueShaderProgram
{ //Get defaultShaders
let vertexShader = getShader("default-vs");
let fragmentShader = getShader("default-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
}
defaultProgram = gl.createProgram();
if (defaultProgram == null) {
console.log("Program not created!")
return null
}
gl.attachShader(defaultProgram, vertexShader);
gl.attachShader(defaultProgram, fragmentShader);
gl.linkProgram(defaultProgram);
if (!gl.getProgramParameter(defaultProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
}
{ //Get textureShader
let vertexShader = getShader("texture-vs");
let fragmentShader = getShader("texture-fs");
if (vertexShader == null || fragmentShader == null) {
console.log("Didn't find shader sources!")
return null;
@@ -182,11 +200,6 @@ function initShaders() {
if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(textureProgram);
let positionAttr = gl.getAttribLocation(textureProgram, "positionAttr");
gl.enableVertexAttribArray(positionAttr);
}
}
@@ -245,7 +258,7 @@ function drawScene() {
gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
//Clear buffer content
gl.clearColor(0.25, .89, 0.32, 1);
gl.clearColor(1.0, 1.0, 1.0, 1);
gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
//draw a fullscreen quad
@@ -273,26 +286,55 @@ function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//--- Display perlin noise texture (For Debug)
/*{
//draw a fullscreen quad
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
// There are 7 floating-point values per vertex
let stride = 5 * Float32Array.BYTES_PER_ELEMENT;
// Set up position stream
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1, 2, gl.FLOAT, false, stride, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(1);
gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
var mvp = mat4.create();
gl.useProgram(textureProgram);
let mvp = mat4.create();
mat4.identity(mvp);
mat4.perspective(mvp, 1.5, viewportWidth / viewportHeight, 0.1, 1000.);
let mvp_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "u_mvp");
gl.uniformMatrix4fv(mvp_loc, false, mvp);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}*/
gl.activeTexture(gl.TEXTURE0); //Binds the texture to 0
gl.bindTexture(gl.TEXTURE_2D, textureFBO);
var projection = mat4.create();
mat4.identity(projection);
mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.);
var model = mat4.create();
mat4.identity(model);
let translation = vec3.create();
vec3.set(translation, -0.5, 0.0, -2.0);
mat4.translate(mvp, mvp, translation);
mat4.rotateX(mvp, mvp, 1.5);
vec3.set(translation, -.5, -.5, -2.5);
mat4.translate(model, model, translation);
//mat4.rotateX(mvp, mvp, 1.5);
//mat4.rotateY(mvp, mvp, timeSpent * 0.001);
gl.useProgram(textureProgram);
let mvp_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "MVP");
gl.uniformMatrix4fv(mvp_loc, false, mvp);
let uTime_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "uTime");
gl.useProgram(defaultProgram);
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 displacementMap_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "displace_map");
let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "displace_map");
gl.uniform1i(displacementMap_loc, 0); //Get texture from slot 0
gl.bindVertexArray(gridVAO);
gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);