Мягкие частицы в WebGL и OpenGL ES

Системы частиц это одни из самых простых способов сделать 3D сцену визуально богаче. В одном из наших Android приложений 3D Buddha Live Wallpaper достаточно простая сцена, которой было бы неплохо добавить чуть больше деталей. И когда мы думали как добавить разнообразия изображению то самым очевидным решением заполнить пустое пространство вокруг статуи Будды стало добавление клубов дыма или тумана. Благодаря использованию мягких частиц мы достигли довольно хорошего результата. В этой статье мы детально опишем реализацию мягких частиц на чистом WebGL / OpenGL ES без использования сторонних библиотек и готовых 3D-движков.

Разница между старым и обновленным приложением даже превзошла наши ожидания. Простенькие частицы дыма существенно улучшили сцену, сделали ее богаче и полнее. Клубы дыма это и дополнительные детали за которые “цепляется глаз”, а также способ сделать переход между основными объектами и фоном более плавным:

Мягкие частицы

Так что такое эти мягкие частицы? Вы можете помнить что во многих старых играх (времен Quake 3 и CS 1.6) эффекты дыма и взрывов имели очень четкие плоские границы на пересечении частиц с другой геометрией. Все современные игры уже не имеют подобных артефактов благодаря использованию мягких частиц — то есть частиц с размытыми, “мягкими” краями вокруг прилегающих объектов.

Рендеринг

Что требуется для того чтобы сделать частицы мягкими? Во-первых, нужна информация о глубине сцены для того чтобы определить места пересечения частиц с другими объектами и смягчить их. Затем нам нужно определить места пересечения геометрий сцены и частицы путем сравнения глубины сцены и частицы во фрагментном шейдере — пересечения там, где глубины одинаковые. Далее мы рассмотрим процесс рендеринга пошагово. Обе реализации сцены под Android OpenGL ES и WebGL одинаковы, основное отличие только в загрузке ресурсов. Реализация на WebGL имеет открытый исходный код и вы можете взять его тут — https://github.com/keaukraine/webgl-buddha.

Рендеринг карты глубины

Для рендеринга карты глубины сцены, сперва нам потребуется создать текстуры для карты глубины и цвета и назначить их определенному FBO. Это делается в методе initOffscreen() в файле BuddhaRenderer.js.
Сам рендеринг Actual объектов сцены в карту глубины выполняется в методе drawDepthObjects(), который отрисовывает статую Будды и плоскость пола. Однако, тут есть одна хитрость для улучшения производительности. Поскольку на данном этапе рендеринга нам не нужна информация о цвете, а лишь глубина, рендеринг в цветовой буфер отключается вызовом gl.colorMask(false, false, false, false), а затем включается снова вызовом gl.colorMask(true, true, true, true). Функция glcolorMask() может выключать и выключать запись красного, зеленого синего и альфа компонента по отдельности, так что для того чтобы полностью отключить запись в буфер цвета мы ставим всем компонентам флажок false, а затем включаем их для рендеринга на экран, выставляя их все в true. Результат рендеринга в текстуру глубины можно увидеть, раскомментировав вызов drawTestDepth() в методе drawScene(). Поскольку текстура карты глубины имеет только один канал, она воспринимается как только красная, синий и зеленый каналы равно нулю. Визуализация карты глубины нашей сцены выглядит так:

Рендеринг частиц

Код шейдера, который используется для отрисовки частиц находится в файле SoftDiffuseColoredShader.js. Давайте разберемся как он устроен.

Основная идея поиска пересечения геометрий частицы и сцены состоит в сравнении значения текущей глубины фрагмента с сохраненным значением из карты глубины.

Первый шаг в сравнении глубин это линеаризация значений глубин, поскольку оригинальные значения экспоненциальные. Это делается с помощью функции calc_depth(). Эта техника хорошо описана здесь — https://community.khronos.org/t/soft-blending-do-it-yourself-solved/58190. Для линеаризации значений нам понадобится юниформ-переменная vec2 uCameraRange, компоненты x и y которой содержат значения ближней и дальней плоскостей отсечения камеры. Затем шейдер вычисляет линейную разницу между глубиной частицы и сцены — это значение сохраняется в переменной a. Однако, если мы будем применять это значение к цвету фрагмента, мы получим слишком прозрачные частицы — цвет будет затухать линейно от любой геометрии позади частицы, и затухать довольно быстро. Вот как выглядит визуализация линейной разницы глубины (Вы можете раскомментировать соответствующую строчку кода в шейдере и увидеть ее):

Чтобы частицы были более прозрачными только возле границы пересечения (в районе a=0) мы применим функцию GLSL smoothstep() к значению переменной a со значением перехода от 0 до коэффициента, заданного в юниформе uTransitionSize, который определяет ширину прозрачного перехода. Если Вы желаете узнать больше о работе функции smoothstep() и увидеть пару интересных примеров ее использования, рекомендуем прочитать эту статью — http://www.fundza.com/rman_shaders/smoothstep/. Финальный коэффициент сохраняется в переменной b. Для режима миешивания цветов, используемого в нашей сцене, достаточно просто перемножить цвет частицы взятый из текстуры на этот коэффициент; в других реализациях частиц Вам может понадобиться изменение например только альфа канала. Если в шейдере раскомментировать строчку кода для визуализации этого коэффициента то результат будет выглядеть так:

Оптимизация отрисовки спрайтов

В этой сцене мелкие пылинки отрисовываются как точечные спрайты (примитивы типа GL_POINTS). Этот режим удобен тем что он автоматически создает готовую квадратную геометрию частицы с текстурными координатами. Однако, они имеют и недостатки, которые делают их использование неуместным для крупных частиц клубов тумана. Прежде всего, они отсекаются плоскостями отсечения матрицы камеры по координатам центра спрайта. Это приводит к тому что они резко исчезают из вида на краях экрана. Также, квадратная форма спрайта не очень оптимальна для фрагментного шейдера так как он вызывается и в тех местах где текстура частиц пустая, что вызывает заметную излишнюю перерисовку. Мы используем оптимизированную форму частицы — с обрезанными краями в тех местах где текстура полностью прозрачна:

Источник

Мягкие частицы (Soft Particles).

Одной из хорошо распиаренных возможностей DX10 являются так называемые мягкие частицы (soft particles). Однако на самом деле для реализации этого эффекта вполне достаточно поддержки SM3 и и они великолепно делаются на OpenGL (не требуя при этом мелкомягкой и убогой ви$ты).

Рассмотрим что же именно подразумевается под «мягкими» частицами и в чем заключается их отличие от традиционных частиц.

Рис 1. Артефакты, возникающие при использовании традиционных частиц.

Это связано с тем, что частицы представлена одним полигоном, в то время как частицы обычно соответствуют не плоским фигурам, а объемными.

Рис 2. Сцена с рис. 1, но с использованием мягких частиц.

Рис 3. Отличие мягкой частицы от обычной.

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

При этом возможны два случая.

1. Луч «протыкает» объемную частицу насквозь и просто берем прозрачность из текстуры (рис 4.a).

2. Внутри шара находятся непрозрачные объекты, выведенные ранее. Тогда нам нужен отрезок от точки входа в частицу до ближайшего пересечения луча с объектами сцен, лежащими внутри объемной частицы. В этом случае отношение длины этого отрезка к заданной толщине частицы задает увеличение прозрачности частицы (рис 4.b).

Таким образом, в тем местах, где billboad уходит за объекты сцены происходит плавное «пропадание» частицы (вместо резкого скачка).

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

Поскольку полупрозрачные объекты, в том числе и частицы, всегда выводят после вывода непрозрачных, то можно после вывода всех непрозрачных объектов скопировать буфер глубины в текстуру и при выводе мягких частиц читать из нее значения глубины.

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

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

Ниже приводится полный исходный код на С++, использованный для рендеринга сцены с рис. 2 и 5.

По этой ссылке можно скачать весь исходный код к этой статье. Также доступны для скачивания откомпилированные версии для M$ Windows и Linux.

Copyright © Alexey V. Boreskov 2003-2008

Источник

Что такое мягкие частицы

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

Качество освещения (Lightning Quality)

То, насколько правдоподобно симулируется освещение в игре. Если это единственный подобный параметр в игре, то именно в эту настройку заложили уйму других, будь-то и объемный свет, и рассеивание лучей, и отражения, а иногда даже глобальное затенение. Освещение — это, пожалуй, вообще едва ли не самое основное из всего, что влияет на красоту картинки: оно делает ее объемной, натуралистичной, правдоподобной. Но и ресурсов все это дело «кушает» тоже немало. Именно поэтому, например, Nvidia так расхваливает свои новые RTX-видеокарты — они изначально разработаны под Ray Tracing — метод рендеринга, предполагающий правдоподобную симуляцию каждого луча.

Влияние на производительность

Зависит от движка, но почти во всех современных играх — очень сильное. Симулировать свет — это очень непросто, так что врубайте «ультра» только если у вас действительно мощная видеокарта.

Качество эффектов (Effects Quality)

Влияние на производительность

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

…Качество шейдеров (Shader Quality)

Шейдеры — это специальные программы для вашей видеокарты, исполняемые ее процессором. Грубо говоря, это такие «инструкции» от игры вашей GPU, по которым та понимает, как именно нужно отрисовывать тот или иной эффект. Чаще всего шейдеры используются для улучшения освещения, затенения, создания эффектов преломления лучей в воде (помните, как взрывала мозг та самая «шейдерная водичка из Half-Life 2: Lost Coast?), отражений, рассеиваний и так далее. Так что да, эта опция работает в тандеме с другими параметрами: качеством освещения и качеством теней. Существует три вида шейдеров: вершинные, геометрические и пиксельные, но игры, где можно отрегулировать качество каждого из них отдельно, встречаются невероятно редко.

Соответственно, чем выше качество шейдеров, тем лучше описанные выше эффекты, красивее тени и свет, реалистичнее геометрия — и тем сильнее нагрузка на видеокарту. Именно на видеокарту — потому что шейдеры считаются только GPU.

Влияние на производительность

Чаще всего — высокое. Например, в GTA V это один из самых «тяжелых» параметров в игре — снизив качество шейдеров с «Ультра» на средниее значение, вы получите прирост больше, чем в 15 FPS. Но бывает и так, что снижение этого параметра почти ничего не дает, как, например, в Mass Effect Anromeda.

Источник

Мягкие частицы

Народ, хелп) уже все перерыл, почитал, ну как почитал, что-то понял а что-то ваше не как))

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

И вот дальше тупик, не вникаю что нужно делать дальше, нашел статейку http://developer.download.nvidia.com/whitepapers/2007/SDK10/SoftP… ticles_hi.pdf 6 страница.

Не понимаю что значит значение Input, как я понял мне теперь нужно получить Z пикселя и по какой-то формуле вычесть разницу из текстуры глубины, но не вник как это делать)

Нашел еще такой код на сайте http://steps3d.narod.ru/tutorials/soft-particles-tutorial.html, но он без каких либо объяснений 🙁

Так и не разобрался в этом коде, особенно что такое gl_TexCoord [1] и pos, буду очень благодарен за помощь)

хотя нет, я поспешил, там текстура глубины используется для цвета

можно ещё засмушстепить, чтоб гранича была помягче

Battle Angel Alita
Увы у меня не юнити, а самопис на html5)

Нашел еще один код вроде как с пояснениями

Вот только не пойму что такое particleDepth, если я правильно понял то это дистанция пикселя до камеры, но что-то не работает, вроде по логики (sceneDepth *= MAXDEPTH) нужно дистанцию передавать, но чет не пашет.

Mira
Попробую поиграться, если врублюсь в этом коде, так как я не владею этим языком)

Нужно нарисовать частицу с градацией альфы от центра к краям, формат png смотрится нормально, а лучше dds там float градацию можно замутить. Ну и менять в шейдере в зависимости от удаленности от камеры.

>у меня не юнити, а самопис на html5)
Не всё же чужой код копировать. Пример из юнити очень наглядный и простой для понимания, чтоб разобраться и написать своё.

zeleniy5
> Нужно нарисовать частицу с градацией альфы от центра к краям
Ммм, не понял) у меня есть уже текстура для частицы http://dt-byte.ru/fc16cbb4.png нужно только теперь края мягче сделать, но пока не получается

Battle Angel Alita
Ну как-бы да, если шаришь в коде)) вот только я не шарю, к примеру что такое (i.projPos.z) и что такое (_InvFade )?

korner
k = (1.0f-(дистанция от камеры до частицы)/(дистанция видимости))
ну и k это множитель альфы в частице

Примерно таким образом в bioshock терминаторы светят, получается мягко и красиво.

korner
Просто в шейдер подкидвай положение и нормаль камеры, делай проекцию точки на плоскость и находи дистанцию между точкой и партиклом, можно наверно не прожектить это делается в шейдере.

korner Depth текстура для декалей ну или теней нужна, а у тебя партиклы.

zeleniy5
Она много для чего нужна)
Для скринспейс эффектов например

Что-то я ваше уже запутался, что куда зачем))

Вообщем юзаю библеотеку Three.js и там есть рендер сцены в глубину, тобишь renderTarget в текстуру и на выходе получаю типа этого

Все как начитал в статьях, нужна эта текстура, но вот дальше я не вкуриваю что нужно делать, нужно по формуле saturate((Zscene – Zparticle) * scale)

И вот такой вот вопрос, как просчитать глубину? библиотека то большая и я не знаю как она там глубину просчитывает, есть какая-то форму по которой она может просчитать?)

Источник

Дышите спокойно: японские инновации для очистки воздуха

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

Как проверить уровень загрязнения воздуха

Один из основных показателей загрязнения — мелкодисперсные частицы РМ2.5. Они представляют опасность для здоровья и сокращают продолжительность жизни [1]. Например, в день москвич вдыхает около 200 млрд частиц РМ2.5. Половина из них откладывается в легких. Конечно, один поход в офис вам вряд ли навредит. Но эти мелкодисперсные частицы со временем накапливаются в организме и однажды могут превысить критический уровень.

Ситуацию с загрязнением воздуха можно проверять онлайн на специальных сайтах [2]:

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

Как очистить воздух дома или в офисе

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

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

Что такое технология nanoe ™ X

Интересный вариант компактного воздухоочистителя разработали инженеры японской компании Panasonic. В нем используется патентованная технология nanoe ™ X на базе гидроксильных радикалов в водяной оболочке. Генератор собирает влагу из воздуха и под действием высокого напряжения производит гидроксильные радикалы. Они собираются в мельчайшие капельки воды размером 5–20 нм и разлетаются по помещению.

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

Частицы nanoe ™ могут уничтожать до 99,9% бактерий и вирусов, находящихся в воздухе. Эффективность этой технологии подтвердили независимые исследования ученых в Германии, Дании, Малайзии и Японии [3].

Как устроен портативный генератор nanoe ™ X

Портативный генератор nanoe X F-GPT01R-K от Panasonic создает 4,8 триллиона nanoe-частиц в секунду. Благодаря этому устройство очищает воздух и обеспечивает шесть дополнительных полезных функций [4]:

Помимо этого, nanoe-генераторы Panasonic обладают и другими достоинствами:

Портативность. Модель F-GPT01R-K по форме напоминает термокружку, а его масса не превышает 400 г. Поэтому компактное устройство можно носить с собой буквально везде. На рабочем столе в офисе, в кафе или автомобиле — оно будет эффективно очищать воздух вокруг вас, не отвлекая внимания. А еще это отличный вариант для стильного и полезного подарка.

Простота использования. Разработчики Panasonic также уделили внимание функциональности и простоте использования гаджета. На верхней панели устройства расположена всего одна клавиша. Нажали на нее — загорелся голубой индикатор, прибор включился.

Генератор питается с помощью кабеля USB Type-C от любых устройств — ноутбука, пауэрбанка или зарядки.

Доверьте создание чистой и комфортной атмосферы вокруг себя японским инновациям. И дышите спокойно.

Источник