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");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * 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 === null || engine === void 0 ? void 0 : engine.createTransformManager()), [engine]);
  const renderableManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.createRenderableManager()), [engine]);
  const scene = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.getScene()), [engine]);
  const lightManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.createLightManager()), [engine]);
  const view = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.getView()), [engine]);
  const camera = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.getCamera()), [engine]);
  const renderer = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : engine.createRenderer()), [engine]);
  const nameComponentManager = (0, _useDisposableResource.useDisposableResource)(() => Promise.resolve(engine === null || engine === void 0 ? void 0 : 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__*/_react.default.createElement(_useFilamentContext.FilamentContext.Provider, {
    value: value
  }, /*#__PURE__*/_react.default.createElement(_Configurator.Configurator, {
    rendererProps: rendererProps,
    viewProps: viewProps
  }, /*#__PURE__*/_react.default.createElement(_RenderCallbackContext.RenderCallbackContext.RenderContextProvider, null, children)));
}
//# sourceMappingURL=FilamentScene.js.map