Using Post-Processing through EffectComposer causes jagged artifacts on model [Browser: Safari]

Hi! I’m new to Three.js and followed this tutorial (three.js docs) to add a glitch post-processing to my scene, which was imported from blender. But when I use composer.render(); to instead of the normal renderer.render(scene, camera); I get some artifacts on my model as you can see in the image below.

Using renderer.render(scene, camera);

Using composer.render();

As you can see, the area around the eye looks jagged when using composer’s render function. When viewing from a different camera angle, some other part looks jagged. Is there some way to fix this or reduce it?

P.S. The camera and lighting being used here is part of blender scene and not a Three.js one.

Here’s the code that I’m using:

// let THREE = require("three");
import * as THREE from "three";
import {PointLight} from "three";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass.js";
import {GlitchPass} from "three/examples/jsm/postprocessing/GlitchPass.js";
// import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";

console.log("Starting ThreeJS...")

// Scene & Camera
const scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
    25,
    window.innerWidth / window.innerHeight,
    0.1,
    20000
);
camera.position.set(1, 1, 20);

// Loader
const loader = new GLTFLoader();

// Renderer
const renderer = new THREE.WebGLRenderer();
// renderer.setClearColor(0xC5C5C3);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
document.body.appendChild(renderer.domElement);

// Post Processing
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
const glitchPass = new GlitchPass();
composer.addPass(renderPass);
composer.addPass(glitchPass);


// Load Light
let ambientLight = new THREE.AmbientLight(0xcccccc);
ambientLight.intensity = 1;
scene.add(ambientLight);

// Load the model
loader.load("/static/3d_models/monkey.glb", function (gltf) {
    console.log(gltf.scene.children);
    scene.add(gltf.scene);
    // @ts-ignore
    // Camera stuff
    camera = gltf.cameras[0];

    composer.removePass(renderPass);
    composer.removePass(glitchPass);

    composer.addPass(new RenderPass(scene, camera));
    composer.addPass(new GlitchPass());

    // Light stuff
    let light: PointLight = <PointLight>gltf.scene.getObjectByName("Light_Orientation");
    light.intensity = 120;
    light.castShadow = true;
    //Set up shadow properties for the light
    light.shadow.mapSize.width = 1024;
    light.shadow.mapSize.height = 1024;
    light.shadow.camera.near = 0.5;
    light.shadow.camera.far = 500;
    // light.shadow.focus = 1; // default

    // Mesh stuff
    gltf.scene.traverse(object => {
        if(object instanceof THREE.Mesh && object.name !== "Plane") {
            object.castShadow = true;
            console.log(`Shadow set for ${object.name}`);
        }

        if (object.name === "Plane") object.receiveShadow = true;
    })
}, undefined, function (error) {
    console.error(error);
});

// Frame Loop
function animate() {
    requestAnimationFrame(animate);

    // renderer.render(scene, camera);
    composer.render();
}
animate();

It’s both eyes, … looks like maybe antialiasing isn’t set up when running through EffectComposer, you could try adding an FXAA pass too?

Couldn’t find FXAA pass in postprocessing (three.js/examples/jsm/postprocessing at dev · mrdoob/three.js · GitHub). Did you mean FXAA shader? I tried SMAA and TAA postprocessing passes, but it didn’t fix it.

On the other hand, I tested this on Firefox and it looks perfect over there. So it might be some browser issue. The screenshots above were taken in Safari.

Any way to make it look right on Safari?

The standard antialiasing of the WebGLRenderer({ antialias: true }) is MSAA, which is not used with the effectComposer. You could try to use FXAA, but the result will be different/worse.
If you want to use PP and MSAA, you have to go for the multisampled rendertarget (This is only supported with WebGL2)

Using SSAARenderPass you’ll get a even better AA than with MSAA, but it costs performance

See this discussion

This doesn’t look like an AA issue – in fact both of the images you posted look like they have AA disabled. It looks more like an issue with depth buffer precision, though without being able to run both versions of your code side by side it’s hard to tell why it would only affect the render with the composer.

Here are a couple things to try:

  • I know you’re using the camera from the GLTF file but in your code snippet you set the the camera far value to 20000 which is really large. If the GLTF camera is set to a large range try setting it to a lower value like 100 or 1000 to see if that has any effect.

  • Try enabling logarithmicDepthBuffer on the WebGLRenderer.

This fixed it! :tada:

I’ll try and read more about logarithmicDepthBuffer property, but is this something that’s only required for Safari? Because as I mentioned in the earlier reply, this issue was only happening on Safari. It’s working fine on Firefox, without the need for logarithmicDepthBuffer.