Hugging Face's logo

Spaces:
ThorAILabs
/
SceneEditor
Running

App Files Community
ThorAILabs commited on
Commit
a593e62
·
verified ·
1 Parent(s): 7d85e05

add error handling for webgpu, so that you can still use the editor

Browse files
Files changed (1) hide show
  1. index.html +87 -8
index.html CHANGED
@@ -58,6 +58,11 @@
58
  justify-content: center;
59
  font-size: 0.8rem;
60
  }
 
 
 
 
 
61
  </style>
62
  </head>
63
  <body class="bg-gray-900 text-white h-screen flex overflow-hidden">
@@ -118,6 +123,56 @@
118
  </div>
119
  </div>
120
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
121
  <!-- Sidebar -->
122
  <div id="sidebar" class="sidebar w-64 bg-gray-800 h-full flex flex-col border-r border-gray-700">
123
  <div class="p-4 border-b border-gray-700 flex justify-between items-center">
@@ -295,6 +350,18 @@
295
  }
296
  }
297
 
 
 
 
 
 
 
 
 
 
 
 
 
298
  // Initialize the application
299
  async function init() {
300
  // Create scene
@@ -319,7 +386,15 @@
319
  // Dynamically load the WebGPU raytracing library
320
  const script = document.createElement('script');
321
  script.src = 'https://cdn.jsdelivr.net/npm/webgpu-raytracing@latest/dist/webgpu-raytracing.umd.js';
 
 
 
 
 
 
 
322
  script.onload = async () => {
 
323
  try {
324
  if (typeof WebGPURaytracingRenderer !== 'undefined') {
325
  raytracingRenderer = new WebGPURaytracingRenderer({
@@ -345,10 +420,13 @@
345
  disableRaytracingUI();
346
  }
347
  };
 
348
  script.onerror = () => {
 
349
  console.warn("Failed to load WebGPU raytracing library");
350
  disableRaytracingUI();
351
  };
 
352
  document.head.appendChild(script);
353
  } catch (e) {
354
  console.error("Error loading WebGPU raytracing:", e);
@@ -388,14 +466,6 @@
388
  animate();
389
  }
390
 
391
- // Disable raytracing UI when not available
392
- function disableRaytracingUI() {
393
- document.getElementById('toggleRaytracing').disabled = true;
394
- document.getElementById('toggleRaytracing').classList.add('opacity-50', 'cursor-not-allowed');
395
- document.getElementById('toggleRaytracing').title = "WebGPU raytracing not available";
396
- document.getElementById('raytraceSettings').classList.add('hidden');
397
- }
398
-
399
  // Animation loop
400
  function animate() {
401
  requestAnimationFrame(animate);
@@ -588,6 +658,15 @@
588
  localStorage.setItem('dontShowWebGPUModal', 'true');
589
  document.getElementById('webgpuModal').classList.add('hidden');
590
  });
 
 
 
 
 
 
 
 
 
591
  }
592
 
593
  // Add ambient light
 
58
  justify-content: center;
59
  font-size: 0.8rem;
60
  }
61
+ .feature-disabled {
62
+ opacity: 0.5;
63
+ pointer-events: none;
64
+ cursor: not-allowed;
65
+ }
66
  </style>
67
  </head>
68
  <body class="bg-gray-900 text-white h-screen flex overflow-hidden">
 
123
  </div>
124
  </div>
125
 
126
+ <!-- WebGPU Error Modal -->
127
+ <div id="webgpuErrorModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
128
+ <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full mx-4">
129
+ <div class="flex justify-between items-center mb-4">
130
+ <h2 class="text-xl font-bold text-red-400">
131
+ <i class="fas fa-exclamation-triangle mr-2"></i> WebGPU Raytracing Unavailable
132
+ </h2>
133
+ <button id="closeWebgpuErrorModal" class="text-gray-400 hover:text-white">
134
+ <i class="fas fa-times"></i>
135
+ </button>
136
+ </div>
137
+
138
+ <div class="bg-gray-700 p-4 rounded mb-4">
139
+ <p class="text-yellow-300 mb-2">
140
+ <i class="fas fa-exclamation-circle mr-2"></i>
141
+ Failed to load WebGPU raytracing library
142
+ </p>
143
+ <p class="text-sm text-gray-300">
144
+ The application will continue with traditional rasterization rendering.
145
+ </p>
146
+ </div>
147
+
148
+ <div class="space-y-3 mb-6">
149
+ <p class="text-sm">
150
+ Possible reasons for this error:
151
+ </p>
152
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-300">
153
+ <li>WebGPU is not enabled in your browser</li>
154
+ <li>Your browser doesn't support WebGPU</li>
155
+ <li>Network issues prevented loading the raytracing library</li>
156
+ <li>The raytracing library is temporarily unavailable</li>
157
+ </ul>
158
+ </div>
159
+
160
+ <div class="bg-gray-700 p-4 rounded">
161
+ <p class="text-sm text-gray-300">
162
+ <i class="fas fa-info-circle mr-2 text-blue-400"></i>
163
+ You can still use all other features of the 3D editor.
164
+ The raytracing option has been disabled.
165
+ </p>
166
+ </div>
167
+
168
+ <div class="flex justify-end mt-4">
169
+ <button id="continueButton" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded">
170
+ Continue
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
  <!-- Sidebar -->
177
  <div id="sidebar" class="sidebar w-64 bg-gray-800 h-full flex flex-col border-r border-gray-700">
178
  <div class="p-4 border-b border-gray-700 flex justify-between items-center">
 
350
  }
351
  }
352
 
353
+ // Disable raytracing UI when not available
354
+ function disableRaytracingUI() {
355
+ const toggleBtn = document.getElementById('toggleRaytracing');
356
+ toggleBtn.disabled = true;
357
+ toggleBtn.classList.add('feature-disabled');
358
+ toggleBtn.title = "WebGPU raytracing not available";
359
+ document.getElementById('raytraceSettings').classList.add('hidden');
360
+
361
+ // Show error modal
362
+ document.getElementById('webgpuErrorModal').classList.remove('hidden');
363
+ }
364
+
365
  // Initialize the application
366
  async function init() {
367
  // Create scene
 
386
  // Dynamically load the WebGPU raytracing library
387
  const script = document.createElement('script');
388
  script.src = 'https://cdn.jsdelivr.net/npm/webgpu-raytracing@latest/dist/webgpu-raytracing.umd.js';
389
+
390
+ // Set timeout for library loading
391
+ const loadTimeout = setTimeout(() => {
392
+ console.warn("WebGPU raytracing library loading timed out");
393
+ disableRaytracingUI();
394
+ }, 5000);
395
+
396
  script.onload = async () => {
397
+ clearTimeout(loadTimeout);
398
  try {
399
  if (typeof WebGPURaytracingRenderer !== 'undefined') {
400
  raytracingRenderer = new WebGPURaytracingRenderer({
 
420
  disableRaytracingUI();
421
  }
422
  };
423
+
424
  script.onerror = () => {
425
+ clearTimeout(loadTimeout);
426
  console.warn("Failed to load WebGPU raytracing library");
427
  disableRaytracingUI();
428
  };
429
+
430
  document.head.appendChild(script);
431
  } catch (e) {
432
  console.error("Error loading WebGPU raytracing:", e);
 
466
  animate();
467
  }
468
 
 
 
 
 
 
 
 
 
469
  // Animation loop
470
  function animate() {
471
  requestAnimationFrame(animate);
 
658
  localStorage.setItem('dontShowWebGPUModal', 'true');
659
  document.getElementById('webgpuModal').classList.add('hidden');
660
  });
661
+
662
+ // WebGPU error modal controls
663
+ document.getElementById('closeWebgpuErrorModal').addEventListener('click', () => {
664
+ document.getElementById('webgpuErrorModal').classList.add('hidden');
665
+ });
666
+
667
+ document.getElementById('continueButton').addEventListener('click', () => {
668
+ document.getElementById('webgpuErrorModal').classList.add('hidden');
669
+ });
670
  }
671
 
672
  // Add ambient light