减少 three.js 中的距离模糊

Question

我在 three.js 中有一个带有纹理贴图的大平面，我发现我使用的默认设置导致中距离模糊太多。我想增加景深，使更多的地板 material 成为焦点（尤其是右侧）。

http://i.imgur.com/JBYtFk6.jpg

性能不是一个因素，所以任何可以提高纹理保真度的东西 and/or 焦点是可以接受的，前提是它可以在 Xvfb 中的最新 Firefox 上运行（即，使用 OS mesa 驱动程序）。

我确实尝试过调整 http://threejs.org/examples/webgl_postprocessing_dof.html 但它没有给我预期的结果（仍然太模糊）：

使用 DOF 后处理：http://jsfiddle.net/u7g48bt2/1/

缩写代码如下（完整源代码参见 jsFiddle link）

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

Answer 1

最后解决方法很简单：

floorTexture.anisotropy = renderer.getMaxAnisotropy();

我认为这会将各向异性设置为 16。

更新：适用于 Windows 的 FF，但在 Xvfb / Mesa 下 renderer.maxAnisotropy returns 0。有任何解决方法吗？

更新 2：它在撒谎！手动将 floorTexture.anisotropy 设置为最大 16 的值实际上是有效的，这意味着 xvfb/mesa 下的 three.js 返回的 maxAnisotropy 是完全错误的。因此，这个解决方案毕竟是一个小改动：

floorTexture.anisotropy = 16;

更新 3：我的错误！各向异性不起作用。解决方案是将后端 mesa 驱动程序切换为支持它的驱动程序：

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

非常感谢 glennk 在 dri-devel@irc.freenode.org 上的修复。

减少 three.js 中的距离模糊

Reduce distance blurring in three.js

javascript

three.js