Three.js: Добавлена ​​поддержка карт теней для RectAreaLights (мозговой штурм, НИОКР)

Созданный на 28 мая 2018  ·  37Комментарии  ·  Источник: mrdoob/three.js

Описание проблемы

Было бы очень полезно для реализма поддерживать тени на RectAreaLights.

Я не уверен, какой метод лучше всего использовать здесь, поскольку я еще не исследовал его, кроме нескольких быстрых поисков в Google. Я еще не уверен, что является общепринятой передовой практикой в ​​отрасли?

Я могу придумать две простые техники:

  • можно поместить PointLightShadowMap в центр прямоугольного источника света, и это вроде как сработает.
  • менее точно, можно поместить SpotLightShadowMap с довольно высоким FOV (свыше 120 градусов, но менее 180 градусов, поскольку это приведет к сбою) в центре прямоугольного источника света и направить его в направлении света.

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

Enhancement

Самый полезный комментарий

NVidia Percentage Closer Soft Shadows неплохо справляется с аппроксимацией светлых теней. Я пытался взломать их для сцены THREE.js здесь: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. На данный момент используется карта теней направленного света, но лучше использовать карту SpotLight.

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

Все 37 Комментарий

/ping @abelnation , если у вас есть какие-либо идеи, поскольку вы в настоящее время являетесь постоянным экспертом Area Light. :)

Я провел рефакторинг кода области освещения, и я тоже с ним знаком. Для поддержки теней см . https://eheitzresearch.wordpress.com/705-2/.

Для поддержки теней см . https://eheitzresearch.wordpress.com/705-2/.

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

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

@bhouston О, да... есть еще https://github.com/mrdoob/three.js/pull/13057.

Если вы прочитаете все обсуждение, я думаю, что консенсус состоял в том, чтобы добавить поддержку «cookie» к SpotLight , что, по-видимому, позволило бы использовать прямоугольную тень.

NVidia Percentage Closer Soft Shadows неплохо справляется с аппроксимацией светлых теней. Я пытался взломать их для сцены THREE.js здесь: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. На данный момент используется карта теней направленного света, но лучше использовать карту SpotLight.

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

Выглядит отлично! Но ваша демонстрация работает со скоростью всего 6 кадров в секунду на моем iMac ^^

У меня 60 кадров в секунду на GTX 970m.

1 FPS на моем Пикселе 😢

Уже есть реализация pcss в three.js, которую я и орешант
писал некоторое время назад.

С наилучшими пожеланиями,
Бен Хьюстон
http://Clara.io Онлайн 3D-моделирование и рендеринг

В субботу, 21 июля 2018 г., 23:02 Гарретт Джонсон уведомления@github.com
написал:

Мягкие тени NVidia в процентах ближе
http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf
сделать достойную работу по аппроксимации светлых теней области. я играл с
взламывая их на сцену THREE.js здесь:
https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. Он использует
карта теней направленного света, на данный момент, но может быть и SpotLight
лучше.

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


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

Уже есть реализация pcss в three.js, которую я и oreshant написали некоторое время назад.

https://threejs.org/examples/#webgl_shadowmap_pcss

Это работает с хорошими 60 FPS на моем iMac ^^.

Уже есть реализация pcss в three.js, которую я и oreshant написали некоторое время назад.

Я этого не видел! Это выглядит хорошо. Я не знал, что таким образом можно генерировать значения, подобные диску Пуассона - похоже, что он имеет более приятное распределение и дает лучшие результаты, чем тот, который я использовал. Я могу позаимствовать это, если вы не возражаете!

1 FPS на моем Пикселе 😢

Ха! На моем телефоне тоже не работало. Я вообще не оптимизировал его, и в циклах происходит много работы, которую можно было бы переместить.

Однако реализация @bhouston довольно быстрая. Может быть, есть какой-то вариант этого, который можно использовать для светлых теней? Было бы неплохо иметь какую-либо поддержку теней для локальных источников света, чтобы этот тип реализации можно было легко подключить.

NVidia Percentage Closer Soft Shadows неплохо справляется с аппроксимацией светлых теней. Я пытался взломать их для сцены THREE.js здесь: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. На данный момент используется карта теней направленного света, но лучше использовать карту SpotLight.

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

Хороший! Это не идеально, но выглядит лучше, чем отсутствие тени... Я получаю 30 кадров в секунду на моем Asus ROG Phone 2.
И 45 кадров в секунду на моем ноутбуке со встроенной графикой.

Вот пример теней с трассировкой лучей в three.js, в этих видео показан только компонент тени.

60+ кадров в секунду с 1 сэмплом тени на пиксель... С некоторой умной фильтрацией результаты могут выглядеть довольно хорошо.

https://youtu.be/O21mKUtMtSg
https://youtu.be/2Tn93hf9kNw

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

Живая веб-демонстрация находится в разработке.

Связанный

13908 Улучшение теней

14048 Мягкие тени с помощью выборки источника света

14051 Внедрение прогрессивного фотореалистичного глобального освещения в Three.JS

Очень хорошо!

Связанная проблема: я не знаю, как реализовать какие-то тени с текущим кодом IBL.

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

Я играл с несколькими эффектами трассировки лучей.

  • Тени - от прямых источников света, в том числе rectlights
  • Окружающая окклюзия
  • Глобальное освещение

Я думаю, что из трех GI на пиксель, которые будут работать с IBL, труднее всего достичь частоты кадров в реальном времени.

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

@mrdoob , @WestLangley ,
В каком пространстве находятся униформы "pointLights[].position"???
Я делаю трассировку лучей в мировом пространстве, но тени не совпадают.

Annotation 2019-12-20 073556

Хорошо, изучив его... Похоже, он находится в пространстве просмотра модели... Есть ли хороший способ получить положение источников света в мировом пространстве?

Изменить WebGLRender для отправки как в мир, так и в пространство просмотра?

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

image

Есть ли способ просто дрожать источники света в пределах объема излучения и
накапливать, чтобы получить мягкие тени примерно в 32 рендерах, которые
вы просто накапливаете?

Я рассматриваю это как то, что хорошо работает с субпиксельным дрожанием камеры.
которые я накопил в примере с TAA Three.js.

В субботу, 21 декабря 2019 г., в 22:04 Самуэль Сильвестр[email protected]
написал:

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

[изображение: изображение]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png


Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHHH
или отписаться
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

Бен Хьюстон , технический директор
*М: *+1-613-762-4113
[email protected]
Оттава, Онтарио

[изображение: threekitlogo1568384278.png] https://www.threekit.com/
Создайте лучший визуальный опыт для клиентов с помощью Threekit
https://www.threekit.com/

[изображение: узнайте, как масштабировать визуальные эффекты продукта с ростом вашего бизнеса]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

Чтобы быть ясным, я думаю, что способ дрожания в прямом свете состоит в том, чтобы иметь один
точечный свет, который вы перемещаете по поверхности излучения. Вам нужен хороший
метод выборки, такой как диск Пуассона или что-то в этом роде,
https://www.google.com/search?q=Poisson+Диск. И тогда полученный
тени должны быть мягкими и соответствовать прямому свету.

Хотя я запутался с FOV, нужно ставить точечный свет,
и, возможно, вы всегда должны указывать его в нормальном направлении от прямоугольника
площадь поверхности? Именно эти незначительные детали удерживают меня от того, чтобы
продвижение вперед с внедрением накопительной выборки выбросов
тени на основе источника.

В понедельник, 23 декабря 2019 г., в 9:00 Бен Хьюстон [email protected] написал:

Есть ли способ просто дрожать источники света в пределах объема излучения
и накапливать, чтобы получить мягкие тени примерно в 32 рендерах
что вы только накапливаете?

Я рассматриваю это как то, что хорошо работает с субпиксельным дрожанием камеры.
которые я накопил в примере с TAA Three.js.

В субботу, 21 декабря 2019 г., в 22:04 Сэмюэл Сильвестр <
уведомления@github.com> написал:

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

[изображение: изображение]
https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png


Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHHH
или отписаться
https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ
.

--

Бен Хьюстон , технический директор
*М: *+1-613-762-4113
[email protected]
Оттава, Онтарио

[изображение: threekitlogo1568384278.png] https://www.threekit.com/
Создайте лучший визуальный опыт для клиентов с помощью Threekit
https://www.threekit.com/

[изображение: узнайте, как масштабировать визуальные эффекты продукта с ростом вашего бизнеса]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

--

Бен Хьюстон , технический директор
*М: *+1-613-762-4113
[email protected]
Оттава, Онтарио

[изображение: threekitlogo1568384278.png] https://www.threekit.com/
Создайте лучший визуальный опыт для клиентов с помощью Threekit
https://www.threekit.com/

[изображение: узнайте, как масштабировать визуальные эффекты продукта с ростом вашего бизнеса]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston Я думаю, https://github.com/mrdoob/three.js/issues/14048 — это то, о чем вы говорите.

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

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

@bhouston https://github.com/bhouston я думаю #14048
https://github.com/mrdoob/three.js/issues/14048 - это то, о чем вы говорите
о.

Извините, я склонен забывать то, что я ранее предложил, но, по крайней мере, я
последовательный.

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

Это потому, что он делает не случайную выборку, а исчерпывающую выборку.
метод - он также делает гораздо более жесткий источник света, чем просто
прямоугольная площадь. Его метод будет медленным накопительным с растеризацией
рендеринга или трассировки лучей — неверным был метод примера, а не
техника. Также вы можете использовать несколько образцов света для каждого рендера, если хотите.
наклонный. Я думаю, что нужно от 32 до 256 рендеров на верхнем уровне,
в зависимости от типа света и количества образцов света на рендер. В
60 кадров в секунду это 1-4 секунды. Я думаю об этом как об упрощенном «мгновенном
раствор «радиация».

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

В понедельник, 23 декабря 2019 г., в 11:03 Самуэль Сильвестр[email protected]
написал:

@bhouston https://github.com/bhouston я думаю #14048
https://github.com/mrdoob/three.js/issues/14048 - это то, о чем вы говорите
о.

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

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


Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/mrdoob/three.js/issues/14161?email_source=notifications&email_token=AAEPV7L4ZVKQJILFWZQ6JE3Q2DOLPA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRNA4
или отписаться
https://github.com/notifications/unsubscribe-auth/AAEPV7LXP5CSOMBZF2BMNR3Q2DOLPANCNFSM4FCA4DOQ
.

--

Бен Хьюстон , технический директор
*М: *+1-613-762-4113
[email protected]
Оттава, Онтарио

[изображение: threekitlogo1568384278.png] https://www.threekit.com/
Создайте лучший визуальный опыт для клиентов с помощью Threekit
https://www.threekit.com/

[изображение: узнайте, как масштабировать визуальные эффекты продукта с ростом вашего бизнеса]
http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76

@bhouston Мне нравится решение, предложенное в # 14048 ... особенно для простых геометрий, таких как прямой свет.
Похоже, что этот метод должен быть довольно прост в использовании. Есть ли вилка из трех, которая имеет это решение?

Что касается трассировки лучей... На оборудовании настольного класса решение трассировки лучей работает в режиме реального времени на скорости 1spp. Смотрите... https://youtu.be/amX3icmbpzY.

Я еще не тестировал мобильный.

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

@мрдуб , @бхьюстон
Итак, я обновил демо, чтобы отразить демо Nvidia rtx с GDC 2018.

И у меня он работает в режиме реального времени на моем ноутбуке и на моем мобильном телефоне...

Демонстрация ноутбука... https://youtu.be/MKCKXRVks3I
Демонстрация мобильного телефона... https://youtu.be/P-cnT2hYNF4

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

@mrdoob , @WestLangley , @bhouston и другие

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

Screenshot_20200113-175554647
Демо показано здесь... https://youtu.be/tZmlb29OUBU
Имеет точечные источники света и прямой свет.

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

В настоящее время рассчитывается только рассеянная тень.

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

Отлично выглядит! Он тоже использует только одну текстуру глубины?

Отлично выглядит! Он тоже использует только одну текстуру глубины?

@mrdoob спасибо! На самом деле это правильная трассировка лучей, в настоящее время она использует 2 текстуры. В одном хранится геометрия мирового пространства, а в другом — данные BVH.

С этой настройкой мы могли рассчитать окружающее затенение RTX, а с помощью нескольких обновлений стало возможным и GI!

Чтобы запустить демонстрацию в браузере, см. https://three-rtx.azurewebsites.net/

Примечание. Это трассировка лучей, и я обнаружил, что мой встроенный графический процессор может обрабатывать только один источник света с тенями с трассировкой лучей и приличной частотой кадров. Но когда я включил свой RTX 2080, я мог иметь 2 источника света с трассировкой лучей с 16spp на источник света с удвоенной частотой кадров. Это чуть менее чем в 64 раза быстрее на дискретном графическом процессоре!

Я также попытался запустить это на своем телефоне и обнаружил, что вам понадобится флагманский корабль 2019 года или лучше со скоростью 30+ кадров в секунду при 1080p.

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

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

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

@sam-g-steel
Это здорово! Есть ли у вас планы открыть исходный код работы в какой-то момент? Насколько хорошо он масштабируется — проводили ли вы какие-либо испытания с более сложными моделями персонажей или продуктов? И я думаю, что трассировка лучей здесь работает только со статическими сценами, верно?

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

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

@бхьюстон

неверным был метод выборки, а не техника.

Я думаю, что использование чего-то вроде помощника MeshSurfaceSampler вместе с несколькими источниками света сделает результат немного лучше.

@gkjohnson

Это здорово! Есть ли у вас планы открыть исходный код работы в какой-то момент?

Спасибо!!! Да, я планирую опубликовать код в ближайшее время! Мне бы хотелось, чтобы это было включено в three.js!
На данный момент демо состоит из 2-х основных частей. Пользовательская сборка из трех, которая отправляет информацию об освещении в виде модели и в мировом пространстве, которую я надеюсь опубликовать в ближайшие несколько дней, и «плагин» three.js, который создает BVH и генерирует шейдеры, которые выполняют трассировку лучей.

Насколько хорошо он масштабируется — проводили ли вы какие-либо испытания с более сложными моделями персонажей или продуктов?

Я провел несколько тестов, чтобы посмотреть, как это работает со сложными сценами... Результаты, которые я получил, были весьма многообещающими. Я работаю над обновлением веб-сайта https://three-rtx.azurewebsites.net/ , добавляя в ближайшее время больше демонстраций. Я не хочу предъявлять какие-либо претензии к демо, чтобы подтвердить это.

И я думаю, что трассировка лучей здесь работает только со статическими сценами, верно?

На самом деле динамические сцены поддерживаются ! Я тоже планирую демо-версию в ближайшее время! в настоящее время начальные сборки bvh занимают 300 мс, а последующие сборки занимают ~ 10 мс на однопоточном процессоре. Следует отметить, что код bvh может быть дополнительно оптимизирован.

Надеюсь, в эти выходные я смогу опубликовать код. Это заняло больше времени, чем я ожидал, отчасти потому, что мы с женой только что родили нашего третьего ребенка :)

@mrdoob , @gkjohnson
Я начал публиковать код трассировки лучей... Его можно найти здесь... https://github.com/sam-g-steel/three.js/tree/RTX

Не весь код был зафиксирован... Я пытаюсь немного навести порядок. Надеюсь, скоро у меня будет весь код.

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

Одну из новых демонстраций можно увидеть здесь...
Screenshot_20200205-125510305_1
https://youtu.be/ZvoSuBi4rFE
@gkjohnson , эта демонстрация имеет динамические объекты на экране и помогает протестировать полную производительность восстановления BVH.

Я надеюсь закоммитить остальные или шейдеры "RTX"... Сегодня вечером и код BVH в ближайшее время

Примечание. В настоящее время поддерживаются только треугольники.

обновление 08.02.2020
На сайте обновлена ​​новая демо-версия...
Динамическое построение BVH теперь на 40 % быстрее, чем 4 дня назад... больше оптимизаций впереди.
https://github.com/sam-g-steel/three.js/tree/RTX был обновлен дополнительным кодом.

Будут еще обновления!!!

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

Ниже приведены некоторые фотографии шумового фильтра ...
Это все еще продолжается.

Обновление 28.03.2020
3-28-2020

Была ли эта страница полезной?
0 / 5 - 0 рейтинги