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

Hello World rotating grid

Browse Source
This commit is contained in:
Julian
2020-01-24 17:33:16 +01:00
parent a79d670999
commit afe2edc8e1
3 changed files with 1297 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@@ -88,23 +88,17 @@
<script id="default-fs" type="x-shader/x-fragment"> <script id="default-fs" type="x-shader/x-fragment">
precision mediump float; precision mediump float;
varying vec2 v_uv;
uniform sampler2D u_texture;
void main(void) { void main(void) {
gl_FragColor = texture2D(u_texture, v_uv); gl_FragColor = vec4(0.0,0.0,1.0,1.0);
//gl_FragColor = vec4(0.0,0.0,1.0,1.0);
} }
</script> </script>
<script id="ndc-vs" type="x-shader/x-vertex"> <script id="ndc-vs" type="x-shader/x-vertex">
attribute vec3 positionAttr; attribute vec3 positionAttr;
attribute vec2 uv;
varying vec2 v_uv; uniform mat4 MVP;
void main(void) { void main(void) {
gl_Position = vec4(positionAttr, 1.0); gl_Position = MVP * vec4(positionAttr, 1.0);
v_uv = uv;
} }
</script> </script>
</header> </header>

1280
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

29
src/main.ts
View File

@@ -1,3 +1,5 @@
import { vec3, mat4, glMatrix } from 'gl-matrix'
var gl: WebGL2RenderingContext; var gl: WebGL2RenderingContext;
var viewportWidth = 0; var viewportWidth = 0;
var viewportHeight = 0; var viewportHeight = 0;
@@ -216,7 +218,7 @@ function initFBO() {
gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Reset to default framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, null); //Reset to default framebuffer
} }
/** Update/Draw function. Targeting 60UPS. */ /** Update/Draw function.*/
var timeSpent = 0.0; var timeSpent = 0.0;
/** Framerate measurement variables */ /** Framerate measurement variables */
var lastTime = new Date().getTime(); var lastTime = new Date().getTime();
@@ -238,8 +240,8 @@ function drawScene() {
// of a grid representing the water surface. // of a grid representing the water surface.
//--- First render pass -> Perlin Noise --- //--- 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);
@@ -263,7 +265,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 ---
{ {
@@ -271,21 +273,18 @@ function drawScene() {
gl.viewport(0, 0, viewportWidth, viewportHeight); gl.viewport(0, 0, viewportWidth, viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bindTexture(gl.TEXTURE_2D, textureFBO); //gl.bindTexture(gl.TEXTURE_2D, textureFBO); //Binds the texture
// There are 7 floating-point values per vertex var mvp = mat4.create();
let stride = 5 * Float32Array.BYTES_PER_ELEMENT; mat4.identity(mvp);
mat4.rotateY(mvp, mvp, timeSpent * 0.001);
// 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.useProgram(textureProgram); gl.useProgram(textureProgram);
gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw two triangles let loc = gl.getUniformLocation(<WebGLProgram>textureProgram, "MVP");
gl.uniformMatrix4fv(loc, false, mvp);
gl.bindVertexArray(gridVAO);
gl.drawElements(gl.TRIANGLES, gridIndices.length, gl.UNSIGNED_INT, 0);
} }
requestAnimationFrame(drawScene); requestAnimationFrame(drawScene);
} }