Adding reflections


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



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

here are two examples of how it looks

the library is under heavy development and short before a major release, follow to get updates on its progress.


Does THREE.CubeCamera help?

How does this one work?

1 Like

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.

Here is the official SSR example without additional libraries: three.js webgl - postprocessing - Screen Space Reflection

1 Like

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.

@gonnavis Any comments on this statement?

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.

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.

i think he should talk to 0beqz in that case, he’s made all his work and findings open source.

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.