How can i get ultra high resolution in three js

[AdarkSt]

this is my code for setting canvas resolution in three js but anyway i has any mini pixels in my view, Is the reason my notebook or maybe i does something wrong?

const resizeRendererToDisplaySize = (renderer) => {
    const canvas = renderer.domElement
    const width = canvas.clientWidth
    const height = canvas.clientHeight
    const needResize = canvas.width !== width || canvas.height !== height
    
    if(needResize) {
        renderer.setSize(width , height , false)
    }

    return needResize
}

const render = (time) => {
    time *= 0.001
    if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWith / canvas.clientHeight
        camera.updateProjectionMatrix();
      }
    
    renderer.render(scene, camera)
    requestAnimationFrame(render)
}

    requestAnimationFrame(render)

[Mugen87]

I’m always a bit confused about the resizeRendererToDisplaySize() routine and its usage.

Can you please setup your renderer like in the official examples:

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

The resize should be done in a separate event listener like so:

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

}

[AdarkSt]

Ok i sets up my renderer like your example and now i have more high quality nearest models is ok, but anyway the distant objects has any mini pixels, may be reason is textures mipmap-s settings, actually now i has not any settings for textures and i think it can be reason of that distant objects pixel look

[marquizzo]

Are you setting your renderer to be anti-aliased?

new THREE.WebGLRenderer({antialias: true})

[AdarkSt]

Yes, here my code after changes

const canvas = document.getElementById("canvasElement")
const renderer = new THREE.WebGLRenderer({canvas, antialias:true})
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

}
addEventListener('resize', onWindowResize)

that is screen of my view please look lines of orbits in distance there are pixels