@maptiler/3d/dist/WebGLRenderManager.d.ts

Add 3D things to your map, plugin for MapTiler SDK

import { CustomLayerInterface, CustomRenderMethodInput, MapEventType, Map as MapSDK, Point2D } from '@maptiler/sdk';
import { Camera, Scene } from 'three';
import { Layer3D } from './Layer3D';
/**
 * Manages the WebGL rendering for all 3D layers on the map.
 * This class is responsible for setting up the THREE.js WebGLRenderer,
 * adding and removing layers, and running the animation loop.
 * It ensures that all 3D content is rendered by a single ThreeJS renderer.
 */
export declare class WebGLRenderManager {
    /**
     * The MapTiler SDK Map instance.
     * @type {MapSDK}
     */
    private map;
    /**
     * The WebGL rendering context.
     * @type {WebGL2RenderingContext | WebGLRenderingContext}
     */
    private gl;
    /**
     * A map of animation loops, keyed by a unique ID.
     * These loops are executed on every frame.
     * @type {Map<string, () => void>}
     */
    private animationLoops;
    /**
     * A map storing data for each 3D layer, including the layer instance,
     * its THREE.js scene, and camera.
     * @type {Map<string, { layer: Layer3D; scene: Scene; camera: Camera }>}
     */
    private layerData;
    /**
     * The THREE.js WebGL renderer.
     * @type {WebGLRenderer}
     */
    private renderer;
    /**
     * The custom layer that integrates the WebGLRenderManager with the MapTiler SDK.
     * @type {WebGLManagerLayer}
     */
    private webGLManagerLayer;
    private raycaster;
    private pointer;
    private currentRaycastIntersection;
    /**
     * Constructs a new WebGLRenderManager.
     * @param {object} options - The options for initialization.
     * @param {MapSDK} options.map - The MapTiler SDK map instance.
     * @param {WebGL2RenderingContext | WebGLRenderingContext} options.gl - The WebGL rendering context from the map.
     */
    constructor({ map, gl, }: {
        map: MapSDK;
        gl: WebGL2RenderingContext | WebGLRenderingContext;
    });
    /**
     * Adds a 3D layer to be managed and rendered.
     * @param {Layer3D} layer - The 3D layer to add.
     * @param {Scene} scene - The THREE.js scene associated with the layer.
     * @param {Camera} camera - The THREE.js camera associated with the layer.
     * @returns {this} The instance of the WebGLRenderManager.
     */
    handleAddLayer(layer: Layer3D, scene: Scene, camera: Camera): this;
    /**
     * Disposes of a layer's resources and removes it from the manager.
     * If it's the last layer, it cleans up the renderer and removes the manager layer from the map.
     * @param {string} layerID - The ID of the layer to dispose of.
     */
    dispose(layerID: string): void;
    /**
     * The main animation loop that runs on every frame.
     * It executes all registered animation callbacks.
     */
    animate(): void;
    /**
     * Adds an animation loop for a specific layer.
     * @param {string} animationID - A unique ID for the animation.
     * @param {() => void} callback - The function to call on each animation frame.
     */
    addAnimationLoop(animationID: string, callback: () => void): void;
    /**
     * Removes an animation loop associated with a layer.
     * @param {string} layerID - The ID of the layer whose animation loop should be removed.
     */
    removeAnimationLoop(layerID: string): void;
    /**
     * Renders all managed 3D layers. This is called by the `WebGLManagerLayer`.
     * @param {CustomRenderMethodInput} options - The render options provided by the MapTiler SDK.
     */
    render(options: CustomRenderMethodInput): void;
    /**
     * Handle the mouse click event for a mesh and delegate to the correct layer,
     * which then delegates to the correct Item3D instance which then emits the event.
     * @see {WebGLRenderManager#handleMouseClick}
     * @param event - The event data
     */
    handleMouseClick(event: MapEventType["click"]): void;
    /**
     * Handle the mouse move event for a mesh and delegate to the correct layer,
     * which then delegates to the correct Item3D instance which then emits the mouseneter or mouseleave event.
     * @see {WebGLRenderManager#handleMouseMove}
     * @param point - The mouse position in screen coordinates.
     */
    handleMouseMove(point: Point2D): void;
    /**
     * Handle the mouse double click event for a mesh, and delegate to the correct layer,
     * which then delegates to the correct Item3D instance which then emits the dblclick event.
     * NOTE: Dblclick events also fire a two click events for each click.
     * @see {WebGLRenderManager#handleMouseDoubleClick}
     * @param event - The event data
     */
    handleMouseDoubleClick(event: MapEventType["dblclick"]): void;
    /**
     * Handle the mouse down event for a mesh and delegate to the correct layer,
     * which then delegates to the correct Item3D instance which then emits the mousedown event.
     * @see {WebGLRenderManager#handleMouseDown}
     * @param event - The event data
     */
    handleMouseDown(event: MapEventType["mousedown"]): void;
    /**
     * Handle the mouse up event for a mesh and delegate to the correct layer,
     * which then delegates to the correct Item3D instance which then emits the mouseup event.
     * @see {WebGLRenderManager#handleMouseUp}
     * @param event - The event data
     */
    handleMouseUp(event: MapEventType["mouseup"]): void;
    /**
     * Raycast from the mouse position into the scene.
     * @param point - The mouse position in screen coordinates.
     * @param scene - The THREE.js scene to raycast into.
     * @param camera - The THREE.js camera to use for the raycast.
     * @returns {Array<Intersection>} The intersects with the scene.
     */
    private raycast;
    /**
     * Clears the renderer's buffers.
     */
    clear(): void;
}
/**
 * Factory function to get the singleton WebGLRenderManager and add a layer to it.
 * If the manager doesn't exist, it creates one.
 * @param {object} options - The options for adding the layer.
 * @param {MapSDK} options.map - The MapTiler SDK map instance.
 * @param {WebGL2RenderingContext | WebGLRenderingContext} options.gl - The WebGL rendering context.
 * @param {Layer3D} options.layer - The 3D layer to add.
 * @param {Scene} options.scene - The THREE.js scene for the layer.
 * @param {Camera} options.camera - The THREE.js camera for the layer.
 * @returns {WebGLRenderManager} The WebGLRenderManager instance.
 */
export default function addLayerToWebGLRenderManager({ map, gl, layer, scene, camera, }: {
    map: MapSDK;
    gl: WebGL2RenderingContext | WebGLRenderingContext;
    layer: Layer3D;
    scene: Scene;
    camera: Camera;
}): WebGLRenderManager;
/**
 * A custom layer for the MapTiler SDK that integrates the WebGLRenderManager
 * into the map's rendering pipeline. This layer's `render` method is called
 * by the map on every frame, which in turn calls the `render` method of the
 * WebGLRenderManager.
 */
export declare class WebGLManagerLayer implements CustomLayerInterface {
    readonly id = "webgl-manager-layer";
    readonly type = "custom";
    readonly renderingMode = "3d";
    private map;
    private webGLRenderManager;
    /**
     * Constructs a new WebGLManagerLayer.
     * @param {WebGLRenderManager} webGLRenderManager - The WebGLRenderManager instance to use for rendering.
     */
    constructor(webGLRenderManager: WebGLRenderManager);
    private handleMouseMove;
    private handleMouseClick;
    private handleMouseDoubleClick;
    private handleMouseDown;
    private handleMouseUp;
    /**
     * Called when the layer is added to the map. (No-op)
     */
    onAdd(map: MapSDK): void;
    /**
     * Called when the layer is removed from the map. (No-op)
     */
    onRemove(): void;
    /**
     * Called by the map to render the layer.
     * @param {WebGLRenderingContext | WebGL2RenderingContext} _gl - The WebGL context (unused).
     * @param {CustomRenderMethodInput} options - The render options from the map.
     */
    render(_gl: WebGLRenderingContext | WebGL2RenderingContext, options: CustomRenderMethodInput): void;
}