Features

react-native-filament is a powerful 3D rendering engine for React Native. It features:

• 🧊 Native C++ physically based rendering using filament
• 🏀 Native C++ physics using bullet3
• 🏎️ GPU-accelerated by Metal and OpenGL/Vulkan
• 📹 Renders on separate Threads
• 📦 Easy to use reactive declarative API
• 📚 Well documented
• ✅ Supports old and new arch

Installation

See the installation guide in the docs.

Example

import { FilamentScene, FilamentView, Model, Camera, DefaultLight } from 'react-native-filament'

function App() {
  return (
    <FilamentScene>
      <FilamentView
        style={{ width: 100, height: 100 }}
        model={model}
      >

        {/* Render with the default camera and light: */}
        <Camera />
        <DefaultLight >

        {/* Add a model to the scene (only glb supported yet): */}
        <Model source={require('./duck.glb')}>

      </FilamentView>
    </FilamentScene>
  )
}

See the example app

Comparison with other libraries

One library to render 3D content is expo-gl usually used together with expo-three. react-native-filament has a few advantages over expo-gl:

• Supports using glb files out of the box
• On iOS react-native-filament uses Metal, where expo-gl is using the deprecated OpenGL ES apple framework
• The rendering happens on the JS thread for expo-three, where react-native-filament uses a separate thread (and filament processes the rendering commands in a pool of different threads)
• filament is battle tested and react-native-filament is used in production apps with millions of users already, proven to be highly stable

Contributing

We welcome contributions to react-native-filament! 🎉

After cloning the repo make sure you have the submodules clones as well:

git submodule update --init --recursive --depth 1

Install all node modules (including the examples)

cd package
yarn

And finally build filament and bullet3:

# Inside ./package
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.

Adopting at scale

react-native-filament is provided as is.

If you need help with integrating react-native-filament in your app or have additional bugfixing or feature requests, reach out to us at margelo.io.

Socials

• 🐦 Follow us on Twitter for updates
• 💬 Join the Margelo Community Discord for chatting about react-native-filament

Attributions & thanks

Slay

react-native-filament was built for- and mostly funded by Slay - the creators of Pengu! 🐧 Without them, react-native-filament wouldn't exist, so thanks Slay! ❤️

Filament and Bullet3

react-native-filament uses filament (an amazing library by Google), and bullet3 (an amazing physics library by Bullet Physics). Without those core libraries and the geniuses behind them, react-native-filament wouldn't exist - so thanks Google & Bullet! ❤️

Copyrights

The example app in this project uses several free assets:

• Image by freepik
• Image by Freepik
• Image by Freepik
• Michelle by mixamo
• "Buster Drone" (https://skfb.ly/TBnX) by LaVADraGoN is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).