react-native-filament/lib/commonjs/react/FilamentScene.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FilamentScene = FilamentScene;
var _react = _interopRequireWildcard(require("react"));
var _FilamentProxy = require("../native/FilamentProxy");
var _useEngine = require("../hooks/useEngine");
var _useDisposableResource = require("../hooks/useDisposableResource");
var _reactNativeWorkletsCore = require("react-native-worklets-core");
var _Configurator = require("./Configurator");
var _useFilamentContext = require("../hooks/useFilamentContext");
var _RenderCallbackContext = require("./RenderCallbackContext");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * The `<FilamentScene>` holds contextual values for a Filament rendering scene.
 *
 * You need to wrap your rendering scene (= a component that uses `<FilamentView>`, hooks or
 * other Filament components) with a `<FilamentScene>`.
 *
 * @note Make sure to wrap your scene in a parent component, otherwise the React context cannot be inferred.
 * @example
 * ```tsx
 * function Scene() {
 *   // in here you can use Filament's hooks and components
 *   return (
 *    <FilamentView style={styles.container}>
 *      <DefaultLight />
 *      <Model source={{ uri: modelPath }} />
 *    </FilamentView>
 *  )
 * }
 *
 * export function RocketModel() {
 *   // in here you only need to wrap the child-component with <FilamentScene>
 *   return (
 *     <FilamentScene>
 *       <Scene />
 *     </FilamentScene>
 *   )
 * }
 * ```
 */
function FilamentScene({
  children,
  fallback,
  config,
  backend,
  frameRateOptions,
  ...viewProps
}) {
  // First create the engine, which we need to create (almost) all other filament APIs
  const engine = (0, _useEngine.useEngine)({
    config,
    backend,
    context: _FilamentProxy.FilamentWorkletContext
  });

  // Create all Filament APIs using the engine
  const transformManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.createTransformManager()), [engine]);
  const renderableManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.createRenderableManager()), [engine]);
  const scene = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.getScene()), [engine]);
  const lightManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.createLightManager()), [engine]);
  const view = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.getView()), [engine]);
  const camera = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.getCamera()), [engine]);
  const renderer = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.createRenderer()), [engine]);
  const nameComponentManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine?.createNameComponentManager()), [engine]);

  // Create a choreographer for this context tree
  const choreographer = (0, _useDisposableResource.useDisposableResource)((0, _reactNativeWorkletsCore.useWorklet)(_FilamentProxy.FilamentWorkletContext, () => {
    'worklet';

    return _FilamentProxy.FilamentProxy.createChoreographer();
  }));

  // Construct the context object value:
  const value = (0, _react.useMemo)(() => {
    if (transformManager == null || renderableManager == null || scene == null || lightManager == null || view == null || camera == null || renderer == null || nameComponentManager == null || choreographer == null || engine == null) {
      return undefined;
    }
    return {
      engine,
      transformManager,
      renderableManager,
      scene,
      lightManager,
      view,
      camera,
      renderer,
      nameComponentManager,
      workletContext: _FilamentProxy.FilamentWorkletContext,
      choreographer: choreographer
    };
  }, [engine, transformManager, renderableManager, scene, lightManager, view, camera, renderer, nameComponentManager, choreographer]);
  const rendererProps = (0, _react.useMemo)(() => ({
    frameRateOptions
  }), [frameRateOptions]);

  // If the APIs aren't ready yet render the fallback component (or nothing)
  if (value == null) return fallback ?? null;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useFilamentContext.FilamentContext.Provider, {
    value: value,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Configurator.Configurator, {
      rendererProps: rendererProps,
      viewProps: viewProps,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RenderCallbackContext.RenderCallbackContext.RenderContextProvider, {
        children: children
      })
    })
  });
}
//# sourceMappingURL=FilamentScene.js.map