My 3D model appears blurry and pixelated

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' });

        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) {
        const { current: container } = refContainer;

        composer = new EffectComposer( renderer );
        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

When uploaded the same model on editor it appears smooth and good quality

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.)
You can find the file here

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