How to get rid of pixelated edges of object

Hi, I create object inside of blender and exported it as gltf so it can be used in Three.JS, but I get some strange pixelated edges on my object like so:


I don’t know if that’s just what WebGL is like or is there some fix for it. I use hdr background and here are some of my settings:

const loader = new RGBELoader()
loader.load("assets/Studio.hdr", texture => {
    texture.mapping = THREE.EquirectangularReflectionMapping
    scene.background = texture
    scene.environment = texture
})


renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1.8
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio * .7, 2))

Does this improve the situation:

renderer = new THREE.WebGLRenderer({antialias:true});
1 Like

Significantly :slight_smile:, thanks