Viewer .glb poor quality

Questions
1

Hopefully this is an easy question, I have embedded our .GLB model into a webpage but the quality is really bad compared with when I upload it into the Sandbox.

I am using all the default options for the container, I am loading the model on button click using the following javascript…

BabylonViewer.viewerManager
.getViewerPromiseById(“babylon-viewer”)
.then(function(viewer) {
viewer
.loadModel({
url: “/images/models/docking-station-model.glb”
})
.then(
model => {
console.log(“model loaded”);
},
error => {
console.log(“error!”, error);
}
);
});

I found that if I switch the viewer to fullscreen, then switch back to normal, the quality is much better. Its like the viewer is loading a lower resolution model initially.

Screenshot 2022-09-20 at 16.21.03

2

interesting. can you share the viewer configuration you are using?

Also, just for me to understand the issue, can you try resizing the window and check if the quality improves then?

Also, forgot to ask - what version of the viewer are you using?

3

Yes the config is all default eg.

<babylon id="babylon-viewer">
</babylon>

This is the viewer version:

[Log] Babylon.js viewer (v4.2.1) (babylon.viewer.js, line 3852)
[Log] Babylon.js v4.2.1 - WebGL2 - Parallel shader compilation (babylon.viewer.js, line 742)

4

I have seen some things written about CSS width/height of the Canvas object…maybe that is related??

I have tried few different CSS properties already, using PX and VH

5

it can be the css size, since babylon is taking the canvas size to render. It can also be the version that you are using, because we are constantly fixing issues. have you tried the latest 5.X version?

6

Check width/ height of viewer element and its parent element.
Seems in your case for the first time it is undefined.
Resize fixes the issue, check your parent element CSS.

2 Likes
7

No I am just using the version that’s used in the examples:

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>

Do you have a CDN reference for 5.x?

8

Ah yes, I found the problem, the container is initially hidden using display:none then after a button click I show it.

If I use opacity:0 to hide it instead it works ok

Thanks

1 Like