try to fix webgpu init error

index.html

@@ -12,7 +12,6 @@
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/OBJExporter.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/exporters/STLExporter.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/webgpu-raytracing@latest/dist/webgpu-raytracing.umd.js"></script>
     <style>
         #renderCanvas {
             width: 100%;
@@ -263,7 +262,7 @@
         // Initialize Three.js scene
         let scene, camera, renderer, controls;
         let raytracingEnabled = false;
-        let raytracingRenderer;
+        let raytracingRenderer = null;
         let objects = [];
         let lights = [];
         let clock = new THREE.Clock();
@@ -314,34 +313,50 @@
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
             document.getElementById('renderCanvas').appendChild(renderer.domElement);
             
-            // 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";
+            // Try to initialize WebGPU raytracing if supported
+            if (isWebGPUSupported()) {
+                try {
+                    // Dynamically load the WebGPU raytracing library
+                    const script = document.createElement('script');
+                    script.src = 'https://cdn.jsdelivr.net/npm/webgpu-raytracing@latest/dist/webgpu-raytracing.umd.js';
+                    script.onload = async () => {
+                        try {
+                            if (typeof WebGPURaytracingRenderer !== 'undefined') {
+                                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 Raytracing library not available");
+                                disableRaytracingUI();
+                            }
+                        } catch (e) {
+                            console.error("Failed to initialize WebGPU raytracing:", e);
+                            disableRaytracingUI();
+                        }
+                    };
+                    script.onerror = () => {
+                        console.warn("Failed to load WebGPU raytracing library");
+                        disableRaytracingUI();
+                    };
+                    document.head.appendChild(script);
+                } catch (e) {
+                    console.error("Error loading WebGPU raytracing:", e);
+                    disableRaytracingUI();
                 }
-            } catch (e) {
-                console.error("Failed to initialize WebGPU raytracing:", e);
-                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";
+            } else {
+                console.warn("WebGPU not supported in this browser");
+                disableRaytracingUI();
             }
             
             // Add orbit controls
@@ -373,6 +388,14 @@
             animate();
         }
         
+        // Disable raytracing UI when not available
+        function disableRaytracingUI() {
+            document.getElementById('toggleRaytracing').disabled = true;
+            document.getElementById('toggleRaytracing').classList.add('opacity-50', 'cursor-not-allowed');
+            document.getElementById('toggleRaytracing').title = "WebGPU raytracing not available";
+            document.getElementById('raytraceSettings').classList.add('hidden');
+        }
+        
         // Animation loop
         function animate() {
             requestAnimationFrame(animate);
@@ -389,21 +412,31 @@
             
             // Render scene
             if (raytracingEnabled && raytracingRenderer) {
-                // Update raytracing renderer with current scene
-                raytracingRenderer.setCamera(camera);
-                raytracingRenderer.setScene(scene);
-                
-                // Render with raytracing
-                raytracingRenderer.render();
-                
-                // Display the raytraced result
-                renderer.domElement.style.display = 'none';
-                raytracingRenderer.canvas.style.display = 'block';
-                raytracingRenderer.canvas.style.width = '100%';
-                raytracingRenderer.canvas.style.height = '100%';
-                
-                if (!document.getElementById('renderCanvas').contains(raytracingRenderer.canvas)) {
-                    document.getElementById('renderCanvas').appendChild(raytracingRenderer.canvas);
+                try {
+                    // Update raytracing renderer with current scene
+                    raytracingRenderer.setCamera(camera);
+                    raytracingRenderer.setScene(scene);
+                    
+                    // Render with raytracing
+                    raytracingRenderer.render();
+                    
+                    // Display the raytraced result
+                    renderer.domElement.style.display = 'none';
+                    raytracingRenderer.canvas.style.display = 'block';
+                    raytracingRenderer.canvas.style.width = '100%';
+                    raytracingRenderer.canvas.style.height = '100%';
+                    
+                    if (!document.getElementById('renderCanvas').contains(raytracingRenderer.canvas)) {
+                        document.getElementById('renderCanvas').appendChild(raytracingRenderer.canvas);
+                    }
+                } catch (e) {
+                    console.error("Raytracing render error:", e);
+                    raytracingEnabled = false;
+                    document.getElementById('renderMode').textContent = 'Rasterization';
+                    renderer.domElement.style.display = 'block';
+                    if (raytracingRenderer && raytracingRenderer.canvas) {
+                        raytracingRenderer.canvas.style.display = 'none';
+                    }
                 }
             } else {
                 // Regular rasterization rendering
@@ -455,7 +488,7 @@
             
             // Raytracing toggle
             document.getElementById('toggleRaytracing').addEventListener('click', () => {
-                if (!isWebGPUSupported()) {
+                if (!isWebGPUSupported() || !raytracingRenderer) {
                     document.getElementById('webgpuModal').classList.remove('hidden');
                     return;
                 }