# Gadget w/ planar reflections (+full code) **URL:** \ **Category:** Showcase\ **Tags:** reflector, shaders, react-three-fiber\ **Created:** [January 21, 2021, 10:45pm UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667 "2021-01-21T22:45:07Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\ **Post date:** [January 21, 2021, 10:45pm UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/1 "2021-01-21T22:45:07Z")
A little project we made with arc4g: [https://twitter.com/0xca0a/status/1352367448339730432](https://twitter.com/0xca0a/status/1352367448339730432) The dot field and the reflections are rendered to texture by the postprocessing library. Demo: [http://capable-brass.surge.sh](http://capable-brass.surge.sh) Codesandbox: [arc x pmndrs - CodeSandbox](https://codesandbox.io/s/vibrant-johnson-32zuv) ---
**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\ **Post date:** [January 21, 2021, 10:58pm UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/2 "2021-01-21T22:58:43Z")
Wow that looks amazing!! ---
**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\ **Post date:** [January 21, 2021, 11:40pm UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/3 "2021-01-21T23:40:47Z")
Awesome! Love arc4gs work and the scene really captures the look. Are screen space reflections being used here? It looks like just planar reflection from a second camera is being used. ---
**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\ **Post date:** [January 21, 2021, 11:49pm UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/4 "2021-01-21T23:49:33Z")
Yeah it’s planar reflection according to the code. @drcmda it would be better to adapt the title since there is a really big difference between planar and screenspace reflections. Anyway looks great 👍 ---
**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\ **Post date:** [January 22, 2021, 12:02am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/5 "2021-01-22T00:02:00Z")
im so naive - i had no idea there’s a terminology for this, i knew the SSR thing from blender and just assumed this is how it’s called when the bottom reflects up, but yes, it’s using a camera that’s looking upwards and this is rendered on a texture, then blurred. 😃 (so SSR uses something like raycasting, is this correct?) ---
**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\ **Post date:** [January 22, 2021, 12:09am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/6 "2021-01-22T00:09:39Z")
> [@drcmda](#): > > (so SSR uses something like raycasting, is this correct?) SSR is basically reflections done entirely in screenspace, the scene depth and normals are rendered to buffers and at the SSR pass it is marched from the surface till it hits what is reflecting, this allows any surface like a sphere to reflect what the camera captures. This is also one of the minor-to-stronger disadvantages, as it can only reflect what’s on the screen unless a more advanced implementation with a cubemap is used but that still also can’t reflect what was occluded. A bigger issue is the cost of this which is the biggest out of most common post-processing effects. A planar reflection is relatively cheap without those limitations and perfectly suited for scenes like yours. ---
**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\ **Post date:** [January 22, 2021, 10:25am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/7 "2021-01-22T10:25:57Z")
Looks really stunning, great work! Is the shadow on the plane baked? ---
**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\ **Post date:** [January 22, 2021, 10:38am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/8 "2021-01-22T10:38:36Z")
yes, we first tried to make softshadows by code but it claimed a few fps for itself. ---
**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\ **Post date:** [January 22, 2021, 11:03am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/9 "2021-01-22T11:03:38Z")
I like such visuals 🙂 ---
**Author:** ![Omiod](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omiod/32/12485_2.png) [@Omiod](https://discourse.threejs.org/u/Omiod)\ **Post date:** [January 26, 2021, 10:02am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/10 "2021-01-26T10:02:50Z")
arc4g work is so cool, amazing this is done in real time. ---
**Author:** ![mycloudvip](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mycloudvip/32/15769_2.png) [@mycloudvip](https://discourse.threejs.org/u/mycloudvip)\ **Post date:** [January 28, 2021, 4:53am UTC](https://discourse.threejs.org/t/gadget-w-planar-reflections-full-code/22667/11 "2021-01-28T04:53:26Z")
Beautiful work! Congrats!!!