I am currently working on a project in three.js where I have a large plane with a texture map. However, I am facing an issue with blurring in the mid-distance and want to adjust the depth of field (DOF) to focus more on the floor material, especially along the right side.
Check out the texture map here.
You can view the original code here.
Performance is not a concern for me, so any solution that enhances texture fidelity and focus, compatible with the latest Firefox in Xvfb using OS mesa drivers, would be appreciated.
I tried to modify the code from http://threejs.org/examples/webgl_postprocessing_dof.html, but it did not yield the expected results as it still appeared too blurry. You can see the result with DOF Postprocessing here.
Below is a snippet of the code (refer to jsFiddle link for the complete source):
doRender = function() {
renderer = new THREE.WebGLRenderer({antialias:true, preserveDrawingBuffer:true});
FOV = 60;
camera = new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, .1, 8000);
camera.position.x = -100;
camera.position.y = 300;
camera.position.z = 1000;
camera.lookAt(new THREE.Vector3(0, 300, 0));
// Add Floor planes
// FLOOR
floorTexture.needsUpdate = true;
var floorMaterial = new THREE.MeshPhongMaterial( { map: floorTexture, side: THREE.DoubleSide } );
var floorGeometry = new THREE.PlaneBufferGeometry(4*1024, 4*1024, 256, 256);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.doubleSided = true;
floor.rotation.x = Math.PI / 2;
floor.rotation.z = Math.PI / 3.9;
scene.add(floor);
var moreFloor2 = floor.clone();
moreFloor2.translateY(-4*1024);
scene.add(moreFloor2);
}
window.onload = function() {
// Enable cross-origin access to images
THREE.ImageUtils.crossOrigin = '';
floorTexture = THREE.ImageUtils.loadTexture('http://i.imgur.com/iEDVgsN.jpg?1', THREE.UVMapping, doRender);
};