We are unable to reach the rendering quality, while using Regarding Post Processing with composer rendering

Questions
, , , , , ,
1 
var textureLoader = new THREE.TextureLoader();
	var objLoader = new THREE.OBJLoader();
        var mtlLoader = new THREE.MTLLoader();
        
        mtlLoader.setBaseUrl('assets/');
        mtlLoader.setPath('assets/');
        mtlLoader.load('SBKNI-072B-WOOD-72.mtl', function(materials) {
			console.log(materials)
            materials.preload(); 
            objLoader.setMaterials(materials);
            objLoader.setPath("assets/");
            objLoader.load('SBKNI-072B-WOOD-72.obj', function(object) {
				
				
                console.log(object)
                obj = object;
				
                loadTexture('Texture/Hardwood/teak-texture.png', obj);
				
                mesh = object;
                mesh.position.y = -35;
				//var material = new THREE.MeshLambertMaterial({color: 0xffffff, side:THREE.DoubleSide})
				var img_path = $(".selected img.hardwoodImg").attr("src");
                                loadTexture(img_path, obj);
                                var pwd_img_path = $(".selected > .image-PowderCoat").attr("name");
                                loadColorPowderCoat(pwd_img_path, obj)
				
                object.traverse(function(child) {
					
                    if (child instanceof THREE.Mesh) {
						
						if (child.material.name == "Stainlesssteel" ||  child.material.name == "SqrAlm" ) {
                        
						child.material.color.set(0x696969);
                        child.material.needsUpdate = true;
                     }

                        child.recieveShadow = true
                        child.castShadow = true;
			
                    }
                });
                mesh.scale.set(3.5, 3.5, 3.5);
				
                scene.add(mesh);
            });
        });
 var renderer = new THREE.WebGLRenderer({
            antialias: true,
            preserveDrawingBuffer: true,
            alpha: true
			
        });
		//console.log( renderer.info );
		//console.log(scene.children );
	
        renderer.shadowMapEnabled = true;
        renderer.shadowMapType = THREE.PCFSoftShadowMap;
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.gammaFactor = 1;
        renderer.gammaOutput = true;
        document.body.appendChild(renderer.domElement);
        renderer.domElement.setAttribute("id", "canvas_id");

        // load texture

        var controls = new THREE.OrbitControls(camera, renderer.domElement);
		
		let composer = new POSTPROCESSING.EffectComposer(renderer);
        composer.addPass(new POSTPROCESSING.RenderPass(scene, camera));

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
            if (resizeRendererToDisplaySize(renderer)) {
                const canvas = renderer.domElement;
                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                camera.updateProjectionMatrix();
				
            }
        }

        function animate() {
            controls.update();
           composer.render();
            requestAnimationFrame(animate);

            if (resizeRendererToDisplaySize(renderer)) {
                const canvas = renderer.domElement;
                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                camera.updateProjectionMatrix();
            }
        }

        animate();

Rendering
Rendering1045×448 72.2 KB

2

Where is the expected rendering quality generated?

3

The expected quality generated through in 3Js with post processing rendering, which provided as a sample to reach the quality.

4

The depth fading can be easily achieved with a Fog.

5

And this is probably related : sRGB encoding as a postprocess pass

2 Likes