fix: make FilamentAPIContextProvider so consumer can implement offscreen recording (#198)

Author: hannojg

package/example/Shared/src/AnimationTransitionsRecording.tsx

@@ -1,26 +1,24 @@
 import * as React from 'react'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Button, Dimensions, PixelRatio, StyleSheet, View } from 'react-native'
 import {
   Float3,
   useModel,
   useAnimator,
   getAssetFromModel,
-  FilamentProvider,
   useFilamentContext,
-  useDisposableResource,
   useSkybox,
   useRecorder,
   useRecorderRenderLoop,
+  Camera,
+  FilamentAPIContextProvider,
 } from 'react-native-filament'
-import { useDefaultLight } from './hooks/useDefaultLight'
-import { getAssetPath } from './utils/getAssetPasth'
 import { useRunOnJS, useSharedValue } from 'react-native-worklets-core'
+import PenguGlb from '~/assets/pengu.glb'
+import PirateGlb from '~/assets/pirate.glb'
+import { DefaultLight } from './components/DefaultLight'
 import Video from 'react-native-video'
 
-const penguModelPath = getAssetPath('pengu.glb')
-const pirateHatPath = getAssetPath('pirate.glb')
-
 // Camera config:
 const cameraPosition: Float3 = [0, 0, 8]
 const cameraTarget: Float3 = [0, 0, 0]
@@ -34,39 +32,37 @@ const DURATION = 3 // seconds
 
 function Renderer() {
   const { camera } = useFilamentContext()
-  useDefaultLight()
   useSkybox({ color: '#88defb' })
 
-  const pengu = useModel({ source: penguModelPath })
-  const penguAsset = getAssetFromModel(pengu)
-  const pirateHat = useModel({ source: pirateHatPath })
+  const pengu = useModel(PenguGlb)
+  const penguAnimator = useAnimator(pengu)
+  const pirateHat = useModel(PirateGlb)
   const pirateHatAsset = getAssetFromModel(pirateHat)
-  const pirateHatAnimator = useDisposableResource(() => {
-    if (pirateHatAsset == null || penguAsset == null) {
-      return undefined
-    }
-    return Promise.resolve(pirateHatAsset.createAnimatorWithAnimationsFrom(penguAsset))
-  }, [pirateHatAsset, penguAsset])
+  const pirateHatInstance = useMemo(() => pirateHatAsset?.getInstance(), [pirateHatAsset])
 
-  const penguAnimator = useAnimator(penguAsset)
+  // Sync pirate hat animation with pengu
+  React.useEffect(() => {
+    if (penguAnimator == null || pirateHatInstance == null) return
+    const id = penguAnimator.addToSyncList(pirateHatInstance)
+    return () => {
+      penguAnimator.removeFromSyncList(id)
+    }
+  }, [penguAnimator, pirateHatInstance])
 
   const renderCallback = useCallback(
     (passedSeconds: number) => {
       'worklet'
       camera.lookAt(cameraPosition, cameraTarget, cameraUp)
 
-      if (pirateHatAnimator == null || penguAnimator == null) {
+      if (penguAnimator == null) {
         return
       }
 
       // Update the animators to play the current animation
       penguAnimator.applyAnimation(0, passedSeconds)
-      pirateHatAnimator.applyAnimation(0, passedSeconds)
-
       penguAnimator.updateBoneMatrices()
-      pirateHatAnimator.updateBoneMatrices()
     },
-    [camera, pirateHatAnimator, penguAnimator]
+    [camera, penguAnimator]
   )
 
   const framesToRender = DURATION * FPS
@@ -145,7 +141,13 @@ function Renderer() {
 
   return (
     <View style={styles.container}>
-      {videoUri != null ? (
+      {videoUri == null ? (
+        // Render our scene that we want to record
+        <>
+          <Camera />
+          <DefaultLight />
+        </>
+      ) : (
         <Video
           style={{ flex: 1 }}
           paused={false}
@@ -156,17 +158,18 @@ function Renderer() {
           onLoad={() => console.log('On load')}
           onEnd={() => console.log('On end')}
         />
-      ) : null}
+      )}
       <Button onPress={onStartRecording} title={'Start recording'} />
     </View>
   )
 }
 
 export function AnimationTransitionsRecording() {
   return (
-    <FilamentProvider>
+    // Provide the API necessary for recording (accessing the RNF apis) in a react context
+    <FilamentAPIContextProvider>
       <Renderer />
-    </FilamentProvider>
+    </FilamentAPIContextProvider>
   )
 }
 

package/example/Shared/src/App.tsx

@@ -6,6 +6,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 import { AnimationTransitions } from './AnimationTransitions'
 import { CameraPan } from './CameraPan'
+import { AnimationTransitionsRecording } from './AnimationTransitionsRecording'
 // import { PhysicsCoin } from './PhysicsCoin'
 // import { FadeOut } from './FadeOut'
 // import { CastShadow } from './CastShadow'
@@ -14,7 +15,6 @@ import { CameraPan } from './CameraPan'
 // import { ScaleEffect } from './ScaleEffect'
 // import { FadingLightExample } from './FadingLightExample'
 // import { ChangeGoldenMaterials } from './ChangeGoldenMaterial'
-// import { AnimationTransitionsRecording } from './AnimationTransitionsRecording'
 
 function NavigationItem(props: { name: string; route: string }) {
   const navigation = useNavigation()
@@ -47,8 +47,8 @@ function HomeScreen() {
     <ScrollView style={{ flex: 1 }}>
       <NavigationItem name="▶️ Animation Transitions" route="AnimationTransitions" />
       <NavigationItem name="📸 Camera Pan" route="CameraPan" />
-      {/* <NavigationItem name="📹 Offscreen recording" route="AnimationTransitionsRecording" />
-      <NavigationItem name="💰 Physics Coin" route="PhysicsCoin" />
+      <NavigationItem name="📹 Offscreen recording" route="AnimationTransitionsRecording" />
+      {/* <NavigationItem name="💰 Physics Coin" route="PhysicsCoin" />
       <NavigationItem name="😶‍🌫️ Fade Out" route="FadeOut" />
       <NavigationItem name="🎨 Change Materials" route="ChangeMaterials" />
       <NavigationItem name="🌑 Cast Shadow" route="CastShadow" />
@@ -84,9 +84,9 @@ function App() {
             }}
           />
           <Stack.Screen name="CameraPan" component={CameraPan} />
+          <Stack.Screen name="AnimationTransitionsRecording" component={AnimationTransitionsRecording} />
           {/* TODO: Migrate */}
-          {/* <Stack.Screen name="AnimationTransitionsRecording" component={AnimationTransitionsRecording} />
-          <Stack.Screen name="PhysicsCoin" component={PhysicsCoin} />
+          {/* <Stack.Screen name="PhysicsCoin" component={PhysicsCoin} />
           <Stack.Screen name="FadeOut" component={FadeOut} />
           <Stack.Screen name="ChangeMaterials" component={ChangeGoldenMaterials} />
           <Stack.Screen name="CastShadow" component={CastShadow} />

package/src/index.tsx

@@ -31,3 +31,4 @@ export * from './react/RenderCallbackContext'
 export * from './react/EnvironmentalLight'
 export * from './react/Light'
 export * from './react/Skybox'
+export * from './react/FilamentAPIContextProvider'

package/src/react/Filament.tsx

@@ -47,11 +47,9 @@ function FilamentViewWithRenderCallbacks({ children, ...forwardProps }: PropsWit
 export function Filament({ children, enableTransparentRendering, style, ...props }: Props) {
   return (
     <FilamentAPIContextProvider {...props}>
-      <RenderCallbackContext.RenderContextProvider>
-        <FilamentViewWithRenderCallbacks enableTransparentRendering={enableTransparentRendering} style={style}>
-          {children}
-        </FilamentViewWithRenderCallbacks>
-      </RenderCallbackContext.RenderContextProvider>
+      <FilamentViewWithRenderCallbacks enableTransparentRendering={enableTransparentRendering} style={style}>
+        {children}
+      </FilamentViewWithRenderCallbacks>
     </FilamentAPIContextProvider>
   )
 }

package/src/react/FilamentAPIContextProvider.tsx

@@ -6,6 +6,7 @@ import { useWorklet } from 'react-native-worklets-core'
 import React from 'react'
 import { Configurator, RendererConfigProps, ViewConfigProps } from './Configurator'
 import { FilamentContext, FilamentContextType } from './FilamentContext'
+import { RenderCallbackContext } from './RenderCallbackContext'
 
 export type FilamentProviderProps = PropsWithChildren<
   Omit<EngineProps, 'context'> &
@@ -18,7 +19,7 @@ export type FilamentProviderProps = PropsWithChildren<
 /**
  * Creates an engine and all filament APIs and provides them to the children using the react context.
  *
- * @private
+ * @note You only need this for doing offscreen recording. For an on-screen surface use the `Filament` component.
  */
 export function FilamentAPIContextProvider({ children, fallback, config, backend, frameRateOptions, ...viewProps }: FilamentProviderProps) {
   // First create the engine, which we need to create (almost) all other filament APIs
@@ -81,7 +82,7 @@ export function FilamentAPIContextProvider({ children, fallback, config, backend
   return (
     <FilamentContext.Provider value={value}>
       <Configurator rendererProps={rendererProps} viewProps={viewProps}>
-        {children}
+        <RenderCallbackContext.RenderContextProvider>{children}</RenderCallbackContext.RenderContextProvider>
       </Configurator>
     </FilamentContext.Provider>
   )