Spaces:

awacke1
/

WebGPUTest

Running

App Files Files Community

awacke1 commited on 6 days ago

Commit

363ad46

verified ·

1 Parent(s): f3968a6

Update index.html

Browse files

Files changed (1) hide show

index.html +28 -19

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebGPU Three.js Spaceship Fly-Through</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
@@ -20,15 +20,14 @@
     </script>
     <script type="module">
         import * as THREE from 'three';
-        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        import { WebGPURenderer } from 'three/addons/renderers/webgpu/WebGPURenderer.js';
         // Scene setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         camera.position.set(0, 5, 10);
-        const renderer = new WebGPURenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.setPixelRatio(window.devicePixelRatio);
         document.body.appendChild(renderer.domElement);
@@ -40,7 +39,7 @@
         directionalLight.position.set(1, 1, 1);
         scene.add(directionalLight);
-        // Spaceship (simple geometry)
         const shipGeometry = new THREE.ConeGeometry(0.5, 2, 32);
         const shipMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.8, roughness: 0.2 });
         const spaceship = new THREE.Mesh(shipGeometry, shipMaterial);
@@ -48,7 +47,7 @@
         scene.add(spaceship);
         // Particle system for buildings
-        const buildingCount = 100;
         const buildingGeometry = new THREE.BufferGeometry();
         const buildingPositions = new Float32Array(buildingCount * 3);
         const buildingColors = new Float32Array(buildingCount * 3);
@@ -80,7 +79,7 @@
         scene.add(buildings);
         // Particle system for people
-        const peopleCount = 200;
         const peopleGeometry = new THREE.BufferGeometry();
         const peoplePositions = new Float32Array(peopleCount * 3);
         const peopleColors = new Float32Array(peopleCount * 3);
@@ -111,8 +110,8 @@
         const people = new THREE.Points(peopleGeometry, peopleMaterial);
         scene.add(people);
-        // Instanced geometry for repeating objects (cubes)
-        const cubeCount = 50;
         const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
         const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff, metalness: 0.5, roughness: 0.4 });
         const cubeMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, cubeCount);
@@ -134,9 +133,9 @@
         let time = 0;
         function updateCamera() {
             time += 0.01;
-            camera.position.z -= 0.5; // Continuous forward movement
-            camera.position.x = Math.sin(time * 0.5) * 5; // Gentle side-to-side
-            camera.position.y = Math.cos(time * 0.3) * 2 + 5; // Up and down
             camera.lookAt(new THREE.Vector3(0, 0, camera.position.z - 100));
         }
@@ -144,16 +143,16 @@
         function updateObjects() {
             const positions = buildings.geometry.attributes.position.array;
             for (let i = 0; i < buildingCount; i++) {
-                positions[i * 3 + 2] += 0.5; // Move towards camera
                 if (positions[i * 3 + 2] > camera.position.z + 100) {
-                    positions[i * 3 + 2] -= 200; // Reset to back
                 }
             }
             buildings.geometry.attributes.position.needsUpdate = true;
             const peoplePos = people.geometry.attributes.position.array;
             for (let i = 0; i < peopleCount; i++) {
-                peoplePos[i * 3 + 2] += 0.7; // Faster movement for parallax
                 if (peoplePos[i * 3 + 2] > camera.position.z + 100) {
                     peoplePos[i * 3 + 2] -= 200;
                 }
@@ -175,10 +174,14 @@
         // Animation loop
         function animate() {
-            requestAnimationFrame(animate);
-            updateCamera();
-            updateObjects();
-            renderer.render(scene, camera);
         }
         animate();
@@ -189,6 +192,12 @@
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.js Spaceship Fly-Through</title>
     <style>
         body { margin: 0; overflow: hidden; }
         canvas { display: block; }
     </script>
     <script type="module">
         import * as THREE from 'three';
+        import { WebGLRenderer } from 'three';
         // Scene setup
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         camera.position.set(0, 5, 10);
+        const renderer = new WebGLRenderer({ antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
         renderer.setPixelRatio(window.devicePixelRatio);
         document.body.appendChild(renderer.domElement);
         directionalLight.position.set(1, 1, 1);
         scene.add(directionalLight);
+        // Spaceship (simple cone)
         const shipGeometry = new THREE.ConeGeometry(0.5, 2, 32);
         const shipMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.8, roughness: 0.2 });
         const spaceship = new THREE.Mesh(shipGeometry, shipMaterial);
         scene.add(spaceship);
         // Particle system for buildings
+        const buildingCount = 50; // Reduced for performance
         const buildingGeometry = new THREE.BufferGeometry();
         const buildingPositions = new Float32Array(buildingCount * 3);
         const buildingColors = new Float32Array(buildingCount * 3);
         scene.add(buildings);
         // Particle system for people
+        const peopleCount = 100; // Reduced for performance
         const peopleGeometry = new THREE.BufferGeometry();
         const peoplePositions = new Float32Array(peopleCount * 3);
         const peopleColors = new Float32Array(peopleCount * 3);
         const people = new THREE.Points(peopleGeometry, peopleMaterial);
         scene.add(people);
+        // Instanced cubes
+        const cubeCount = 30; // Reduced for performance
         const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
         const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff, metalness: 0.5, roughness: 0.4 });
         const cubeMesh = new THREE.InstancedMesh(cubeGeometry, cubeMaterial, cubeCount);
         let time = 0;
         function updateCamera() {
             time += 0.01;
+            camera.position.z -= 0.5; // Forward movement
+            camera.position.x = Math.sin(time * 0.5) * 5; // Side-to-side
+            camera.position.y = Math.cos(time * 0.3) * 2 + 5; // Up-down
             camera.lookAt(new THREE.Vector3(0, 0, camera.position.z - 100));
         }
         function updateObjects() {
             const positions = buildings.geometry.attributes.position.array;
             for (let i = 0; i < buildingCount; i++) {
+                positions[i * 3 + 2] += 0.5;
                 if (positions[i * 3 + 2] > camera.position.z + 100) {
+                    positions[i * 3 + 2] -= 200;
                 }
             }
             buildings.geometry.attributes.position.needsUpdate = true;
             const peoplePos = people.geometry.attributes.position.array;
             for (let i = 0; i < peopleCount; i++) {
+                peoplePos[i * 3 + 2] += 0.7; // Faster for parallax
                 if (peoplePos[i * 3 + 2] > camera.position.z + 100) {
                     peoplePos[i * 3 + 2] -= 200;
                 }
         // Animation loop
         function animate() {
+            try {
+                requestAnimationFrame(animate);
+                updateCamera();
+                updateObjects();
+                renderer.render(scene, camera);
+            } catch (error) {
+                console.error('Rendering error:', error);
+            }
         }
         animate();
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         });
+        // Error handling for WebGL
+        if (!renderer.getContext()) {
+            console.error('WebGL is not supported in this browser.');
+            alert('WebGL is not supported. Please use a modern browser like Chrome or Firefox.');
+        }
     </script>
 </body>
 </html>