How to set antialiasing while using EffectComposer in Three.js r130

Questions
,
1

How to enable antialiasing while using EffectComposer in latest version in Three.js?

fxaaPass.material.uniforms → it seems to no longer exist (only fxaaPass.uniform).

This not work in Three.js r130:

var fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
var pixelRatio = renderer.getPixelRatio();
var uniforms = fxaaPass.material.uniforms;
uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );

I tried something like this but it still doesn’t work:

const effectFXAA = new ShaderPass(FXAAShader);
const pixelRatio = this.renderer.getPixelRatio();

effectFXAA.uniform = {
  resolution: {
    type: "v2",
    value: {
      x: 1 / (window.innerWidth * pixelRatio),
      y: 1 / (window.innerHeight * pixelRatio)
    }
  }
}
this.composer.addPass(effectFXAA);
effectFXAA.renderToScreen = false;
1 Like
2

I suggest you code it exactly like in the respective example: three.js WebGL - postprocessing - FXAA

1 Like
3

do you still need that with webgl multisampling?

let target
if (isWebGL2Available()) {
  target = new WebGLMultisampleRenderTarget(size.width, size.height, {
    format: RGBAFormat,
    encoding: sRGBEncoding,
  })
  target.samples = 8
}

const composer = new EffectComposer(gl, target)

i’ve made good experiences with it, though i believe some effects don’t work properly with it. otherwise you don’t need smaa or fxaa and the result is clean.

2 Likes
4

Thx drcmda,

It works perfectly :slight_smile:
Its performed faster than FXAA.

5

Just keep in mind that WebGLMultisampleRenderTarget does not work with WebGL 1. That can be a problem in certain scenarios.

1 Like
6

the code above should be progressive. if webgl2 is not available safari users get jaggy edges and they deserve nothing less. :stuck_out_tongue_winking_eye:

4 Likes
7

@Mugen87 @drcmda @isladjan
I am using EffectComposer and UnrealBloomPass in the scene, but after adding post-processing the bike model’s some parts are giving some white dots jittering effects. I don’t know it is due to aliasing effect, due to post-processing, due to model mesh issue or something else.
Without post-processing still it is there but it not highlighting too much therefore it doesn’t come in notice, but after adding post-processing it gets highlighted and can be easily noticed.

Can you guys help me to find the issue and fix it

Try to see the difference in the below parts of the bike which are marked.