CODEWITHSUNDEEP
javascriptthree.js
SpliFF
SpliFF

Reputation: 38956

Reduce distance blurring in three.js

I have a large plane with a texture map in three.js and I'm finding that the default settings I'm using cause too much blurring in the mid-distance. I want to increase the DOF so more of the floor material is in focus (especially along the right side).

https://i.sstatic.net/mVbT2.jpg

Original: http://jsfiddle.net/5L5vxjkm/4/

Performance is not a factor so anything that improves the texture fidelity and/or focus is acceptable provided it works on latest Firefox in Xvfb (ie, using OS mesa drivers).

I did attempt to adapt http://threejs.org/examples/webgl_postprocessing_dof.html but it isn't giving me the expected results (still too blurry):

With DOF Postprocessing: http://jsfiddle.net/u7g48bt2/1/

The abbreviated code is below (see jsFiddle link for 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 )); // look down and center

    // 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; // increase to rotate CCW
    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);
};

Upvotes: 0

Views: 2165

Answers (1)

SpliFF
SpliFF

Reputation: 38956

Solution was simple in the end:

floorTexture.anisotropy = renderer.getMaxAnisotropy();

Which sets anisotropy to 16 I think.

UPDATE: Works on FF for Windows but under Xvfb / Mesa renderer.maxAnisotropy returns 0. Any workarounds?

UPDATE 2: It LIES! Manually setting floorTexture.anisotropy to values up to 16 actually works, meaning the maxAnisotropy returned by three.js under xvfb/mesa is plain wrong. Therefore this solution does work after all with a minor change:

floorTexture.anisotropy = 16;

UPDATE 3: My mistake! Anisotropic was NOT working. Solution was to switch the backend mesa driver to one that does support it:

DISPLAY=:5 LIBGL_ALWAYS_SOFTWARE=1 GALLIUM_DRIVER=softpipe firefox &

Many thanks to glennk on [email protected] for this fix.

Upvotes: 3

Related Questions