HDR images in three to create nice lighting

[user123]

Im looking into getting my scene looking better and it seems as though using a HDR maybe a good approach. I dont necessarily want the background to be an image, but just use it for the lights

I got a hdr file from hdrhaven

After abit of playing it seems as though I cant use a single spherical image in threejs can any one confirm that for me?

I did find a great online tool to convert it into a cube map, which seems abit more acceptable for three and I now want to implement that.

I was going to follow this

Unfortuantley, as with alot of the three examples, as a novice I struggle to understand what/why certain things are done and what options are available to me as they are rarely commented nicely. Can anyone point me in the direction of how to start? I can see a new THREE.CubeTextureLoader but not sure what to do with it?

[user123]

@user123

Unfortuantley, as with alot of the three examples, as a novice I struggle to understand what/why certain things are done and what options are available to me as they are rarely commented nicely.

just to clarify thats not a dig, I appriciate all the work the three community does and realise it’s my own lack of knowledge thats the problem

[zhutq]

For now equirectangular .hdr images cannot be used as MeshStandardMaterial's envMap directly.
Please see https://github.com/mrdoob/three.js/issues/14709.

I myself is going to convert .hdr to .exr and follow https://threejs.org/examples/webgl_materials_envmaps_exr.html.

[MateuszWis]

Example for THREE.CubeTextureLoader, it’s compatible with the output maps(seperate) from the online tool that You mentioned.

[user123]

Thanks for the replies.

So this is possibly really stupid of me, but I would like to confirm what I think I can achieve…

1. I dont necessarily want an image background, more likely a solid colour/gradient
2. I want to be able to have nice “studio” lighting schemes.

so for #1 I can set my background to any colour easily enough, at the moment I my three scene is transparent so its just css on the body.

for #2 this is where i wanted to use a hdr. Im more familiar with traditional cad rendering packages where you can set a hdr for the lights, but not actually so it is the background.

to achieve this I was going to set my material to be MeshStandardMaterial and set its envMap to my hdr image (split up to be a cube as previously mentioned). How do i then get the hdr to light the scene but keep a transparent background? Am i correct in thinking once thats done I wont require any other lights?

[Scott_Rinehart]

For these examples, the cube map must be separated into 6 maps. Those “textureLoaders” use code that automatically loads them in a specific way.

I too am struggling. If you figure it out please keep me in the loop and I will probably make a tutorial if I figure it out first

One of the hardest parts is figuring out which code can be stripped because I really don’t want a GUI. I just want to see how the code all works.

[Scott_Rinehart]

Could you show me how to do with without the GUI attached? I keep trying to attach it to the standard materials envmap but I get errors because the GUI controls it. I don’t understand how to make the same example without the GUI and which code is relevant to only getting the basics to work.

[zhutq]

If you are modifying examples like three.js\examples\webgl_materials_envmaps_exr.html, you can probably find some code like

var gui = new dat.GUI();

To detach GUI controls, just comment/delete all code related to gui.
To remove gui dependency, also comment

<script src="js/libs/dat.gui.min.js"></script>

[user123]

For the material i just followed what i found in the documentation. You make a new cubeTextureLoader and then assign that as the environmental map of a material, which you can then use on your geometry…

var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );

var textureCube = loader.load( [
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
] );

var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );`

I however am using a MeshStandardMaterial rather than mesh basic.

It looks good and as I expected.

Now I am stuck on the best approach to lighting the scene, as with none, no matter what cubemap i use its dark

• Is it common practice to add additional lights?
• In which case how do i ensure they are in the correct place to match the env map?
• Should I always have at least an ambient light?
• If i want shadows, how can i ensure they look correct for the env map of the material?

I feel i am missing something very fundamental here, so any guidance would be appriciated

[user123]

after abit of playing, I have found that sketch fab does exactly what I am after.

In that you can set an environment, this has a direct impact on the look of the model and it does a couple of things that I like…

There doesnt appear (at least it says they are off) to be any other light surces, yet the model is illuminated nicely, how?

You can rotate the enviroment, any ideas how?

Im slightly lost on this so if anyone can shed any light (harr harr!) on this I would be very appriciative

[Scott_Rinehart]

Sketch fab might have an original source light.

The only thing I don’t like about sketchfab is that it seems to only run in specified windows or some shit. You can’t just plop a model in an html5 webpage.

[Scott_Rinehart]

You can’t rotate because you need the orbiter script and you need to call on it in the javascript.

It’s pretty normal to need direct lighting of some sort. That’s pretty normal for game engines. Which 3JS is basically a game engine. In UE4, Unity, Etc. they don’t employ HDRI Lighting either. They do allow for reflection cubemaps, which what this is. In UE4 and other game engines, they bake the lightmaps in a 3D program. So the irradiance is baked in those games. It’s not dynamic.

There are things like irradiance volumes in game engines but they aren’t amazing. Somebody figured out a solution in UE4 but then it got shitcanned for some reason.

So, short answer, yes, you still need a light. Somewhere in sketch fab, there’s gotta be an initial light that they have turned on. Just about every program does. Maya and Max even make it hard to turn off. They have it on by default and the first light put in the scene disables it.

[user123]

@Scott_Rinehart thanks alot for your responses. Yeah ok I agree there must be a light, even if in the user interface it says there isnt.

You can’t rotate because you need the orbiter script and you need to call on it in the javascript

im not sure I understand what you mean by that? In sketchfab you can rotate the enviroment, which seems to roate the env map of the objects

[Scott_Rinehart]

Blockquote im not sure I understand what you mean by that? In sketchfab you can rotate the enviroment, which seems to roate the env map of the objects

My mistake! I thought you meant rotate the camera. That I do not know. Maybe ask one of the more knowledgeable people on here ha. My guess is to set it up correctly in your 3D program first if there is no other way.