Как создать боке в Three.js (или любой способ создать боке программно) - PullRequest
Новая
       29

Как создать боке в Three.js (или любой способ создать боке программно)

0 голосов
/ 02 июня 2019

Я думаю о этом :

enter image description here enter image description here

Я бы хотел разместить текст поверх боке, например:

enter image description here

Вопрос в том, (а) насколько это сложно / если это было сделано ранее, поэтому мне не нужно заново создавать колесо, и (б) как реализовать его в JavaScript, возможно, в Three.js .

Я не смог найти ни одного примера глубины резкости (DoF) или Bokeh для 3D-текста или просто 3D-освещения Bokeh в Three.js или WebGL, что заставляет меня задуматься, слишком ли это сложно или невозможно. Он не должен быть высокооптимизированным, потому что я просто хочу генерировать изображения боке для сохранения в файл JPG. Хотите знать, как это сделать, если бы вы могли указать мне в правильном направлении.

1 Ответ

0 голосов
/ 03 июня 2019

Мне не удалось найти какие-либо примеры глубины резкости (DoF) или Bokeh для 3D-текста или просто 3D-освещения Bokeh в Three.js или WebGL, что заставляет меня задуматься, слишком ли это сложно илиневозможно.

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

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

https://threejs.org/examples/webgl_postprocessing_dof https://threejs.org/examples/webgl_postprocessing_dof2

three.js R105

...