react-native-filament

Introduction to react-native-filament

The react-native-filament stands as a remarkable integration in the world of 3D rendering for React Native applications. This dynamic tool provides developers with a robust platform for creating visually impressive 3D scenes within mobile apps. Encompassing a variety of advanced features, it seamlessly combines ease of use with powerful performance.

Key Features

• Physically Based Rendering: Using Google's Filament, react-native-filament offers native C++ support for physically based rendering, ensuring realistic graphics.
• Advanced Physics: Through bullet3, this tool provides native C++ physics capabilities, simulating real-world interactions.
• GPU Acceleration: The rendering engine is GPU-accelerated by Metal and OpenGL/Vulkan, ensuring fast and efficient graphic processing.
• Threaded Rendering: Rendering occurs on separate threads, which optimizes performance and responsiveness of apps.
• Reactive Declarative API: Its API is both easy to use and well-documented, making integration and development intuitive.
• Compatibility: The engine supports both old and new architectures, maximizing accessibility.

Installation Guide

Developers interested in adopting react-native-filament can follow a detailed installation guide available in the documentation. This ensures a smooth setup experience.

Example Usage

Below is a simple example of how to utilize react-native-filament within a React Native application:

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

function App() {
  return (
    <FilamentScene>
      <FilamentView
        style={{ width: 100, height: 100 }}
        model={model}
      >
        <Camera />
        <DefaultLight />
        <Model source={require('./duck.glb')}/>
      </FilamentView>
    </FilamentScene>
  )
}

In this illustration, FilamentScene and FilamentView are used to create the visual scene, with models rendered using a default camera and lighting setup.

Advantages Over Competing Libraries

While libraries like expo-gl paired with expo-three are popular, react-native-filament offers distinct benefits:

• Out-of-the-box glb Support: Easily manages .glb files essential for 3D models.
• Modern Rendering Technology: Utilizes Metal on iOS, unlike expo-gl which relies on deprecated OpenGL ES.
• Efficient Thread Management: Employs a separate thread for rendering, enhancing performance.
• Proven Stability: Already implemented in production apps with millions of users.

Contribution Opportunities

The development community is encouraged to contribute to the project. To get started, clone the repository and update submodules with:

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

Install node modules and build the necessary components:

cd package
yarn
yarn build-bullet3
yarn build-filament:release

Explore the example apps to gain deeper insights into its capabilities.

Scaling and Support

React-native-filament is provided as-is, however, for integration assistance or specific feature requests, developers can contact the team at Margelo.io.

Community and Social Engagement

• Twitter: Follow the latest updates here.
• Discord: Join the conversation with the vibrant Margelo Community.

Gratitude and Attributions

• Primary Funder: Developed with support from Slay, creators of "Pengu."
• Core Libraries: Relies heavily on Google's Filament and Bullet Physics's Bullet3, central to its functionality.
• Creative Commons and Asset Use: Examples utilize various free assets and attributions, underlining the community-oriented ethos of the project.

React-native-filament embodies a blend of innovation, efficiency, and community engagement, making it an excellent choice for developers eager to explore 3D rendering within React Native.