Question

In my project, a added a cubeCamera to the scene to get dynamic envMapping (reflection). As you see, the backside wall of the kitchen has reflection and there is some blur on it and also edges are rendered non anti-aliased. So how can i get rid of broken lines and have sharpened reflection on the wall?

Code :

var cubeCamera = new THREE.CubeCamera(1, 1000, 256);
cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(cubeCamera);

 var material = new THREE.MeshPhongMaterial({
                ambient: 0x996633,
                reflectivity: 1,
                color: 0x996633,
                specular: 0x050505,
                shininess: 100,
                shading: THREE.SmoothShading, //THREE.FlatShading,
                blending: THREE.NormalBlending,
                side: THREE.DoubleSide,
                envMap: project.cubeCamera.renderTarget,
                wireframe: false
            });

objMesh.material = material;

in render function:

 objMesh.visible = false;
 objMesh.cubeCamera.updateCubeMap(renderer, scene);
 objMesh.visible = true;

 renderer.render(scene, camera);

So code is like every sample found on the web. No difference. But one thing i caught is, reflection on primitives is perfect, but reflection on custom mesh loaded from obj file is poor.

Answer 1

Environment mapping is based on the assumption that the environment is infinitely far away, which is not a valid approximation in your case. Therefore, you will see artifacts you don’t like.

The broken edge effect may be reduced if you double the resolution of your cube camera.