How to make model lighting/pre-processing in code the same as how a model appears in the sandbox?

[johntdaly7]

So I have a .glb model that was made in Blender. I exported it from Blender and loaded it into the sandbox. The model has PBRMaterials, and it has AO shadow baking and other settings saved in the model. When I load the model in my code with the function
const result = await SceneLoader.LoadAssetContainerAsync(
“assets/babylon-models/”,
modelID,
this._scene
);

and add a basic directional light and hemispheric light and set all the meshes as shadow generating and shadow receiving, I get a wildly different-looking model. The AO shadow bakes on the walls and floor don’t even show up, among other things. Here is a side by side comparison:

how it appears loaded into sandbox:

how it appears in code:

My modeler friend and I have been banging our heads trying to adjust lighting and material settings to emulate what we see in the sandbox in code, to no avail.

Can anyone please provide a playground example of how to setup the basic settings for lighting, hdr, etc. in code to exactly emulate what is provided in the sandbox, or at least point me in the right direction?
I feel like I’ve combed enough through all the docs about lighting, PBR, materials, etc. and still can’t emulate what I see in the sandbox, which should just be an easy 1,2,3 plug and play as I load in a model in code.
Are settings stripped from the glb when exported from the sandbox? Does the sandbox do extra preprocessing (settings added) when loaded in? What is that preprocessing that is performed as the model is loaded into the sandbox? Where can I find the sandbox hdr used? These are the kinds of questions I’m asking myself, and figured I’d enumerate here if anyone can provide some closer to them.
I don’t really want to have to hard code all the settings that I see in the sandbox for preprocessing the model and hdr upon load.

Do I need to port over the entire sandbox code from github? what code in the sandbox github should I be looking at? I feel like that would be superfluous to just get the same exact model to look right in the sandbox and in code, no?

Thanks very much in advance.

[PirateJC]

Hey @johntdaly7

Fun topic, I just did some learning about this myself! I agree it’s not documented well enough. I’m going to change that! I’ll add a new doc section about the Sandbox and reference the lighting setup that’s in it, so in the future, folks can recreate it in the playground more easily. Thanks for the awesome question.

Ok so here we go:
https://playground.babylonjs.com/#T0S9R4

This playground has nothing in it apart from a camera, a loaded gltf model, and the exact environment that’s used in the Sandbox by default.

Quick note here, in the Sandbox we have 2 different environments to choose from through this button:

The playground specifically recreates the environment used for the DEFAULT environment, not the studio environment.

You’ll also want to use this asset to drag into the sandbox to compare the two. It’s the same asset used in the playground.

Ok so now let’s look at the environment code used in the playground:

Check out lines 10-15 in the playground:

let lighting = BABYLON.CubeTexture.CreateFromPrefilteredData(“https://assets.babylonjs.com/environments/environmentSpecular.env”, scene);
lighting.name = “runyonCanyon”;
lighting.gammaSpace = false;
scene.environmentTexture = lighting;
scene.createDefaultSkybox(scene.environmentTexture, true, (scene.activeCamera.maxZ - scene.activeCamera.minZ)/2, 0.3, false);
scene.createDefaultLight();

The first 4 lines create a cubemap texture in the scene and assign that to the scene’s environment texture.
The 5th line creates a default skybox using the environment texture, setting the scale, and blur.
The 6th line adds a default light setup to the scene.

That’s pretty much it!

Thanks again for asking this one! It was a fun one to learn myself and I agree we need to document it better. I’ll tackle this!

[johntdaly7]

Thank you so much for enumerating this @PirateJC !! This really helps clarify things. I ask a ton of questions here and you all are always very quick and to the point. I’m very thankful for that.

So quick follow question: if I wanted to instead show the Studio version, would I simply replace “environmentSpecular.env” with “studio.env” or are there other changes to implement as well? Thanks!

[johntdaly7]

I tested it in the playground and replacing “environmentSpecular.env” with “studio.env” seems to reproduce the same thing as the Sandbox studio version. I just want to make sure that I’m not missing anything behind the scenes.

[johntdaly7]

Next step is to test it in my code to see if the differences resolve. Will keep this thread posted.

[johntdaly7]

Hey @PirateJC !

So I tested the model that I am using between the PG that you sent me (edited here: https://playground.babylonjs.com/#T0S9R4#1 (be patient, it takes a little while to load)) and the sandbox. It’s the exact same model (can confirm by using the model link in the sandbox) and there’s still some slight differences. For instance, the AO shadow baking looks like it’s still not appearing on the walls in the PG, even though it does in the sandbox. I am using the Studio.env version (as seen in the PG). Any thoughts as to why this may be the case?

Here are some side-by-sides. The PG is on the left and the sandbox is on the right.

[PirateJC]

Awesome! I’m glad we’re getting closer.

I’m guessing that the issue is likely related. The sandbox has some things set up for you by default where the playground does not.

As for AO looking different between the two, I’m not sure. It looks to me like there may be a strange scaling issue of some sort happening. If you look underneath the scene at the carpet, it looks to me like the floor may be flipped upside down? I can see shadowing (presumably from the AO) on the underside of the floor where it should obviously be on the top.

[PirateJC]

Are the normals facing the correct direction in the output model?

You might need to check this in the DCC tool outside of Babylon to confirm.

[johntdaly7]

Thanks. Do you know of the changes between what the sandbox sets up by default and what is missing from the PG you sent?

That was my main concern…it seems the sandbox sets things up and I can’t figure out what it is or where that unique code is. It’s really close, but it seems the sandbox does a little bit more.

[johntdaly7]

I tried adjust the IBL intensity of the environment texture here: Babylon.js Playground

adjusting the environmentTexture.intensity seems to not do anything, no matter the value.

[PirateJC]

Well I’m now second-guessing if that’s actually the problem that’s remaining. It seems to me like something goofy is happening with the textures on the model itself.

Here’s the underside of your model in the sandbox:

I see the same thing in the playground. That leads me to believe that perhaps the normals are facing the wrong way on your model.

If we’re looking at the wrong sides of your models, that COULD explain why it’s not appearing correctly.

Kinda just guessing, but it seems like we’re looking at the AO texture on the underside of the model?

[Deltakosh]

I think we are not adding any additional light on the sandbox, so you should try without scene.createDefaultLight();

[PirateJC]

AH! Yes the all-knowing @Deltakosh is right!

I see it now! In the sandbox we only use the createDefaultLight() when there’s no PBR material in the scene.

So here’s an updated playground with that removed:
https://playground.babylonjs.com/#T0S9R4#3

[johntdaly7]

YUP! That was it! Thanks @Deltakosh and @PirateJC !! I just tried it myself and it looks exactly the same. This thread should be pinned somewhere haha, because I’m sure plenty of people are curious about this!