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

waving grid by perlin noise

Browse Source
This commit is contained in:
Julian
2020-01-24 21:51:37 +01:00
parent 1e0e6466ee
commit 119dbd2053
2 changed files with 16 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -104,9 +104,12 @@
uniform mat4 MVP;
uniform float uTime;
uniform sampler2D displace_map;
void main(void) {
gl_Position = MVP * vec4(positionAttr.x,positionAttr.y,positionAttr.z + cos(positionAttr.x*8. + uTime * 0.001), 1.0);
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.;
}
</script>
</header>

24
src/main.ts
View File

@@ -40,7 +40,6 @@ function generateGrid(N: number) {
gridVertices.push(y);
gridVertices.push(z);
//Generate Indices
if (i < N && j < N) //Skip edges
{
let row1 = j * (N + 1);
@@ -61,7 +60,7 @@ function generateGrid(N: number) {
}
var gridVAO: WebGLVertexArrayObject | null = null;
function initGridVAO() {
generateGrid(16);
generateGrid(64);
gridVAO = gl.createVertexArray();
gl.bindVertexArray(gridVAO);
@@ -76,6 +75,7 @@ function initGridVAO() {
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(0);
gl.bindVertexArray(null);
}
/** Init Geomtry for an Triangle */
@@ -239,14 +239,13 @@ function drawScene() {
// texture. Second one uses the textur for vertex displacement
// of a grid representing the water surface.
//--- First render pass -> Perlin Noise (it updates the perlin noise texture)
/*{
{
gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
//Clear buffer content
gl.clearColor(0, 1, 0, 1);
gl.clearColor(0.25, .89, 0.32, 1);
gl.clear(gl.COLOR_BUFFER_BIT); //No depth buffer
//draw a fullscreen quad
@@ -265,7 +264,7 @@ function drawScene() {
let uTime = gl.getUniformLocation(<WebGLProgram>perlinNoiseProgram, "uTime");
gl.uniform1f(uTime, timeSpent);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr
}*/
}
//--- Second render pass -> Geomtry with displacement by perlin noise texture ---
{
@@ -274,29 +273,30 @@ function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gl.bindTexture(gl.TEXTURE_2D, textureFBO); //Binds the texture
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.);
// mat4.rotateY(mvp, mvp, timeSpent * 0.001);
//mat4.rotateX(mvp, mvp, 1.5);
let translation = vec3.create();
vec3.set(translation, -0.5, 0.0, -2.0);
mat4.translate(mvp, mvp, 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.uniform1f(uTime_loc, timeSpent);
let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "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);
gl.bindVertexArray(null);
}
requestAnimationFrame(drawScene);
}