Three.js: Запрос на функцию: Отражения экранного пространства

Меня беспокоит только то, что он не очень хорошо работает со стерео-рендерингом, поэтому в WebVR это было бы сложно, но, пожалуйста, не думайте, что я против этой функции :): +1:

Просто выключите его в VR. Многие дорогостоящие эффекты плохо работают в VR. UE4 даже предлагает использовать прямой рендеринг, а не откладывать его в контексте VR для повышения скорости.

Совершенно верно, поэтому я не против.

Я наткнулся здесь, когда работал над реализацией отображения отражений в React Native. Отражения в пространстве экрана отлично подходят для игр, не относящихся к виртуальной реальности.

THREE.Reflector работает в VR ✌️
https://threejs.org/examples/webvr_sandbox.html

Отлично!

Хотя даже на Nightly я получаю «VR Not found», но проверю.

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

Я ПУТЬ уже на страницах книги, так что я, вероятно, оставлю существующую демонстрацию такой, какая она есть, но это выглядит как отличный метод.

Мне очень хотелось узнать больше об этом типе эффекта, поэтому я попробовал создать для него композиторский эффект. Есть еще кое-что, что можно было бы сделать, но вот то, что я собрал на основе реализации Kode80 и сообщения в блоге Моргана Макгуайра (сцена sponza немного загружается):

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

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

Если кто-то действительно заинтересован в использовании этого эффекта, я был бы счастлив поработать с кем-нибудь, чтобы улучшить его!

@gkjohnson Sweet. Однако ваша сцена может быть слишком сложной. В любом случае ваша демонстрация, похоже, в основном не отвечает. Вы можете создать более простой пример? Кроме того, было бы неплохо включить-выключить переключатель.

@WestLangley

ваша демонстрация, кажется, в основном не отвечает

Вы можете посмотреть демо? Экран может быть черным в течение нескольких секунд или около того, потому что для загрузки сцены Sponza потребуется немного времени, в зависимости от вашего подключения.

Если это совсем не работает, я могу попробовать создать что-нибудь попроще - хотя на моем Pixel 2 это работает.

было бы неплохо включить-выключить переключатель.

Поворот ползунка «интенсивность» до 0 выглядит так же, как его выключение, хотя трассировка лучей все еще выполняется, поэтому в этом случае не будет никакой разницы в производительности, если это то, что вы ищете.

@gkjohnson Понятно . На моем Mac ваша демонстрация какое-то время черная, а затем частота кадров равна 4.

@WestLangley Это очень зависит от разрешения, поэтому, если вы сделаете окно меньше, частота кадров, вероятно, вырастет. Выполнение трассировки лучей с более низким разрешением и последующее наложение с буфером полного разрешения помогло бы сделать эффект более масштабируемым, но я не нашел времени на его оптимизацию.

@gkjohnson, как бы вы замаскировали его только на отражающие поверхности? Если я увеличиваю интенсивность, все начинает отражаться, и появляются довольно резкие артефакты.

@bicubic На данный момент никакие атрибуты поверхности не принимаются во внимание, но добавить базовую версию этого не должно быть слишком сложно. Вы можете ослабить или размыть эффект на основе атрибута зеркальности / шероховатости материала.

К сожалению, на данный момент я не использую этот эффект, поэтому я не стал изо всех сил добавлять эти другие функции. Однако, как я уже упоминал ранее, если есть интерес использовать его для чего-то, я буду рад сотрудничать и улучшить эффект!

Вы можете ослабить или размыть эффект на основе атрибута зеркальности / шероховатости материала.

Было бы более полезно иметь возможность указывать объекты как отражающие / неотражающие. На данный момент все отражающее, включая занавески и растения. В идеале в этой демонстрации только пол должен быть отражающим.

@looeee Я согласен, что я говорю - извините, если я не понял. Атрибуты материала должны быть записаны в цель, чтобы их можно было отбирать в пространстве экрана и использовать для исчезновения или размытия отражений в данном пикселе. Это позволит картам шероховатости и т. Д. Также влиять на отражения.

Я хотел бы, чтобы это стало частью возможностей three.js по умолчанию.

Есть много подобных вещей, которые заставляют задуматься, должна ли архитектура отложенного рендеринга также стать частью предложения по умолчанию. Специально для webgl2.0

@gkjohnson понял, это имеет смысл. Тем не менее, похоже, что для предотвращения артефактов может потребоваться какая-то маска. В вашем примере вам нужно, чтобы на шторах и растениях не было отражений. Будет ли корректно работать затухание до нуля в зависимости от свойств этого материала?

@bicubic
Я согласен, я бы тоже хотел видеть специальный путь отложенного рендеринга. С WebGL2 и несколькими текстурами рендеринга это намного более жизнеспособно.

@looee
Это зависит от желаемого эффекта, но с подходом, который я описал, значение шероховатости рендеринга будет эффективно вести себя как маска для сцены со значением шероховатости 1, означающим «не отображать отражение в этом пикселе», и значением 0, означающим «рендеринг полностью. отражение в этом пикселе ". Значения между ними будут отображать отражения с частичной интенсивностью. Ползунок intensity в демонстрации показывает эффект (но, очевидно, для всей сцены, а не для каждого пикселя).

Другой подход - размыть отраженные пиксели на основе значения шероховатости для имитации рассеянной поверхности, отражающей свет. Таким образом, на драпировке по-прежнему будут отражения, но не резкие. Это позволит, например, освещать драпировку ярко освещенным голубым полом.

значение шероховатости 1 означает «не отображать отражение в этом пикселе», а значение 0 означает «визуализировать полное отражение в этом пикселе».

Похоже, это может сработать. Unreal использует параметр «максимальная шероховатость» и рекомендует установить его на 0,8.

Ой

@gkjohnson
Это очень интересно, и мне нравится ваш результат, я сейчас интегрирую его в модуль рендеринга WebGL2 / MRT и буду экспериментировать с ним. Вы заметили, что создаете материал при каждом вызове рендеринга?
this.scene.overrideMaterial = this.createPackedMaterial();

@Fyrestar Спасибо! А я этого не заметил! Но, как я уже сказал, я думаю, что нужно еще немного поработать, и производительность, вероятно, еще не на том этапе, когда это супер-пригодно.

В любом случае, эти типы эффектов больше подходят для отложенного рендерера, чем для прямого (предположительно, как вы работаете). Я давно хотел объединить этот и некоторые другие высококачественные эффекты, но я склонен подождать, пока не станет доступен надлежащий отложенный рендерер, прежде чем уделять этому гораздо больше времени. Доступен ли отложенный / MRT-рендерер, над которым вы работаете, на Github?

Я интегрировал его сейчас, в то время как проход SSR выводит на RT с более низким разрешением, в основном только отражения, а затем объединяет его с помощью размытия глубины с основным изображением, чтобы удалить / уменьшить ошибки. Я визуализирую значения шероховатости для атрибутов RT и снова использую их для определения силы размытия, где 1 является невидимым, чтобы отбросить фрагмент.

Размытие также устраняет ошибку, которая становится сильнее на расстоянии. Одной из проблем, похоже, снова является прозрачность и объекты, частично покрывающие другие, вызывающие обрезание отражения других. Мне действительно нужно больше узнать о технике.

Я использую его с настраиваемым движком поверх THREE, а не с композитором THREE. THREE действительно готов использовать контекст WebGL2 в текущем WebGLRenderer, я добавил туда MRT. Думаю, скоро выложу на github. Тем не менее, он по-прежнему требует отрисовки сцены во второй раз для буфера глубины задней поверхности, но это не слишком дорого.

@Fyrestar
Привет, есть новости?

Я написал свой собственный и сделал pr для three.js , но теперь просто поддерживаю OrthographicCamera, я пытаюсь поддерживать PerspectiveCamera.
Демо Demo2

Поддержка PerspectiveCamera сейчас в порядке. https://github.com/mrdoob/three.js/pull/20156

Демо

Это красивое и достойное достижение. На моей машине это очень медленно - я получаю 5 кадров в секунду при разрешении 1920x1080. В чем разница между вашей реализацией и Sketchfab? Я подозреваю, что если бы мы знали другое, мы бы знали, как оптимизировать ваш ....

@bhouston Спасибо!

Теперь все в сцене является отражающим, но в большинстве практических проектов это не нужно.
Я добавлю что-то вроде свойства IntensityMap или использую существующую информацию о шероховатости и металличности в сочетании с затуханием расстояния в пикселе со значением 0, завершу расчет напрямую, я думаю, это значительно улучшит fps.
Также может произвольно выбирать часть отражающих пикселей.

Я попытался просмотреть код Sketchfab, но не смог. Я попробую еще раз, но я не чувствую особой надежды. Если у кого-то есть код Sketchfab, поделитесь, спасибо!

------РЕДАКТИРОВАТЬ------
Кроме того, окно презентации Sketchfab по умолчанию не отображается в полноэкранном режиме и останавливает рендеринг, когда не выполняется никаких действий.
Если развернуть в полноэкранном режиме и продолжать вращать, даже простая сцена также будет сильно загружена графическим процессором.

@gonnavis Код шейдера для этого примера должен быть доступен для просмотра через расширение Spector.js для Chrome.

Просто поигравшись со Sketchfab, я вижу, что они меняют разрешение SSR и улучшают его. Я не удивлюсь, если у них будет от 3 до 5 уровней качества, которые они постепенно преодолевают. Это гарантирует, что существует интерактивная частота кадров, но она улучшается до идеальной в статике.

Это гарантирует, что существует интерактивная частота кадров, но она улучшается до идеальной в статике.

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

РЕДАКТИРОВАТЬ: они делают это не только с отражениями - кажется, что свет, тени, отражения и, возможно, разрешение текстур постепенно улучшаются. Обратите внимание на свет / тень на задней стене этой сцены .

Когда я экспериментировал с SSRR выше, я довольно много сослался на статью Моргана Макгуайра об этом здесь , в которой объясняется пара методов, которые, похоже, может использовать Sketchfab.

В частности, шаг пикселя может быть увеличен, чтобы отбиралось меньше пикселей пикселей, что может быть связано с регулярным дрожанием на пиксель, так что соседние пиксели «пропускают» различные выборки глубины при пошаговом режиме. Если шаг луча достаточно высок, вы можете добавить двоичный поиск в конце, как только что-то пересечется в буфере глубины, чтобы найти пиксель, в который луч должен попасть первым. Ранний возврат к фрагментам, которые не являются отражающими, вероятно, поможет, как вы уже упомянули @gonnavis.

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

Однако мне любопытно, как Sketchfab обрабатывает грубые отражения, которые размываются в зависимости от расстояния отражения. Я видел, что Godot Engine затем выполняет размытие с радиусом, основанным на расстоянии лучей и шероховатости поверхности, но это приводит к появлению артефактов, которых я не вижу здесь. Мне придется копаться в Spector.js, когда у меня будет возможность (спасибо за подсказку @WestLangley!). В опубликованной на сайте Frostbite статье перемещении лучей, но создание этого может быть проблемой в webgl1 (а может, и 2?).

Хорошо выглядит @gonnavis! Рад видеть, что он может попасть в библиотеку.

@WestLangley Спасибо! но когда я использую Spector.js в Sketchfab, я получал сообщение «Нет кадров с командами gl. Попробуйте переместить камеру». ошибка.

Я сомневаюсь, что после оптимизации SSRPass, как я сказал ранее, производительность Sketchfab все равно будет значительно выше. Особенно в случае непрерывного рендеринга и отсутствия стратегии перехода на более раннюю версию, как упоминал @bhouston @looeee . Я даже думаю, что если не говорить о деталях реализации, основная концепция этого SSRPass может быть уже оптимальным решением.

@gkjohnson Спасибо за информацию и поддержку! Я буду продолжать улучшаться.

@gonnavis

Я рекомендую вкладку «Графика» в Safari:

Если вы используете Linux, вы можете использовать Epiphany (он же Gnome Web):
https://webkit.org/downloads/

Я не думаю, что есть какая-то сборка WebKit для Windows ...

@mrdoob Спасибо! Хотя в основном я использую windows, при необходимости попробую на Mac.

Но мне интересно, можно ли загружать код Sketchfab в библиотеку с открытым исходным кодом, если найдете какие-либо полезные вещи, такие как функция glsl?

Структура этого SSRPass основана на пример three.js webgl_shading_physical, функция key сайта wolfram.com , а другие в основном написаны мной (конечно, основаны на большом другом предыдущем опыте, особенно другие примеры three.js). Я думаю, что все это не проблема, но это тот же случай кода Sketchfab?

Спасибо! но когда я использую Spector.js в Sketchfab, я получал сообщение «Нет кадров с командами gl. Попробуйте переместить камеру». ошибка.

Прокрутите мышь, чтобы увеличить камеру. Этого должно быть достаточно, чтобы вызвать Спектора.

Кроме того, используйте в своем примере статическую сцену, которая не требует цикла рендеринга. В настоящее время частота кадров слишком мала, чтобы быть приемлемой.

@WestLangley Преуспел в этой сцене , спасибо!

Пожалуйста, не размещайте код Sketchfab. Я просто предлагал понять
их методы. Что мы можем сделать, не делясь их кодом. Вы тоже
не могут ничего копировать из своего кода, это противоречит авторскому праву.

Во вторник, 25 августа 2020 г., в 6:21 Vis [email protected] написал:

@WestLangley https://github.com/WestLangley Успешно в этой сцене
https://sketchfab.com/3d-models/iron-man-helmet-captain-america-shield-endgame-02556e341dd84fa5b9ef92c5eeeb3287 ,
Благодарность!

-
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/mrdoob/three.js/issues/8248#issuecomment-679939119 ,
или отказаться от подписки
https://github.com/notifications/unsubscribe-auth/AAEPV7OEK245U5EF35YTZQDSCOGBPANCNFSM4B4V62SQ
.

-
Бен Хьюстон , технический директор
М : + 1-613-762-4113
[email protected]
Оттава, Канада
Платформа визуализации ThreeKit: 3D, 2D, AR, VR
http: //https//threekit.com/

@bhouston ОК, для справки, только при необходимости.

Я даже часто чувствую, что после получения вдохновения продолжать смотреть на чужую бумагу и код труднее, чем писать его самому, особенно в другой среде.

Например, в этот раз меня в основном вдохновил этот урок , но трудно четко понять смысл текста в начале, и из-за другой системы координат, которую он использует, и я не знаю, как запустить. cxx, поэтому я читаю только немного текста и почти не читаю код. В конце концов, больше всего мне помогли две картинки imgA imgB .

Добавьте демо.

Демо, Demo2, Demo3, SelectiveDemo, OrthographicDemo.

Вдохновленный @gonnavis, я наконец-то дошел до того, чтобы опробовать несколько новых вещей в реализации SSR, которую я опубликовал пару лет назад, поэтому решил поделиться здесь. У меня нет планов использовать это в реальном проекте, поэтому он не оптимизирован, и на данный момент он превратился в кучу различных функций SSR, но я узнал от него большую часть того, что хочу, поэтому я назову его " готово "на данный момент. Возможно, есть кое-что, что могут сделать другие. Есть еще кое-что, что, как я знаю, можно добавить или улучшить, но, возможно, если я когда-нибудь верну его обратно, я воспользуюсь некоторыми функциями WebGL2, чтобы упростить работу.

Некоторые из новых функций:

• Поддержка джиттера луча синего шума, поэтому картина пересечения менее регулярна.
• Увеличение / уменьшение глубины и нормального взвешивания из маршевой текстуры с более низким разрешением для сохранения деталей.
• Несколько подправленных на глаз подходов к рендерингу глянцевых отражений с дрожащими сэмплами и MIP-картами.
• Поддержка карт нормалей и альфа-карт.

Это довольно интенсивный эффект, но я чувствую, что с сочетанием масштабирования отражений, размытия, дрожания и малого количества шагов вы можете что-то, что хорошо работает, особенно с небольшими встроенными холстами, а не с полнооконными приложениями. Разрешив окончательное изображение на нескольких кадрах, как это обсуждалось в https://github.com/mrdoob/three.js/issues/14048, вы, вероятно, также могли бы получить достойные глянцевые отражения. Конечно, как уже упоминалось в другом месте, отражения все равно не будут правильными без отдельных проходов для диффузного и прочего, но всегда есть что-то еще, что можно улучшить.

Вот несколько скриншотов с большим количеством шагов:

| Без глянца | Глянец по нескольким образцам | Глянец иерархии глубины |
| --- | --- | --- |
| | | |

А вот и демонстрация:

https://gkjohnson.github.io/threejs-sandbox/screenSpaceReflectionsPass/

В Siggraph 2015 есть слайд о «Стохастических отражениях в пространстве экрана», который может вас заинтересовать: http://advances.realtimerendering.com/s2015/index.html