Слияние кода завершено, страница обновится автоматически
Репозиторий:lcc-render
Пользовательский модуль рендера для Cocos Creator, позволяющий более удобно и гибко создавать эффекты рендера.
Недавно на форуме Cocos Creator я заметил множество публикаций с эффектами шейдеров, и мне захотелось использовать эти эффекты. Однако, я обнаружил, что многие из этих шейдеров довольно сложно использовать в Creator. Они не учитывают специфику объединения текстур и оптимизации рендера в Cocos Creator, поэтому использование ограничено. Вот почему появился этот проект. Сначала я работал над cocos2d-x, а затем перешёл на Cocos Creator, так что некоторые части кода могут быть реализованы лучше.
Установка очень проста — достаточно поместить этот проект в директорию плагинов Cocos Creator. Подробнее см. Документация по плагинам Cocos Creator.
Если вы хотите использовать встроенные эффекты этого плагина, просто добавьте компонент эффекта на узел, как показано ниже:
Вы можете добавить компонент эффекта, начинающийся со слова Effect*. Обычно после добавления вам потребуется переместить текстуру рендера в автоматически добавленный компонент lcc$render.ShaderSpriteFrame, как показано ниже:
Теперь ваш эффект рендера должен отображаться корректно. Вы можете изменять параметры эффекта через свойства компонента Effect*. Если же вы хотите настроить свой уникальный эффект рендера, то рекомендуется ознакомиться с документацией ниже.
Основные параметры эффекта можно установить в компоненте Effect*, например, вот компонент эффекта мозаики:
Конечно, это всего лишь набор базовых эффектов, предоставленных для удобства использования. Благодарю всех участников форума Cocos за предоставление этих эффектов.
Перед тем как углубиться в дизайн этого фреймворка, рекомендуется иметь базовое понимание шейдеров.# Дизайн фреймворка Фреймворк не является отдельным компонентом отрисовки, а представляет собой контейнер для узлов, используемых в процессе отрисовки. Различные параметры отрисовки добавляются в систему отрисовки через компоненты. Основные типы компонентов отрисовки:
Компонент системы отрисовки RenderSystem
Этот компонент наследует RenderComponent, и он отвечает за организацию и обновление процесса отрисовки. Например, это может включать обновление материалов, свойств, форм, вершин и других элементов.* Компонент шейдеров ShaderComponent
Шейдерные компоненты представляют конкретные данные отрисовки или управления, такие как SpriteFrame, Color, Float, Vec2, Vec3, Vec4, Macro и другие. Эти компоненты связаны с данными, передаваемыми шейдерам.## 1. Какие данные передаются в шейдер?
Обычно есть два способа передачи данных в шейдер:
uniform:
attribute:
Как видно, количество вызовов рендера (Draw Call) значительно меньше при использовании attribute.Возможно, некоторые люди заметят проблему на основе этих двух сравниваемых изображений. Время кадра (FrameTime) больше при использовании attribute. Основная причина заключается в том, что время замера слишком малое, а также колебание времени в Cocos имеет ту же точность. Пример был сделан для 10 изображений, но если увеличить количество до 50, то станет очевидно, что FrameTime при использовании attribute остаётся тем же, тогда как при использовании uniform он увеличивается примерно в 4 раза.
Благодаря возможности использования макросов в определении шейдеров Creator, мы можем выполнять следующее:
#if USE_TEXTURE
uniform sampler2D texture;
#endif
С помощью макросов мы можем динамически отсекать части кода шейдера. Например, если мы пишем следующий код в вершинном шейдере:
#if ATTR_COLOR
in vec4 a_color;
out vec4 color;
#elif UNIF_COLOR
uniform UNIF_COLOR {
vec4 u_color;
};
out vec4 color;
#else
vec4 D_color = vec4(1,1,1,1);
out vec4 color;
#endif
```Если нам требуется использовать передачу цвета через вершины (где каждая вершина может иметь свой уникальный цвет), то мы можем определить `ATTR_COLOR` как `true`, а `UNIF_COLOR` как `false`. В этом случае данные будут передаваться через вершины. Если же нам требуется использовать константное значение, мы можем установить `ATTR_COLOR` как `false`, а `UNIF_COLOR` как `true`, после чего определяем константу. Конечно, есть ещё и значение по умолчанию, которое используется, когда оба значения установлены как `false`.При использовании данных мы также можем проверять условия с помощью макросов, как показано ниже:
```cpp
#if ATTR_COLOR || UNIF_COLOR
// ... ... Эти действия выполняются при передаче данных в шейдер
#endif
Каким образом эти данные могут быть переданы в вершинном шейдере? Очень просто:
// Определение цвета
// Вышеупомянутый кодовый сегмент [1]
...
void main(){
...
#if ATTR_COLOR
color = a_color; // Вершина цвет передана дальше
#elif UNIF_COLOR
color = u_color; // Константный цвет передан дальше
#else
color = D_color; // По умолчанию цвет передан дальше
#endif
...
// Здесь также можно использовать переменную color
...
}
Затем следует описание того, как используется фрагментный шейдер, что гораздо проще:
...
in vec4 color;
...
void main(){
...
gl_FragColor = color; // Используется цвет color
...
}
Хаха, не кажется ли вам, что всё равно приходится писать много кода? Но мы используем макросы, чтобы упростить эти операции.
############## Вершинный шейдер
// Определение цвета
LCC_VERT_VALUE_DEFINE(COLOR, vec4, color, vec4(1.0,1.0,1.0,1.0))
...
void main(){
...
// Передача цвета
LCC_VERT_VALUE_PASS(COLOR, color)
...
// Здесь также можно использовать color
}
############## Фрагментный шейдер
// Импорт цвета
LCC_FRAG_VALUE_IMPORT(vec4, color)
...```c
void main(){
...
gl_FragColor = color; // Здесь color может использоваться произвольным образом
...
}
lcc-render/framework/src/render/build/lcc-defines.inc.
Переменные в компонентах шейдеров обычно определяются двумя способами, как показано ниже:
* `UNIFORM` константа
`Unif Macro` указывает макрос, используемый для этой константы, `Name` — это имя макроса, а `Check Only` означает, что этот макрос используется только для проверки.
* `Проверка используется тогда, когда макрос был определён как true ранее, и только тогда эта константа активируется и передаётся.` Это применимо к нескольким связям данных, например:
```cpp
#if USE_TEXTURE
in vec2 a_uv;
out vec2 uv;
#endif
```
Если `USE_TEXTURE` определено, то передаётся `a_uv`. Без текстур UV не имеет значения.
`Unif Name` указывает имя константы в шейдере.
* `ATTRIBUTE` вершина данных
Для атрибута данных `Attr Macro` и `Name` имеют ту же значимость, что и вышеописанные константы.
`Особое внимание стоит обратить на то, что если данные передаются через вершины, каждую вершину можно присвоить уникальным данными, например установить разные цвета для четырёх углов изображения.`
# Описание компонентов шейдеров
## ShaderSpriteFrameЭтот компонент связан с изображением; если ваш эффект отрисовки требует использования изображений, вам следует добавить этот компонент. Количество изображений может быть любым.
* `Применить форму` — применяется ли текущий размер изображения, если выбрано значение "Да", то размер отрисовки будет таким, как указан ниже (`Если в системе отрисовки нет других компонентов, использующих форму, то форма будет взята из формы узла`).
* `Тип формы` — тип формы, можно использовать форму узла или задать свою.
* `Trim` и `Sprite` — совместно используются для реализации режима Simple в компоненте Sprite.
* `Применить UV` — применение UV изображения в шейдер.
* `Пользовательское UV` — возможность задать порядок вершин UV.
* `Применить UVRect` — применение прямоугольника UV из спрайта в шейдер (`Не обязательно выключать спрайты, но возможно потребуется рассчитывать реальные UV относительно UV изображения, макросы предоставляют функции`).
* `Применить размер кадра` — передача пиксельного размера изображения в шейдер, некоторые эффекты, такие как гауссовое размытие, могут это использовать.## ShaderColor
Этот компонент связан с цветами; если ваш эффект отрисовки требует передачи цветов, вам следует добавить этот компонент.
</br>
* `Применить цвет узла` — прямое применение цвета узла.
* `Тип цвета` — можно задать однородный цвет или цвет для каждой вершины.
* `Цвет вершин` — цвет каждой вершины, последовательность: нижний левый, нижний правый, верхний левый, верхний правый. Цвета можно менять во время работы.
## ShaderFloat/ShaderVec2/ShaderVec3/ShaderVec4
Эти компоненты значений шейдеров отличаются только типом данных; конкретное использование описано внутри компонента `ShaderColor`.
## ShaderMacro
Этот компонент шейдера позволяет свободно определять макросы в шейдере.
</br>
* `Имя макроса` — имя определяемого макроса.
* `Проверка макроса` — если значение не пустое, проверяет является ли макрос true, если да, то макрос определяется.
* `Тип значения` — тип значения макроса, есть `Значение` и `Логическое значение`.
* Обратите внимание на методы определения значений макросов в шейдере.
```
#pragma define LAYERS range([4, 5])
#pragma define METALLIC_SOURCE options([r, g, b, a])
```
[**Синтаксис эффекта**](https://docs.cocos.com/creator3d/manual/zh/material-system/effect-syntax.html "Синтаксис эффекта").
* `Логическое значение` — булево значение.
* `Значение` — число.## Компоненты эффектов серии Effect*Эти компоненты в основном собирают несколько компонентов шейдеров и обеспечивают единое управление ими. Конкретные эффекты создаются с помощью этих компонентов. Вы можете ознакомиться с исходным кодом компонентов Effect* в рамках проекта.
### Встроенные компоненты эффектов:
* **EffectFlashLight** — эффект сканирования светом. Можно настроить скорость, угол, количество, расстояние между лучами и ширину.
* **EffectFluxaySuper** — эффект потока света. Можно настроить скорость.
* **EffectGaussianBlur** — эффект высокого гауссового размытия. Из-за возможной проблемы производительности при слишком больших значениях, конфигурация этого компонента недоступна.
* **EffectGlowInner** — внутренний эффект свечения. Можно настроить цвет, ширину, пороговое значение и мерцание.
* **EffectGlowOuter** — внешний эффект свечения. Похож на внутренний эффект свечения.
* **EffectMosaic** — эффект мозаики. Можно настроить степень (от 0 до 1).
* **EffectOutline** — эффект контура. Можно настроить цвет, ширину и мерцание.
* **EffectPhoto** — эффект фотографии. Можно настроить старую фотографию, серый оттенок, инверсию, замороженный вид, карикатурность и степень.
* **EffectRoundCornerCrop** — эффект округлой обрезки. Можно настроить степень.
* **EffectSpriteMask** — эффект маски шейдера. Настройка исходного изображения и маски. Для достижения наилучшего результата рекомендуется отключить автоматическую обрезку изображения и сделать размеры исходного изображения и маски одинаковыми.
* **EffectDissolve** — эффект растворения. Настройка шума и степени.
* **EffectSmoothTransform** — эффект плавного перехода. Настройка ширины перехода, направления перехода и степени.
* **EffectRainDropRipples** — эффект дождевых волн. Настройка плотности волн и динамического изменения.
На самом деле, после добавления этих встроенных эффектных компонентов вы также можете добавить другие шейдерные компоненты, если шейдер поддерживает соответствующие данные. Например, встроенный мозаичный компонент не имеет настройки цвета, но вы вполне можете добавить компонент ShaderColor на узел для управления цветом.# Заключение
Этот фреймворк упрощает и расширяет способы передачи данных в шейдеры Creator. Мы можем сосредоточиться на создании качественных шейдеров, а затем использовать этот фреймворк для настройки способов передачи данных в зависимости от конкретной ситуации, чтобы достичь желаемого результата. Внутри фреймворка уже включены некоторые эффекты, и он будет регулярно обновляться за счет переноса эффектов из других источников (например, shadertoy).
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )