Babylon Viewer (v2)

[Dad72]

It says in the doc that you can add custom functionality. For example if I want to add a button that takes a screenshot of the canvas and generates the image file, is it possible? is there an example for this?

[ryantrem]

In general, “custom functionality” is what we consider an “advanced scenario” and there is some documentation and an example (more coming) in the docs here: Viewer Advanced Usage | Babylon.js Documentation

Specifically about taking a screenshot, you can definitely do that, but only when using the npm packages and building your own bundle. There are two reasons for this:

1. The current Viewer ESM bundle includes the pieces of @babylonjs/core and @babylonjs/loaders that are used by the Viewer itself. This is because these two packages are effectively not compatible with direct ESM usage currently.
2. The current Viewer ESM bundle does not re-export the underlying BJS libs. This will help with compatibility when core/loaders are eventually fully ESM compatible.

That said, assuming you install the @babylonjs/viewer@preview package in your own project along with @babylonjs/core, then you can add your own UI on top of (or within) the Babylon Viewer, access the viewerDetails to get access to the engine, scene, and camera, and then use Tools.CreateScreenshot.

Here is a quick example using CodeSandbox (which allows package installation and custom bundling, unlike CodePen): https://codesandbox.io/p/sandbox/optional-chaining-forked-6g7mtj?workspaceId=ws_Cy8iztiBhRZG7hdumcf2vw

[labris]

@ryantrem

have the new Viewer package fully replace the old Viewer package

I hope it will not break all sites which use old Viewer like <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>

[ryantrem]

The Babylon CDN is generally not meant for production use, but regardless we won’t break this. The existing Viewer url on the Babylon CDN will still resolve to the legacy Viewer.

[ryantrem]

@ryantrem

@labris

Also, I wonder what is the best way to have the environment without skybox and with transparent clearColor

It’s not possible with the Viewer API right now, but I think it should be. I will add this to the feature list.

This is now possible with the latest release. On the custom element, you can still set the environment attribute if you want to use the same texture for both IBL and the skybox, but you can also separately set environment-lighting and environment-skybox. Effectively environment is a shorthand for setting both to the same value.

[ryantrem]

@ryantrem

Pending any other community feedback, we plan to flip the switch to remove the -alpha suffix, the @preview tag, and have the new Viewer package fully replace the old Viewer package on npmjs.org right after the new year.

Heads up, as of 7.43.0, the new Viewer package has replaced the legacy one, so npm install @babylonjs/viewer will now get the new Viewer. The legacy viewer is still available via npm using version numbers prior to 7.43.0 (both ES6 and UMD), and the legacy viewer is still available through the same Babylon CDN. Right now, the plan is to not publish any more updates to the legacy viewer (NPM or CDN).

[labris]

What are the plans for Hotspot/UI Configurator?

[ryantrem]

There is another effort I have under way (it’s been lower priority for a while) to introduce a new “extensible sandbox.” There is a brief blurb about it at the bottom of this article: Formally Adopted

The direction I’m going right now is to make the Viewer configurator an extension (plugin) for this new extensible sandbox. I’d love to squeeze this in for the Babylon 8.0 release, but it just depends on other 8.0 priorities.

Here is a sneak peak of what the work in progress looks like:

For hotspots specifically, the workflow is:

1. Add a new hotspot
2. Select a target point on the model surface
3. Position the camera around that target point and snapshot the camera state

[roland]

Guys, could we boost the Babylon viewer’s (including the assets viewed) load speed by leveraging the Speculation Rules API on the page?

@labris maybe something you would like to try

[labris]

@roland Do you have any good examples of Speculation Rules API with Babylon?
I also thing they should or may be implemented at a page level or only at some viewer’s use cases…

[roland]

@labris

Do you have any good examples of Speculation Rules API with Babylon?

Hello! I don’t have any. That’s why I tried to pass the research to you It’s on my list to prerender multiple scenes (each on separate page) in our project and fast switch them using the Speculation API (maybe in a month) but for now I use multiple webviews in the parent native Flutter app. It’s far from perfect - you have to deal with memory management yourself. The Speculation API is supposed to hide the implementation details of prerendering a html page.