# Adding reflections

**URL:** <https://discourse.threejs.org/t/adding-reflections/44966>\
**Category:** Questions\
**Tags:** reflection\
**Created:** [November 21, 2022, 9:34am UTC](https://discourse.threejs.org/t/adding-reflections/44966 "2022-11-21T09:34:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![binoy\_t](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/binoy_t/32/24330_2.png) [@binoy\_t](https://discourse.threejs.org/u/binoy_t)\
**Post date:** [November 21, 2022, 9:34am UTC](https://discourse.threejs.org/t/adding-reflections/44966/1 "2022-11-21T09:34:45Z")

</div>

Hi,

How can I make the cube reflect on the plane or vice versa?

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/8/b8a18d5c26d076802bf3dd1a21a122b98861ffbb.png)

Regards,  
Binoy

---

<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:** [November 21, 2022, 10:42am UTC](https://discourse.threejs.org/t/adding-reflections/44966/2 "2022-11-21T10:42:29Z")

</div>

this is not trivial. the effect is called SSR, screen space reflections. the only library i am aware of that does it at acceptable speed is [GitHub - 0beqz/screen-space-reflections: Implements Screen Space Reflections in three.js](https://github.com/0beqz/screen-space-reflections)

here are two examples of how it looks

> **[Starwars (forked) - CodeSandbox](https://codesandbox.io/s/starwars-forked-60eq1d)**
>
> Starwars (forked) by drcmda using @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, leva, react, react-dom, react-scripts, three

> **[SSR Test - CodeSandbox](https://codesandbox.io/s/ssr-test-8pbw1f)**
>
> Screen space reflections

the library is under heavy development and short before a major release, follow [https://twitter.com/0beqz](https://twitter.com/0beqz) to get updates on its progress.

---

<div class="post-metadata">

**Author:** ![binoy\_t](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/binoy_t/32/24330_2.png) [@binoy\_t](https://discourse.threejs.org/u/binoy_t)\
**Post date:** [November 22, 2022, 5:40am UTC](https://discourse.threejs.org/t/adding-reflections/44966/3 "2022-11-22T05:40:10Z")

</div>

Does `THREE.CubeCamera` help?

[https://threejs.org/examples/#webgl\_materials\_cubemap\_dynamic](https://threejs.org/examples/#webgl_materials_cubemap_dynamic)

How does this one work?

---

<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:** [November 22, 2022, 9:28am UTC](https://discourse.threejs.org/t/adding-reflections/44966/4 "2022-11-22T09:28:54Z")

</div>

well, kind of, but it wouldn’t look nearly realistic. it’s limited to one or two objects (each CC renders the full scene 6 times), but try it and see how it goes.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 22, 2022, 1:11pm UTC](https://discourse.threejs.org/t/adding-reflections/44966/5 "2022-11-22T13:11:58Z")

</div>

Here is the official SSR example without additional libraries: [three.js webgl - postprocessing - Screen Space Reflection](https://threejs.org/examples/webgl_postprocessing_ssr)

---

<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:** [November 22, 2022, 1:32pm UTC](https://discourse.threejs.org/t/adding-reflections/44966/6 "2022-11-22T13:32:29Z")

</div>

that example imo is not usable in the real world. i’m not sure what the aversion against libraries is around here, a library is just a piece of re-usable software. ssr is a vanilla library, unrelated to the examples i posted. untangling that example will take you hours, and, having done it myself, the results will go nowhere because it’s very very slow.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 22, 2022, 3:43pm UTC](https://discourse.threejs.org/t/adding-reflections/44966/7 "2022-11-22T15:43:58Z")

</div>

> [@drcmda](#):
>
> hat example imo is not usable in the real world.

@gonnavis Any comments on this statement?

---

<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:** [November 23, 2022, 11:48am UTC](https://discourse.threejs.org/t/adding-reflections/44966/8 "2022-11-23T11:48:16Z")

</div>

have you tried it yourself @Mugen87? in my tests it easily brings FPS down, i’ve heard the same from people on threejs discord, so much even that many of them think SSR is not feasible at all in any way or form. this is not a dig against @gonnavis, it’s just a very demanding postpro effect. what 0beqz did with his SSR pass seems to be very different, the effect is applied over time with temporal aleasing, and regionally, it excludes regions it knows it cannot reach, thereby you can get 120fps even with a heavy scene. i have tried the official one without luck, even on small scenes, i have the temporal in production with demanding setups, it works.

and in any case, pmndrs/postprocessing also runs faster than jsm/effectcomposer because it creates a single uber shader from all the passes. i think that would also account for some differences.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 23, 2022, 11:51am UTC](https://discourse.threejs.org/t/adding-reflections/44966/9 "2022-11-23T11:51:16Z")

</div>

When I remember correctly @gonnavis wanted to add additional features and optimizations to the pass. There is one unfinished PR and probably other stuff on his agenda.

---

<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:** [November 23, 2022, 11:52am UTC](https://discourse.threejs.org/t/adding-reflections/44966/10 "2022-11-23T11:52:20Z")

</div>

i think he should talk to [0beqz](https://twitter.com/0beqz) in that case, he’s made all his work and findings open source.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 23, 2022, 12:03pm UTC](https://discourse.threejs.org/t/adding-reflections/44966/11 "2022-11-23T12:03:06Z")

</div>

> [@drcmda](#):
>
> because it creates a single uber shader from all the passes

Yes, this is an advantage but only if you have more than one effect which is not always the case. Many apps just apply a single effect like bloom or pixelation. An Uber shader does not provide benefits in these use cases.

That said, there is the intention to enhance `EffectComposer` in the same way to provide this optimization. We need it for WebXR anyway. When we drop WebGL 1 support next year (at least it is planned for 2023), the first step is to make more use of MRT in context of post processing passes. In the next step, we could think about a deeper integration of post-processing in the renderers (especially `WebGPURenderer`) with Uber shader generation.