adjustments

src/Camera.ts

@@ -0,0 +1,67 @@
+import { vec3, mat4, vec4 } from 'gl-matrix';
+
+/** A camera that always looks at the world origin. Can have an offset and be rotated. */
+export class Camera {
+    pos: vec3;
+    target: vec3;
+    up: vec3;
+
+    xRot: number;
+    yRot: number;
+    offset: number;
+
+    constructor() {
+        this.pos = vec3.create();
+        vec3.set(this.pos, 0.0, 0.0, 0.0);
+        this.target = vec3.create();
+        vec3.set(this.target, 0.0, 0.0, 0.0);
+        this.up = vec3.create();
+        vec3.set(this.up, 0.0, 1.0, 0.0);
+        this.xRot = 0.0;
+        this.yRot = 0.0;
+        this.offset = 0.0;
+    }
+
+    setRotationX(rotX: number): void {
+        this.xRot = rotX;
+        this.updatePos();
+    }
+
+    setRotationY(rotY: number): void {
+        this.yRot = rotY;
+        this.updatePos();
+    }
+
+    /** Sets the offset to world origin. */
+    setOffset(off: number): void {
+        this.offset = off;
+        this.updatePos();
+    }
+
+    /** Recalculates the position according to xy-rotation and offset. */
+    private updatePos(): void {
+        const transformation: mat4 = mat4.create();
+        mat4.identity(transformation);
+
+        //2. xy-Rotation
+        mat4.rotateX(transformation, transformation, this.xRot);
+        mat4.rotateY(transformation, transformation, this.yRot);
+
+        //1. Translation
+        const translation = vec3.create();
+        vec3.set(translation, 0.0, 0.0, this.offset);
+        mat4.translate(transformation, transformation, translation);
+
+        const temp: vec4 = vec4.create();
+        vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
+        vec4.transformMat4(temp, temp, transformation);
+
+        vec3.set(this.pos, temp[0], temp[1], temp[2]);
+    }
+
+    getViewMatrix(): mat4 {
+        const ret: mat4 = mat4.create();
+        mat4.lookAt(ret, this.pos, this.target, this.up);
+        return ret;
+    }
+}

src/Grid.ts

@@ -0,0 +1,72 @@
+/** Grid for the water surface */
+export class Grid {
+    private indices: number[] = [];
+    private vertices: number[] = [];
+    private vao: WebGLVertexArrayObject | null = null;
+    private size: number;
+
+    constructor(size: number = 128) {
+        this.size = size;
+    }
+
+    generate(): void {
+        this.indices = [];
+        this.vertices = [];
+
+        for (let j = 0; j <= this.size; ++j) {
+            for (let i = 0; i <= this.size; ++i) {
+                // Generate Vertices
+                const x = i / this.size;
+                const y = j / this.size;
+                const z = 0;
+                this.vertices.push(x, y, z);
+
+                if (i < this.size && j < this.size) { // Skip edges
+                    const row1 = j * (this.size + 1);
+                    const row2 = (j + 1) * (this.size + 1);
+
+                    // triangle 1
+                    this.indices.push(row1 + i);
+                    this.indices.push(row1 + i + 1);
+                    this.indices.push(row2 + i + 1);
+
+                    // triangle 2
+                    this.indices.push(row1 + i);
+                    this.indices.push(row2 + i + 1);
+                    this.indices.push(row2 + i);
+                }
+            }
+        }
+    }
+
+    initVAO(gl: WebGL2RenderingContext): void {
+        this.generate();
+
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+
+        const vboGrid: WebGLBuffer | null = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.vertices), gl.STATIC_DRAW);
+
+        const iboGrid: WebGLBuffer | null = gl.createBuffer();
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(this.indices), gl.STATIC_DRAW);
+
+        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
+        gl.enableVertexAttribArray(0);
+        gl.bindVertexArray(null);
+    }
+
+    draw(gl: WebGL2RenderingContext): void {
+        if (this.vao) {
+            gl.bindVertexArray(this.vao);
+            gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_INT, 0);
+            gl.bindVertexArray(null);
+        }
+    }
+
+    getIndexCount(): number {
+        return this.indices.length;
+    }
+}

src/Shader.ts

@@ -0,0 +1,65 @@
+/**  Get shader source by HTML-Element<id> */
+export function getShader(gl: WebGL2RenderingContext, id: string): WebGLShader | null {
+    const script: any = document.getElementById(id);
+    if (!script) {
+        console.error(`Couldn't get shader source from HTML for id: ${id}`);
+        return null;
+    }
+
+    let shader: WebGLShader | null;
+    if (script.type == "x-shader/x-fragment") {
+        shader = gl.createShader(gl.FRAGMENT_SHADER);
+    } else if (script.type == "x-shader/x-vertex") {
+        shader = gl.createShader(gl.VERTEX_SHADER);
+    } else {
+        console.error(`Script type is wrong for id: ${id}`);
+        return null;
+    }
+
+    if (shader == null) {
+        console.error("Cannot create Shaders!");
+        return null;
+    }
+
+    gl.shaderSource(shader, script.text);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error(`Shader compilation failed for ${id}:`, gl.getShaderInfoLog(shader));
+        return null;
+    }
+
+    return shader;
+}
+
+export function createProgram(
+    gl: WebGL2RenderingContext,
+    vertexShaderId: string,
+    fragmentShaderId: string,
+    programName: string
+): WebGLProgram | null {
+    const vertexShader = getShader(gl, vertexShaderId);
+    const fragmentShader = getShader(gl, fragmentShaderId);
+
+    if (vertexShader == null || fragmentShader == null) {
+        console.error(`Didn't find ${programName} shader sources!`);
+        return null;
+    }
+
+    const program = gl.createProgram();
+    if (program == null) {
+        console.error(`${programName} program not created!`);
+        return null;
+    }
+
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        console.error(`Could not initialize ${programName} shaders:`, gl.getProgramInfoLog(program));
+        return null;
+    }
+
+    return program;
+}

src/constants.ts

@@ -0,0 +1,24 @@
+// Configuration Constants
+export const GRID_SIZE = 128;
+export const NOISE_TEXTURE_WIDTH = 256;
+export const NOISE_TEXTURE_HEIGHT = 256;
+export const CANVAS_WIDTH = 800;
+export const CANVAS_HEIGHT = 600;
+export const FOV = 1.0;
+export const NEAR_PLANE = 0.1;
+export const FAR_PLANE = 1000.0;
+export const CAMERA_DEFAULT_OFFSET = 1.2;
+export const CAMERA_DEFAULT_ROT_X = 1.1;
+export const CAMERA_DEFAULT_ROT_Y = 0;
+export const MOUSE_SENSITIVITY = 0.001;
+export const KEYBOARD_ROTATION_SPEED = 0.02;
+export const KEYBOARD_ZOOM_SPEED = 0.05;
+export const FPS_UPDATE_INTERVAL = 1000;
+
+// Ocean shader constants
+export const OCEAN_COLOR_R = 0.0;
+export const OCEAN_COLOR_G = 0.4;
+export const OCEAN_COLOR_B = 0.4;
+export const SKY_COLOR_R = 1.0;
+export const SKY_COLOR_G = 1.0;
+export const SKY_COLOR_B = 1.0;

src/main.ts

@@ -1,86 +1,42 @@
-import { vec3, mat4, vec4 } from 'gl-matrix'
+import { vec3, mat4 } from 'gl-matrix';
+import { Camera } from './Camera';
+import { Grid } from './Grid';
+import { createProgram } from './Shader';
+import * as Config from './constants';
 
 var gl: WebGL2RenderingContext;
 var viewportWidth = 0;
 var viewportHeight = 0;
 
 /** A camera that always looks at the world origin. Can have an offset and be rotated. */
-class Camera {
-    pos: vec3;
-    target: vec3;
-    up: vec3;
-
-    xRot: number;
-    yRot: number;
-    offset: number;
-
-    constructor() {
-        this.pos = vec3.create();
-        vec3.set(this.pos, 0.0, 0.0, 0.0);
-        this.target = vec3.create();
-        vec3.set(this.target, 0.0, 0.0, 0.0);
-        this.up = vec3.create();
-        vec3.set(this.up, 0.0, 1.0, 0.0);
-        this.xRot = 0.0;
-        this.yRot = 0.0;
-        this.offset = 0.0;
-    }
-
-    setRotationX(rotX: number): void {
-        this.xRot = rotX;
-        this.updatePos();
-    }
-
-    setRotationY(rotY: number): void {
-        this.yRot = rotY;
-        this.updatePos();
-    }
-
-    /** Sets the offset to world origin. */
-    setOffset(off: number): void {
-        this.offset = off;
-        this.updatePos();
-    }
-
-    /** Reculcates the position according to xy-rotation and offset. */
-    private updatePos(): void {
-        var transformation: mat4 = mat4.create();
-        mat4.identity(transformation);
-
-        //2. xy-Rotation
-        mat4.rotateX(transformation, transformation, this.xRot);
-        mat4.rotateY(transformation, transformation, this.yRot);
-
-        //1. Translation
-        var translation = vec3.create();
-        vec3.set(translation, 0.0, 0.0, this.offset);
-        mat4.translate(transformation, transformation, translation);
-
-        var temp: vec4 = vec4.create();
-        vec4.set(temp, 0.0, 0.0, 0.0, 1.0);
-        vec4.transformMat4(temp, temp, transformation);
-
-        vec3.set(this.pos, temp[0], temp[1], temp[2]);
-    }
-
-    getViewMatrix(): mat4 {
-        var ret: mat4;
-        ret = mat4.create();
-        mat4.lookAt(ret, this.pos, this.target, this.up);
-        return ret;
-    }
-}
+// Moved to Camera.ts
 
 /** Init OpenGL and gets the viewport/canvas sizes */
 function initGL(canvas: HTMLCanvasElement) {
+    // Helper function for canvas resize
+    const updateCanvasSize = (canvas: HTMLCanvasElement) => {
+        const displayWidth = window.innerWidth;
+        const displayHeight = window.innerHeight;
+        
+        if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+            canvas.width = displayWidth;
+            canvas.height = displayHeight;
+            viewportWidth = displayWidth;
+            viewportHeight = displayHeight;
+            
+            if (gl) {
+                gl.viewport(0, 0, viewportWidth, viewportHeight);
+            }
+        }
+    };
+
     var gltemp;
     try {
         gltemp = canvas.getContext("webgl2");
         if (!gltemp)
             gltemp = canvas.getContext("experimental-webgl2");
         if (gltemp != null) {
-            viewportWidth = canvas.width;
-            viewportHeight = canvas.height;
+            updateCanvasSize(canvas);
         }
 
     } catch (e) {
@@ -88,70 +44,27 @@ function initGL(canvas: HTMLCanvasElement) {
     // Not the best error detection logic.
     // Redirect to http://get.webgl.org in failure case.
     if (gltemp == null) {
-        alert("Unable to initialize WebGL2. Your browser or machine may not support it.");
+        console.error("Unable to initialize WebGL2. Your browser or machine may not support it.");
+        return;
     }
     gl = <WebGL2RenderingContext>gltemp;
     //WebGL2 supports floating point textures by default but it does not support filtering them or rendering to them by default. Note: 16bit filtering is included 32bit not
     if (!gl.getExtension('EXT_color_buffer_float')) {
-        alert("32Bit/16Bit single Color render Buffers not available.");
+        console.error("32Bit/16Bit single Color render Buffers not available.");
     } //allow 16bit texture as framebuffer target
 
     gl.enable(gl.DEPTH_TEST);
+    
+    return updateCanvasSize;
 }
 
+/** Update canvas size to fill window */
+// Moved inline below
+
 /** Grid for the watersurface */
-var gridIndices: number[] = [];
-var gridVertices: number[] = [];
-function generateGrid(N: number) {
-    for (let j = 0; j <= N; ++j) {
-        for (let i = 0; i <= N; ++i) {
-            //Generate Vertices
-            let x = i / N;
-            let y = j / N;
-            let z = 0;
-            gridVertices.push(x);
-            gridVertices.push(y);
-            gridVertices.push(z);
+// Moved to Grid.ts
 
-            if (i < N && j < N) //Skip edges
-            {
-                let row1 = j * (N + 1);
-                let row2 = (j + 1) * (N + 1);
-
-                // triangle 1
-                gridIndices.push(row1 + i);
-                gridIndices.push(row1 + i + 1);
-                gridIndices.push(row2 + i + 1);
-
-                // triangle 2
-                gridIndices.push(row1 + i);
-                gridIndices.push(row2 + i + 1);
-                gridIndices.push(row2 + i);
-            }
-        }
-    }
-}
-var gridVAO: WebGLVertexArrayObject | null = null;
-function initGridVAO() {
-    generateGrid(128);
-
-    gridVAO = gl.createVertexArray();
-    gl.bindVertexArray(gridVAO);
-
-    let vboGrid: WebGLBuffer | null = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, vboGrid);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(gridVertices), gl.STATIC_DRAW);
-
-    let iboGrid: WebGLBuffer | null = gl.createBuffer();
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iboGrid);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(gridIndices), gl.STATIC_DRAW);
-
-    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 3 * Float32Array.BYTES_PER_ELEMENT, 0);
-    gl.enableVertexAttribArray(0);
-    gl.bindVertexArray(null);
-}
-
-/** Init Geomtry for an Triangle */
+/** Init Geometry for a Triangle */
 var VBO: WebGLBuffer | null = null;
 function initGeometry() {
     VBO = gl.createBuffer();
@@ -170,117 +83,23 @@ function initGeometry() {
 }
 
 /**  Get shader source by HTML-Element<id> */
-function getShader(id: string) {
-    var script: any = document.getElementById(id);
-    if (!script) {
-        console.log("Coudln't get shader source from HTML!");
-        return null;
-    }
-
-    var shader: WebGLShader | null;
-    if (script.type == "x-shader/x-fragment") {
-        shader = gl.createShader(gl.FRAGMENT_SHADER);
-    } else if (script.type == "x-shader/x-vertex") {
-        shader = gl.createShader(gl.VERTEX_SHADER);
-    } else {
-        console.log("Script type is wrong!");
-        return null;
-    }
-
-    if (shader == null) {
-        console.log("Cannot create Shaders!")
-        return null;
-    }
-
-    gl.shaderSource(shader, script.text);
-    gl.compileShader(shader);
-
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        alert(gl.getShaderInfoLog(shader));
-        return null;
-    }
-
-    return shader;
-}
+// Moved to Shader.ts
 
 /** Init all Shaders that are needed */
 var perlinNoiseProgram: WebGLProgram | null;
 var defaultProgram: WebGLProgram | null;
 var textureProgram: WebGLProgram | null;
 function initShaders() {
-    { //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;
-        }
-
-        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");
-        }
-    }
-    { //Get defaultShaders
-        let vertexShader = getShader("default-vs");
-        let fragmentShader = getShader("default-fs");
-
-        if (vertexShader == null || fragmentShader == null) {
-            console.log("Didn't find shader sources!")
-            return null;
-        }
-        defaultProgram = gl.createProgram();
-        if (defaultProgram == null) {
-            console.log("Program not created!")
-            return null
-        }
-
-        gl.attachShader(defaultProgram, vertexShader);
-        gl.attachShader(defaultProgram, fragmentShader);
-        gl.linkProgram(defaultProgram);
-
-        if (!gl.getProgramParameter(defaultProgram, gl.LINK_STATUS)) {
-            alert("Could not initialise shaders");
-        }
-    }
-    { //Get textureShader
-        let vertexShader = getShader("texture-vs");
-        let fragmentShader = getShader("texture-fs");
-
-        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");
-        }
-    }
+    perlinNoiseProgram = createProgram(gl, "ndc-vs", "noise-fs", "Perlin Noise");
+    defaultProgram = createProgram(gl, "default-vs", "default-fs", "Default");
+    textureProgram = createProgram(gl, "texture-vs", "texture-fs", "Texture");
 }
 
 /** Init an FBO used for the first render pass / perlin noise */
 var perlinNoiseFBO: WebGLFramebuffer | null = null;
 var textureFBO: WebGLTexture | null = null;
-var perlinNoiseFBOWidth = 256;
-var ferlinNoiseFBOHeight = 256;
+var perlinNoiseFBOWidth = Config.NOISE_TEXTURE_WIDTH;
+var perlinNoiseFBOHeight = Config.NOISE_TEXTURE_HEIGHT;
 function initFBO() {
     perlinNoiseFBO = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
@@ -288,7 +107,7 @@ function initFBO() {
     // Add attachments
     textureFBO = gl.createTexture();
     gl.bindTexture(gl.TEXTURE_2D, textureFBO);                                            //last 3 parameter not intertesting becuase we are not supplying data
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, ferlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16F, perlinNoiseFBOWidth, perlinNoiseFBOHeight, 0, gl.RED, gl.HALF_FLOAT, null);
 
     // set the filtering so we don't need mips
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -311,21 +130,29 @@ var timeSpent = 0.0;
 var lastTime = new Date().getTime();
 var counter = 0.0;
 var fps = 0;
+var fpsDisplay: HTMLElement | null = null;
 /** Input states*/
 var mouseXVel = 0;
 var mouseYVel = 0;
+var keyboardRotationX = 0;
+var keyboardRotationY = 0;
+var keyboardZoom = 0;
+var keysPressed: Set<string> = new Set();
 /** Objects and states*/
 var camera: Camera;
-var curRotX = 1.1;
-var curRotY = 0;
+var oceanGrid: Grid;
+var curRotX = Config.CAMERA_DEFAULT_ROT_X;
+var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
 function drawScene() {
     fps++;
     let now = new Date();
     let delta = now.getTime() - lastTime;
     timeSpent += delta;
-    if ((counter += delta) >= 1000.) {
+    if ((counter += delta) >= Config.FPS_UPDATE_INTERVAL) {
         counter = 0;
-        console.log("FPS: " + fps);
+        if (fpsDisplay) {
+            fpsDisplay.textContent = `FPS: ${fps}`;
+        }
         fps = 0;
     }
     lastTime = now.getTime();
@@ -336,7 +163,7 @@ function drawScene() {
     //--- First render pass -> Perlin Noise (it updates the perlin noise texture)
     {
         gl.bindFramebuffer(gl.FRAMEBUFFER, perlinNoiseFBO);
-        gl.viewport(0, 0, perlinNoiseFBOWidth, ferlinNoiseFBOHeight);
+        gl.viewport(0, 0, perlinNoiseFBOWidth, perlinNoiseFBOHeight);
 
         //Clear buffer content
         gl.clearColor(1.0, 1.0, 1.0, 1);
@@ -372,11 +199,11 @@ function drawScene() {
 
         var projection = mat4.create();
         mat4.identity(projection);
-        mat4.perspective(projection, 1.0, viewportWidth / viewportHeight, 0.1, 1000.); //projection mode should actually be camera specific
+        mat4.perspective(projection, Config.FOV, viewportWidth / viewportHeight, Config.NEAR_PLANE, Config.FAR_PLANE); //projection mode should actually be camera specific
 
-        camera.setOffset(1.2);
-        camera.setRotationX((curRotX += mouseYVel * 0.001));
-        camera.setRotationY((curRotY += mouseXVel * 0.001));
+        camera.setOffset(Config.CAMERA_DEFAULT_OFFSET + keyboardZoom);
+        camera.setRotationX((curRotX += mouseYVel * Config.MOUSE_SENSITIVITY + keyboardRotationX));
+        camera.setRotationY((curRotY += mouseXVel * Config.MOUSE_SENSITIVITY + keyboardRotationY));
         var view = camera.getViewMatrix();
 
         var model = mat4.create();
@@ -398,16 +225,45 @@ function drawScene() {
         //gl.uniform1f(uTime_loc, timeSpent);
         let displacementMap_loc = gl.getUniformLocation(<WebGLProgram>defaultProgram, "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);
+        oceanGrid.draw(gl);
     }
     requestAnimationFrame(drawScene);
 }
 
+/** Handle keyboard input for camera controls */
+function handleKeyboardInput() {
+    keyboardRotationX = 0;
+    keyboardRotationY = 0;
+    
+    if (keysPressed.has('w') || keysPressed.has('W') || keysPressed.has('ArrowUp')) {
+        keyboardRotationX = Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('s') || keysPressed.has('S') || keysPressed.has('ArrowDown')) {
+        keyboardRotationX = -Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('a') || keysPressed.has('A') || keysPressed.has('ArrowLeft')) {
+        keyboardRotationY = Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('d') || keysPressed.has('D') || keysPressed.has('ArrowRight')) {
+        keyboardRotationY = -Config.KEYBOARD_ROTATION_SPEED;
+    }
+    if (keysPressed.has('q') || keysPressed.has('Q') || keysPressed.has('+')) {
+        keyboardZoom -= Config.KEYBOARD_ZOOM_SPEED;
+    }
+    if (keysPressed.has('e') || keysPressed.has('E') || keysPressed.has('-')) {
+        keyboardZoom += Config.KEYBOARD_ZOOM_SPEED;
+    }
+}
+
 function main() {
     const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("window");
-    initGL(canvas);
+    fpsDisplay = document.getElementById("fps-counter");
+    
+    const updateCanvasSize = initGL(canvas);
+    if (!updateCanvasSize) {
+        console.error("Failed to initialize WebGL");
+        return;
+    }
 
     var drag = false;
     var previousPosX: number | null;
@@ -439,10 +295,35 @@ function main() {
     canvas.addEventListener('mouseup', deactivateMouseMovement, false);
     canvas.addEventListener('mouseleave', deactivateMouseMovement, false);
 
+    // Keyboard controls
+    window.addEventListener('keydown', (evt) => {
+        keysPressed.add(evt.key);
+        handleKeyboardInput();
+        
+        // Reset camera on 'R' key
+        if (evt.key === 'r' || evt.key === 'R') {
+            curRotX = Config.CAMERA_DEFAULT_ROT_X;
+            curRotY = Config.CAMERA_DEFAULT_ROT_Y;
+            keyboardZoom = 0;
+        }
+    });
+    
+    window.addEventListener('keyup', (evt) => {
+        keysPressed.delete(evt.key);
+        handleKeyboardInput();
+    });
+
+    // Window resize handler
+    window.addEventListener('resize', () => {
+        updateCanvasSize(canvas);
+    });
+
     initShaders();
     initGeometry();
     initFBO();
-    initGridVAO();
+    
+    oceanGrid = new Grid(Config.GRID_SIZE);
+    oceanGrid.initVAO(gl);
 
     camera = new Camera();
     //Check if any errors apeared during init.