My 3D model appears blurry and pixelated

Questions
, , , ,
1

I tried loading a 3d glb model in threejs project but after loading the loading the model. I added an environment like HDRI lighting. The model is not appearing smooth as expected. Can you help in that?

My init function is as follow:

        scene.castShadow = true
        scene.receiveShadow = true
        scene.add(new THREE.AxesHelper(5))

        camera.position.set(15, 15, 15)
        camera.lookAt(0, 5, 0);

        dracoLoadergLB.setDecoderConfig({ type: 'js' });
        dracoLoadergLB.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');

        const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true })
        renderer.setSize(window.innerWidth, window.innerHeight)
        renderer.shadowMap.enabled = true
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.outputEncoding = THREE.sRGBEncoding;
        renderer.physicallyCorrectLights = true;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        renderer.gammaOutput = true;
        renderer.gammaFactor = 2.2;
        renderer.domElement.addEventListener('click', onClick, false);
        if (window.innerWidth >= 600) {
            renderer.setPixelRatio(window.devicePixelRatio);
        }
        setRenderer(renderer)
        
        const { current: container } = refContainer;
        container.append(renderer.domElement)

        composer = new EffectComposer( renderer );
        composer.setPixelRatio(window.devicePixelRatio);
        composer.setSize(window.innerWidth, window.innerHeight);
        const renderPass = new RenderPass( scene, camera );
        composer.addPass( renderPass );
        
        // const glitchPass = new GlitchPass();
        // composer.addPass( glitchPass );
        viewHelper = new ViewHelper(  camera, renderer.domElement );


        orbitControls = setControlsOrbitScene(renderer, camera, orbitControls)
        controls = setControlsFirstPerson(camera, renderer, controls)
        orbitControls.keyPanSpeed = 20

preview (31)
preview (31)1920Ă—892 48.6 KB

When uploaded the same model on editor it appears smooth and good quality
image
image612Ă—575 41.4 KB

2

Are you able to share the model? (Preferably in exactly the same form you’re trying to load it in, not the blend file itself.)

3

https://storage.googleapis.com/grubox-store/gret/avatar/scene%20(22)/scene_22.glb
You can find the file here

4

Looks ok in gltf-viewer.

Could you clean up the code in terms of what you do where? Ie:

  1. First create renderer (don’t resize it, and remove all non-essential things like toneMapping, gammaFactor - iirc that’s not even supported - light accuracy, shadows etc. Literally just renderer.)
  2. Create composer, assign passes - once again, remove stuff like setSize and setPixelRatio - just composer.
  3. Set size to both renderer and composer at the same size - and make sure they are the same size.
  4. Set pixel ratio to composer (I may be wrong, but setting it to renderer won’t matter if you apply postprocessing.)

While going from 1 to 4, you will most likely find a line that’s breaking the rendering. If that won’t happen - could you please try to replicate the issue on codepen ?

1 Like