Staircase artifacts on Macos with standard material and Effectcomposer

Questions
,
1

I have a render-problem on Apple devices, which i managed to get down to the following minimal example (included OrbitControls just to allow for a better perception of the issue):

import {
    BoxGeometry, DirectionalLight, DoubleSide,
    Mesh,
    MeshStandardMaterial,
    PerspectiveCamera,
    Scene,
    WebGLRenderer
} from "three";
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass";
import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer";
import {ShaderPass} from "three/examples/jsm/postprocessing/ShaderPass";
import {GammaCorrectionShader} from "three/examples/jsm/shaders/GammaCorrectionShader";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

const container = document.body;
const scene = new Scene();
const camera = new PerspectiveCamera(10, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(30, 20, 50)

const renderer = new WebGLRenderer({antialias: true});
container.appendChild(renderer.domElement);
renderer.setSize(innerWidth, innerHeight);

renderer.setClearColor(0x101010, 1);
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);

const material = new MeshStandardMaterial({
    color: 0x3399ff,
    side: DoubleSide
});
let cubeGeometry = new BoxGeometry(5, 0.5, 3);
const cube = new Mesh(cubeGeometry, material);
scene.add(cube);

const mainLight = new DirectionalLight(0xffffff, 1.5)
mainLight.position.set(-9, 17, -15)
scene.add(mainLight)
controls.update()

const composer = new EffectComposer(renderer)
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass)
const gcPass = new ShaderPass(GammaCorrectionShader)
composer.addPass(gcPass)
renderer.setPixelRatio(devicePixelRatio);
composer.setPixelRatio(devicePixelRatio);

(async () => {
    while (true) {
        composer.render()
        await new Promise(requestAnimationFrame)
    }
})()

Here’s how its supposed to look (i.e. Chrome windows):

image
image1501×943 4.96 KB

This is what it looks like on Apple devices (Safari, but also chrome or other browsers):

image
image909×441 14.7 KB

Important factors to get this result are:

  • MeshStandardMaterial with side: DoubleSide and transparent must be false (or unset)
  • render using an EffectComposer with at least a renderpass and a shaderpass
  • use a PerspectiveCamera with a narrow field of view (the smaller the easier it will be visible)

Is there a way to fix this issue?
Note that in the application where this is an issue I have no (or limited) control over

  • the imported model, lights
  • the camera fov

these can be changed by the user

The application uses the effectcomposer with several passes.
I do however not yet know if doing the postprocessing ‘manually’ makes a difference.

2

It was a Z-fighing issue.
could be resolved by turning on logarithmicDepthBuffer three.js docs