Babylon viewer to look like sandbox?

Hi Everybody

So I never personally use the babylon viewer but I have a client who is using it. Now that i look into some concerns for them it raises some questions

Ease of use and best visuals out of the gate :

So your sandbox is fantastic by default, drag model in and it renders great.

You viewer on the other hand does not load the scene anywhere near to the same quality as the sandbox.

The whites are all grey , metal reflections are black and the underside of the model is underlit. i presume its mostly the environment but sheez this is a horrible out of the gate rendering.

So thinking that the viewer is meant to be the ease of entry to babylon usage , i mean this is a perfect example, where a client got someone to use it to embed a model on a word press site, its sad you dont provide the same out of the box visual fidelity as the sandbox?

Anyway , since this is the situation , i need to help them to make it look something like the sandbox but using the viewer and i dug through all the documentation and there is little to no information as to how to achieve this.

I need to have the same visuals as the sandbox with as little fuss as possible.

If this turns out to require some arcane solution with all sorts of template injections or whatever and it then seems better I do it via setting up a custom scene , then really, what is the point of the viewer?

The point of the viewer is to provide an easy to use and configurable solution. Not everyone has the same idea of what should be an “out-of-gate” rendering, so of course there will be people satisfied and unsatisfied by the defaults. Again, that’s why it’s configurable: Modify the Babylon.js Viewer | Babylon.js Documentation (


I fully understand easy to use and agree that is its purpose , which is why i question why it does not look good out the gate. You cant use the argument you presented about varying opinions on what that means because I pointed to your very own sandbox as the example of a good out of the gate experience.

If you provide a sandbox which looks great without configuration , why not a viewer that follows the same logic?

So who is the intended audience or user?

its great you can configure it, but that should not be an excuse for not providing a better default rendering. Did you look at the screenshots? having metal render as black will be the preference of - Nobody. Lets be realistic here.

This should not even be a debatable thing , it should be obvious.

best foot forward at all times.

ease of use above configuration , so have the viewer use IBL by default … and if some user ( and I honestly cant think of any ) wants it to look worse then let them configure it and turn it off.

Anyway , whether you see the logic and change this in the future doesnt help me right now anyway.

can you please point me to any documentation that shows how to add IBL lighting to the viewer?

that documentation does not help me at all… I want IBL like the sandbox. Which probably means using a custom .env , can you figure out how to do this from this documentation? I cant.

At best im thinking of getting a reference to the engine and scene , and then just coding it in javascript.

@shaderbytes this helps with the configuration: Configuring the Babylon.js Viewer | Babylon.js Documentation

following it you ll find all the options in here: Babylon.js/configuration.ts at master · BabylonJS/Babylon.js · GitHub

which leads to the environment configuration: Babylon.js/environmentMapConfiguration.ts at f05ce7436d6e6635a6276545c46e73a8f287b60e · BabylonJS/Babylon.js · GitHub

so basically environmentMap.texture as an attribute should do.


thanks i looked at your source and tried a few ways and didnt win , so I did just go the route of getting reference to the viewer and scene and doing it via javascript , eg :

        .then(function (viewer) {
          viewer.onSceneInitObservable.add(function (scene) {
            scene.clearColor = new BabylonViewer.BABYLON.Color3(0.9, 0.9, 0.9).toLinearSpace();
            let IBLImage = "autoshop_02_2k_bw.env";

            hdrTexture = BabylonViewer.BABYLON.CubeTexture.CreateFromPrefilteredData(
            hdrTexture.gammaSpace = false;
            hdrTexture.level = 1;
            scene.environmentTexture = hdrTexture;
            scene.environmentTexture.rotationY = 3.913;
            scene.environmentIntensity = 0.7;
            // returning the scene object. a common practice, not a must
            return scene;

This works here Edit fiddle - JSFiddle - Code Playground

it is environment-map.texture, due to this in the doc page:

1 Like

ah ok so that is why it didnt work when i tried it. I tested your solution and it does work. Anyway doing it via scripting also then gave me access to set properties of the environment like environmentIntensity = 0.7 as shown above.

Many thanks for the input

(ps im still standing my ground on the fact that the default viewer should have IBL enabled) :wink:

The default has ibl enabled, this is a studio environment. You could see it by opening a metallic sphere in it :slight_smile:

1 Like