# Staircase artifacts on Macos with standard material and Effectcomposer

**URL:** <https://discourse.threejs.org/t/staircase-artifacts-on-macos-with-standard-material-and-effectcomposer/44539>\
**Category:** Questions\
**Tags:** macos, bug\
**Created:** [November 10, 2022, 3:56pm UTC](https://discourse.threejs.org/t/staircase-artifacts-on-macos-with-standard-material-and-effectcomposer/44539 "2022-11-10T15:56:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![IARI](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iari/32/1983_2.png) [@IARI](https://discourse.threejs.org/u/IARI)\
**Post date:** [November 10, 2022, 3:56pm UTC](https://discourse.threejs.org/t/staircase-artifacts-on-macos-with-standard-material-and-effectcomposer/44539/1 "2022-11-10T15:56:36Z")

</div>

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):

```javascript
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/4/b439362e1d2183cf5fafece99926351879e732e9.png)

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/5/7575f9d442625862000d0cecef24145d0ce756d2.png)

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.

---

<div class="post-metadata">

**Author:** ![IARI](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/iari/32/1983_2.png) [@IARI](https://discourse.threejs.org/u/IARI)\
**Post date:** [November 17, 2022, 4:20pm UTC](https://discourse.threejs.org/t/staircase-artifacts-on-macos-with-standard-material-and-effectcomposer/44539/2 "2022-11-17T16:20:08Z")

</div>

It was a Z-fighing issue.  
could be resolved by turning on logarithmicDepthBuffer [three.js docs](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.logarithmicDepthBuffer)