feat: Add webgpu support and fix bugs (#1)

Author: dudewheresmycode

examples/cornhole/cornhole.js

@@ -1,6 +1,9 @@
 import '@/css/base.css';
 import './cornhole.css';
 
+const FIXED_DT = 1 / 60;
+const MAX_SUBSTEPS = 5; // cap to prevent "spiral of death"
+
 import {
   CourseKeyboardControls,
   MeshLoader,
@@ -11,7 +14,8 @@ import {
   VolumetricClouds,
   app,
   generateSetupData,
-  UILoadingScreen
+  UILoadingScreen,
+  FuseRenderer
 } from '@opengolfsim/fuse';
 import { Water } from 'three/examples/jsm/Addons.js';
 import groundBeachModel from './models/GroundBeach.glb?url';
@@ -28,7 +32,7 @@ const stopThreshold = 0.05;
 const baseBoardDistance = 7;
 let boardZOffset = 10;
 
-const fogColor = new THREE.Color('#fffcee');
+const fogColor = new THREE.Color('#bddefc');
 const skyColor = new THREE.Color('#bddefc');
 
 const textureLoader = new THREE.TextureLoader();
@@ -201,7 +205,7 @@ async function loadGameBoards() {
   setupBoard('red', boardMeshOriginal);
 }
 
-function setupScene() {
+async function setupScene() {
   gameContext.scene = new THREE.Scene();
   gameContext.scene.background = new THREE.Color(skyColor);
   gameContext.scene.fog = new THREE.Fog(fogColor, 10, 140);
@@ -223,8 +227,6 @@ function setupScene() {
   gameContext.scene.add(directionalLight);
   directionalLight.target.position.set(0, 0, 0);
 
-
-
   const waterGroup = new THREE.Group();
   const underwaterGeometry = new THREE.PlaneGeometry(300, 100);
   const underwaterMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color('#1a5972') });
@@ -239,8 +241,8 @@ function setupScene() {
   const waterGeometry = new THREE.PlaneGeometry(300, 100);
 
   gameContext.water.object = new Water(waterGeometry, {
-    textureWidth: 512,
-    textureHeight: 512,
+    textureWidth: 256,
+    textureHeight: 256,
     waterNormals: textureLoader.load(
       waterNormals,
       (texture) => {
@@ -278,6 +280,7 @@ function setupScene() {
   gameContext.scene.add(waterGroup);
 
 
+
 }
 
 function createSky() {
@@ -309,7 +312,7 @@ async function createGround(width = 100, depth = 100) {
   tex.wrapT = THREE.RepeatWrapping;
   tex.repeat.set(100, 100); // tile 50x across, 100x down the 100x200 plane
   tex.colorSpace = THREE.SRGBColorSpace; // correct color rendering
-  tex.anisotropy = gameContext.renderer.capabilities.getMaxAnisotropy();
+  tex.anisotropy = gameContext.renderer.getMaxAnisotropy();
 
   const floorMaterial = new THREE.MeshStandardMaterial({
     map: tex,
@@ -321,6 +324,7 @@ async function createGround(width = 100, depth = 100) {
   // const groundMesh = await loadMesh('models/GroundBeach.glb', true);
   const groundMesh = await gameContext.meshLoader?.load(groundBeachModel, true);
   console.log('groundMesh', groundMesh.geometry);
+  // const geo = new THREE.PlaneGeometry(100, 100);
 
   const mesh = new THREE.Mesh(groundMesh.geometry, floorMaterial);
   // floor.rotation.x = -Math.PI / 2;
@@ -469,14 +473,22 @@ async function setupGame() {
     launchShot({ ballSpeed: 12 + (Math.random() * 2), verticalLaunchAngle: 35, horizontalLaunchAngle: -5 + (Math.random() * 10) });
   });
 
-  gameContext.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
-  gameContext.renderer.setSize(window.innerWidth, window.innerHeight);
-  gameContext.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
-  gameContext.renderer.shadowMap.enabled = true;
-  gameContext.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  const canvas = document.getElementById('canvas');
+  if (!canvas) {
+    throw new Error('Missing canvas!');
+  }
+  gameContext.renderer = new FuseRenderer({
+    canvas,
+    antialias: true
+    // renderMode: 'webgpu'
+  });
+  // gameContext.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas'), antialias: true });
+  // gameContext.renderer.setSize(window.innerWidth, window.innerHeight);
+  // gameContext.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+  // gameContext.renderer.shadowMap.enabled = true;
+  // gameContext.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  
 
-  gameContext.meshLoader = new MeshLoader(gameContext.renderer);
-
   // window.addEventListener('resize', () => {
   //   if (gameContext.camera) {
   //     gameContext.camera.aspect = window.innerWidth / window.innerHeight;
@@ -486,14 +498,23 @@ async function setupGame() {
   // });
 
 
-  setupScene();
-  await createGround();
-  gameContext.camera = new ShotPerspectiveCamera(gameContext.renderer, gameContext.ground.mesh, {
+  await setupScene();
+  
+  gameContext.camera = new ShotPerspectiveCamera({
+    canvas,
     fov: 30,
     cameraOffsetX: 0,
     cameraOffsetYZ: [1.5, 1],
   });
 
+  await gameContext.renderer.init();
+
+  gameContext.meshLoader = new MeshLoader(gameContext.renderer.renderer);  
+
+  await createGround();
+
+  gameContext.camera.setScene(gameContext.ground.mesh);
+
   const geo = new THREE.BoxGeometry(0.06, 2, 0.06);
   const mat = new THREE.MeshBasicMaterial({ color: 'red', transparent: true, opacity: 0.8 });
 
@@ -504,7 +525,7 @@ async function setupGame() {
   gameContext.scene.add(gameContext.aimMesh);
 
   gameContext.camera?.setPositions(gameContext.startPoint, gameContext.aimPoint);
-  createSky();
+  // createSky();
 
 
   await loadGameBoards();
@@ -539,12 +560,13 @@ function loadGame() {
   gameContext.timer.connect(document);  
 
   gameContext.loadingScreen = new UILoadingScreen(document.body, { loadingPrefix: 'Filling the bags' });
-  gameContext.loadingScreen.on('load', () => {
+  gameContext.loadingScreen.on('load', async () => {
     gameContext.clock.start();
     requestAnimationFrame(animate);
   });
   gameContext.loadingScreen.load(setupGame);
 
+  document.body.style.opacity = '1';
 
   // requestAnimationFrame(animate);
 }
@@ -767,25 +789,36 @@ function animate(animDelta) {
   const delta = gameContext.timer.getDelta();
   gameContext.timer.update(animDelta);
 
-  app.world.step(gameContext.eventQueue);
-  gameContext.clouds.update();
-
-  gameContext.eventQueue.drainCollisionEvents((h1, h2, started) => {
-    if (!started) return; // only care about entering, not leaving
-    const blueHole = gameContext.boards.blue.colliderHole.handle;
-    const redHole = gameContext.boards.red.colliderHole.handle;
+  // fixed-rate physics
+  gameContext.accumulator += delta;
 
-    let holeTeam = null;
-    if (h1 === blueHole || h2 === blueHole) holeTeam = 'blue';
-    else if (h1 === redHole || h2 === redHole) holeTeam = 'red';
-    if (!holeTeam) return;
+  // Clamp so a long hitch doesn't queue dozens of steps
+  if (gameContext.accumulator > FIXED_DT * MAX_SUBSTEPS) {
+    gameContext.accumulator = FIXED_DT * MAX_SUBSTEPS;
+  }
 
-    const bagHandle = (h1 === blueHole || h1 === redHole) ? h2 : h1;
-    const bag = gameContext.bags.find(b => b.collider.handle === bagHandle);
-    if (bag) {
-      bag.inHole = holeTeam;
-    }
-  });
+  while (gameContext.accumulator >= FIXED_DT) {
+    app.world.timestep = FIXED_DT;
+    app.world.step(gameContext.eventQueue);
+    gameContext.accumulator -= FIXED_DT;
+
+    // Drain collision events *inside* the loop so you don't
+    // miss events from intermediate substeps
+    gameContext.eventQueue.drainCollisionEvents((h1, h2, started) => {
+      if (!started) return;
+      const blueHole = gameContext.boards.blue.colliderHole.handle;
+      const redHole  = gameContext.boards.red.colliderHole.handle;
+
+      let holeTeam = null;
+      if (h1 === blueHole || h2 === blueHole) holeTeam = 'blue';
+      else if (h1 === redHole || h2 === redHole) holeTeam = 'red';
+      if (!holeTeam) return;
+
+      const bagHandle = (h1 === blueHole || h1 === redHole) ? h2 : h1;
+      const bag = gameContext.bags.find(b => b.collider.handle === bagHandle);
+      if (bag) bag.inHole = holeTeam;
+    });
+  }
 
   // Sync meshes to physics
   for (const bag of gameContext.bags) {
@@ -835,13 +868,11 @@ function animate(animDelta) {
     gameContext.startPoint,
     gameContext.aimPoint
   );
-  if (aimChanged) {
-    // gameContext.aimPoint.copy();
-  }
 
   if (gameContext.aimMesh) gameContext.aimMesh.position.copy(gameContext.aimPoint);
 
-  gameContext.camera?.render(gameContext.scene, gameContext.fog);
+  // gameContext.camera?.render(gameContext.scene, gameContext.fog);
+  gameContext.renderer?.render(gameContext.scene, gameContext.camera, gameContext.fog);
 
   gameContext.stats?.end();
 }

examples/cornhole/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <script type="module" src="./cornhole.js"></script>
   </head>
-  <body>
+  <body style="opacity: 0">
 
     <canvas id="canvas"></canvas>
 

examples/courses/courses.ts

@@ -19,6 +19,7 @@ import {
   VolumetricClouds,
   generateSetupData,
   UIMainMenu,
+  FuseRenderer,
  } from '@opengolfsim/fuse';
 
 
@@ -31,7 +32,7 @@ const gameContext: {
   timer: THREE.Timer,
   world?: World;
   scene?: THREE.Scene;
-  renderer?: THREE.WebGLRenderer,
+  renderer?: FuseRenderer,
   golfBall?: GolfBall,
   lightGroup?: CourseLight,
   fog?: THREE.Fog,  
@@ -112,18 +113,19 @@ function setupNextShot() {
 }
 
 function setupRenderer() {
-  const canvas = document.getElementById('canvas');
-  if (!canvas) throw new Error('Unable to find canvas in HTML. Make sure you create a root canvas element (e.g. <canvas id="canvas"></canvas>)');
 
   THREE.ColorManagement.enabled = true;
-
+  
   app.sendMessage({ type: 'log', message: `qualityLevel: ${gameContext.qualityLevel}` });
-
-  gameContext.renderer = new THREE.WebGLRenderer({
+  
+  const canvas = document.getElementById('canvas');
+  if (!canvas || !(canvas instanceof HTMLCanvasElement)) throw new Error('Unable to find canvas in HTML. Make sure you create a root canvas element (e.g. <canvas id="canvas"></canvas>)');
+  gameContext.renderer = new FuseRenderer({
     canvas,
+    qualityLevel: gameContext.qualityLevel,
     antialias: true // gameContext.qualityLevel >= QualityMode.Medium
   });
-  gameContext.renderer.setSize(window.innerWidth, window.innerHeight);
+  // gameContext.renderer.setSize(window.innerWidth, window.innerHeight);
 
   let maxPixelRatio = Math.min(window.devicePixelRatio, 1);
   if (gameContext.qualityLevel >= QualityMode.High) {
@@ -132,14 +134,10 @@ function setupRenderer() {
 
   app.sendMessage({ type: 'log', message: `maxPixelRatio: ${maxPixelRatio}` });
 
-  gameContext.renderer.setPixelRatio(maxPixelRatio);
-  gameContext.renderer.shadowMap.enabled = gameContext.qualityLevel >= QualityMode.Medium;
-  gameContext.renderer.shadowMap.type = THREE.PCFShadowMap;
+  // gameContext.renderer.setPixelRatio(maxPixelRatio);
+  // gameContext.renderer.shadowMap.enabled = gameContext.qualityLevel >= QualityMode.Medium;
+  // gameContext.renderer.shadowMap.type = THREE.PCFShadowMap;
 
-  if (gameContext.qualityLevel >= QualityMode.Medium) {
-    gameContext.renderer.toneMapping = THREE.ACESFilmicToneMapping; // or whatever you pick
-    gameContext.renderer.toneMappingExposure = 1.0;
-  }
 
 }
 
@@ -169,10 +167,11 @@ async function setupScene() {
   if (!gameContext.course) {
     throw new Error('Course object does not exist!');
   }
+  const ground = gameContext.course.getGroundMeshes();
+  console.log('ground', ground);
   gameContext.camera = new ShotPerspectiveCamera(
-    gameContext.renderer,
-    gameContext.course.getGroundMeshes(),
     {
+      scene: ground,
       cameraOffsetX: (gameContext.setupData?.cameraOffset ? -(gameContext.setupData.cameraOffset / 100) : 0),
     }
   );
@@ -218,6 +217,8 @@ async function setupScene() {
   });
   gameContext.scene.add(gameContext.clouds.object);
 
+
+
 }
 
 /**
@@ -294,9 +295,10 @@ async function setupCourse() {
   gameContext.course = new CourseLoader(
     app.world,
     app.rapier,
-    gameContext.renderer,
+    gameContext.renderer.renderer,
     {
       setupData: gameContext.setupData,
+      qualityLevel: gameContext.qualityLevel,
       manager: gameContext.loadingScreen?.manager,
       meshLoaderOptions: { ktx2Path: '../ktx2/' }
     }
@@ -352,6 +354,7 @@ async function setupCourse() {
   });
 
 
+  // gameContext.camera?.setScene(gameContext.course.getGroundMeshes());
   setupNextShot();
 
   gameContext.courseMap?.on('updateAim', adjustAimPoint);
@@ -375,7 +378,7 @@ function preLoad() {
   console.log('[debug] Setup Data', gameContext.setupData);
   gameContext.loadingScreen = new UILoadingScreen(document.body, { loadingPrefix: 'Loading Course' });
   gameContext.loadingScreen.on('load', (error) => {
-    gameContext.stats = new UIStats('#render-stats', { hidden: false, renderer: gameContext.renderer }); // start hidden (press S to toggle)
+    gameContext.stats = new UIStats('#render-stats', { hidden: false, renderer: gameContext.renderer?.renderer }); // start hidden (press S to toggle)
     if (!error) {
       requestAnimationFrame(animate);
       gameContext.isReady = true;
@@ -432,7 +435,10 @@ function animate(animDelta: number) {
           aimPointUpdated();
         }
       }
-      gameContext.camera?.render(gameContext.scene, gameContext.fog);
+      // gameContext.camera?.render(gameContext.scene, gameContext.fog);
+      if (gameContext.camera) {
+        gameContext.renderer?.render(gameContext.scene, gameContext.camera, gameContext.fog);
+      }
     }
   }
 

examples/range/index.html

@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" type="text/css" href="../../src/css/base.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <title>Fuse Range</title>
   </head>