Hello everyone,
I’m currently an intern at a company that’s developing a 3D web-app with Three.js. With this web-app users are capable of creating their own environment or recreate their homes and place customizable furniture and other objects that can be ordered directly in the configurations they chose. I have some prior experience with 3D and I know a thing or two about Three.js. They recently asked me to look into their current lighting situation and how it could be improved. We have a couple different quality settings that should be switched between depending on the device being used. With permission of the company they asked me to share some images and information about the current situation and hopefully get a response on how somebody with more experience would approach this.
On the lowest setting we use:
- 1 ambient light
- 1 directional light pointed downwards
This setting is intended for low-end devices, only the directional is casting shadow.
On the medium setting we use:
- 2 spotlights on both sides of the scene
- 1 ambient light
- 1 directional light pointed downwards
This setting is a bit more performance heavy, intended for higher-end mobile phones and low-end desktops. My concern with this setup is that spotlights should not be used in this way. It’s causing quite a bit of strain on my S9 with larger scenes. Both spotlights are also casting shadows.
Finally we have a high setting:
- 4 spotlights in each corner
- 1 ambient light
- 1 directional light pointed downwards
This settings is only meant for desktops, with this setting we hope to achieve a situation as close to realistic as possible. That means full PBR implementation and a realistic light/shadow situation. Again I think the use of spotlights this way is not ideal and should be improved.
Now the big question is, how would you guys approach this situation and optimize lighting for each use-case so with both mobile and desktop users in mind. If you need more information to judge the situation, please let me know! Thanks for reading 