Improve ThreeJS Scene - Scene looks blurry even with antialising

Questions
,
1

Hi,

I am currently working on a glass try-on demo in AR and use ThreeJS as the 3D Rendering engine.

Demo:
https://mazing-ar.com/glass-demo/

I have a problem with the quality of the scene, most 3d models are high in quality, but it seems especially the red one, is getting blurry. Do you have any idea how I could improve the quality here, I already tried various things with renderer, environment and glb loader. I experimented with anisotropy and devicePixelRatio, but I wasn’t successful.

This it how it looks:
image

This is the native model, how I try to achieve:

image
image731×634 78.4 KB

This is the code I’m using to load the …

  1. Environment loading:
    new RGBELoader()
        .setPath( `${PUBLIC_PATH}/3d/environment/` )
        .load( `clarens_night_02_1k.hdr` ,  ( texture ) => {
          texture.mapping = THREE.EquirectangularReflectionMapping;
          texture.anisotropy = this.renderer.getMaxAnisotropy();
          this.scene.environment = texture;
        } );
  1. Renderer Config
    this.renderer = new THREE.WebGLRenderer({
      // alpha: true,
      antialias: true,
      canvas: this.canvas,
      devicePixelRation: window.devicePixelRatio,
      // powerPreference: 'high-performance',
      // logarithmicDepthBuffer: true,
    });
  1. Glb Loader
  loader.load(file, function (gltf) {

            gltf.scene.traverse( ( object ) => {
                if ( object.isMesh === true && object.material.map !== null ) {
                    object.material.map.anisotropy = MAXANISOTROPY;
                }
            } );

            setTimeout(() => {
                res(gltf.scene);
            }, 500)
        }, undefined, function (error) {
            rej(error);
        });

Please let me know if anyone has any ideas, I would really appreciate your help :slight_smile:

Best,
Stefan

2

never heard of that prop, i don’t think it exists. you set pixel ratio on the created renderer instance gl.setPixelRatio(window.devicePixelRatio). dpr by default is 1, so that would look pretty blurry.

2 Likes
3

It’s also not an option that can be passed into WebGLRenderer.

1 Like
4

Hi, and thanks for your answers :slight_smile:

I tried replacing the parameter with manually setting pixelRatio. But, the result still stays the same :-/

Do you know any other way to smooth the model or it‘s reaction to the environment?