Sandbox and Viewer: same .glb give different result

Hello,
I’m having issue with 3D model. When I upload model in sandbox babylonjs glass on model is darker than on real website. I would like to make glass looks the same as on sandbox.

Hi @Alexander_Domashev,
Can you make a playground showing how your lighting and model are setup on your website? We can then easily compare the setup to our sandbox’s default lighting setup.

Thanks!

Hello @Drigax ,

May I ask you where I can make playground?
Thanks

@Alexander_Domashev , Link from @Drigax seems broken. :confused:
But you can just navigate to https://playground.babylonjs.com/ fill it with code to illustrate your issue, save it and post generated URI back here.

Most probably you didn’t add an environment map to your scene.

Try adding this line after the scene is created:

scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(
      "https://assets.babylonjs.com/environments/studio.env", scene);

I’ll try to help with formulating the question (it has began in another thread).
First of all, the problem with this model is the problem with its demonstration with the Viewer.
Here is the link to the model: Dropbox - new.glb - Simplify your life
It looks more or less satisfying in Sandbox and in Playground - https://playground.babylonjs.com/#SYQW69#776
But with the Viewer one may see some artefacts, and the wood looks more metallic than it should be, and the glass too is a bit strange - BabylonJS Viewer - DOM usage
Since Alexander is going to use Viewer to display this model, the question is: how to make this model to look in Vewer like in Sandbox or PG?

The environment used by the viewer is studio.env, whereas it is environment.env for the default environment in the PG.

If using studio.env in the PG:

https://playground.babylonjs.com/#SYQW69#777

It looks more to what we can see in the viewer. I don’t know if the environment file can be changed in the 3D viewer (didn’t see anything in the docs)…

Thanks @MarkBevels the problem that 3D model was create using some kind of 3D editor not sure which one and I can only upload that model to sandbox, can’t edit it.

@Evgeni_Popov Here is the example with the Viewer with environment.env - BabylonJS Viewer Progress Bar with Overlay Image , environmentIntensity = 0.6
Still the wood in Viewer is more shiny than in Sandbox. Why - this is the question :slight_smile:

@Evgeni_Popov I would like to send the link with screenshot of comparison sandbox and website with same model to see difference, how I can send the link?

Is the model used in the PG and in the viewer the same? We can see some seams between some wood planks in the viewer but not in the PG.

You can simply put the screenshots in a post of this thread.


Here is the screenshot how glass darken looks different on sandbox its almost fully dark but on website you even can see inside of the model.

@Evgeni_Popov In those examples (PG and Viewer) I used the same GLB file.

You should remove the 3 point lights you have in the viewer case to be in line with the sandbox, which does not use any other light than the environment. It should account at least for the shinier look of the roof/wood planks.

[EDIT] Also, there is a default rendering pipeline applied in the viewer case that does not exist in the sandbox [/EDIT]

Here is the version with no lights - BabylonJS Viewer Progress Bar with Overlay Image

@Alexander_Domashev is it what you’d like to see?

Here’s what I get when I remove the lights and the default rendering pipeline:


I don’t know if the rendering pipeline can be removed from the viewer, what I did for the screenshot is that I used Spector to change the shader so that the image processing treatment is not applied.

If using the same background color than in the PG instead of a background environment:

So, by removing the point lights + the default rendering pipeline (if at all possible…), you should be able to get the same result than in the PG.

Thanks @labris but now it the whole model looks dark, I was looking the same as on sandbox. Need to put tinting on glasses

Here is the example with the same light intensity - BabylonJS Viewer Progress Bar with Overlay Image

Sandbox

Viewer with default environment and no lights


The last version BabylonJS Viewer Progress Bar with Overlay Image
I suppose this is all what is possible without touching materials.