# How to get photorrealism (light + shadows) in three js

**URL:** <https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874>\
**Category:** Questions\
**Tags:** shadows, lightmap, photorealism\
**Created:** [August 13, 2021, 9:42am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874 "2021-08-13T09:42:24Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![JRefusta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrefusta/32/15028_2.png) [@JRefusta](https://discourse.threejs.org/u/JRefusta)\
**Post date:** [August 13, 2021, 9:42am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/1 "2021-08-13T09:42:24Z")

</div>

Hello everyone,

I was trying to reach photorealism in my three js environment as in the following picture that I found on internet.

 ![imagen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ffce7dbd2e3c3adc50416f9e2f6282d7c77118d6.jpeg)

As far as I know, this is made using lightmap, how I can use this technique in my scene in order to reach similar shadow effects? Should be dynamic, cause my application is interactive.

Is there an alternative to lightmapping in three js that can give me similar results?

By other hand, I want to have realistic reflections in some sub objects of my models (for example, the following ceramic)  
 ![imagen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/2/d26c838a925610187688f000c3bf677658b5e99a.jpeg)

Which is the best way to do this in three js? I found that I can create a material from a CubeCamera like in the following examples provided by three js:

[https://threejs.org/examples/#webgl\_materials\_cubemap\_dynamic](https://threejs.org/examples/#webgl_materials_cubemap_dynamic)  
[https://threejs.org/examples/?q=cubem#webgl\_materials\_cubemap](https://threejs.org/examples/?q=cubem#webgl_materials_cubemap)

But that implies that these materials must be applied to each sub-object of all the objects in the scene that should have reflections. Is there a better way to do It?

Thank you for your time!

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [August 13, 2021, 10:03am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/2 "2021-08-13T10:03:14Z")

</div>

> [@JRefusta](#):
>
> Is there an alternative to lightmapping in three js that can give me similar results?

Yep, tons of tricks and years of work :') The point is that there’s more to light than just _light_ - what makes scene look realistic is the light that bounces of the objects, not the one that comes from a light source.

To create actual photorealistic shadows - take a look at [progressive shadows](https://threejs.org/examples/?q=shadow#webgl_shadowmap_progressive). It does take a few seconds to generate, but the effect is similar to the one you’d get from raytracing.

To create realistic light - you’ll need some kind of [global illumination approximation](https://threejs.org/examples/?q=gi#webgl_simple_gi).

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 13, 2021, 10:03am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/3 "2021-08-13T10:03:52Z")

</div>

i collected some here: [Performant soft shadows THREE Js - #2 by drcmda](https://discourse.threejs.org/t/performant-soft-shadows-three-js/27777/2)

there is about no chance you will get a scene like that without baking, threejs isn’t a raytracer and the existing runtime solutions are either painful to use or very expensive, or both.

baking unfortunately comes with some limitations (you can’t move objects around much). baking is very complex, one of the few tutorials that’s really going into detail is bruno simons threejs journey. in that course he’s baking scenes, and at the same time introduces dynamic elements to it, which might be what you’re looking for.

---

<div class="post-metadata">

**Author:** ![JRefusta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jrefusta/32/15028_2.png) [@JRefusta](https://discourse.threejs.org/u/JRefusta)\
**Post date:** [August 18, 2021, 2:36pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/4 "2021-08-18T14:36:20Z")

</div>

Thanks both of you for the replies guys,

I think that for the shadows+lights it is going to be hard to apply the lights dynamically and see the effect of the shadow in real time with a good efficiency.

But for the reflections

> [@JRefusta](#):
>
> By other hand, I want to have realistic reflections in some sub objects of my models (for example, the following ceramic)  
> ![imagen](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/2/d26c838a925610187688f000c3bf677658b5e99a.jpeg)
> 
> Which is the best way to do this in three js? I found that I can create a material from a CubeCamera like in the following examples provided by three js:
> 
> [https://threejs.org/examples/#webgl\_materials\_cubemap\_dynamic](https://threejs.org/examples/#webgl_materials_cubemap_dynamic)  
> [https://threejs.org/examples/?q=cubem#webgl\_materials\_cubemap](https://threejs.org/examples/?q=cubem#webgl_materials_cubemap)
> 
> But that implies that these materials must be applied to each sub-object of all the objects in the scene that should have reflections. Is there a better way to do It?

Which way do you think I should take?

Thank you!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 18, 2021, 10:12pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/5 "2021-08-18T22:12:34Z")

</div>

Reflections are easy and look stunning, you need PBR materials + environment map.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [August 19, 2021, 2:27am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/6 "2021-08-19T02:27:51Z")

</div>

> [@drcmda](#):
>
> i collected some here: [Performant soft shadows THREE Js - #2 by drcmda](https://discourse.threejs.org/t/performant-soft-shadows-three-js/27777/2)

One thing you didn’t research (and I also haven’t experimented with much) is lightprobes and lightprobe volumes, which should be more useful for moving objects.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 19, 2021, 7:04am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/7 "2021-08-19T07:04:32Z")

</div>

Sounds super interesting, do you know an example for this?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 19, 2021, 8:20am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/8 "2021-08-19T08:20:22Z")

</div>

[Light Probe volume maybe no bug](https://raw.githack.com/donmccurdy/three.js/feat-lightprobevolume-build/examples/?q=volume#webgl_lightprobe_volume)  
[With bug](https://github.com/mrdoob/three.js/compare/dev...donmccurdy:feat-lightprobevolume)  
[With bug](https://three-lightprobevolume-glvcoabvdt.now.sh/examples/webgl_lightprobevolume)  
[Bug](https://github.com/mrdoob/three.js/issues/16228)  
[Forum](https://github.com/mrdoob/three.js/issues/6251)

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [August 19, 2021, 8:56am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/9 "2021-08-19T08:56:36Z")

</div>

Yeah, I only know the examples @Chaser_Code shared, aside from the couple of [official examples](https://threejs.org/examples/?q=lightprobe#webgl_lightprobe_cubecamera) that are not very interesting.

There was some cool work done on this around 2019 when the functionality was added to three.js - but there was never any good documentation or killer examples so I don’t think many people know about it, or how to use it, outside of the 3 or 4 people involved in writing the code. I don’t even know if it’s production ready or if the implementation was completed yet.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 19, 2021, 11:50am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/10 "2021-08-19T11:50:41Z")

</div>

right, i have no idea what this is or does, never heard of it but would love to try it. from how it looks these spheres are just in debug, and they … pre-calc emission or something so that it’s not so expensive? but can it do shadows?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 19, 2021, 1:12pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/11 "2021-08-19T13:12:23Z")

</div>

ive dug out a quick test case with reflections and simple shapes: [Camera pan - CodeSandbox](https://codesandbox.io/s/camera-pan-nsb7f?file=/src/App.js) would it be possible with a lightprobe for these objects to pick up one anothers colors? like the sphere in the middle would be a little yellow on the side due to the plane on the right etc? and does anyone know how? that would be an amazing tool to have.

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 19, 2021, 3:34pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/12 "2021-08-19T15:34:13Z")

</div>

You need this: [three.js webgl - light probe from cubeCamera](https://threejs.org/examples/webgl_lightprobe_cubecamera.html)  
Its generate colors by screening 6 ways like envmap.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 19, 2021, 4:18pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/13 "2021-08-19T16:18:42Z")

</div>

> [@drcmda](#):
>
> would it be possible with a lightprobe for these objects to pick up one anothers colors? like the sphere in the middle would be a little yellow on the side due to the plane on the right etc? and does anyone know how?

That’s the idea. Especially if you can bake the lightprobes offline (much cheaper than CubeCamera online) you can pick up diffuse colors from surrounding (static) objects. Once you have a volume there are basically two ways to apply that light to the object:

- (A) on the CPU, interpolate SH values for the center of the object from the nearest ~4 probes
- (B) on the GPU, interpolate SH values at each vertex or fragment

In [this demo](https://raw.githack.com/donmccurdy/three.js/feat-lightprobevolume-build/examples/?q=volume#webgl_lightprobe_volume) you’re seeing (A), it works well for small dynamic objects and is very cheap. For larger objects (B) would look better as there’s more lighting variation across the object.

I’ve been asking for Blender to expose a Python API for baked light probe irradiance (it bakes that data already, but doesn’t have an API to access it) at [Access baked lightprobe / irradiance volume data from Python? - Python API - Developer Forum](https://devtalk.blender.org/t/access-baked-lightprobe-irradiance-volume-data-from-python/6199).

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 19, 2021, 4:40pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/15 "2021-08-19T16:40:53Z")

</div>

i’ve been trying to implement it from your demo, but these classes don’t seem to exist in threejs, for instance lightprobevolume. when i tried to port they’ve unfortunately fallen behind, they were not easily compatible with class based threejs. is this from an unresolved pr?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [August 19, 2021, 4:51pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/16 "2021-08-19T16:51:31Z")

</div>

The PR is [LightProbeVolume: Baked lighting for dynamic objects by donmccurdy · Pull Request #18371 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/18371)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 19, 2021, 5:14pm UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/17 "2021-08-19T17:14:37Z")

</div>

oh wow, thank you @donmccurdy and @looeee for the pointers. i also never got what lightprobes in blender are for but now it makes sense.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [July 28, 2023, 5:42am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/18 "2023-07-28T05:42:06Z")

</div>

It is possible to reach such quality, but it would also slow down the rendering in real time, the best way to achieve photo realism in threejs is to use baked assets.

See Interior designs

[Demo #1 - Open World](https://theneoverse.web.app/#serini&&serini)  
[Demo #2 - Apartment](https://theneoverse.web.app/#realtours&&tours=apartment)  
[Demo #3 - Edge Apartment](https://theneoverse.web.app/#realtours&&tours=edgeapartment)  
[Demo #4 - Richard Art Gallery](https://theneoverse.web.app/#realtours&&tours=rag)  
[Demo #5 - Lake Track](https://theneoverse.web.app/#threeviewer&&lakelagoon)  
[Demo $6 - Crateria City](https://theneoverse.web.app/#threeviewer&&crateria)

Resources:  
Sketchfab - [Edge apartment](https://sketchfab.com/3d-models/mirrors-edge-apartment-interior-scene-9804e9f2fe284070b081c96ceaf8af96)

Download [Source Code](https://theneoverse.web.app#fSN20251022002)

---

<div class="post-metadata">

**Author:** ![benjaminfortunato](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/benjaminfortunato/32/41742_2.png) [@benjaminfortunato](https://discourse.threejs.org/u/benjaminfortunato)\
**Post date:** [March 27, 2025, 3:09am UTC](https://discourse.threejs.org/t/how-to-get-photorrealism-light-shadows-in-three-js/28874/19 "2025-03-27T03:09:17Z")

</div>

Wouldn’t you need a reflection probe so the reflections are related to the interior environment?