Three.js: проблема глубины рендеринга с одной камерой, двумя сценами и постобработка с маской сцены - PullRequest
0 голосов
/ 18 января 2019

У меня есть простой образец, использующий одну перспективную камеру, две сцены (sceneMain и sceneMasked) с тремя кубами (cube1, cube2 и cube3). cube1 помещается в sceneMasked, а cube2 и cube3 помещаются в sceneMain. куб1 центрируется, а куб2 и куб3 фланкируют его (по одному с каждой стороны).

Постобработка применяется к sceneMasked (точечный экран). У cube1 есть точка экрана (как и ожидалось), а у cube2 и cube3 нет (как и ожидалось).

Проблема заключается в том, что когда сцены визуализируются на одном холсте, а затем вращаются, куб1 всегда появляется поверх куба2 и / или куба3.

Я начал с этого образца: https://threejs.org/examples/webgl_postprocessing_advanced.html

с улучшенной маскировкой здесь: Постобработка в выбранных сетках .

В последнем примере маска применяется только к объекту переднего плана.

Я хотел уменьшить выборку до уровня, который немного ближе к моей конечной цели: одна камера вместо двух, с эффектом постобработки (цветением), применяемым только к очень маленькой части моей составной сцены. [Я использую многоточие в образце; это будет заменено Блумом в конечном коде. Блум довольно тяжелый, поэтому я тестирую что-то очень заметное и более легкое, а именно точечный экран.]

Мне кажется, я понимаю, что существует корреляция 1: 1 между маскированным применением эффекта пост-обработки и одной сценой; что не работает, так это трехмерные пространственные отношения между кубами. На орбите это выглядит просто так, как будто замаскированная сцена просто перекрывает основную сцену.

Я почти уверен, что этого следовало ожидать, поскольку сцены, на самом деле, разные. Но я не понял, как замаскировать только один элемент в одной сцене, поэтому я застрял здесь.

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

Я не смог найти ни одного образца, объединяющего несколько трехмерных элементов, для которых эффект применяется только к одному элементу.

Я сделал предположение о цикле рендеринга, поскольку шаблон для цикла рендеринга после обработки несколько отличается для цикла рендеринга двух сцен / одной камеры (как показано здесь: threejs: рендеринг нескольких сцен в одном webgl renderer ).

Я подготовил проект кодов и ящиков. (Это единственный известный мне сайт, на котором разрешено использование нескольких JS-файлов.)

Проект должен быть публичным и находиться здесь: https://codesandbox.io/s/9j575w60jr

Демо-страница находится здесь: https://9j575w60jr.codesandbox.io/

Результат, которого я хотел бы достичь, заключается в том, что при вращении кубов они поддерживают ожидаемые трехмерные пространственные отношения. То есть, если сцена повернута таким образом, что правый куб появляется «сверху» центрального куба (маскируется / с эффектом), центральный куб перекрывается, как и ожидалось.

Любая помощь очень ценится! Спасибо.

...