add: add runRenderLoop after initAsync completes

brianzinn · Jun 1, 2024 · 2681ae6 · 2681ae6
1 parent d64e2dd
commit 2681ae6
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 51 deletions.
diff --git a/packages/react-babylonjs/src/engine/Engine.tsx b/packages/react-babylonjs/src/engine/Engine.tsx
@@ -22,8 +22,8 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
   const engine = useRef<Nullable<Engine>>(null)
   const [_, setEngineReady] = useState<boolean>(false)
 
-  const onBeforeRenderLoopObservable = useRef<Observable<Engine>>(new Observable<Engine>())
-  const onEndRenderLoopObservable = useRef<Observable<Engine>>(new Observable<Engine>())
+  // const onBeforeRenderLoopObservable = useRef<Observable<Engine>>(new Observable<Engine>())
+  // const onEndRenderLoopObservable = useRef<Observable<Engine>>(new Observable<Engine>())
 
   const canvasRef = useRef<Nullable<HTMLCanvasElement>>(null)
   const [canvasReady, setCanvasReady] = useState(false)
@@ -75,9 +75,9 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
       if (shouldRenderRef.current === false) {
         return
       }
-      if (onBeforeRenderLoopObservable.current.hasObservers()) {
-        onBeforeRenderLoopObservable.current.notifyObservers(engine.current!)
-      }
+      // if (onBeforeRenderLoopObservable.current.hasObservers()) {
+      //   onBeforeRenderLoopObservable.current.notifyObservers(engine.current!)
+      // }
 
       // TODO: here is where you could access your own render method
       engine.current!.scenes.forEach((scene) => {
@@ -87,9 +87,9 @@ const ReactBabylonjsEngine: React.FC<EngineProps> = (props: EngineProps, context
         }
       })
 
-      if (onEndRenderLoopObservable.current.hasObservers()) {
-        onEndRenderLoopObservable.current.notifyObservers(engine.current!)
-      }
+      // if (onEndRenderLoopObservable.current.hasObservers()) {
+      //   onEndRenderLoopObservable.current.notifyObservers(engine.current!)
+      // }
     })
 
     engine.current.onContextLostObservable.add((eventData: ThinEngine) => {

diff --git a/packages/react-babylonjs/src/engine/FallbackEngine.tsx b/packages/react-babylonjs/src/engine/FallbackEngine.tsx
@@ -9,8 +9,7 @@ import { SharedEngineProps } from './engineProps'
 export type FallbackEngineProps = {
   engineProps?: EngineOnlyProps
   webGPUEngineProps?: WebGPUEngineOnlyProps
-} & EngineOnlyProps &
-  SharedEngineProps & {
+} & SharedEngineProps & {
     children?: ReactNode | undefined
   } & React.CanvasHTMLAttributes<HTMLCanvasElement>
 

diff --git a/packages/react-babylonjs/src/engine/WebGPUEngine.tsx b/packages/react-babylonjs/src/engine/WebGPUEngine.tsx
@@ -37,11 +37,6 @@ const ReactBabylonjsWebGPUEngine: React.FC<WebGPUEngineProps> = (
   const engine = useRef<Nullable<WebGPUEngine>>(null)
   const [_, setEngineReady] = useState<boolean>(false)
 
-  const onBeforeRenderLoopObservable = useRef<Observable<WebGPUEngine>>(
-    new Observable<WebGPUEngine>()
-  )
-  const onEndRenderLoopObservable = useRef<Observable<WebGPUEngine>>(new Observable<WebGPUEngine>())
-
   const canvasRef = useRef<Nullable<HTMLCanvasElement>>(null)
   const [canvasReady, setCanvasReady] = useState(false)
   const shouldRenderRef = useRef(true)
@@ -51,6 +46,8 @@ const ReactBabylonjsWebGPUEngine: React.FC<WebGPUEngineProps> = (
     touchActionNone,
     canvasId,
     webGPUEngineOptions,
+    twgslOptions,
+    glslangOptions,
     renderOptions,
     observeCanvasResize,
     children,
@@ -75,54 +72,44 @@ const ReactBabylonjsWebGPUEngine: React.FC<WebGPUEngineProps> = (
       return
     }
 
-    engine.current = new WebGPUEngine(
-      canvasRef.current,
-      webGPUEngineOptions ?? {
-        enableAllFeatures: true,
-        setMaximumLimits: true,
-      }
-    )
-
-    engine.current.runRenderLoop(() => {
-      if (shouldRenderRef.current === false) {
-        return
-      }
-      if (onBeforeRenderLoopObservable.current.hasObservers()) {
-        onBeforeRenderLoopObservable.current.notifyObservers(engine.current!)
-      }
-
-      // TODO: here is where you could access your own render method
-      engine.current!.scenes.forEach((scene) => {
-        // TODO (fix properly): in React 18.2 (not 18.0 or 18.1 if the camera is in a subcomponent it will be added in a future render!)
-        if (scene.cameras?.length > 0) {
-          scene.render()
-        }
-      })
-
-      if (onEndRenderLoopObservable.current.hasObservers()) {
-        onEndRenderLoopObservable.current.notifyObservers(engine.current!)
-      }
-    })
-
-    engine.current.onContextLostObservable.add((eventData: ThinEngine) => {
-      console.warn('context loss observable from Engine: ', eventData)
-    })
+    const webGPUEngine = (engine.current = new WebGPUEngine(canvasRef.current, webGPUEngineOptions))
 
     const onResizeWindow = () => {
       if (engine.current) {
         engine.current.resize()
       }
     }
 
-    window.addEventListener('resize', onResizeWindow)
     // when initAsync completes - a re-render is triggers (to render scene)
-    engine.current.initAsync().then(() => setEngineReady(true))
+    engine.current.initAsync(glslangOptions, twgslOptions).then(() => {
+      webGPUEngine.runRenderLoop(() => {
+        if (shouldRenderRef.current === false) {
+          return
+        }
+
+        // TODO: here is where you could access your own render method
+        engine.current!.scenes.forEach((scene) => {
+          // TODO (fix properly): in React 18.2 (not 18.0 or 18.1 if the camera is in a subcomponent it will be added in a future render!)
+          if (scene.cameras?.length > 0) {
+            scene.render()
+          }
+        })
+      })
+
+      webGPUEngine.onContextLostObservable.add((eventData: ThinEngine) => {
+        console.warn('context loss observable from Engine: ', eventData)
+      })
+
+      window.addEventListener('resize', onResizeWindow)
+
+      setEngineReady(true)
+    })
 
     return () => {
       window.removeEventListener('resize', onResizeWindow)
 
       if (engine.current !== null) {
-        engine.current!.dispose()
+        engine.current.dispose()
         engine.current = null
       }
     }

diff --git a/packages/static/content/examples/basic/animations/BasicAnimations.tsx b/packages/static/content/examples/basic/animations/BasicAnimations.tsx
@@ -85,7 +85,7 @@ export const BasicAnimations: FC = () => (
   <div style={{ flex: 1, display: 'flex' }}>
     <FallbackEngine
       canvasId="babylon-canvas"
-      engineOptions={{
+      engineProps={{
         antialias: true,
         adaptToDeviceRatio: true,
       }}