Уменьшить расстояние размытия в three.js

У меня есть большой самолет с текстурной картой в three.js, и я нахожу, что настройки по умолчанию, которые я использую, вызывают слишком много размытости на средней дистанции. Я хочу увеличить глубину резкости, поэтому больше материала пола находится в фокусе (особенно вдоль правой стороны).Уменьшить расстояние размытия в three.js

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

Оригинал: http://jsfiddle.net/5L5vxjkm/4/

Производительность не является фактором, так что все, что улучшает текстуру верности и/или фокус является приемлемым при условии, что работает на последней Firefox в Xvfb (то есть, с помощью драйверов OS меза) ,

я сделал попытку адаптировать 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); 
};

источник

2015-06-07 SpliFF

Совет. Вы можете уменьшить количество обработанных лиц в 65K так: 'PlaneBufferGeometry (4 * 1024, 4 * 1024, 1, 1)'. Кроме того, 'doubleSided' не является свойством' Mesh'. – WestLangley

Спасибо, путайте некоторые из них, поэтому оцените разъяснения. Я думал, что разбить такой большой самолет может быть полезным, но если он не пойдет. – SpliFF

Убрана вся двусторонняя сторона материала, так как камера неподвижно установлена. Пришлось повернуть пол вокруг -X, чтобы получить правую сторону вверх. – SpliFF

Решение было простым в конце:

floorTexture.anisotropy = renderer.getMaxAnisotropy();

Какая установка анизотропии до 16, я думаю.

ОБНОВЛЕНИЕ: Работает на FF для Windows, но под Xvfb/Mesa renderer.maxAnisotropy возвращает 0. Любые обходные пути?

ОБНОВЛЕНИЕ 2: ЛИЧНО! Ручная настройка floorTexture.anisotropy на значения до 16 фактически работает, то есть maxAnisotropy, возвращенный тэгом. Js в xvfb/mesa, является неправильным. Поэтому это решение действительно работает после незначительных изменений:

floorTexture.anisotropy = 16;

ОБНОВЛЕНИЕ 3: Моя ошибка! Анизотропный не работал. Решение было переключить драйвер бэкэнд меза к одному, что делает его поддержки:

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

Большое спасибо glennk на [email protected] для исправления.

источник

2015-06-07 08:38:28 SpliFF

Уменьшить расстояние размытия в three.js

ответ

Смежные вопросы