JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4276
  • Score
    100M100P100Q121401F
  • License MIT

A real-time physically based 3D rendering engine for React Native

Package Exports

  • react-native-filament
  • react-native-filament/lib/commonjs/index.js
  • react-native-filament/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-filament) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: