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 mat4 MVP;
uniform float uTime; uniform float uTime;
uniform sampler2D displace_map;
void main(void) { 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> </script>
</header> </header>

22
src/main.ts
View File

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