Refracted objects are flickering

Questions
, ,
1

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

flicker

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?

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

try this attributes

3

Unfortunately it’s still flickering :frowning:

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.

4

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

5

How to get higher resolution environment map reflections may be of some help - reflections and refractions work kinda the same, the mapping sphere is just bent the other way.

6

I finally prepared a live code example. (full screen link) (please close the error pop-up, it’s from rotating GLTF that hasn’t loaded yet).
flickering_still

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

@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.

7

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.

8

setPixelRatio 1 setPixelRatio 0.2

image
image1045×523 46.5 KB

1 Like
9

setPixelRatio 0.2 low cost calculation
setPixelRatio 1 not low cost calculation

10

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

//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.

//renderer
renderer.setRenderTarget(renderTarget)

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