feat: Implement WebGPU context manager and shaders for ocean rendering

- Added WebGPUContext class to manage WebGPU initialization and resource creation.
- Created main_webgl.ts for WebGL rendering setup and scene management.
- Introduced WGSL shaders for Perlin noise generation and ocean rendering.
- Implemented vertex and fragment shaders for ocean surface displacement and lighting effects.
- Enhanced camera controls and rendering logic for improved user experience.

index.html

@@ -96,6 +96,19 @@
             font-size: 14px;
             backdrop-filter: blur(10px);
         }
+        
+        #frame-time {
+            position: absolute;
+            bottom: 20px;
+            left: 100px;
+            background: rgba(0, 0, 0, 0.7);
+            color: #0ff;
+            padding: 8px 12px;
+            border-radius: 5px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            backdrop-filter: blur(10px);
+        }
     </style>
     <script id="noise-fs" type="x-shader/x-fragment">
             precision mediump float;
@@ -389,6 +402,7 @@
     <button id="toggle-controls">Toggle Controls (H)</button>
 
     <div id="fps-counter">FPS: 0</div>
+    <div id="frame-time">Frame: 0.00ms</div>
 
     <script type="module" src="/src/main.ts"></script>
     <script>