javascript - 减少 Three.js 中的距离模糊

Question

我有一个大飞机，在 Three.js 中带有纹理贴图，我发现我使用的默认设置导致中距离过于模糊。我想增加景深，以便更多的地板 Material 成为焦点(尤其是右侧)。

/image/mVbT2.jpg

原文:http://jsfiddle.net/5L5vxjkm/4/

性能不是一个因素，因此任何可以提高纹理保真度和/或焦点的东西都是可以接受的，只要它可以在 Xvfb 中的最新 Firefox 上运行(即使用 OS mesa 驱动程序)。

我确实尝试过适应http://threejs.org/examples/webgl_postprocessing_dof.html但它没有给我预期的结果(仍然太模糊):

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

缩写代码如下(完整源代码请参见 jsFiddle 链接)

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 返回 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 &

非常感谢 dri-devel@irc.freenode.org 上的 glenk 修复此问题。