Using HDR's in the BabylonJS Sandbox creates lower brightness

[Sem]

So, when using the room.env in the sandbox, this is the result:

When using room.hdr, this is the result:

It’s not related to the reduced spectrum of the colors, since using the .env created from the .hdr in the sandbox creates the same effect as the .hdr.

When using a half black half white hdr, this is the result:

It looks not bright enough for me since this is the brightest color possible.

Am I missing some tweak values? Is it possible to adjust the brightness of a loaded .hdr so that you can change the brightness of the generated .env image?

[PirateJC]

I wonder if this thread will help?

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

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 wi…

Also adding @PatrickRyan our lighting expert.

[PatrickRyan]

@Sem, I am not sure I follow how your room.env file was created because using the inspector to create your env file will create a nearly identical result to the original room.hdr file. For example, this is a sandbox scene using room.hdr as you can see in Scene Explorer’s Textures:

And this is loading the roomRebake.env file I created from your original room.hdr file:

The three rows of spheres are metallic smooth to rough, dielectric white smooth to rough, and dielectric black smooth to rough for reference.

Could you share with me the steps you took to create the room.env file as I am unsure how you ended up with a result that is so far from room.hdr.

In terms of creating a black and white .hdr file and controlling the values, you will want to make sure that you are indeed using high dynamic range values in your image when creating it. If all of your values are between 0 and 1 for each of the RGB channels (or worse you are working in 8-bit 0-255 values) you will not see the range you expect from the light. Pushing your high end beyond a value of 1.0 is necessary to create a true HDRI which you can use for image-based lighting. Take this example:

This is made with a manually created HDRI that looks like:

The value of the white areas in the image is RGB (1.465, 1.465, 1.465) which does not seem like a high value, but the number of pixels in the image with that value actually generates quite a bit of light which is why the spheres look so blown out. You can experiment with this file yourself by downloading contrastCube.hdr.

If you are looking to tweak the values in your HDRI, you will need to make those changes in either an image editor like Photoshop or GIMP or you could use tools like IBLBaker or Lys to change the exposure of the HDRI and export. We have a texture inspector in the our inspector, but we have not enabled editing of HDR values at this point as it is not meant to be a texture editor.

If you are looking to just change the value of the IBL in the scene, you can change the IBL intensity by clicking on Scene in the Scene explorer and you will find an intensity slider in the Inspector panel:

This does not change the input file, but just increases the intensity of the loaded IBL at runtime. If you want to change the values of the input HDRI, you will need to do that in an image editor and then drop the adjusted HDRI on the sandbox to generate a new .env file.

Let me know if you still have questions about this process.

[Sem]

Thanks for the quick responses guys!

@PatrickRyan

And this is loading the roomRebake.env file I created from your original room.hdr file

This is basically the part that I don’t understand, shouldn’t the .envs from the texture library create the same kind of lighting as the ones created with the .hdr in the sandbox?

@PatrickRyan

If all of your values are between 0 and 1 for each of the RGB channels (or worse you are working in 8-bit 0-255 values) you will not see the range you expect from the light.

So this is what I was missing, for some reason I thought when converting a #FFF .png to .hdr, it would mean I’d be using the maximum brightness. Guess I’ll look into it a bit more Thanks!

I’ll be sure to use the IBL intensity setting as well, neat.