Engine/Scene

Engine

The Engine is a crucial component that drives the rendering process. It is responsible for initializing the rendering context, managing the rendering loop, and handling various graphics-related tasks. Essentially, the engine serves as the bridge between your scene and the hardware that performs the rendering. Responsibilities of an Engine:

Initialization: Sets up the WebGL context or other rendering contexts necessary for drawing 3D graphics.
Rendering Loop: Manages the loop that continuously renders the scene. This loop calls the render function at each frame, allowing for real-time updates and animations.
Resource Management: Manages GPU resources such as textures, shaders, and buffers. It ensures that resources are efficiently allocated and freed.
Handling Inputs: Processes user inputs (e.g., mouse, keyboard) and integrates them into the rendering pipeline.
Performance Optimization: Implements optimizations such as batching and frustum culling to ensure that rendering is performed efficiently.

Props

export type EngineProps = React.PropsWithChildren<{
    /**
    * Whether to use anti-aliasing. If set to true, the engine will apply
    * anti-aliasing to smooth out jagged edges in the rendering.
    * Defaults to `false` if not specified.
    */
    antialias?: boolean;
    
    /**
    * Additional options to configure the Babylon.js engine.
    * This allows you to pass custom options such as `preserveDrawingBuffer` or `stencil`.
    */
    engineOptions?: EngineOptions;
    
    /**
    * Whether the engine should adapt to the device's pixel ratio.
    * This is useful for high-DPI devices to maintain clarity in rendering.
    * Defaults to `false` if not specified.
    */
    adaptToDeviceRatio?: boolean;
    
    /**
    * Additional options to configure a custom loading screen.
    * This allow you to pass a custom React component and an ending animation.
    */
    loadingScreenOptions?: LoadingScreenOptions;
    
    /**
     * This property is typically not required and has no effect when using multiple scenes. Use it only for advanced scenarios.
     * @default 'reactylon-canvas'
     */
    canvasId?: string;
 
    /**
     * @internal
     * This prop is only for testing purpose and should not be passed to this component.
     */
    _nullEngineOptions?: NullEngineOptions;
}>;

Scene

The Scene represents the core container for rendering and managing 3D content. A scene is where all the elements of your 3D environment—such as models, lights, cameras, and effects—are brought together and displayed. In Babylon.js, a scene is required for rendering anything on the WebGL canvas. Responsibilities of a Scene:

Rendering 3D Objects: The scene is responsible for rendering meshes, models, and geometries. All objects must be part of the scene to appear on the screen.
Managing Lights: Lights are added to the scene to illuminate objects. The scene controls how lighting interacts with different materials and meshes.
Handling Cameras: A scene must include at least one camera. The camera defines the perspective from which the scene is viewed.
Physics and Collisions: Scenes can also manage physics simulations, allowing objects to interact with each other in a realistic way (e.g., gravity, collisions).
Post-Processing Effects: Effects such as bloom, depth of field, and more can be applied to a scene to enhance visuals.

Props

export type SceneProps = React.PropsWithChildren<{
    /**
     * This prop should be set only when you have multiple scenes. It represents the canvas of that scene.
     */
    canvas?: HTMLCanvasElement;
    /**
    * Additional options for configuring the scene in Babylon.js.
    * This can include properties such as `autoClear`, `clearColor`, or `environmentTexture`.
    */
    sceneOptions?: SceneOptions;
 
    /**
    * A callback function that is triggered when the scene is fully initialized and ready.
    * This is where you can add your meshes, lights, cameras, or other setup logic.
    *
    * @param scene - The scene instance that is ready.
    */
    onSceneReady?: (scene: Scene) => void;
 
    /**
    * Whether to enable the GUI 3D Manager for handling 3D GUI elements within the scene.
    * If true, the GUI 3D Manager will be enabled by default.
    * Defaults to `false` if not specified.
    */
    isGui3DManager?: boolean;
 
    /**
    * Options for configuring the WebXR default experience, such as enabling teleportation or
    * controller support. This allows easy setup of WebXR functionality in your scene.
    */
    xrDefaultExperienceOptions?: WebXRDefaultExperienceOptions;
 
    /**
    * Optional physics settings for the scene:
    * - gravity vector applied to the physics engine.
    * - physics plugin to be used with the scene.
    */
    physicsOptions?: {
        gravity?: Parameters<BabylonScene['enablePhysics']>[0];
        plugin: Parameters<BabylonScene['enablePhysics']>[1];
    };
 
    /**
     * @internal
     * This prop is only for internal use and should not be passed to this component.
     */
    _context?: EngineContextType;
}>;

Reactylon Native Cameras