Babylon Viewer (v2)
Babylon can be used to build just about any kind of 3D or graphical web (or native!) experience. The sky is the limit! That said, a specific but common use case is viewing a single 3D model on a web page. E-commerce is a prime example, where you might just want to render an interactive 3D model for a piece of furniture, a shoe, an engine part, etc. Since this use case is so common, we want it to be super simple to achieve with Babylon, and that’s what the new Babylon Viewer is all about!
Why do we need a Viewer?
Simplicity is a core tenet of Babylon, and it’s true that it doesn’t take much code to setup a canvas, engine, and scene and load a model. But a lot more goes into making a great model viewing experience:
- Configuring the best rendering modes (such as WebGL vs. WebGPU), running an efficient render loop…
- Showing loading progress, scale normalization (when appropriate), efficiently supporting multiple formats and multiple glTF extensions…
- Setting up a skybox, using environment lighting when possible, alternate lighting configurations, shadows, tone mapping…
- Interaction hints, page scrolling vs. camera orbit on pointer input…
- Suspending/resuming camera auto orbit, points of interest, animations when resetting/changing the camera pose…
- Selecting/starting/stopping and scrubbing animations, switching between material variants…
- Entering/exiting full screen, WebXR and XR alternatives (like QuickLook)…
- And more!
A model viewer might start simple, but it can get complex quickly!
What about the “old” Babylon Viewer?
Back in 2017 (7 years ago!) a Babylon Viewer was created, was evolved over the course of a year or so, and since then has been more or less dormant. This existing Babylon Viewer made design choices that resulted in large bundles with poor tree shaking and was heavily entrenched in legacy tech (Handlebars, UMD, etc.). After some consideration, we decided it would be more efficient to just start over and replace the existing Babylon Viewer with the new one once we are close enough to feature parity.
Design Principles
The Babylon Viewer is not the only solution out there for viewing 3D models, but it is a solution that builds on top of Babylon tech, and it has its own design principles, some of which differentiate it from alternatives.
Easy to Integrate
It should be dead simple to use the Babylon Viewer to render a model in an app. For example, you can already use the new Babylon Viewer in pure html relying on ESM (no bundler) like this:
The Viewer package also includes library files that can easily be used with a bundler as well (without bringing its own copy of the Babylon packages it depends on).
The bulk of the Viewer logic and state lives in a lower pure JS layer, which is also simple to use:
Lastly, we also plan to introduce a “Viewer Configurator” tool. This will let you fully configure the Viewer through UI, see a real time preview, and get the associated code snippet to reproduce exactly what you see on screen.
Compact
The old Babylon Viewer had a very large footprint (in terms of final bundle size). This was partly because of design decisions of the old Viewer, and partly because of limitations of @babylonjs/core and @babylonjs/loaders. For the new Viewer, minimizing final bundle size is a top priority as it can reduce hosting costs and reduce the time before the first frame is rendered. Currently the new Viewer will download about 470kb (compressed) to render a basic glTF model.
We are driving size down by:
- Introducing tooling to deeply understand the composition of a final bundle when using the Viewer as well as identifying code that is not actually executed at runtime.
- Making architectural changes to the underlying Babylon libraries to improve tree shaking.
- Making architectural changes to the underlying Babylon libraries to allow features and capabilities to be lazily downloaded (e.g. dynamic imports).
- Carefully designing the new Viewer to balance a comprehensive feature set with a small footprint.
Flexible
Many apps will want more or less the same things from a model viewer, but inevitably there will be that one extra thing that is needed but is too niche to be built into the Babylon Viewer. When this happens, we don’t want the answer to be “oh well, I guess you can’t use the Babylon Viewer!” For this reason, we will not abstract away the Babylon API, but rather will formally expose it to allow for unlimited customization.
The new Babylon Viewer will also support any model format or glTF extension that Babylon itself supports, but by default the code supporting a specific model format or glTF extension will not be downloaded until a model requiring it is loaded. If you have a known set of formats and/or extensions you need to support, you can also choose to statically import them to include them in your top level bundle.
As mentioned, the Viewer includes a pure JavaScript layer so it can easily be used with your framework of choice (e.g. React or even Babylon Native). For framework specific layers (such as the HTML custom element), default UI for many features (such as animations) will be provided, but will give you full control to change the style or completely change the UI.
Modern
The old Babylon Viewer uses a lot of legacy tech. The new Babylon Viewer will be modernized in many ways:
- WebAPI — using standard Web Components / Custom Elements.
- WebGPU — full support for Babylon’s WebGPUEngine in supported browsers.
- Distribution — an ESM bundle is already provided in the NPM package and can be used directly in the browser.
- Frameworks — easy to use the Babylon Viewer in UI frameworks like React.
- XR — support for WebXR as well as QuickLook for XR scenarios.
- And more!
Easy to Use
When an app integrates the Babylon Viewer, an end user will interact with that app, and we want to do everything we can to make sure the user has a good experience. This means things like having interaction hints to guide the user in interacting with the model, always interpolating changes to the camera pose so a user is not disoriented, ensuring good performance across a wide variety of devices and 3D models, being friendly to mobile device batteries, and so on.
Want to give it a try?
The new Babylon Viewer is already available via npmjs.com in the form of a preview package. Check out the readme to get started! Please note (as described in the readme!), when installing the npm package you will need to specify the @preview tag, otherwise you will be installing the old Babylon Viewer.
Want to join the discussion?
If you have feedback or ideas, or certain features are important in your scenarios, head over to the Babylon forum to join the discussion in the Babylon Viewer announcement thread!
