New Babylon Viewer v2 Wordpress 3D Plugin

Hello friends,

After the recent annnouncement of Babylon Viewer (v2) I am glad to introduce the new Babylon Viewer v2 Wordpress 3D Plugin.

Demo site - https://viewer.babylonpress.org/
Wordpress 6.6.2, the default Twenty Four template (I left some sentences from there since it seems funny but mainly the text is taken from here).

Download from Github repository - GitHub - eldinor/babylon-viewer-wordpress-plugin

New Babylon Viewer v2 Wordpress 3D Plugin is the successor of a highly acclaimed Babylon Viewer 3D Wordpress Plugin which was released 5 years ago and had received a lot of great reviews.
Please note that these plugins are not compatible and, as their relevant Viewers, use different syntax. So use either one or another.

The new Babylon Viewer v2 Wordpress 3D Plugin lets to display 3D models with the help of shortcode:

[babylonviewer]URL-OF-3D-FILE[/babylonviewer]

to use the Babylon Viewer v2 in Wordpress posts and pages, Woocommerce products, Elementor blocks etc.

Supports GLTF, GLB, STL, OBJ+MTL files upload and demonstration as a viewing experience for 3D models. All aspects of this experience are configurable. If you need more control, you may use tag in any Wordpress HTML block and configure all needed parameters with JS.

Supports models from external URLs.

Doesn’t write any data to WP database.

Demo: https://viewer.babylonpress.org/

Installation and Usage

Install as usual Wordpress plugin.
All installation instructions and usage examples are here - GitHub - eldinor/babylon-viewer-wordpress-plugin

Feedback is welcome! Ask questions if any :slight_smile:

Due to the active development of Babylon Viewer v2 which definitely reflects on the Babylon Viewer v2 Wordpress 3D Plugin’s development some things may be subject to changes which will be highly possible announced but performing of changes may be done without notice and it is more than possible that it will be so.

Or, shortly, the list of Babylon Viewer v2 features is constantly updated. Stay tuned!

12 Likes

Awesome @labris that was so fast! :rocket:

2 Likes

When I visited the demo site for the first time it took 45s to load the scene:

The second time it was loaded instantly from the cache.

After disabling the browser cache it loads in 4-5 s.

Any idea what could be the issue when visiting the site for the first time?

…and I’d like to add: AMAZING work buddy! :heart_eyes_cat:

EDIT: Maybe you could get rid of the canvas border :wink:

1 Like

I have the feeling that this is because the Viewer is fetching different chunks - the fish model has Meshopt compression and quantization. Meanwhile the HTML element itself is ready.

I changed the fish model to the light switch, seems to be better…

But 45s is way too much…

I would say the same. As it is written in the readme,

Babylon Viewer (with support from various Babylon.js libraries) uses dynamic imports to defer loading formats and capabilities until a model is loaded of a specific type or that uses a specific capability. This reduces the download burden on the end user and reduces the time to get something on the screen.

As I may conclude from some console messages, in case when a model has some extensions like Meshopt compression and quantization, the Viewer will load those extension handlers and wasm libraries, and for some reasons it takes quite a big time (and during that time there is no indication that something is going on).
The same happens with similar models in Codepen, when you load it for the first time - one may be either lucky or get the next console message:

Probably @ryantrem may put some light on it…

IMHO this makes the viewer quite unusable :frowning:

Some thoughts:

  1. It looks like the Babylon Viewer v2 Wordpress 3D Plugin is using unpkg (like in the examples I gave for the viewer v2). Unpkg is a free public CDN (unassociated with Babylon, we have no control over it), so it is great for example code, but it can be very slow and is perhaps not ideal for production use cases. If you really want to use a free public CDN, then I would try jsdelivr. From what I’ve observed, it tends to be much faster. Here is a simple example:
    https://codepen.io/ryantrem/pen/dyxjrzR?editors=1111
    What did you do for the v1 Wordpress plugin? Were you hosting yourself somewhere, or pulling from the Babylon CDN (also not intended for production use), or something else?
  2. I don’t really have anything to offer on the CORS errors with unpkg. As mentioned, unpkg is useful for quick demos, but I don’t have any deep knowledge of it. We can host the viewer v2 dist on the Babylon CDN, but as mentioned we wouldn’t want folks using it for production use, so it doesn’t really help for your scenario.
  3. With the current state of the Wordpress 3D Plugin website (not using the fish), even with unpkg I can’t repro anything close to 45s. It’s about 2s for me after emptying the cache. Again though, this could very well just be unpkg.
  4. Default progress bar UI is high on the list of upcoming features, we just haven’t gotten to it yet. :slight_smile:
2 Likes

After changing the CDN to JSDelivr I have the next error:

Couldn't find the requested file /dist/chunks/KHR_texture_transform-BvTLyT1G.esm.min.js in @babylonjs/viewer.

Codepen - https://codepen.io/eldinor/pen/poMZMoj

The plugin version updated to 1.1, the demo site is updated as well. Still, I am not sure what is better - with the ‘slow’ unpkg I can still display the problem model, with ‘fast’ jsdelivr the model is not displayed.
Meahwhile both CDNs have problems with dynamic imports. I believe that self-hosted version may have the same problems.

1 Like

If you are seeing errors about chunks, try clearing the browser cache and refreshing, or using a fixed version (not @preview). With any of the npm CDNs , @preview will change and currently we don’t have stable chunk names so the browser cache will become invalid.

2 Likes

Yes, with the fixed version things seems to be better - https://codepen.io/eldinor/pen/jOgvNxz
And with Wordpress as well - https://viewer.babylonpress.org/

Probably it is worth to mention this problem in the readme for the Viewer v2.

2 Likes

@ryantrem First of all thank you for your detailed thoughts!

The codepen example is fully ready in 5s and taking into account that it needs to load the codepen site + the viewer with the model, we can say it’s an excellent loading time for sure.

I’ve just tried to visit @labris’es Wordpress demo page once again and the loading time is 17 seconds. I was observing the Network tab and it seems the viewer loads quite quickly. Then there was a 12-13 seconds lag and it flushed all the blobs at once into the network tab. So the bottleneck here seems to be loading/processing of the textures. Consecutive page loads are 2-3 seconds.

I didn’t need to show the viewer on the homepage. The user had to click a button to reveal the 3D model. I created a hidden div (or iframe, I can’t remember which one I used at the end) which started to preload the viewer immediatelly and I just made the div visible when the user clicked the button.

Thank you for the excellent work on the Viewer v2 and I’m excited to have the new features implemented! Especially adding the Progress bar will result into a much better UX.

1 Like

There is also a very special issue with GLBs which contain audio, like UFO model.
Haven’t noticed this in Chrome, but Edge puts Audio Mute button at the left top of the whole page (while the model is a long way down the page).

1 Like

Thanks for looking into it and sharing your findings! For sure if we do see excessive network time for Viewer specific things (like if we have too many small chunks), we’ll want to know that as well!

Cool, we do plan to make the loading mode configurable. Once we do this, it should make the type of thing you describe above especially straight forward.

Interesting, thanks for sharing! I’ll take a look and see if we can do something about it!

1 Like

Also for ‘hidden’ cases, the render could be stopped until user interaction, to save batteries on mobiles.

2 Likes

Added Drag and Drop Viewer v2 example: Drag and Drop – Babylon Viewer v2 WordPress 3D Plugin

1 Like