Докуметация Cтарт Статьи Форум Лента Вход
Не официальное русскоязычное сообщество

ShaderBlow

Опубликованно: 21.09.2017, 19:27
Последняя редакция, Andry: 24.09.2017 19:04

shaderblow_intro_01

Коллекции эффектов для jMonkeyEngine 3. Чтобы установить плагин ShaderBlow в jMonkeyEngine SDK, перейдите в Сервис ▸ Подключаемые модули ▸ Доступные подключаемые модули. Так же вы всегда можете получить исходник проекта ShaderBlow здесь: Проект ShaderBlow на Github

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

  • Фильтры:
    • Базовое преграждение окружающего света в экранном пространстве(Basic SSAO)
    • Оттенки Цвета(ColorScale) (добавлено @H)
    • Оттенки Серого(GrayScale) (добавлено @H)
    • Простое Преломление(Simple Refraction) (добавлено @mifth)
    • Эффект Старого Фильма(Old Film Effect) (добавлено @H)
    • Ночное Виденье(Night Vision) (добавлено @wezrule)
    • Тепловое зрение Хищника(Predator Thermal Vision) (добавлено @wezrule)
    • Эффект Матового Стекла(Frosted Glass effect) (добавлено @wezrule)
  • Шейдеры
    • Освещение Взрывы(LightBlow)
    • Растворитель(Dissolver) (добавлено @thetoucher)
    • Поддельное Выдувание Частиц(FakeParticleBlow) (добавлено @mifth)
    • Силовой щит(Forceshield) (добавлено @ficik)
    • Матовая насадка(MatCap) (добавлено @mifth)
    • Стекло(Glass) (добавлено @mifth)
    • Бомбардировка Текстурами(Texture Bombing) (добавлено @wezrule)
    • Электричество(Electricity)
    • Простой Спрайт(SimpleSprite)
    • Пузырь(Bubble)
    • Простые Частицы Спрайты(SimpleSpriteParticle)
Официальный форум: Проект ShaderBlow.

Фильтр Оттенки Цвета(ColorScale)

Фильтры ColorScale применяют цвет к визуализируемому изображению. Вы можете использовать этот фильтр, чтобы подкрасить визуализируемое изображение определенным цветом без изменения материала (подводная сцена, ночная сцена, сцена огня) или добиться эффекта нарастания/затухания(fade-in/fade-out).

Особенности:

  • Позволяет установить цвет для применения. По умолчанию красный.
  • Позволяет задать интенсивность цвета. Значение по умолчанию 0.7f. Фрагментный шейдер фиксирует интенсивность цвета от 0 до 1.
colorfilter2  colorfilter1
colorfilter3  colorfilter4

Применение

Добавьте экземпляр ColorScaleFilter в экземпляр FilterPostProccesor. Установите цвет и интенсивность цвета. Затем добавьте экземпляр FilterPostProccesor в атрибут viewPort приложения.

this.fpp = new FilterPostProcessor(this.assetManager);
this.fpp.setNumSamples(4);
this.colorScale = new ColorScaleFilter();
this.fpp.addFilter(this.colorScale);
// colorScale.setFilterColor(ColorRGBA.Red.clone()); // Установить цвет Фильтра
// colorScale.setColorDensity(0.5f); // Установить интенсивность Цвета (от 0 до 1);
this.viewPort.addProcessor(this.fpp);

Тестовый Пример

Тема форума


Фильтр Оттенки Серого(GrayScale)

Фильтр GrayScale придаёт визуализируемому изображению в оттенки серого.

Фильтр GrayScale Отключен  Фильтр GrayScale Включен
grayscalefilter-off  grayscalefilter-on

Применение

Добавьте экземпляр GrayScaleFilter в экземпляр FilterPostProccesor. Затем добавьте экземпляр FilterPostProccesor в атрибут viewPort приложения.

this.fpp = new FilterPostProcessor(this.assetManager); // Создаёт экземпляр FilterPostProcessor
this.grayScale = new GrayScaleFilter();  // Создаёт экземпляр GrayScaleFilter
this.fpp.addFilter(this.grayScale);  // Добавляет экземпляр GrayScaleFilter в экземпляр FilterPostProcessor
this.viewPort.addProcessor(this.fpp);  // Добавляет экземпляр FilterPostProcessor в ViewPort

Тестовый Пример

Тема форума


Фильтр Эффект Старого Фильма(Old Film Effect)

Фильтр Старого Фильма имитирует эффект классических фильмов. Это порт этого шейдерного эффекта.

Особенности:

  • Позволяет установить цвет фильтра. По умолчанию используется сепия (ColorRGBA(112f / 255f, 66f / 255f, 20f / 255f, 1.0f)).
  • Позволяет установить плотность цвета. Значение по умолчанию 0,7. Шейдер фиксирует значение от 0 до 1. Цветное изображение получает оттенки серого, если для плотность цвета установлено значение 0.
  • Позволяет установить плотность шума. Значение по умолчанию 0,4. Шейдер фиксирует значение от 0 до 1.
  • Позволяет установить плотность царапин. Значение по умолчанию равно 0,3. Шейдер фиксирует значение от 0 до 1.
  • Позвольте установить диаметр виньетирования. Значение по умолчанию 0,9. Шейдер фиксирует значение от 0 до 1,4. Эффект виньетирования выполняется с использованием двух кругов. Внутренний круг представляет собой область, не затронутую виньетированием. Область между внутренним и внешним кругами представляет собой область, где начинается виньетирование, которое постепенно уменьшается до черного от внутреннего к внешнему кругу. Любая часть кадра вне внешнего кольца будет полностью черной.
Я решил зафиксировать эти значение внутри кода фрагментного шейдера вместо использования java-кода, потому что я думаю, что этот способ быстрее (лучше с точки зрения производительности). Вы можете закрепить эти значения, используя java-код, если хотите.

Применение

Добавьте экземпляр OldFilmFilter в экземпляр FilterPostProccesor. Затем добавьте экземпляр FilterPostProccesor в атрибут viewPort приложения.

this.fpp = new FilterPostProcessor(this.assetManager); // Создаёт экземпляр FilterPostProcessor 
this.oldFilmFilter= new OldFilmFilter();  // Создаёт экземпляр OldFilmFilter 
this.fpp.addFilter(this.oldFilmFilter);  // Добавляет экземпляр OldFilmFilter в экземпляр FilterPostProcessor 
this.viewPort.addProcessor(this.fpp);  // Добавляет экземпляр FilterPostProcessor в ViewPort

Тестовый Пример

Тема форума


Шейдер Освещение Взрывы(LightBlow Shader)

Шейдер Lightblow — это улучшенный шейдер Освещения(Lighting) для JME.

Особенности:

  • Улучшены расчеты освещения.
  • Улучшены расчеты отражений.
  • Реализована карта отражений(reflection map) с альфа картой нормалей(normal map).
  • Улучшенные вычисления Minnaert.
  • Полусферическое освещение.
  • Освещение на основе изображения(IBL) с Альбедо.
  • Реализована эмиссионная карты(Emissive map) с диффузной альфой.
  • Нормализация нормалей по умолчанию.
  • Реализована зеркальная карта(specular map) с альфа картой нормалей(normal map).
  • Реализована интенсивность (яркость) зеркального отражения.
  • Переключение -x/-y/-z нормалей для разных карт нормалей. (3dmax, blender, xnormal имеют разные подходы).
  • Зеркальный Цвет теперь работает с зеркальными картами(specular map)
  • Фрагментный шейдер Glowblow добавляется с m_GlowIntensity? юниформой. Можно изменить интенсивность свечения для объектов. Пожалуйста, используйте DiffuseMap? как GlowMap? вместо новой дополнительной текстуры Glow rgb.
  • Добавлены Карты освещения(Lightmap).
  • Добавлено освещение краёв. Спасибо Thetoucher из JME Blog!
  • Добавлен туман. Туман используется без постобработки!
  • Смешивание текстур: 4 диффузных текстуры и 4 нормалей могут быть смешаны (например, система ландшафта).

Программное обеспечение для Карт Нормалей? создание: http://shadermap.com/shadermap_pro.php
Программное обеспечение для CubeMaps? редактирование: https://code.google.com/archive/p/cubemapgen/downloads

Смотреть следующие видео:

Тема форума


Шейдер Растворитель(Dissolver)

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

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

dissolver-screen  dissolver-maps

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

Тест значение растворенного колеблются между 0 и 1. Он демонстрирует 6 различных применений шейдера, все они работают с одинаковой скоростью. Верхний ряд просто растворяется. Нижний ряд показывает 3 потенциальных приложения:

  1. Рост Органики (внизу слева) поверх сетки(mesh), это может работать как для быстрой анимации, для быстрого эффекта роста, так и с фиксированным значением, например установленным на 0,5f, «покрыто на 50% роста»;
  2. Маскирование текстур (нижняя часть), я вижу, что это, вероятно, наиболее приближенное к жизни приложение. В демонстрации показана фотографиями с плохо очищенной улицей с фотошопа, и кусками мусора, а затем мусор вокруг растворяется на заданное значение, такое лучше всего работает с фиксированным значением, например, установленным на 0,75, «на 75% грязное». Маскирование текстур можно также использовать для:
    1. Повреждение краски на автомобиле;
    2. Рваные раны на персонаже;
    3. Эффект крови от выстрела, который попадает со стороны экрана, когда вы нанесли слишком большой урон в современном FPS.
  3. Сгорающая органика (нижний правый) состоит из 2 кубов, один синий другой оранжевый, оба с тем же растворением органического вещества, однако оранжевый слегка опережает синий, поэтому он показывает сначала (т.е. растворения всегда незначительно опережает) ,

Смотреть следующие видео:


Применение

  • Шейдер требует 2 параметра:
  • Текстурная карта Texture2D для использования в качестве карты растворения(dissolve map); а также
    • Vector2 внутренних параметров params:
    • Первым является float значение, равное количеству растворения, значение от 0-1: 0 не растворяется, 1 полностью растворяясь; а также
    • Второе значение int используемое в качестве инверсионного переключателя, 1 для инвертирования растворения/отбрасывания, 0, чтобы оставить как есть.
Растворения основан на Common/MatDefs/Lighting.j3md. Значит, все функции Common/MatDefs/Lighting.j3md должны быть доступны и на растворении.
// Создаём экземпляр материала, используя ShaderBlow Lighting.j3md
final Material mat = new Material(this.assetManager, "ShaderBlow/MatDefs/Dissolve/Lighting.j3md");
mat.setColor("Ambient", ColorRGBA.Blue);
mat.setColor("Diffuse", ColorRGBA.White);
mat.setColor("Specular", ColorRGBA.Black);
mat.setBoolean("UseMaterialColors", true);

this.assetManager.loadTexture("TestTextures/Dissolve/burnMap.png", mat.setTexture("DissolveMap", map); // Зададим маску текстурной карты

this.DSParams = new Vector2f(0, 0); // стандартный растворитель
//this.DSParamsInv = new Vector2f(0, 1); // инвертированный растворитель
mat.setVector2("DissolveParams", this.DSParams); // Зададим params

final Box b = new Box(Vector3f.ZERO, 1, 1, 1);
final Geometry geom = new Geometry("Box", b);
geom.setMaterial(mat);

Тестовый Пример

Тема форума


Шейдер Поддельное Выдувание Частиц(FakeParticleBlow)

Эффект для огня или двигателя корабля. Такой эффект используется в игре «Eve Online для судовых двигателей».

Особенности:

  1. GPU анимация (теперь вам не нужен simpleUpdate(float tpf) для шейдера). Анимация выполняется смещением текстуры в соответствии с осью X и/или Y.
  2. X и/или Y направление анимации. Анимация также не поддерживается.
  3. Анимация изменения направления. По умолчанию направление анимации по оси Y — вверх-вниз, а оси X — справа налево.
  4. Позволяет установить скорость анимации.
  5. Позволяет задать маски текстур, чтобы задать форму частиц.
  6. Позволяет задать цвет частиц.
  7. Позволяет установить цвет тумана. Цвет тумана применяется к материалу, использующему для цвета альфа-значения как коэффициент расстояния тумана.
fakeparticleblow  Туман, нанесенный на синий огонь fakeparticleblow3

Применение

Создайте материал (в SDK или в коде) с помощью FakeParticleBlow.j3md. Задайте параметры материала и установите материал для spatial.

В большинстве случаев spatial будет от 4 до 10 плоскостей размещенных в одном и том же месте, но повернуто относительно оси Y, на разные углы для каждой плоскости. Что-то похожее на это:

fakeobject

Не забудьте установить очереди bucket для прозрачности spatial.
// Создадим материал
final Material mat = new Material(this.assetManager, "ShaderBlow/MatDefs/FakeParticleBlow/FakeParticleBlow.j3md");

// Создадим текстуру маски для использования
final Texture maskTex = this.assetManager.loadTexture("TestTextures/FakeParticleBlow/mask.png");
mat.setTexture("MaskMap", maskTex);

// Создадим текстуру, используемую для spatial.
final Texture aniTex = this.assetManager.loadTexture("TestTextures/FakeParticleBlow/particles.png");
aniTex.setWrap(WrapMode.MirroredRepeat); // ПРИМЕЧАНИЕ. Установим WrapMode = MirroredRepeat для анимации текстуры
mat.setTexture("AniTexMap", aniTex); // Установим текстуру

mat.setFloat("TimeSpeed", 2); // Установим скорость анимации

mat.setColor("BaseColor", ColorRGBA.Green.clone()); // Установим базовый цвет для применения к текстуре

// mat.setBoolean("Animation_X", true); // Включим анимацию оси X
mat.setBoolean("Animation_Y", true); // Включим анимацию оси Y
mat.setBoolean("Change_Direction", true); // Изменим направление анимации текстуры

mat.getAdditionalRenderState().setFaceCullMode(FaceCullMode.Off); // Сделаем видимыми обе стороны грани
mat.getAdditionalRenderState().setBlendMode(BlendMode.Additive);

final ColorRGBA fogColor = ColorRGBA.Black.clone();
fogColor.a = 10; // альфа-значение fogColor используем для расчета интенсивности тумана (расстояние до применения тумана)
mat.setColor("FogColor", fogColor); // Установим цвет тумана для применения к spatial.

final Quad quad = new Quad(3, 3); // Создадим spatial. Плоскость в этом случае
final Geometry geom = new Geometry("Particle", quad);
geom.setMaterial(mat); // Назначим материал spatial
TangentBinormalGenerator.generate(geom);
geom.setQueueBucket(Bucket.Transparent); // Не забудем установить очереди bucket для прозрачности spatial

Чтобы получить зеленый/желтый/синий туман (а не прозрачность):

mat.getAdditionalRenderState().setBlendMode(BlendMode.AlphaAdditive);
final ColorRGBA fogColor = ColorRGBA.Blue.clone();

Для геометрий нескольких плоскостей будет требоваться, материал AlphaAdditive.

Тестовый Пример 1
Тестовый Пример 2

Тема форума


Шейдер Силовой щит(Forceshield)

Шейдер Forcefield добавляет эффект шита к spatial. В большинстве случаев spatial будет сферой, но так же должны быть доступны куб и овал. Проблема только в том, что они должны быть выше, потому что расстояние вычисляется из вершины.

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

Особенности:

  • Позволяет установить текстуру щита.
  • Позволяет установить цвет щита.
  • Позволяет установить минимальную видимость (подобно альфа-значению). По умолчанию 0, при этом, экран не отображается, будет только анимации.
  • Позволяет задать продолжительность эффекта. Значение по умолчанию — 0,5 с.
  • Позволяет установку размера эффекта. Значение по умолчанию: 1.
  • Позволяет включить/отключить анимации ударов.

Применение

Создайте экземпляр Spatial. Создайте экземпляр ForceShieldControl. Добавьте экземпляр control в spatial.

Если у вас возникли проблемы, попробуйте объект с большим количество полигонов.
// Создадим spatial для щита
final Sphere sphere = new Sphere(30, 30, 1.2f);
final Geometry shield = new Geometry("forceshield", sphere);
shield.setQueueBucket(Bucket.Transparent); // Не забудем установить очереди bucket для прозрачности spatial

// Create ForceShieldControl
this.forceShieldControl = new ForceShieldControl(this.assetManager, 0.5f);
shield.addControl(this.forceShieldControl); // Добавим control в spatial
this.forceShieldControl.setEffectSize(2f); // Установим размер эффекта
this.forceShieldControl.setColor(new ColorRGBA(1, 0, 0, 3)); // Установим цвет эффекта
this.forceShieldControl.setVisibility(0.1f); // Установите видимость щита.

// Установим текстуру щиту
this.forceShieldControl.setTexture(this.assetManager.loadTexture("TestTextures/ForceShield/fs_texture.png"));

// this.forceShieldControl.setEnabled(false); // Включить, отключить анимацию.

Используйте метод forceShieldControl.registerHit(final Vector3f position), чтобы регистрировать удары.

final CollisionResults crs = new CollisionResults();
this.rootNode.collideWith(new Ray(this.cam.getLocation(), this.cam.getDirection()), crs);
if (crs.getClosestCollision() != null) {
    // Регистрировать удар
    this.forceShieldControl.registerHit(crs.getClosestCollision().getContactPoint());
}

Тестовый Пример

Тема форума


Шейдер Матовая насадка(MatCap)

Шейдер Matcap будет очень полезен для Скролл-шутеров для имитации различных материалов, таких как стекло, золото, металлы. Шейдер не использует никаких огней, только одна текстура.

Особенности:

  • Туман цвет и туман skybox.
  • Эффект Мультяшности по краям(toon edge).
  • Умножение цвета: Задание цвета, чтобы изменить цвет текстуры.
  • Карта нормалей(Normal map).
shaderblow_matcap (1)   matcap3
matcap1   matcap2

Применение

Создайте материал (в SDK или в коде) с помощью MatCap.j3md. Задайте параметры материала и установите материал для spatial.

Не забудьте добавить DirectionalLight, если вы хотите использовать эффект мультяшности по краям(toon edge).
Material My Material : ShaderBlow/MatDefs/MatCap/MatCap.j3md {
     MaterialParameters {
        DiffuseMap : Flip TestTextures/matcaps/met2.png
        Nor_Inv_Y : true
        Nor_Inv_X : false
        Nor_Inv_Z : false
        NormalMap : TestModels/LightBlow/jme_lightblow_nor.png
        FogSkyBox : Flip TestTextures/Water256.dds

        Toon : true
        EdgesColor : 1.0 0.0 0.0 1.0
        EdgeSize : 0.01
        Fog_Edges : true
     }
    AdditionalRenderState {
    }
}

Тестовый Пример

Тема форума


Шейдер Стекло(Glass)

Особенности:

  • Туман цвет и туман skybox.
  • Эффект Мультяшности по краям(toon edge).
  • Умножение цвета: Задание цвета, чтобы изменить цвет текстуры.
  • Карта нормалей(Normal map).
glass-shader  glass-shader2

Применение

Создайте материал (в SDK или в коде), используя Glass.j3md. Задайте параметры материала и установите материал для spatial.

Не забудьте добавить DirectionalLight, если вы хотите использовать эффект мультяшности по краям(toon edge).
Material My Material : ShaderBlow/MatDefs/Glass/Glass.j3md {
     MaterialParameters {

        RefMap : Flip TestTextures/Water256.dds
        Multiply_Color : 1.1 1.5 1.1 1.0
        colorIntensity : 0.79999995
        Nor_Inv_Y : true
        NormalMap : TestModels/LightBlow/jme_lightblow_nor.png
        ChromaticAbberation : true
        abberIndex : 0.04
        specularIntensity : 0.59999996

        Toon : true
        EdgesColor : 0.2 1.0 0.0 1.0
        EdgeSize : 0.01
        Fog_Edges : true
     }
    AdditionalRenderState {
    }
}

Тестовый Пример

Тема форума


Постобработка/Фильтр Простое Преломление(SimpleRefraction)

Особенности:

  • Холодный эффект преломления

Применение

Тестовый Пример для Постобработки

Тестовый Пример для Фильтра


Фильтр Базовое преграждение окружающего света в экранном пространстве(Basic SSAO)

Особенности:

  • Холодные тени.

shaderblow_ssao

Применение

Тестовый Пример

Тема форума


Шейдер Электричество(Electricity)

Особенности:

  • Холодный Электрический эффект

Тема форума


Шейдер Простой Спрайт(SimpleSprite)

Особенности:

  • GPU анимированная текстура.

shaderblow_simplesprite_shader

Тема форума


Шейдер Пузырь(Bubble)

Особенности:

  • Холодный приятный пузырь.

Тема форума


Шейдер Простые Частицы Спрайты(SimpleSpriteParticle)

Особенности:

  • Статистика скорости спрайта: может отображаться 1 500 000 спрайтов со скоростью 149 кадров в секунду(fps) (0% загрузки процессора, скорость ограничена только графической картой). До тех пор пока вы их не меняете (добавьте, переместите, удалите, измените изображение). ПОЛНАЯ БИБЛИОТЕКА ПЛАГИН: http://code.google.com/p/petomancer/downloads/detail?name=SpriteLibrary.zip&can=2&q=
  • shaderblow_simplespriteparticle_shader

    Тема форума

    Шейдер Бомбардировка Текстурами(Texture Bombing)

    Особенности:

    • Применение случайных изображений из текстурного атласа к модели путем разделения UV-текстур модели на ячейки.

    Применение

    Тестовый Пример

    Тема форума


    Фильтр Ночное Виденье(Night Vision)

    Особенности:

    • Нанесите маску (бинокль) и цвет, чтобы эмулировать режим ночного видения.

    Применение

    Тестовый Пример

    Тема форума


    Фильтр Тепловое зрение Хищника(Predator Thermal Vision)

    Особенности:

    • Изменяет цвет в сцене, чтобы эмулировать эффект теплового зрения хищника

    Применение

    Тестовый Пример

    Тема форума


    Фильтр Эффект Матового Стекла(Frosted Glass effect)

    Особенности:

    • Отображает эффект матового стекла поверх текущей сцены

    Применение

    Тестовый Пример

    Тема форума


    Переведено для jmonkeyengine.ru, оригинал
    Автор перевода: Andry

    Добавить комментарий

    jMonkeyEngine.ru © 2017. Все права сохранены.