2014-10-30 3 views
0

Моя программа создает динамическое число объектов облачных точек с настраиваемыми атрибутами, которые включают альфа-значение каждой частицы. Это прекрасно работает, однако, когда объекты вложены друг в друга (скажем, сферы), меньшие (внутренние) объекты становятся затененными более крупными, хотя альфа-частицы их частиц установлены должным образом. Когда я отменяю порядок добавления объектов точечного облака к сцене, начиная с более крупных, идя вниз к более мелким, я могу видеть меньшие из них. Мой вопрос заключается в том, есть ли способ сообщить рендеру обновить или пересчитать альфа-значения или повторно отобразить меньшие внутренние объекты, чтобы они отображались?ThreeJS - добавление объектов в другом порядке влияет на альфа/дисплей

+1

Можете ли вы добавить небольшой пример кода, который будет воспроизводить вашу проблему? – soktinpk

+0

Я предполагаю, что это проблема с фрагментарным шейдером. Не уверен, но он может не интерпретировать разные непрозрачности –

ответ

0

Я столкнулся с той же проблемой, что и вы. Я установил его для вычисления и установки renderdepth для каждой сетки. Для этого вам нужно положение камеры и центр вашей сетки.

Возможно, вы уже создали сетки для каждого объекта. Если вы сохраните все эти ячейки в массиве, проще вычислить и установить renderdepth на эти объекты.

Вот пример того, как я это сделал.

updateRenderDepthOnRooms(cameraPosition: THREE.Vector3): void { 
    var rooms: Room[] = this.getAllRooms(); 

    rooms.forEach((room) => { 
     var roomCenter = getCenter(room.mesh.geometry); 
     var renderDepth = 0 - roomCenter.distanceToSquared(cameraPosition); 
     room.mesh.renderDepth = renderDepth;    
    }); 
} 

function getCenter(geometry: THREE.Geometry): THREE.Vector3 { 
    geometry.computeBoundingBox(); 

    var bb = geometry.boundingBox; 
    var offset = new THREE.Vector3(); 

    offset.addVectors(bb.min, bb.max); 
    offset.multiplyScalar(0.5); 

    return offset; 
} 

Таким образом, чтобы получить центр вашего объекта, вы можете задать геометрию из вашей сетки и использовать функцию getCenter (..) из моего примера. Затем вы вычисляете renderdepth с функцией ThreeJs distanceToSquared (..), а затем устанавливаете этот renderdepth в свою сетку.

Все. Надеюсь, что это поможет вам.

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