Merge branch 'main' of github.com:margelo/react-native-filament into …

…chore/docs

package/example/Shared/assets/background_image.mat

@@ -0,0 +1,54 @@
+material {
+    name : Image,
+    parameters : [
+        {
+            type : sampler2d,
+            name : image
+        },
+        {
+            type : mat3,
+            name : transform,
+            precision : high
+        },
+        {
+            type : float3,
+            name : backgroundColor
+        },
+        {
+            type : int,
+            name : showImage
+        }
+    ],
+    variables : [
+        imageUV
+    ],
+    vertexDomain : device,
+    depthWrite : false,
+    shadingModel : unlit,
+    variantFilter : [ skinning, shadowReceiver, vsm ],
+    culling: none
+}
+
+vertex {
+    void materialVertex(inout MaterialVertexInputs material) {
+        material.imageUV.st = getPosition().st * 0.5 + 0.5;
+    }
+}
+
+fragment {
+    void material(inout MaterialInputs material) {
+        prepareMaterial(material);
+
+        vec4 bg = vec4(materialParams.backgroundColor, 1.0);
+        highp vec2 uv = (materialParams.transform * vec3(saturate(variable_imageUV.st), 1.0)).st;
+        if (materialParams.showImage == 0 || uv.s > 1.0 || uv.s < 0.0 || uv.t < 0.0 || uv.t > 1.0) {
+            material.baseColor = bg;
+        } else {
+            uv.t = 1.0 - uv.t;
+            vec4 color = max(texture(materialParams_image, uv.st), 0.0);
+            color.rgb *= color.a;
+            // Manual, pre-multiplied srcOver with opaque destination optimization
+            material.baseColor.rgb = color.rgb + bg.rgb * (1.0 - color.a);
+        }
+    }
+}

package/example/Shared/assets/transparent_shadow_material.mat

@@ -0,0 +1,19 @@
+material {
+    name : GroundShadow,
+    blending : transparent,
+    shadingModel : unlit,
+    shadowMultiplier : true,
+    parameters : [
+        {
+            type : float,
+            name : strength
+        }
+    ],
+}
+
+fragment {
+    void material(inout MaterialInputs material) {
+        prepareMaterial(material);
+        material.baseColor = vec4(0.0, 0.0, 0.0, materialParams.strength);
+    }
+}

package/example/Shared/metro.config.js

@@ -15,7 +15,7 @@ const config = {
   watchFolders: [root],
 
   resolver: {
-    assetExts: ['glb', 'ktx', 'matc', ...defaultConfig.resolver.assetExts],
+    assetExts: ['glb', 'ktx', 'filamat', ...defaultConfig.resolver.assetExts],
   },
 
   transformer: {

package/example/Shared/scripts/compile-materials.sh

@@ -13,7 +13,7 @@ fi
 for file in ./assets/*.mat; do
   # Extract the filename without the extension
   filename=$(basename -- "$file")
-  compiled_filename="${filename%.*}.matc"
+  compiled_filename="${filename%.*}.filamat"
   echo "Compiling $file to $compiled_filename"
   # Compile the material
   $matc_path --platform mobile --api all -o ."/assets/$compiled_filename" "$file"

package/example/Shared/src/AnimatedRotate.tsx

@@ -1,44 +1,46 @@
 import * as React from 'react'
 import { StyleSheet } from 'react-native'
-import { FilamentScene, FilamentView, Camera, Skybox, Model, DefaultLight, RenderCallback, ModelInstance } from 'react-native-filament'
+import {
+  FilamentScene,
+  FilamentView,
+  Camera,
+  Skybox,
+  DefaultLight,
+  RenderCallback,
+  useModel,
+  ModelRenderer,
+  useFilamentContext,
+} from 'react-native-filament'
 import DroneGlb from '~/assets/buster_drone.glb'
-import { useSharedValue } from 'react-native-worklets-core'
 import { useCallback } from 'react'
-import { Rotation } from '../../../src/react/TransformContext'
 
-// TODO: i think this can be simplified by updating the transform on every frame using transform operations
 function Renderer() {
-  const rotation = useSharedValue<Rotation>({
-    angleInRadians: 0,
-    axis: [0, 1, 0],
-  })
+  const model = useModel(DroneGlb)
+  const rootEntity = model.state === 'loaded' ? model.rootEntity : undefined
 
+  const { transformManager } = useFilamentContext()
   const renderCallback: RenderCallback = useCallback(() => {
     'worklet'
 
-    rotation.value.angleInRadians += 0.01
-    if (rotation.value.angleInRadians >= Math.PI * 2) {
-      // reset / don't overflow
-      rotation.value.angleInRadians = 0
+    if (rootEntity == null) {
+      return
     }
 
-    // need to make a new object ref so that the listener fires
-    rotation.value = {
-      angleInRadians: rotation.value.angleInRadians,
-      axis: rotation.value.axis,
-    }
-  }, [rotation])
+    transformManager.setEntityRotation(
+      rootEntity,
+      0.01,
+      [0, 1, 0],
+      true // multiply with current transform, as this is called every frame we advance the rotation
+    )
+  }, [rootEntity, transformManager])
 
   return (
     <FilamentView style={styles.filamentView} enableTransparentRendering={false} renderCallback={renderCallback}>
       <Camera />
       <DefaultLight />
       <Skybox colorInHex="#88defb" />
 
-      <Model source={DroneGlb} transformToUnitCube scale={[3, 3, 3]}>
-        {/* Note: we apply the rotation individually as the above transformations are multiplying, while the one for the rotation, shouldn't */}
-        <ModelInstance index={0} rotate={rotation} multiplyWithCurrentTransform={false} />
-      </Model>
+      <ModelRenderer model={model} transformToUnitCube scale={[3, 3, 3]} />
     </FilamentView>
   )
 }

package/example/Shared/src/AnimatedRotateSharedValues.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { StyleSheet } from 'react-native'
+import { FilamentScene, FilamentView, Camera, Skybox, DefaultLight, RenderCallback, Model, ModelInstance } from 'react-native-filament'
+import DroneGlb from '~/assets/buster_drone.glb'
+import { useCallback } from 'react'
+import { useSharedValue } from 'react-native-worklets-core'
+import { Rotation } from '../../../src/react/TransformContext'
+
+function Renderer() {
+  const rotation = useSharedValue<Rotation>({
+    angleInRadians: 0,
+    axis: [0, 1, 0],
+  })
+
+  const renderCallback: RenderCallback = useCallback(() => {
+    'worklet'
+
+    rotation.value.angleInRadians += 0.01
+    if (rotation.value.angleInRadians >= Math.PI * 2) {
+      // reset / don't overflow
+      rotation.value.angleInRadians = 0
+    }
+
+    // need to make a new object ref so that the listener fires
+    rotation.value = {
+      angleInRadians: rotation.value.angleInRadians,
+      axis: rotation.value.axis,
+    }
+  }, [rotation])
+
+  return (
+    <FilamentView style={styles.filamentView} enableTransparentRendering={false} renderCallback={renderCallback}>
+      <Camera />
+      <DefaultLight />
+      <Skybox colorInHex="#88defb" />
+
+      <Model source={DroneGlb} transformToUnitCube scale={[3, 3, 3]}>
+        {/* Note: we apply the rotation individually as the above transformations are multiplying, while the one for the rotation, shouldn't */}
+        <ModelInstance index={0} rotate={rotation} multiplyWithCurrentTransform={false} />
+      </Model>
+    </FilamentView>
+  )
+}
+
+export function AnimatedRotateSharedValues() {
+  return (
+    <FilamentScene>
+      <Renderer />
+    </FilamentScene>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  filamentView: {
+    flex: 1,
+  },
+})

package/example/Shared/src/App.tsx

@@ -12,14 +12,12 @@ import { LoadFromFile } from './LoadFromFile'
 import { NoneTransparent } from './NoneTransparent'
 import { MultipleInstances } from './MultipleInstances'
 import { AnimatedRotate } from './AnimatedRotate'
-// import { ChangeMaterials } from './ChangeMaterials'
-// import { PhysicsCoin } from './PhysicsCoin'
-// import { FadeOut } from './FadeOut'
-// import { CastShadow } from './CastShadow'
-// import { WorkletExample } from './WorkletExample'
-// import { ScaleEffect } from './ScaleEffect'
-// import { FadingLightExample } from './FadingLightExample'
-// import { ChangeGoldenMaterials } from './ChangeGoldenMaterial'
+import { AnimatedRotateSharedValues } from './AnimatedRotateSharedValues'
+import { PhysicsCoin } from './PhysicsCoin'
+import { FadeOut } from './FadeOut'
+import { CastShadow } from './CastShadow'
+import { ScaleEffect } from './ScaleEffect'
+import { ChangeMaterials } from './ChangeMaterials'
 
 function NavigationItem(props: { name: string; route: string }) {
   const navigation = useNavigation()
@@ -58,11 +56,12 @@ function HomeScreen() {
       <NavigationItem name="🫥 None Transparent rendering" route="NoneTransparent" />
       <NavigationItem name="🤖 Multiple Instances" route="MultipleInstances" />
       <NavigationItem name="🔄 Animated Rotate" route="AnimatedRotate" />
-      {/* <NavigationItem name="🎨 Change Materials" route="ChangeMaterials" />
+      <NavigationItem name="🔄 Animated Rotate w/ Shared Values" route="AnimatedRotateSharedValues" />
       <NavigationItem name="💰 Physics Coin" route="PhysicsCoin" />
-      <NavigationItem name="🌑 Cast Shadow" route="CastShadow" />
       <NavigationItem name="😶‍🌫️ Fade Out" route="FadeOut" />
-      <NavigationItem name="↕️ Scale Effect" route="ScaleEffect" /> */}
+      <NavigationItem name="🌑 Cast Shadow" route="CastShadow" />
+      <NavigationItem name="↕️ Scale Effect" route="ScaleEffect" />
+      <NavigationItem name="🎨 Change Materials" route="ChangeMaterials" />
     </ScrollView>
   )
 }
@@ -97,15 +96,12 @@ function App() {
           <Stack.Screen name="NoneTransparent" component={NoneTransparent} />
           <Stack.Screen name="MultipleInstances" component={MultipleInstances} />
           <Stack.Screen name="AnimatedRotate" component={AnimatedRotate} />
-          {/* TODO: Migrate */}
-          {/* <Stack.Screen name="ChangeMaterials" component={ChangeMaterials} />
+          <Stack.Screen name="AnimatedRotateSharedValues" component={AnimatedRotateSharedValues} />
           <Stack.Screen name="PhysicsCoin" component={PhysicsCoin} />
           <Stack.Screen name="FadeOut" component={FadeOut} />
-          <Stack.Screen name="ChangeMaterials" component={ChangeGoldenMaterials} />
           <Stack.Screen name="CastShadow" component={CastShadow} />
-          <Stack.Screen name="WorkletExample" component={WorkletExample} />
           <Stack.Screen name="ScaleEffect" component={ScaleEffect} />
-          <Stack.Screen name="FadingLight" component={FadingLightExample} /> */}
+          <Stack.Screen name="ChangeMaterials" component={ChangeMaterials} />
           <Stack.Screen name="Test" component={TestScreen} />
         </Stack.Navigator>
       </NavigationContainer>