Lighting advice

Questions
, ,
1

Hi, looking for some lighting advice…

  • If you are using a HDR for lighting, do you also typically use additional lights (ambient/ directional etc?)

  • I assume if I want shadows, or a floor shadow , that can only be achieved with additional lights in the scene somewhere? In which case how do you ensure it matches/aligns with the HDR background?

  • I don’t think three has the ability to rotate the environment, so when you see things like sketchfab doing it, how is that achieved?

1 Like
2
  • it depends, you need lights for shadows at least unless they’re pre-baked
  • if you align lights with the environment you get more realism, i would always try to do that
  • you can, but it’s a bit more involved

generally, take a look: Live envmaps and getting realistic studio lighting almost for free the best way forward is to not rely on hdri images, or not solely, but to create your own environment with light emitting shapes. this environment can be live, you can rotate it or move lights through the scene.

here’s what kind of a difference this can make, without a proper environment, cgi cheese:

2
22294×1240 63.9 KB

with an environment:

1
12294×1240 107 KB

Demo: https://lwo219.csb.app
Sandbox + code: Building live envmaps - CodeSandbox

if you can consider react + three, this is a piece of cake. otherwise you’ll have to build your own, but you can take the code as a reference.

1 Like
3

ps here’s another example, same model: Building live envmaps RC2 - CodeSandbox the idea in general is that form is something you obtain from placing light and shadows, just like in photography, an hdri you download off hdri haven will never allow you to do that.

Screenshot 2022-04-01 at 23.29.15
Screenshot 2022-04-01 at 23.29.151920×1212 61.7 KB

4

Thanks for the suggestions. Those examples do indeed look fantastic. I am not familiar with react, so its a bit difficult for me to follow, it would be great if someone could turn this into a vanilla JS example!

Am I understanding correct that you are not using a HDR image but rather primitives to create the light? What about reflections? I usually think the reflections from an image adds to the realism (even when blurred)

My final goal is to give the end user the abilty to change the environment/lights, which seems easy to do if just swapping a HDR, I guess with this I would have to have a load of pre arranged setups for them to choose?

5

correct, environment is just a cubemap, so put up a cubecamera and film a separate scene into that map and now even a plane can become a light, like a lightformer in photography. you get reflections of course, what you see on these cars is just that, these are stripes (THREE.PlaneGeometry). you can also mix it with a hdri. but a bare hdri-haven export will never give you results like that.

for instance, same model, with an hdri (this one: pmndrs market -)

Screenshot 2022-04-02 at 12.14.47
Screenshot 2022-04-02 at 12.14.471920×1212 55.7 KB

6

film a separate scene

Does that mean we will be doing x2 the amount of render calls?

7

You don’t necessarily need to render the cube camera at the same framerate or even in realtime. Just rendering once to get your environment texture can be enough.

8

Would I be correct in saying this is the same approach as model-viewer when you choose neutral lighting?

Also @drcmda you say you can rotate an environment “but its a bit more involved” are you able to elaborate? I really like the way sketch fab does it, but cant figure out how

9

Yes, it’s a variation of THREE.RoomEnvironment (just a custom Scene) and could be set up like this: