# Babylon viewer to look like sandbox?

**URL:** <https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938>\
**Category:** Questions\
**Created:** [October 19, 2022, 10:13am UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938 "2022-10-19T10:13:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 19, 2022, 10:13am UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/1 "2022-10-19T10:13:11Z")

</div>

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.

 ![sample1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/5/15aa65f8cfae1117101941a91661b9691bcf4aac.jpeg)

You viewer on the other hand does not load the scene anywhere near to the same quality as the sandbox.  
 ![sample2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/8/d807255f332113b1d1409a2c24c0af495a79ebf7.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 19, 2022, 1:32pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/2 "2022-10-19T13:32:37Z")

</div>

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 (babylonjs.com)](https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/defaultViewerConfig)

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 19, 2022, 1:58pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/3 "2022-10-19T13:58:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 19, 2022, 2:06pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/4 "2022-10-19T14:06:35Z")

</div>

> [@carolhmj](#):
>
> that’s why it’s configurable

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.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 2:47pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/5 "2022-10-19T14:47:17Z")

</div>

@shaderbytes this helps with the configuration: [Configuring the Babylon.js Viewer | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer/configuringViewer)

following it you ll find all the options in here: [Babylon.js/configuration.ts at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/viewer/src/configuration/configuration.ts)

which leads to the environment configuration: [Babylon.js/environmentMapConfiguration.ts at f05ce7436d6e6635a6276545c46e73a8f287b60e · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/f05ce7436d6e6635a6276545c46e73a8f287b60e/packages/tools/viewer/src/configuration/interfaces/environmentMapConfiguration.ts#L1)

so basically environmentMap.texture as an attribute should do.

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 19, 2022, 5:16pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/6 "2022-10-19T17:16:36Z")

</div>

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 :

```auto
<script>
      BabylonViewer.viewerManager
        .getViewerPromiseById("bjshh7bu29f")
        .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(
              IBLImage,
              scene
            );
            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;
          });
         
        });
    </script>

```

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 7:34pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/7 "2022-10-19T19:34:15Z")

</div>

This works here [Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/a0fcd37L/)

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/c/8c271049b726cced96ac8d5ec0ce83e064ba5ebb.png)

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 19, 2022, 8:28pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/8 "2022-10-19T20:28:28Z")

</div>

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) 😉

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 10:18pm UTC](https://forum.babylonjs.com/t/babylon-viewer-to-look-like-sandbox/34938/9 "2022-10-19T22:18:35Z")

</div>

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