There is a Strange triangle dimming/ flickering of .glb model, around the model's edges and on the texture, when using AR.js with three.js

Hi all,

I am using AR.js with three.js in react.js for marker-based AR. I’m adding a .glb model on the marker found. But there is a strange triangle dimming/ flickering around the model’s edges and on the texture. I found the following solution for the same:

According to the solution they are setting logarithmicDepthBuffer: true and antialias: false. They’re also upscaling the model by using following lines:
const upscale = 2; // render the model at 200%
renderer.setSize(window.innerWidth * upscale, window.innerHeight * upscale);

But increasing upscaling above 5, places the model away from the marker. My renderer look like the following:

/* globals THREE */

const { Color, WebGLRenderer, sRGBEncoding } = THREE;

export default canvas => {

const renderer = new WebGLRenderer({ antialias: false, logarithmicDepthBuffer: true, alpha: true, canvas });

const upscale = 5.2; // render the model at 500%

renderer.setClearColor(new Color(“lightgrey”), 0);

renderer.setSize(window.innerWidth * upscale, window.innerHeight * upscale);

renderer.outputEncoding = sRGBEncoding;

// renderer.setPixelRatio( window.devicePixelRatio ) = “absolute”; = “0px”; = “0px”;

return renderer;


Please suggest a way to remove model flickering in AR.js. I’m attaching the screenshot for the same.

Thanks in Anticipation.