在three.js中减少距离模糊

我在three.js中有一个有纹理贴图的大型平面，我发现我使用的默认设置会在中距离造成太多模糊。我想增加自由度，以便更多的地板材料处于聚焦状态（特别是在右侧）。在three.js中减少距离模糊

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

性能是不是一个因素，所以，只要能够提高纹理逼真度和/或重点是可以接受的，它适用于最新的Firefox中的Xvfb（即使用OS台面驱动程序）。

我确实尝试去适应http://threejs.org/examples/webgl_postprocessing_dof.html但它不给我预期的结果（还是太模糊）：

随着自由度后处理：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); 
};

来源

2015-06-07 SpliFF

提示：您可以将渲染的面数减少65K，如下所示：'PlaneBufferGeometry（4 * 1024,4 * 1024,1,1）'。此外，'doubleSided'不是'Mesh'的属性。 – WestLangley

谢谢，通过一些这个混淆，所以很感谢澄清。我认为分手这样一架大型飞机可能是有益的，但如果没有，它可以走。 – SpliFF

由于摄像机无论如何都是固定的，因此也从材质中删除了所有的双面性。必须围绕-X旋转地板才能正面朝上。 – SpliFF

溶液到底简单：

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：我的错误！各向异性不起作用。解决办法是改用后端台面司机一个不支持它：

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

非常感谢上[email protected] glennk此修订。

来源

2015-06-07 08:38:28 SpliFF

在three.js中减少距离模糊

回答

相关问题