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 )
renderer.domElement.style.position = “absolute”;
renderer.domElement.style.top = “0px”;
renderer.domElement.style.left = “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.