# Refraction texture does not render any object

**URL:** <https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275>\
**Category:** Questions\
**Tags:** material\
**Created:** [May 3, 2024, 11:52pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275 "2024-05-03T23:52:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Giang\_Le](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giang_le/32/38757_2.png) [@Giang\_Le](https://forum.babylonjs.com/u/Giang_Le)\
**Post date:** [May 3, 2024, 11:52pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/1 "2024-05-03T23:52:31Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#GRDHOZ%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Beside render list contains ground, refraction texture is still empty

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/1/61d2ebe2bcdb8df6ee0f391a30f409da2cf26097.png)

---

<div class="post-metadata">

**Author:** ![mrlooi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mrlooi/32/18406_2.png) [@mrlooi](https://forum.babylonjs.com/u/mrlooi)\
**Post date:** [May 4, 2024, 2:22am UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/2 "2024-05-04T02:22:47Z")

</div>

@sebavan @Deltakosh this is also a bug reported from the Pixcap team  
(cc: @Coffiend)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 4, 2024, 4:14pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/3 "2024-05-04T16:14:07Z")

</div>

You need to change the refraction plane position but I am not sure this will work with PBR anyway as it won t handle the roughness correctly.

cc @Evgeni_Popov if he has any idea ?

---

<div class="post-metadata">

**Author:** ![Giang\_Le](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giang_le/32/38757_2.png) [@Giang\_Le](https://forum.babylonjs.com/u/Giang_Le)\
**Post date:** [May 4, 2024, 6:05pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/4 "2024-05-04T18:05:36Z")

</div>

I’m using RenderTargetTexture as in KHR\_materials\_transmission.ts, which makes refraction always appear, but objects in front are always brought inside the refraction surface. Is there any way to eliminate this?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/8/a8176d580c568832509cf9dcceea6bcff7537874.jpeg)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 5, 2024, 2:21pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/5 "2024-05-05T14:21:56Z")

</div>

Here’s a corrected PG using `RefractionTexture`:

> **[Babylon.js Playground](https://playground.babylonjs.com/#GRDHOZ%2318)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Roughness can be simulated by using a blur pass, as in [PBR Refraction roughness (blurriness) - #8 by Evgeni\_Popov](https://forum.babylonjs.com/t/pbr-refraction-roughness-blurriness/23334/8).

Regarding your last question, it’s a “by-product” of the technique we use, unfortunately: it renders all the opaque objects and use the texture as the refraction texture. You can try to remove the objects you don’t want in the opaque texture, as in:

> **[Babylon.js Playground](https://playground.babylonjs.com/#SYQW69%231217)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

However, you would have to reconstruct the render list it on each frame, if your camera can move. In the PG above, I simply remove the box from the refraction texture, so if you turn the camera so that the box is behind the amber block, the box won’t be refracted and will disappear.

---

<div class="post-metadata">

**Author:** ![Giang\_Le](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giang_le/32/38757_2.png) [@Giang\_Le](https://forum.babylonjs.com/u/Giang_Le)\
**Post date:** [May 5, 2024, 3:30pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/6 "2024-05-05T15:30:00Z")

</div>

I don’t see the front-refraction issue in the dragron model, even when I put a opaque object infront of it, is there any special technique behind it ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 5, 2024, 6:05pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/7 "2024-05-05T18:05:38Z")

</div>

The dragon is transparent, so it is not part of the list of opaque objects. The refraction texture is applied to the dragon.

---

<div class="post-metadata">

**Author:** ![Giang\_Le](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giang_le/32/38757_2.png) [@Giang\_Le](https://forum.babylonjs.com/u/Giang_Le)\
**Post date:** [May 5, 2024, 9:50pm UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/8 "2024-05-05T21:50:46Z")

</div>

I see you use refraction plane for scene clipping, how to calculate the right argument of the refraction plane ? Why it’s not used in the `KHR_materials_transmission.ts`

can you share me an example for multiple refraction objects?

I tried but it looks weird from the top view

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/1/c1bf0d6e37a2172c0e6220dffd7182afa83474b8.jpeg)

> **[Babylon.js Playground](https://playground.babylonjs.com/#MCCZ2W%2319)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 6, 2024, 9:10am UTC](https://forum.babylonjs.com/t/refraction-texture-does-not-render-any-object/50275/9 "2024-05-06T09:10:04Z")

</div>

Refractive objects cannot appear in the refraction of other refractive objects, as only opaque objects are taken into account when generating the refraction texture. As a result, you won’t be able to see the dragon in the refraction of the box (nor vice versa).

Managing transparency and refraction is difficult, so we have to make a compromise to be able to work in real time. I think there are other techniques that could be used to deal with refraction (such as screen space refraction), but they’re not foolproof either.
