Skip to content

Latest commit

 

History

History
121 lines (82 loc) · 4.7 KB

README.md

File metadata and controls

121 lines (82 loc) · 4.7 KB
Raw
react-native-filament

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

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: