chore: change FilamentContext -> FilamentScene + cleanups (#222)

README.md

@@ -39,21 +39,21 @@ cd ios && pod install
 ### Example
 
 ```tsx
-import { FilamentContext, FilamentView, Model, Camera } from 'react-native-filament'
+import { FilamentScene, FilamentView, Model, Camera } from 'react-native-filament'
 
 function App() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <FilamentView
         style={{ width: 100, height: 100 }}
         model={model}
       >
         // Render with the default camera:
-        <Camera /> 
+        <Camera />
         // Add a model to the scene (only glb supported yet):
         <Model source={require('./duck.glb')}>
       </FilamentView>
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 ```
@@ -85,7 +85,7 @@ yarn build-bullet3
 yarn build-filament:release # or yarn build-filament:debug
 ```
 
-You can then build one of the example apps in `package/example/AppExamplePaper` or `package/example/AppExampleFabric`. 
+You can then build one of the example apps in `package/example/AppExamplePaper` or `package/example/AppExampleFabric`.
 
 ### Adopting at scale
 
@@ -102,4 +102,4 @@ If you need help with integrating react-native-filament in your app or have addi
 
 The example app in this project uses several free assets:
 - <a href="https://www.freepik.com/free-ai-image/space-travel-collage-design_94964745.htm#fromView=search&page=1&position=1&uuid=cf66f9c3-2d56-4228-a3cf-de7c07d418fb">Image by freepik</a>
-- "Buster Drone" (https://skfb.ly/TBnX) by LaVADraGoN is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).
+- "Buster Drone" (https://skfb.ly/TBnX) by LaVADraGoN is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).

package/example/Shared/src/AnimatedRotate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import { FilamentContext, FilamentView, Camera, Skybox, Model, DefaultLight, RenderCallback, ModelInstance } from 'react-native-filament'
+import { FilamentScene, FilamentView, Camera, Skybox, Model, DefaultLight, RenderCallback, ModelInstance } from 'react-native-filament'
 import DroneGlb from '~/assets/buster_drone.glb'
 import { useSharedValue } from 'react-native-worklets-core'
 import { useCallback } from 'react'
@@ -45,9 +45,9 @@ function Renderer() {
 
 export function AnimatedRotate() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/AnimationTransitions.tsx

@@ -1,7 +1,7 @@
 import { useNavigation } from '@react-navigation/native'
 import * as React from 'react'
 import { Alert, Button, ScrollView, StyleSheet, View } from 'react-native'
-import { FilamentContext, FilamentView, Camera, Model, Animator, AnimationItem, Entity, DefaultLight } from 'react-native-filament'
+import { FilamentScene, FilamentView, Camera, Model, Animator, AnimationItem, Entity, DefaultLight } from 'react-native-filament'
 import { useSharedValue } from 'react-native-worklets-core'
 import HipHopGirlGlb from '~/assets/hiphopgirl.glb'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -60,9 +60,9 @@ export function AnimationTransitions() {
 
   return (
     <SafeAreaView style={styles.container}>
-      <FilamentContext key={count}>
+      <FilamentScene key={count}>
         <Renderer />
-      </FilamentContext>
+      </FilamentScene>
       <Button title="Rerender" onPress={increment} />
     </SafeAreaView>
   )

package/example/Shared/src/AnimationTransitionsRecording.tsx

@@ -10,7 +10,7 @@ import {
   useRecorder,
   useRecorderRenderLoop,
   Camera,
-  FilamentContext,
+  FilamentScene,
   DefaultLight,
 } from 'react-native-filament'
 import { useRunOnJS, useSharedValue } from 'react-native-worklets-core'
@@ -160,9 +160,9 @@ function Renderer() {
 export function AnimationTransitionsRecording() {
   return (
     // Provide the API necessary for recording (accessing the RNF apis) in a react context
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/CameraPan.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Camera, DefaultLight, FilamentContext, FilamentView, Model, useCameraManipulator } from 'react-native-filament'
+import { Camera, DefaultLight, FilamentScene, FilamentView, Model, useCameraManipulator } from 'react-native-filament'
 import { Gesture, GestureDetector } from 'react-native-gesture-handler'
 import { Dimensions, StyleSheet, View } from 'react-native'
 import { useSharedValue } from 'react-native-worklets-core'
@@ -59,9 +59,9 @@ function Scene() {
 export function CameraPan() {
   return (
     <View style={styles.container}>
-      <FilamentContext>
+      <FilamentScene>
         <Scene />
-      </FilamentContext>
+      </FilamentScene>
     </View>
   )
 }

package/example/Shared/src/ChangeMaterials.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { Button, StyleSheet, View } from 'react-native'
-import { FilamentView, useBuffer, useModel, useFilamentContext, useWorkletCallback, Camera, FilamentContext } from 'react-native-filament'
+import { FilamentView, useBuffer, useModel, useFilamentContext, useWorkletCallback, Camera, FilamentScene } from 'react-native-filament'
 
 import PenguModel from '~/assets/pengu.glb'
 import LeftEyeTexture from '~/assets/eye_full_texture_left_blue.jpg'
@@ -56,9 +56,9 @@ function Renderer() {
 
 export function ChangeMaterials() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/ImageExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import { BackgroundImage, Camera, DefaultLight, FilamentContext, FilamentView, Model } from 'react-native-filament'
+import { BackgroundImage, Camera, DefaultLight, FilamentScene, FilamentView, Model } from 'react-native-filament'
 import BackgroundImageMaterial from '~/assets/background_image.matc'
 
 const imageResource = require('~/assets/background.jpg')
@@ -19,9 +19,9 @@ function Renderer() {
 
 export function ImageExample() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/LoadFromFile.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useCallback, useState } from 'react'
 import { Button, StyleSheet, View } from 'react-native'
-import { FilamentContext, FilamentView, Camera, Model, DefaultLight } from 'react-native-filament'
+import { FilamentScene, FilamentView, Camera, Model, DefaultLight } from 'react-native-filament'
 import RNFetchBlob from 'rn-fetch-blob'
 
 function Renderer({ assetPath }: { assetPath: string }) {
@@ -41,9 +41,9 @@ export function LoadFromFile() {
     )
   }
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer assetPath={assetPath} />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/MultipleInstances.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { StyleSheet } from 'react-native'
-import { Animator, Camera, DefaultLight, FilamentContext, FilamentView, Model, ModelInstance } from 'react-native-filament'
+import { Animator, Camera, DefaultLight, FilamentScene, FilamentView, Model, ModelInstance } from 'react-native-filament'
 import DroneGlb from '~/assets/buster_drone.glb'
 
 const instances = [0, 1, 2, 3]
@@ -35,9 +35,9 @@ function Renderer() {
 
 export function MultipleInstances() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/example/Shared/src/NoneTransparent.tsx

@@ -1,16 +1,6 @@
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import {
-  FilamentContext,
-  FilamentView,
-  Camera,
-  Skybox,
-  Model,
-  Animator,
-  AnimationItem,
-  DefaultLight,
-  DebugBox,
-} from 'react-native-filament'
+import { FilamentScene, FilamentView, Camera, Skybox, Model, Animator, AnimationItem, DefaultLight, DebugBox } from 'react-native-filament'
 import DroneGlb from '~/assets/buster_drone.glb'
 import { useCallback } from 'react'
 
@@ -35,9 +25,9 @@ function Renderer() {
 
 export function NoneTransparent() {
   return (
-    <FilamentContext>
+    <FilamentScene>
       <Renderer />
-    </FilamentContext>
+    </FilamentScene>
   )
 }
 

package/src/hooks/internal/useApplyTransformations.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 import { Rotation, TransformationProps } from '../../react/TransformContext'
-import { useFilamentContext } from '../../react/Context'
+import { useFilamentContext } from '../useFilamentContext'
 import { AABB, Entity, Float3 } from '../../types'
 import { areFloat3Equal, isWorkletSharedValue } from '../../utilities/helper'
 import { useWorkletEffect } from '../useWorkletEffect'

package/src/hooks/useAnimator.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { FilamentAnimator, FilamentAsset, FilamentInstance } from '../types'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { FilamentModel } from './useModel'
 
 function isFilamentModel(asset: FilamentAsset | FilamentInstance | FilamentModel): asset is FilamentModel {

package/src/hooks/useCameraManipulator.ts

@@ -1,4 +1,4 @@
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { Float3, OrbitCameraManipulatorConfig } from '../types'
 import { useDisposableResource } from './useDisposableResource'
 

package/src/hooks/useConfigureAssetShadow.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { FilamentAsset, RenderableManager } from '../types'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 
 export type UseAssetShadowProps = {
   renderableManager: RenderableManager

package/src/react/Context.tsx → package/src/hooks/useFilamentContext.ts

@@ -25,20 +25,19 @@ export type FilamentContextType = {
   nameComponentManager: NameComponentManager
   workletContext: IWorkletContext
 
-  // TODO: put this in an "internal" separate context?
   /**
+   * This is a private API, do not use this.
    * @private
+   * @internal
    */
-  _choreographer: Choreographer
+  choreographer: Choreographer
 }
-export const Context = React.createContext<FilamentContextType | undefined>(undefined)
+export const FilamentContext = React.createContext<FilamentContextType | undefined>(undefined)
 
 export function useFilamentContext() {
-  const context = React.useContext(Context)
+  const context = React.useContext(FilamentContext)
   if (context === undefined) {
-    throw new Error(
-      'useFilamentContext (and its hooks such as `useScene()`, components like `<Filament />` etc.) must be used within a `<FilamentProvider>` component!'
-    )
+    throw new Error('You tried to use a Filament hook/component without wrapping your component in a <FilamentScene> component!')
   }
   return context
 }

package/src/hooks/useLightEntity.ts

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react'
 import { LightConfig, LightManager } from '../types'
 import { ISharedValue } from 'react-native-worklets-core'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 
 export type UseLightEntityProps =
   | LightConfig

package/src/hooks/useModel.ts

@@ -1,6 +1,6 @@
 import { type BufferSource, useBuffer } from './useBuffer'
 import { FilamentAsset } from '../types/FilamentAsset'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { useDisposableResource } from './useDisposableResource'
 import usePrevious from './usePrevious'
 import { useWorkletEffect } from './useWorkletEffect'

package/src/hooks/useRecorder.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { FilamentProxy } from '../native/FilamentProxy'
 import { useDisposableResource } from './useDisposableResource'
 import { useWorkletEffect } from './useWorkletEffect'

package/src/hooks/useSkybox.ts

@@ -1,4 +1,4 @@
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { FilamentBuffer } from '../native/FilamentBuffer'
 import { useWorkletEffect } from './useWorkletEffect'
 

package/src/hooks/useWorkletCallback.ts

@@ -1,5 +1,5 @@
 import { useWorklet } from 'react-native-worklets-core'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { wrapWithErrorHandler } from '../ErrorUtils'
 
 /**

package/src/hooks/useWorkletEffect.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { getWorkletDependencies, isWorklet } from 'react-native-worklets-core'
 import { wrapWithErrorHandler } from '../ErrorUtils'
 

package/src/hooks/useWorkletMemo.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { useFilamentContext } from '../react/Context'
+import { useFilamentContext } from './useFilamentContext'
 import { wrapWithErrorHandler } from '../ErrorUtils'
 
 export function useWorkletMemo<T>(workletFunction: () => T, dependencies: any[]): T | undefined {

package/src/index.tsx

@@ -26,7 +26,7 @@ export { setLogger } from './utilities/logger/Logger'
 export * from './bullet'
 
 // React API
-export { useFilamentContext } from './react/Context'
+export { useFilamentContext } from './hooks/useFilamentContext'
 export { FilamentViewWithRenderCallbacks as FilamentView } from './react/FilamentViewWithRenderCallbacks'
 export * from './react/Model'
 export * from './react/ModelInstance'
@@ -38,6 +38,6 @@ export * from './react/EnvironmentalLight'
 export * from './react/Light'
 export * from './react/DefaultLight'
 export * from './react/Skybox'
-export * from './react/FilamentContext'
+export * from './react/FilamentScene'
 export * from './react/BackgroundImage'
 export * from './react/DebugBox'

package/src/react/BackgroundImage.tsx

@@ -4,7 +4,7 @@ import { useEntityInScene } from '../hooks/useEntityInScene'
 import { useWorkletCallback } from '../hooks/useWorkletCallback'
 import { useWorkletMemo } from '../hooks/useWorkletMemo'
 import { Mat3f } from '../types'
-import { useFilamentContext } from './Context'
+import { useFilamentContext } from '../hooks/useFilamentContext'
 
 export type BackgroundImageProps = {
   source: BufferSource

package/src/react/Camera.tsx

@@ -1,6 +1,6 @@
 import { useSharedValue } from 'react-native-worklets-core'
 import { CameraManipulator, Float3 } from '../types'
-import { useFilamentContext } from './Context'
+import { useFilamentContext } from '../hooks/useFilamentContext'
 import { RenderCallbackContext } from './RenderCallbackContext'
 
 export type CameraProps = {

package/src/react/Configurator.tsx

@@ -7,7 +7,7 @@ import {
   View,
   optionsToJSI,
 } from '../types'
-import { useFilamentContext } from './Context'
+import { useFilamentContext } from '../hooks/useFilamentContext'
 import { makeAmbientOcclusionHostObject } from '../utilities/makeAmbientOcclusionHostObject'
 import { makeDynamicResolutionHostObject } from '../utilities/makeDynamicResolutionHostObject'
 
@@ -30,7 +30,7 @@ export type ConfiguratorProps = PropsWithChildren<{
 
 /**
  * Takes configurations as props and applies them using the imperative API.
- * Needs to have a valid `FilamentContext` in the tree.
+ * Needs to have a valid `FilamentScene` in the tree.
  *
  * @private
  */