在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中減少距離模糊

回答

相關問題