Getting aliasing while using effect composer inspite of using antialiasing passes

Questions
,
1

Hello, I am trying to implement outline around model using outline pass in AR.
I am getting nasty aliasing when I move away from the model, i.e. the model becomes smaller.

I have tried different types of anti-aliasing passes like FXAA/TAA but that didn’t resolve it.

are the passes supposed to be in any particular order that i have missed?

Sharing a snippet of the code below; can share more information if needed.

const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(
      60.0,
      canvasWidth / canvasHeight,
      0.01,
      1000.0
    );
    scene.add(camera);

    const renderer = new THREE.WebGLRenderer({
      canvas,
      context: GLctx,
      alpha: false,
      antialias: true,
    });
    renderer.debug.checkShaderErrors = false
    renderer.autoClear = false;
    renderer.autoClearDepth = false;
    renderer.toneMapping = THREE.ReinhardToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.setClearColor(0xffffff, 0);

    sceneTarget = new THREE.WebGLRenderTarget(canvasWidth, canvasHeight, {
      generateMipmaps: false,
    });

    copyPass = new TexturePass(sceneTarget.texture);
    effectComposer = new EffectComposer(renderer);
    effectComposer.addPass(copyPass);

    const taaRenderPass = new TAARenderPass(scene, camera);
    taaRenderPass.unbiased = false;
    effectComposer.addPass(taaRenderPass);

    const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
    effectComposer.addPass(gammaCorrectionPass);

    combinePass = new ShaderPass(combineShader);
    combinePass.clear = false;
    combinePass.renderToScreen = true;
    effectComposer.addPass(combinePass);

    outlinePass = new OutlinePass(
      new THREE.Vector2(canvasWidth, canvasHeight),
      scene,
      camera
    );
    outlinePass.renderToScreen = true;
    outlinePass.edgeStrength = 10;
    outlinePass.edgeGlow = 0;
    outlinePass.edgeThickness = 10;
    outlinePass.pulsePeriod = 10;
    outlinePass.visibleEdgeColor.set('#f96302');
    outlinePass.hiddenEdgeColor.set('#f96302');
    effectComposer.addPass(outlinePass);


    scene3 = { scene, camera, renderer, effectComposer, outlinePass };

    window.scene3 = scene3;
    window.XR8.Threejs.xrScene = xrScene;

appreciate any help, thanks!

2

Try it with FXAA first. You have to make sure that it’s the last pass of the pass chain (after tone mapping and sRGB conversion). You also have to make sure to properly configure the pass based on your resolution. Check out how the demo does this.

BTW: You can remove antialias: true from the WebGLRenderer ctor call since it has no effect when doing post processing.