markdown-body entry-content container-lg" itemprop="text">

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

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/).

License

margelo/react-native-filament

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 88

Packages 0

Uh oh!

Contributors 14

Languages

Packages