diff --git a/index.html b/index.html
index 8710501..e9463e1 100644
--- a/index.html
+++ b/index.html
@@ -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.;
}
diff --git a/src/main.ts b/src/main.ts
index 5e2fd1d..a321e61 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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(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(textureProgram, "MVP");
gl.uniformMatrix4fv(mvp_loc, false, mvp);
let uTime_loc = gl.getUniformLocation(textureProgram, "uTime");
gl.uniform1f(uTime_loc, timeSpent);
+ let displacementMap_loc = gl.getUniformLocation(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);
}