Add wireframe mode

index.html

@@ -361,6 +361,10 @@
             <strong>Camera Mode:</strong> <span class="key">C</span> (FPS/Orbital)<br>
             <span id="current-camera-mode" style="font-size: 12px; color: #aaa;">Current: FPS</span>
         </div>
+        <div class="control-group">
+            <strong>Rendering:</strong><br>
+            <span class="key">F</span> Toggle Wireframe
+        </div>
         <div class="control-group">
             <strong>FPS Camera:</strong><br>
             <span class="key">W</span><span class="key">A</span><span class="key">S</span><span class="key">D</span> Move<br>

src/Grid.ts

@@ -58,10 +58,17 @@ export class Grid {
         gl.bindVertexArray(null);
     }
 
-    draw(gl: WebGL2RenderingContext): void {
+    draw(gl: WebGL2RenderingContext, wireframe: boolean = false): void {
         if (this.vao) {
             gl.bindVertexArray(this.vao);
+            if (wireframe) {
+                // Draw as lines for wireframe mode
+                for (let i = 0; i < this.indices.length; i += 3) {
+                    gl.drawElements(gl.LINE_LOOP, 3, gl.UNSIGNED_INT, i * 4);
+                }
+            } else {
                 gl.drawElements(gl.TRIANGLES, this.indices.length, gl.UNSIGNED_INT, 0);
+            }
             gl.bindVertexArray(null);
         }
     }

src/main.ts

@@ -155,6 +155,8 @@ var curRotY = Config.CAMERA_DEFAULT_ROT_Y;
 var cameraMode: 'orbital' | 'fps' = 'fps';
 var moveSpeed = 0.15;
 var fastMoveSpeed = 0.4;
+/** Rendering modes */
+var wireframeMode = false;
 function drawScene() {
     fps++;
     let now = new Date();
@@ -280,7 +282,12 @@ 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
-        oceanGrid.draw(gl);
+        
+        // Draw ocean grid with wireframe mode if enabled
+        if (wireframeMode) {
+            gl.lineWidth(1.0);
+        }
+        oceanGrid.draw(gl, wireframeMode);
     }
     requestAnimationFrame(drawScene);
 }
@@ -429,6 +436,12 @@ function main() {
             evt.preventDefault();
         }
         
+        // Wireframe toggle with F key
+        if (evt.key === 'f' || evt.key === 'F') {
+            wireframeMode = !wireframeMode;
+            console.log(`Wireframe mode: ${wireframeMode ? 'ON' : 'OFF'}`);
+        }
+        
         // Handle orbital camera keyboard input
         if (cameraMode === 'orbital') {
             handleKeyboardInput();