# Refracted objects are flickering

**URL:** <https://discourse.threejs.org/t/refracted-objects-are-flickering/42065>\
**Category:** Questions\
**Tags:** material, refraction, physical-material\
**Created:** [August 31, 2022, 1:02pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065 "2022-08-31T13:02:24Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![xander-m](https://avatars.discourse-cdn.com/v4/letter/x/d26b3c/32.png) [@xander-m](https://discourse.threejs.org/u/xander-m)\
**Post date:** [August 31, 2022, 1:02pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/1 "2022-08-31T13:02:24Z")

</div>

Refraction in Three.js is everything I could ever ask for, except it’s flickering!

![flicker](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f071f2c8fcf16e02f119e711672d5aea95368c0.gif)

I’m using a simple `transmission: 1, thickness: 0.2` for my material. In the above gif I also have a transparent background, but turning it off doesn’t help the flicker, only removes that ugly light outline.

Is there a way to somehow make it stop flickering?

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [August 31, 2022, 1:10pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/2 "2022-08-31T13:10:49Z")

</div>

```javascript
// create renderer
const renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true,
    canvas
});

```

try this attributes

---

<div class="post-metadata">

**Author:** ![xander-m](https://avatars.discourse-cdn.com/v4/letter/x/d26b3c/32.png) [@xander-m](https://discourse.threejs.org/u/xander-m)\
**Post date:** [August 31, 2022, 1:26pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/3 "2022-08-31T13:26:38Z")

</div>

Unfortunately it’s still flickering ☹

This particular case is definitely a result of my objects being very thin, but big objects produce the same flickering when I turn up the roughness to like \>0.6. It has something to do with how they appear “sliced” into lines/pixels when refracted, I think. Could be wrong.

---

<div class="post-metadata">

**Author:** ![Gundeep\_Singh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gundeep_singh/32/25485_2.png) [@Gundeep\_Singh](https://discourse.threejs.org/u/Gundeep_Singh)\
**Post date:** [August 31, 2022, 1:35pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/4 "2022-08-31T13:35:10Z")

</div>

Show some code, no one guide you with words make some live example

---

<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 31, 2022, 3:59pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/5 "2022-08-31T15:59:40Z")

</div>

[How to get higher resolution environment map reflections](https://discourse.threejs.org/t/how-to-get-higher-resolution-environment-map-reflections/29871) may be of some help - reflections and refractions work kinda the same, the mapping sphere is just bent the other way.

---

<div class="post-metadata">

**Author:** ![xander-m](https://avatars.discourse-cdn.com/v4/letter/x/d26b3c/32.png) [@xander-m](https://discourse.threejs.org/u/xander-m)\
**Post date:** [September 5, 2022, 8:13am UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/6 "2022-09-05T08:13:04Z")

</div>

I finally prepared a [live code example](https://codesandbox.io/s/3js-flickering-refraction-problem-s164oq?file=/src/index.js). ([full screen link](https://s164oq.csb.app/)) (please close the error pop-up, it’s from rotating GLTF that hasn’t loaded yet).  
 ![flickering_still](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5e3865215f63772a3a3d650d93a33b7806d6509d.gif)

I forked a tutorial I used for glass and placed my objects there. Make sure you give the controls a shot and see how they influence the refraction. Turning roughness to low really emphasizes the flickering and visible pixelization, especially visible in the sphere object.  
 ![uglypixels](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/7/c74a1ba3e9f2115738a17925462678b1a2c6cf7e.gif)

* * *

@mjurczyk I don’t really know how to proceed with your lead. It seems that the changes these threads are suggesting are with scene.environment which I believe is an image texture and here we’re refracting other 3D objects. But I’m a Threejs beginner, so maybe I’m just not getting it.

* * *

Anyway, the more I think about it, the less faith I have that it’s possible to increase the resolution of the refraction, but I’m still clinging to hope that it’s possible to reduce the flickering.

---

<div class="post-metadata">

**Author:** ![xander-m](https://avatars.discourse-cdn.com/v4/letter/x/d26b3c/32.png) [@xander-m](https://discourse.threejs.org/u/xander-m)\
**Post date:** [September 5, 2022, 12:16pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/7 "2022-09-05T12:16:04Z")

</div>

I discovered the solution! I had to increase `.setPixelRatio()` on my renderer, to 2 or more.

I realized that not only does the refraction flicker – but so does the thin object itself in general, but it just wasn’t as noticeable.

I’m not sure how does refraction work, but I assume it just stretches our rendered image and warps it. So when magnified, the flickering was more noticeable. I’m not exactly sure what .setPixelRatio does, but I assumed it increases the density of pixels or something. And it worked! The refraction no longer flickers and looks pretty HQ.

I don’t know what it means for performance, or if there will be any consequences, so I’m open to your thoughts, but that’s definitely one way to solve 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:** [September 5, 2022, 12:32pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/8 "2022-09-05T12:32:22Z")

</div>

setPixelRatio 1 setPixelRatio 0.2

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/d/6d211f92392239bf74853b764728ff9388ab9b15.jpeg)

---

<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:** [September 5, 2022, 12:46pm UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/9 "2022-09-05T12:46:06Z")

</div>

setPixelRatio 0.2 low cost calculation  
setPixelRatio 1 not low cost calculation

---

<div class="post-metadata">

**Author:** ![A4tur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/a4tur/32/28513_2.png) [@A4tur](https://discourse.threejs.org/u/A4tur)\
**Post date:** [April 20, 2023, 11:43am UTC](https://discourse.threejs.org/t/refracted-objects-are-flickering/42065/10 "2023-04-20T11:43:41Z")

</div>

I wouldn’t set the pixel ratio more than 2, instead you can enable the antialias and apply multisampling like this:

```javascript
//renderer
const renderer = new THREE.WebGLRenderer({
    canvas, //real canvas
    antialias: true, //enable antialias
})

//renderTarget
const renderTarget = new THREE.WebGLRenderTarget(canvas.width, canvas.height, {
    samples: 4
})

```

After you can assign the renderTarget to either your renderer or composer.

```javascript
//renderer
renderer.setRenderTarget(renderTarget)

//composer
const composer = new EffectComposer(renderer, renderTarget)

```