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

92
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);
gl.useProgram(textureProgram);
let mvp = mat4.create();
mat4.identity(mvp);
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 mvp = mat4.create();
mat4.identity(mvp);
mat4.perspective(mvp, 1.5, viewportWidth / viewportHeight, 0.1, 1000.);
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);