Spaces:

ThorAILabs
/

SceneEditor

Running

App Files Files Community

ThorAILabs commited on Apr 14, 2025

Commit

8020f7e

verified ·

1 Parent(s): 60aeb77

add instructions for raytracing

Browse files

Files changed (1) hide show

index.html +143 -14

index.html CHANGED Viewed

@@ -39,9 +39,86 @@
             color: white;
             font-size: 12px;
         }
     </style>
 </head>
 <body class="bg-gray-900 text-white h-screen flex overflow-hidden">
     <!-- Sidebar -->
     <div id="sidebar" class="sidebar w-64 bg-gray-800 h-full flex flex-col border-r border-gray-700">
         <div class="p-4 border-b border-gray-700 flex justify-between items-center">
@@ -196,6 +273,29 @@
             vertexCount: 0
         };
         // Initialize the application
         async function init() {
             // Create scene
@@ -216,20 +316,27 @@
             // Initialize WebGPU raytracing renderer
             try {
-                raytracingRenderer = new WebGPURaytracingRenderer({
-                    canvas: document.createElement('canvas'),
-                    width: window.innerWidth,
-                    height: window.innerHeight
-                });
-                await raytracingRenderer.init();
-                // Configure raytracing settings
-                raytracingRenderer.setBounces(3);
-                raytracingRenderer.setSamples(4);
-                raytracingRenderer.setDenoise(true);
-                console.log("WebGPU Raytracing initialized successfully");
             } catch (e) {
                 console.error("Failed to initialize WebGPU raytracing:", e);
                 document.getElementById('toggleRaytracing').disabled = true;
@@ -259,6 +366,9 @@
             // Event listeners
             setupEventListeners();
             // Start animation loop
             animate();
         }
@@ -345,6 +455,11 @@
             // Raytracing toggle
             document.getElementById('toggleRaytracing').addEventListener('click', () => {
                 raytracingEnabled = !raytracingEnabled;
                 document.getElementById('raytraceSettings').classList.toggle('hidden', !raytracingEnabled);
                 document.getElementById('renderMode').textContent = raytracingEnabled ? 'Raytracing' : 'Rasterization';
@@ -426,6 +541,20 @@
                 document.getElementById('fileInput').accept = '.stl,.obj';
                 document.getElementById('fileInput').click();
             });
         }
         // Add ambient light

             color: white;
             font-size: 12px;
         }
+        .instruction-step {
+            counter-increment: step-counter;
+            position: relative;
+            padding-left: 2rem;
+            margin-bottom: 0.5rem;
+        }
+        .instruction-step::before {
+            content: counter(step-counter);
+            position: absolute;
+            left: 0;
+            background-color: #3b82f6;
+            color: white;
+            width: 1.5rem;
+            height: 1.5rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.8rem;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-white h-screen flex overflow-hidden">
+    <!-- WebGPU Modal -->
+    <div id="webgpuModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-bold text-blue-400">
+                    <i class="fas fa-info-circle mr-2"></i> WebGPU Setup Required
+                </h2>
+                <button id="closeWebgpuModal" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="bg-gray-700 p-4 rounded mb-4">
+                <p class="text-yellow-300 mb-2">
+                    <i class="fas fa-exclamation-triangle mr-2"></i>
+                    Raytracing requires WebGPU which is currently experimental in Chrome/Edge
+                </p>
+                <p class="text-sm text-gray-300">
+                    Follow these steps to enable WebGPU in Chromium browsers (Chrome/Edge):
+                </p>
+            </div>
+            <div class="space-y-3 mb-6 pl-4" style="counter-reset: step-counter;">
+                <div class="instruction-step">
+                    <strong>Type this in your address bar:</strong>
+                    <code class="block bg-gray-900 p-2 rounded mt-1 text-sm">chrome://flags/#enable-unsafe-webgpu</code>
+                </div>
+                <div class="instruction-step">
+                    <strong>Find "Unsafe WebGPU"</strong> in the list and change it from "Default" to <span class="bg-blue-600 px-2 py-1 rounded">Enabled</span>
+                </div>
+                <div class="instruction-step">
+                    <strong>Restart your browser</strong> when prompted
+                </div>
+                <div class="instruction-step">
+                    <strong>Reload this page</strong> after restarting
+                </div>
+            </div>
+            <div class="bg-gray-700 p-4 rounded">
+                <p class="text-sm text-gray-300">
+                    <i class="fas fa-info-circle mr-2 text-blue-400"></i>
+                    WebGPU is only available in Chrome 113+ and Edge 113+ on Windows/Linux/Mac.
+                    Other browsers will fall back to traditional rasterization.
+                </p>
+            </div>
+            <div class="flex justify-end mt-4 space-x-2">
+                <button id="dontShowAgain" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">
+                    Don't Show Again
+                </button>
+                <button id="gotItButton" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded">
+                    Got It!
+                </button>
+            </div>
+        </div>
+    </div>
     <!-- Sidebar -->
     <div id="sidebar" class="sidebar w-64 bg-gray-800 h-full flex flex-col border-r border-gray-700">
         <div class="p-4 border-b border-gray-700 flex justify-between items-center">
             vertexCount: 0
         };
+        // Check if WebGPU is supported
+        function isWebGPUSupported() {
+            return navigator.gpu !== undefined;
+        }
+        // Check if this is a Chromium browser
+        function isChromium() {
+            return /Chrome|Edg/.test(navigator.userAgent) && !/Opera|OPR/.test(navigator.userAgent);
+        }
+        // Show WebGPU instructions if needed
+        function checkWebGPUSupport() {
+            // Check if user has previously dismissed the modal
+            if (localStorage.getItem('dontShowWebGPUModal') === 'true') {
+                return;
+            }
+            // Only show for Chromium browsers without WebGPU support
+            if (isChromium() && !isWebGPUSupported()) {
+                document.getElementById('webgpuModal').classList.remove('hidden');
+            }
+        }
         // Initialize the application
         async function init() {
             // Create scene
             // Initialize WebGPU raytracing renderer
             try {
+                if (isWebGPUSupported()) {
+                    raytracingRenderer = new WebGPURaytracingRenderer({
+                        canvas: document.createElement('canvas'),
+                        width: window.innerWidth,
+                        height: window.innerHeight
+                    });
+                    await raytracingRenderer.init();
+                    // Configure raytracing settings
+                    raytracingRenderer.setBounces(3);
+                    raytracingRenderer.setSamples(4);
+                    raytracingRenderer.setDenoise(true);
+                    console.log("WebGPU Raytracing initialized successfully");
+                } else {
+                    console.warn("WebGPU not supported in this browser");
+                    document.getElementById('toggleRaytracing').disabled = true;
+                    document.getElementById('toggleRaytracing').classList.add('opacity-50', 'cursor-not-allowed');
+                    document.getElementById('toggleRaytracing').title = "WebGPU not supported in your browser";
+                }
             } catch (e) {
                 console.error("Failed to initialize WebGPU raytracing:", e);
                 document.getElementById('toggleRaytracing').disabled = true;
             // Event listeners
             setupEventListeners();
+            // Check WebGPU support
+            checkWebGPUSupport();
             // Start animation loop
             animate();
         }
             // Raytracing toggle
             document.getElementById('toggleRaytracing').addEventListener('click', () => {
+                if (!isWebGPUSupported()) {
+                    document.getElementById('webgpuModal').classList.remove('hidden');
+                    return;
+                }
                 raytracingEnabled = !raytracingEnabled;
                 document.getElementById('raytraceSettings').classList.toggle('hidden', !raytracingEnabled);
                 document.getElementById('renderMode').textContent = raytracingEnabled ? 'Raytracing' : 'Rasterization';
                 document.getElementById('fileInput').accept = '.stl,.obj';
                 document.getElementById('fileInput').click();
             });
+            // WebGPU modal controls
+            document.getElementById('closeWebgpuModal').addEventListener('click', () => {
+                document.getElementById('webgpuModal').classList.add('hidden');
+            });
+            document.getElementById('gotItButton').addEventListener('click', () => {
+                document.getElementById('webgpuModal').classList.add('hidden');
+            });
+            document.getElementById('dontShowAgain').addEventListener('click', () => {
+                localStorage.setItem('dontShowWebGPUModal', 'true');
+                document.getElementById('webgpuModal').classList.add('hidden');
+            });
         }
         // Add ambient light