From 5a24ae7216c997b59f31d3d58643292a370d41e9 Mon Sep 17 00:00:00 2001 From: Julian Date: Wed, 22 Jan 2020 02:20:25 +0100 Subject: [PATCH] render fake perlin noise waves --- index.html | 144 +++++++++++++++++++++++++++++++++------------------- src/main.ts | 20 +++++--- 2 files changed, 103 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index 40c34c2..8f14549 100644 --- a/index.html +++ b/index.html @@ -1,66 +1,104 @@ -
- Web Ocean - - - + + -
- - - - + + + + + + + + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index eb99f7a..1c16b10 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,8 +2,6 @@ var gl: WebGLRenderingContext; var viewportWidth = 0; var viewportHeight = 0; -main(); - function initGL(canvas: HTMLCanvasElement) { var gltemp; try { @@ -27,9 +25,9 @@ function initGL(canvas: HTMLCanvasElement) { function initGeometry() { let VBO = gl.createBuffer(); - let vertexData = [-0.5, -0.5, 0.0, - 0.5, -0.5, 0.0, - 0.0, 0.5, 0.0]; + let vertexData = [-1.0, -1.0, 0.0, + 1.0, -1.0, 0.0, + 0.0, 1.0, 0.0]; gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); @@ -99,20 +97,24 @@ function initShaders() { return program; } +var timeSpent = 0.0; function drawScene(buffer: WebGLBuffer, program: WebGLProgram) { + timeSpent += 1.0 / 60.0; gl.viewport(0, 0, viewportWidth, viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // There are 7 floating-point values per vertex - var stride = 3 * Float32Array.BYTES_PER_ELEMENT; + let stride = 3 * Float32Array.BYTES_PER_ELEMENT; // Set up position stream gl.vertexAttribPointer(0, 3, gl.FLOAT, false, stride, 0); gl.enableVertexAttribArray(0); gl.useProgram(program); + let uTime = gl.getUniformLocation(program, "uTime"); + gl.uniform1f(uTime, timeSpent); gl.drawArrays(gl.TRIANGLES, 0, 3); } @@ -130,10 +132,12 @@ function main() { gl.clear(gl.COLOR_BUFFER_BIT); if (triangleVBO != null && shaderProgram != null) { - drawScene(triangleVBO, shaderProgram); + window.setInterval(drawScene, 1000 / 60, triangleVBO, shaderProgram); } - if(gl.getError() != gl.NO_ERROR) { + if (gl.getError() != gl.NO_ERROR) { console.log("OpenGL Error!: "); } } + +main(); \ No newline at end of file