add webgl toggle

Author: do-me

app.js

@@ -3,6 +3,7 @@ import { MapboxOverlay as DeckOverlay } from '@deck.gl/mapbox';
 import { ScatterplotLayer } from '@deck.gl/layers';
 import maplibregl from 'maplibre-gl';
 import { webgpuAdapter } from '@luma.gl/webgpu';
+import { webgl2Adapter } from '@luma.gl/webgl';
 
 // --- Configuration ---
 const INITIAL_VIEW_STATE = {
@@ -30,16 +31,35 @@ const map = new maplibregl.Map({
 });
 
 // --- Initialize Deck Context ---
-const deckOverlay = new DeckOverlay({
-    deviceProps: {
-        adapters: [webgpuAdapter]
-    },
-    layers: []
-});
+let currentBackend = 'webgpu';
+let deckOverlay;
+
+function createDeckOverlay(backend) {
+    return new DeckOverlay({
+        deviceProps: {
+            adapters: [backend === 'webgpu' ? webgpuAdapter : webgl2Adapter]
+        },
+        layers: []
+    });
+}
 
+deckOverlay = createDeckOverlay(currentBackend);
 map.addControl(deckOverlay);
 map.addControl(new maplibregl.NavigationControl());
 
+function setBackend(backend) {
+    if (backend === currentBackend) return;
+    currentBackend = backend;
+    map.removeControl(deckOverlay);
+    deckOverlay = createDeckOverlay(backend);
+    map.addControl(deckOverlay);
+    document.getElementById('backend-display').innerText = backend.toUpperCase();
+    document.getElementById('backend-toggle').innerText =
+        backend === 'webgpu' ? 'Switch to WebGL' : 'Switch to WebGPU';
+    // Rebuild layers from raw data on the new device
+    if (currentData) updateLayer(currentData);
+}
+
 // --- Core Logic ---
 
 function updateLayer(data) {
@@ -84,21 +104,22 @@ function updateLayer(data) {
 function generatePoints(count) {
     const startTime = performance.now();
     const positions = new Float32Array(count * 2);
-    const colors = new Uint8Array(count * 3);
+    const colors = new Uint8Array(count * 4);
 
     // Use a simpler distribution for speed: full world
     for (let i = 0; i < count; i++) {
         const i2 = i * 2;
-        const i3 = i * 3;
+        const i4 = i * 4;
 
         // Random worldwide coordinates
         positions[i2] = (Math.random() - 0.5) * 360;
         positions[i2 + 1] = (Math.random() - 0.5) * 170; // Stay within map range
 
-        // Random colors
-        colors[i3] = Math.random() * 255;
-        colors[i3 + 1] = Math.random() * 255;
-        colors[i3 + 2] = Math.random() * 255;
+        // Random colors (RGBA)
+        colors[i4] = Math.random() * 255;
+        colors[i4 + 1] = Math.random() * 255;
+        colors[i4 + 2] = Math.random() * 255;
+        colors[i4 + 3] = 255;
     }
 
     const endTime = performance.now();
@@ -108,11 +129,29 @@ function generatePoints(count) {
         length: count,
         attributes: {
             getPosition: { value: positions, size: 2 },
-            getFillColor: { value: colors, size: 3 }
+            getFillColor: { value: colors, size: 4 }
         }
     };
 }
 
+// --- FPS Counter ---
+const fpsDisplay = document.getElementById('fps-display');
+let fpsFrames = 0;
+let fpsLastUpdate = performance.now();
+
+function fpsTick() {
+    fpsFrames++;
+    const now = performance.now();
+    const elapsed = now - fpsLastUpdate;
+    if (elapsed >= 500) {
+        fpsDisplay.innerText = Math.round((fpsFrames * 1000) / elapsed);
+        fpsFrames = 0;
+        fpsLastUpdate = now;
+    }
+    requestAnimationFrame(fpsTick);
+}
+requestAnimationFrame(fpsTick);
+
 // --- UI Interaction ---
 
 const pointInput = document.getElementById('point-count');
@@ -147,6 +186,11 @@ generateBtn.addEventListener('click', () => {
     }, 10);
 });
 
+const backendToggle = document.getElementById('backend-toggle');
+backendToggle.addEventListener('click', () => {
+    setBackend(currentBackend === 'webgpu' ? 'webgl' : 'webgpu');
+});
+
 const removeBtn = document.getElementById('remove-btn');
 removeBtn.addEventListener('click', () => {
     currentData = null;

index.html

@@ -262,7 +262,7 @@
 
   <div id="control-panel" class="open">
     <div class="drag-handle"></div>
-    <h2>WebGPU Scatterplot Demo (deck.gl)</h2>
+    <h2>deck.gl Scatterplot Demo</h2>
     <div class="input-group">
       <label for="point-count">Generate Points</label>
       <input type="text" id="point-count" placeholder="1,000,000" value="1,000,000" inputmode="numeric">
@@ -275,9 +275,12 @@ <h2>WebGPU Scatterplot Demo (deck.gl)</h2>
         </svg>
       </button>
     </div>
+    <button id="backend-toggle" style="background:#444; margin-bottom:15px;">Switch to WebGL</button>
     <div id="status">
+      <div>Backend: <span id="backend-display">WEBGPU</span></div>
       <div>Points: <span id="count-display">0</span></div>
       <div>Load time: <span id="time-display">-</span></div>
+      <div>FPS: <span id="fps-display">-</span></div>
     </div>
     <p style="font-size: 11px; color: #888; margin-top: 15px; line-height: 1.4;">
       Tip: Drag & Drop a JSON file anywhere to load your own data. Format:

package-lock.json

@@ -13,6 +13,7 @@
     "deck.gl": "^9.0.0",
     "@deck.gl/mapbox": "^9.0.0",
     "@luma.gl/core": "^9.0.0",
+    "@luma.gl/webgl": "^9.0.0",
     "@luma.gl/webgpu": "^9.0.0",
     "maplibre-gl": "^5.0.0"
   },