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

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;

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

1 Like

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.

1 Like

Thx drcmda,

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

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

1 Like

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:

2 Likes