Question to understand Environment Textures and .glb

Questions
1

Hi Comunity,

here is something I cant figure out:

I tested the implementation of an .glb, the rotating of the camera etc.
For that I created this Playground: https://www.babylonjs-playground.com/#QCU8DJ#29

As you can see in loading the Playground it has an environment Texture.
Line 11+12:

var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, false);

The point is that in the Playground, the environment is not visible, but it gets reflected on the BoomBox.

As this is something I would love to use, I have tryed to reproduce this invissible environment.
Here is the Playgrund I did set up for that: https://www.babylonjs-playground.com/#EYEPRI#378

Here I used the same environment at the same place in the Code.
Line 5+6:
var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, false);

But magicaly here the environment is visible.

This is realy something that seems like a mystery to me. :wink:

Can anybody help me to understand?
Is it the .glb that has the environment integrated and somhow makes the environment invisible?
I do’nt have a clue…

Thanks in advance for your help.

2

pinging @sebavan

3

It is because createdefaultSkybox takes care of writing down the environmentTexture in the scene.

To manually do it without this function simply assign scene.environmentTexture to your loaded texture:

https://www.babylonjs-playground.com/#EYEPRI#380

4

Wow, thanks for the fast and helpful answer.

That solved the Problem mostly. I now see the reflexions in the 3D-Objekt and can it implement in an normal Website in an transparent IFrame.

Still I have a better Reflexion but see the environment if I use the
var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, false);
and combine it with:
var skybox = BABYLON.Mesh.CreateBox(“skyBox”, 500.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial(“skyBox”, scene);
skyboxMaterial.backFaceCulling = true;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(“textures/environment.dds”, scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;

So is there a way to control the intensity of the reflexion in using:
scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);

Thanks so far. I like you guys. You are so fast and precise in your answers. Really great. :slight_smile:

5

You can use scene.environmentIntensity to control the ibl lighting intensity from 0 to 1

6

Thanks for your answer.

I think we are almost there. I need to set up two examples, with the original .glb to show you what my problem is. And post the sourcecode.
My Idea is there need to be changed something in the .glb.

I will set it up tomorrow morning.

7

Hi Sebavan,

I made some samples to show you what I mean.

I did apply the solution you gave to me and it worked:
http://test.company-song.com/index02.html
Sourcecode as .txt: test - environment hidden

Without your Solution it looks like this:
http://test.company-song.com/index01.html
Sourcecode as .txt: Test - environment without

So it definitely improves the whole thing.

If I apply the:
var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, false);
and combine it with:
var skybox = BABYLON.Mesh.CreateBox(“skyBox”, 500.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial(“skyBox”, scene);
skyboxMaterial.backFaceCulling = true;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture(“textures/environment.dds”, scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;

it looks like this:
http://test.company-song.com/index03.html
Sourcecode as .txt: test - full reflexion

That example has much more reflections of the environment.

So Question 1 is if there is a way to achive the reflexion of /index03.html in /index02.html?
But as I see and realize in that examples. I think that the reflexions in /index03.html are sort of wrong and /index02.html is correct displayed. It’s just that in other 3D-Models, I used, the material-textures are less reflexive and so it looks better if I use the /index03.html way.

Question 2 and the “unsolved mystery” I still have is the BoomBox…

I use the example out of the Playground and added the:
var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(“textures/environment.dds”, scene);
var currentSkybox = scene.createDefaultSkybox(hdrTexture, false);

Magically it shows the reflexion of the environment but not the environment.
http://test.company-song.com/index04.html
Sourcecode as .txt: Babylon.js sample code - boombox
Used 3D-File: http://test.company-song.com/scenes/BoomBox.glb

Do I use the same Code and just change the loadet 3D .glb, I get the full reflexions and the environment.
See here: Babylon.js sample code - test 3D
Sourcecode as .txt: Babylon.js sample code - test 3D
Used 3D-File: http://test.company-song.com/assets/test.glb

So I imagine it has to do with the loaded BoomBox.glb. It must have some sort of gimmick in it that overrides the environment.

That is what I try to solve and to understand. If I can make my test.glb do the same as the BoomBox.glb I can have the better reflexions and the invisible environment. :slight_smile:

But I think if I use your solution and rise the reflexion of the material in the 3D-File it will work perfectly.
I’m just curious why the “magic” on the BoomBox happens. :slight_smile:

8

It is because the camera clips at a distance of 50 so you simply need to increase camera.far to 5000:

image
image2592×1335 529 KB

It by default adapts to the scene boundary

9

Hi Sebavan,

thanks for the Answer. So simple :slight_smile:

That solves the mystery.
So we can close this Question as solved.

Thank’s a lot.