Настройка шейдера свечения, чтобы он выглядел лучше

У меня есть простая игра, и ее предметами являются эти маленькие строчки. Он предназначен для iOS и Android, поэтому он имеет ОГРОМНЫЙ ряд процессоров, на которых он может работать, прямо сейчас.

Я пытаюсь добавить им свечение в реальном времени по двум причинам.

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

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

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

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

• A. Добавьте режим наложения, режим наложения экрана или другую смесь
• B. Взвешивание размытия и нормали по-разному перед комбинацией
• C. Сигма функции гауссовского звонка (я использовал этот запутанный калькулятор, но, похоже, он не дает те же значения, которые есть у других людей)
• D. Скаляры на значениях "x", отправленные в сигма-функцию
• E. Примерный масштаб (уменьшение радиуса размытия или увеличение)
• F. Изменение разрешения буфера свечения

Как найти «наиболее привлекательные» константы при работе с таким количеством переменных, как эта?

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

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

Сигма и размер ядра гауссовского фильтра

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

Как правило, размер ядра должен быть как минимум в 6 раз больше сигмы. Затем ядро ​​простирается до 3 сигм в каждом направлении, что достаточно, чтобы покрыть почти весь вес математической кривой колокола. Также хорошо округлить размер пикселя до следующего нечетного числа, чтобы фильтр был симметричным. Так, например, при sigma = 1,5 px вы бы использовали 9-пиксельный фильтр; при sigma = 2.0 px, использовании 13-пиксельного фильтра и т. д.

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

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

Создание красивого фильтра свечения

Обычный трюк с этим заключается в использовании нескольких гауссианов различного радиуса, сложенных вместе. Это делает лучший эффект свечения чем любой отдельный гауссиан сам по себе. Например, вот макет в Photoshop, созданный из трех слоев, аддитивно смешанных вместе. Три гауссиана имеют размер 3px, 5px и 11px (что соответствует сигме = 0.5px, 0.83px, 1.83px соответственно).

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

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

зазубрины

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

Я слышал, что вы не можете использовать MSAA по соображениям производительности, но может быть и другой вариант. В зависимости от того, как вы отрисовываете следы свечения, вы можете немного увеличить их размер и написать шейдер, который применяет градиент для затухания цвета в пределах пары пикселей от края. Это должно помочь им выглядеть более гладко. Вот шейдертой, которая демонстрирует спад краев шириной 1px, используемый для сглаживания процедурной формы.