Question

我有一个带有三个.js纹理贴图的大型平面，我发现我使用的默认设置会导致中距离模糊太多。我想增加DOF，以便更多的地板材料成为焦点（特别是在右侧）。

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

性能不是一个因素，因此只要它适用于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 for FF但在Xvfb / Mesa下renderer.maxAnisotropy返回0.任何解决方法？

更新2：它是的！手动将floorTexture.anisotropy设置为最多16个实际值，这意味着xvfb / mesa下的three.js返回的maxAnisotropy是完全错误的。因此，这个解决方案确实可以稍作改动：

floorTexture.anisotropy = 16;

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

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

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

减少three.js

1 个答案: