README.md

3D Tiles Renderer for Babylon JS

Implementation of the TilesRendererBase class for Babylon js.

See the API reference for full class and method documentation.

Dingo Gap Mars dataset

Google Photorealistic Tiles

Google Photorealistic Tiles + Geospatial Camera Demo

The current implementation has the below limitations:

• Only supports scenes in right-handed mode (scene.useRightHandedSystem = true).
• BoundingBox + Frustum checks are using axis-aligned bounding boxes (rather than Oriented Bounding Boxes), causing false positives.
• Does not yet support the 3DTile boundingRegion.
• Limited caching of tiles.
• I3DM and PNTS are not supported.

Examples

Link	Description
Dingo Gap Mars	Uses ArcRotate camera. Example code in example/babylonjs/index.js
Google Photorealistic Tiles	Uses GeospatialCamera. Example code in example/babylonjs/googleMapsAerial.js

Use

import { Engine, Scene } from '@babylonjs/core';
import { TilesRenderer } from '3d-tiles-renderer/babylonjs';

// create engine
const canvas = document.getElementById( 'renderCanvas' );
const engine = new Engine( canvas, true );

// right handed coordinate system is required
const scene = new Scene( engine );
scene.useRightHandedSystem = true;

// create the babylon tile renderer
const tiles = new TilesRenderer( TILESET_URL, scene );

// ... initialize the camera

// update the tiles
scene.onBeforeRenderObservable.add( () => {

	tiles.update();

} );

// render the scene
engine.runRenderLoop( () => {

	scene.render();

} );