Isometric Interior Help (Shaders, Materials, Lighting)

I really want to recreate this setup in threejs, but i’m confused how to implement it. The past couple of weeks I’ve been playing with regular lighting (ambient, spotlight, directional) but i know these options will not replicate the lighting in the scene. I was thinking of using some combination of the following:

  • custom materials (standard and physical material configuration)
  • custom lighting (really need some help here)
  • postprocessing (bloom, SSGI, SSAO)

I’m pretty paralyzed at the wide range of options and need help narrowing down. Maybe i’ll have to implement a set of custom shaders. Would love some suggestions on which dynamics are involved in the interior, it looks like some bloom, soft shadows, reflective materials? What settings would you suggest? The part i’m mainly confused on is which effect is used where in the picture.

The example does use raytracing/pathtracing but this is obviously too expensive of an operation so I’m looking around for alternatives. I don’t want to bake in blender as this takes way too long to execute and can be quite tedious.

You’re going to spend much more time figuring out your post processing stack, materials, lights etc setup and tweaking it properly instead baking it in Blender.

It will be just as tedious, probably more since you’ll likely have to do some debugging. And if you don’t want to update your parameters in your code and wait for the page to reload to see changes, you’ll need to implement a GUI to tweak your settings. If baking in Blender takes a long time, you can always start baking before you head out to do some grocery shopping, or take a shower, or have dinner…

Sorry for being the bearer of bad news, but baking your textures in Blender is your best bet if you want to spend a reasonable amount of time on this.

Else you’d pretty much need to implement all that you’ve mentioned in your post. There are some libraries that can help with these effects, but getting them setup properly will take some time as the ideal settings are usually heavily dependent on the model you’re working with / the performance you’ll be satisfied with.

If you still want to try it by code, the way I’d do it is to load in SSGI and SSAO from the realism-effects library, set physical materials on all the objects in the scene. Then create a GUI where all lights, materials, postprocessing, environment maps, renderer and shadow settings can be tweaked, and spend a lot of time tweaking these.

1 Like