diff --git a/index.html b/index.html index cceec20..d31d187 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@
Web Ocean - + +
diff --git a/src/main.ts b/src/main.ts index edb8c49..381d4e2 100644 --- a/src/main.ts +++ b/src/main.ts @@ -25,20 +25,21 @@ function initGL(canvas: HTMLCanvasElement) { } /** Init Geomtry for an Triangle */ +var VBO: WebGLBuffer | null = null; function initGeometry() { - let VBO = gl.createBuffer(); + VBO = gl.createBuffer(); //Vertex data represent fullscreen quad in NDC-Space - let vertexData = [-1.0, -1.0, 0.0, //BOTTOM LEFT - 1.0, -1.0, 0.0, //BOTTOM RIGHT - -1.0, 1.0, 0.0, // TOP LEFT - 1.0, -1.0, 0.0, //BOTTOM RIGHT - -1.0, 1.0, 0.0, // TOP LEFT - 1.0, 1.0, 0.0, // TOP RIGHT + // X, Y, Z, U, V + let vertexData = [-1.0, -1.0, 0.0, /*BOTTOM LEFT*/ 0.0, 0.0, + 1.0, -1.0, 0.0, /*BOTTOM RIGHT*/ 1.0, 0.0, + -1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0, + 1.0, -1.0, 0.0, /*BOTTOM RIGHT */ 1.0, 0.0, + -1.0, 1.0, 0.0, /*TOP LEFT */ 0.0, 1.0, + 1.0, 1.0, 0.0, /*TOP RIGHT */ 1.0, 1.0 ]; gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); - return VBO; } /** Get shader source by HTML-Element */ @@ -76,34 +77,63 @@ function getShader(id: string) { } /** Init all Shaders that are needed */ +var perlinNoiseProgram: WebGLProgram | null; +var textureProgram: WebGLProgram | null; function initShaders() { - var vertexShader = getShader("shader-vs"); - var fragmentShader = getShader("shader-fs"); + { //Get perlinNoiseProgram + let vertexShader = getShader("ndc-vs"); + let fragmentShader = getShader("noise-fs"); - if (vertexShader == null || fragmentShader == null) { - console.log("Didn't find shader sources!") - return null; + if (vertexShader == null || fragmentShader == null) { + console.log("Didn't find shader sources!") + return null; + } + + perlinNoiseProgram = gl.createProgram(); + if (perlinNoiseProgram == null) { + console.log("Program not created!") + return null + } + gl.attachShader(perlinNoiseProgram, vertexShader); + gl.attachShader(perlinNoiseProgram, fragmentShader); + gl.linkProgram(perlinNoiseProgram); + + if (!gl.getProgramParameter(perlinNoiseProgram, gl.LINK_STATUS)) { + alert("Could not initialise shaders"); + } + + gl.useProgram(perlinNoiseProgram); + + let positionAttr = gl.getAttribLocation(perlinNoiseProgram, "positionAttr"); + gl.enableVertexAttribArray(positionAttr); } + { //Get textueShaderProgram + let vertexShader = getShader("ndc-vs"); + let fragmentShader = getShader("default-fs"); - let program: WebGLProgram | null = gl.createProgram(); - if (program == null) { - console.log("Program not created!") - return null + if (vertexShader == null || fragmentShader == null) { + console.log("Didn't find shader sources!") + return null; + } + textureProgram = gl.createProgram(); + if (textureProgram == null) { + console.log("Program not created!") + return null + } + + gl.attachShader(textureProgram, vertexShader); + gl.attachShader(textureProgram, fragmentShader); + gl.linkProgram(textureProgram); + + if (!gl.getProgramParameter(textureProgram, gl.LINK_STATUS)) { + alert("Could not initialise shaders"); + } + + gl.useProgram(textureProgram); + + let positionAttr = gl.getAttribLocation(textureProgram, "positionAttr"); + gl.enableVertexAttribArray(positionAttr); } - gl.attachShader(program, vertexShader); - gl.attachShader(program, fragmentShader); - gl.linkProgram(program); - - if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { - alert("Could not initialise shaders"); - } - - gl.useProgram(program); - - let positionAttr = gl.getAttribLocation(program, "positionAttr"); - gl.enableVertexAttribArray(positionAttr); - - return program; } /** Init an FBO used for the first render pass / perlin noise */ @@ -137,7 +167,7 @@ var timeSpent = 0.0; var lastTime = new Date().getTime(); var counter = 0.0; var fps = 0; -function drawScene(buffer: WebGLBuffer, program: WebGLProgram) { +function drawScene() { fps++; let now = new Date(); let delta = now.getTime() - lastTime; @@ -166,16 +196,18 @@ function drawScene(buffer: WebGLBuffer, program: WebGLProgram) { gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // There are 7 floating-point values per vertex - let stride = 3 * Float32Array.BYTES_PER_ELEMENT; + let stride = 5 * Float32Array.BYTES_PER_ELEMENT; // 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.enableVertexAttribAray(1); gl.useProgram(program); let uTime = gl.getUniformLocation(program, "uTime"); gl.uniform1f(uTime, timeSpent); - gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quad + gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw quadr */} //--- Second render pass -> Geomtry with displacement by perlin noise texture --- @@ -185,43 +217,36 @@ function drawScene(buffer: WebGLBuffer, program: WebGLProgram) { gl.viewport(0, 0, viewportWidth, viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.bindBuffer(gl.ARRAY_BUFFER, VBO); // There are 7 floating-point values per vertex - let stride = 3 * Float32Array.BYTES_PER_ELEMENT; + let stride = 5 * Float32Array.BYTES_PER_ELEMENT; // 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(program); - let uTime = gl.getUniformLocation(program, "uTime"); - gl.uniform1f(uTime, timeSpent); + gl.useProgram(textureProgram); gl.drawArrays(gl.TRIANGLES, 0, 6); // Draw two triangles } + requestAnimationFrame(drawScene); } function main() { const canvas: HTMLCanvasElement = document.getElementById("window"); initGL(canvas); - let shaderProgram = initShaders(); - let triangleVBO = initGeometry(); - let fbo = initFBO(); - - - // Setze clear color auf schwarz, vollständig sichtbar - gl.clearColor(0.0, 1.0, 0.0, 1.0); - // Lösche den color buffer mit definierter clear color - gl.clear(gl.COLOR_BUFFER_BIT); - - if (triangleVBO != null && shaderProgram != null) { - window.setInterval(drawScene, 1000 / 60, triangleVBO, shaderProgram); - } + initShaders(); + initGeometry(); + initFBO(); if (gl.getError() != gl.NO_ERROR) { console.log("OpenGL Error!: "); } + + drawScene(); } main(); \ No newline at end of file