Aren’t those properties on the right side (in purple box) for skybox/environment texture? Why does changing those properties affect how an object looks?
Changing the “level” changes the glossiness the rivets on the shopping bag
Also, I’ve been trying to adjust environment properties with my codes, but I couldn’t. Is there a way to alter them in my code?
Furthermore!!
I just found out that there are two environments imported hmm…
When I adjust properties on the inspector of one environment, it actually changes the environment and the other environment properties affect the object(shopping bag).
I don’t understand why there are two environments and one affects the surrounding while the other affects the textures of the shopping bag.
Questions in short
I would like to know why the rivets appears to be black on my project while they can be adjustable on Babylon Sandbox
Adjusting level on Sandbox changes the appearance of rivets and shopping bag body, but it does not do anything on my project
How come there are two environments on Sandbox?? and why does one affect the surrounding and the other one affects the object??
lets start with your 3rd qustion first as it’s important to understand for your other questions!
In the sandbox there are two “environment textures” getting loaded because one is used for the actual skybox and the other one is used as the so called environment texture. In theory you could use the same texture for both but you would lose the option of individually adjusting the textures. However in an actual project you would probably use a higher quality image for your skybox from which you would then generate an environment texture, leaving you with two different textures anyway.
If you don’t know how to generate the .env texture look at this tutorial: Image-Based Lighting: The Easy Way - YouTube
Now this says Image-Based Lighting… so what does an enviroment texture actually do? It basically lights your whole scene based on the set texture. This means if meshes were really metallic and reflective you could probably make out your texture on them. Other than that it gives you really nice lighting based on your skybox if you made it from the same texture.
You can take a look at my current tryout playground in which I created the environment texture from the texture I used as the skybox in the same way as the previously mentioned tutorial: https://playground.babylonjs.com/#59FFHD#89
Take a look on the ground, it’s reflecting light seemingly based on the skybox but actually through the environment texture.
You can find (and set) the enviroment texture if you select the actual Scene in the Scene Explorer/Inspector.
Other than the settings for it over there, every material also has an Enviroment intensity found in their Levels tab.
Now this was quite a lot but you can probably tell what’s happening for your other two questions now.
Regarding your 1st one:
You most likely don’t have an environment texture set and/or enough light for your rivets to be lit, so they appear black. They seem metallic so an environment texture is key for an authentic reflection in them.
2nd:
This pretty much tells me you don’t have an environment texture set, as that is what gets reflected on your shopping bag in the sandbox.
If you didn’t understand something from my explanation please ask!
Note that you have two different textures for the env as explained by @Regit but you really only have a single internal texture, meaning the texture only exists a single time on the GPU, no memory is wasted: the two textures are pointing to the same internal texture.
WOW!!! Thank you so much for a very long detailed answer!! I really appreciate your help and time you spent for this.
Let me ask you a few questions. You are saying that the environment would make an object/material reflective as long as it’s supposed to be glossy. Does that mean I have to specifically access the specific mesh and apply glossiness?
Plus, you were saying that there are usually two separate environments for the skybox and environment texture. So you’re suggesting me to create those two for my own project?
@Evgeni_Popov Thank you for your comment! I am little confused though. There are two different textures for env and they both point the same internal texture. Wouldn’t that cause conflicts??
I am not sure if I got what you explained. Could you go a little deeper if you don’t mind?
The internal texture (InternalTexture class) simply holds the real data of the texture, meaning the texels.
As the skybox and the env map are built from the same source data file, they are using the same internal texture instance: look at the Internal Unique ID info in the inspector, you will see it is the same.
However, they both have a different texture instance (Texture class), so they have a different Unique ID in the inspector. That allows you to set different sampling mode/uScale/vScale/uRot/… values for the sky and the env map.
I’m saying the environment texture is lighting your scene based on its set texture. How your meshes respond to this light depends on their used material and the settings of the material.
Now I don’t know how much knowledge you have about Babylon or if you even know what I’m referring to when I bring up the PBRMaterial. I’ll just assume you know, otherwise read up on the docs: Mastering PBR Materials | Babylon.js Documentation
Or if that is already too advanced, start further at the beginning of the docs.
In Babylons PBRMaterial there is a metallic/roughness workflow, which basically tells the material how reflective or absorbant it should be towards light. You mentioned glossiness and there is also a specular/glossiness workflow, but I myself haven’t used this one so I don’t know much about it.
It will come down to that. You’ll have to setup your lighting situation and then tweak the materials settings to match the object and make it look good in the scene. I have been adjusting the metallic and roughness settings for my materials in the inspector untill I hit good looking values and then put them in my code.
It really depends if you need it for your personal project. Think about if you have a skybox that should be reflected in your objects to achieve more realism (if that’s what you’re going for).
If you have the .hdr of your skybox it is fairly easy to generate the .env environment texture for it (look at previously mentioned tutorial). You can probably create the .hdr from your skybox file(s), if you don’t have it. For your real skybox you can still just use a .jpg or whatever you prefer.
I personally think the environment texture adds a lot to your scenes aesthetics for such a small file.
Sorry for the late reply and thank you for your answers!! I studied it a bit and am a lot more comfortable with the feature. I also took a look at this video on Babylon YouTube channel and it helped a lot too.
// one way of setting environment texture
scene.createDefaultSkybox(new CubeTexture(environment, scene), true, 400, 0.3)
// another way
const HDRTexture = new CubeTexture.CreateFromPrefilteredData(environment, scene);
scene.environmentTexture = HDRTexture;
I found two different ways of setting environment and the second way sometimes does not work
Is there any difference between the two? except how they look?
The first one is using the same texture for the skybox and environment texture. Depends if you want that.
The second option I’ve never tried. Seems like this “prefiltered data” has to be exported out of a program a certain way.
A playground with your settings/code would help.
