While the Babylon platform can power any number of graphics scenarios, rendering a 3D model is a very common one. The Babylon Viewer is created specifically for this scenario and provides a simple, robust solution for rendering a 3D model in a web page or native app.
The 3D model rendered at the top of this page can be rendered on your own page with the simple code snippet below!
The Babylon Viewer makes it easy to load, view, and interact with a 3D model on the Web. With only a few lines of code, gltf/glb, obj, stl and also Gaussian Splats (splat/ply) files can be loaded into a web experience. Rendering characteristics can be easily be configured, such as lighting and skybox through the environment attribute.
Supports the Babylon.js WebGPU engine implementation, and its usage of render bundles, for a faster rendering of complex models. It is as simple as using the engine attribute to specify the default engine (WebGL or WebGPU).
This new Babylon Viewer has a smaller bundle footprint (469KB distribution). Dynamic imports are used to defer loading formats (gltf/glb, obj, splat/ply) and capabilities (audio or animation for example) depending on the model that is loaded. This reduces the download burden on the end user and reduces the time to render the first frame.
The Babylon Viewer includes a default UI for various capabilities, such as animation. This Default UI can be changed via various CSS variables, parts, and slots. For unlimited customization, it also exposes the underlying Babylon.js components so that it can fully be adapted to specific scenarios and needs.
Can be used in the browser or in native apps. Viewer is a lower level JavaScript class that implements the bulk of the features, and can be used in any Babylon context (in the browser using pure HTML, in the browser using React, or even in Babylon Native).
The Babylon Viewer has a rich feature set to support the most common 3D model viewing scenarios. Both WebGL and WebGPU are supported, with improved performance when using WebGPU. It also supports various power optimizations, such as pausing rendering when the viewer is not visible.
Easily switch between material variants that are included in a glTF. This is a common e-commerce scenario.
Define points of interest on the model surface and smoothly transition the camera to them.
Create screen space annotations with arbitrary html that can be used to label parts of the model.
