10.06.2020 03:51
atri1 25 2300 Источник

Еще один мой проект в Godot 3 с использованием разных шейдеров, все шейдеры довольно простые.


Ссылка для запуска на itch.io, требуется WebGL2.
Исходный код проекта на github, проект graphic_demo_3d.


Статья разбита на такие разделы:


  1. Статические текстуры, генерация и плавная смена для эффекта освещения.
  2. Сглаживание и мультисэмплинг.
  3. Про используемые шейдеры и их логику.
  4. Немного про логику скриптов.

О чем это:


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


Скачать готовые сборки для Linux и Windows ссылка на itch.io.
Исходный код проекта ссылка на github.


Для разработки использовался официальный Godot 3.2.1, без модификаций.


Статические текстуры



Ray-tracer и убирание шума:
Для генерации всех текстур освещения, как не сложно догадаться, использовался raytracer. В основном это Blender-cycles.
В качестве деноизера я использовал этот код шейдера glslSmartDeNoise.


Разные цвета освещения:
В каталоге проекта graphic_demo_3d/game/models/objects/arc/ есть папки orig+цвет где все текстуры освещения для этой геометрии(меша).
И эти текстуры синхронно меняются через логику скрипта arc.gd


Панорамы:
Для создания текстур панорам, которые используются как текстура отражения на сферах, делал cubemap снимок и трансформировал в панораму, в Godot такое сделать быстрее чем в Blender.


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



Сглаживание и мультисэмплинг



Мультисэмплинг(MSAA) на весь экран очень дорогой, и в этом проекте он не используется.
На видео выше шейдер рисует линии анимации используя smoothstep, и для сглаживания радиус smoothstep увеличивается в зависимости от положения фрагмента шейдера, на этом видеоролике справа этаже анимация без сглаживания.


На фиолетовых сферах используется мультисэмплинг текстуры, код шейдера:


    const int AA=4;
    for (int mx = 0; mx < AA; mx++)
        for (int nx = 0 ; nx < AA; nx++) {
            vec2 o = vec2(float(mx), float(nx)) / float(AA) - 0.5;
            o=tuv+o*baa;
            tot+=texture(p_o,o).rgb;
        }
    tot /= float(AA * AA);

Где baa это удаление фрагмента от камеры.


Это работает достаточно хорошо для этого конкретного случая.


В этом случае mipmaps нельзя использовать, так как эта панорама и сфера(размер пикселей не равномерный), кубемап на сферу тоже не выйдет натянуть без потери mipmaps…


Еще один случай, где нужно сглаживание — когда с удалением яркие объекты стали слишком маленькими, и пикселей не хватает чтоб их нарисовать:



Справа рисуется без фокусов честная геометрия(меш), и с удалением объект сверху на темной пирамиде становится слишком маленький и начинает прыгать по пикселям.


Я просто взял точки(GL_POINT) и поставил их внутрь этих мелких объектов, и с удалением точка сохраняет свой размер и заменяет пропадающий объект. Вариант с точками на левой части видео.


Про используемые шейдеры и их логику


Шейдер outline для одного объекта



Корректный способ такое сделать описан по ссылке в разделе Silhouette Effect.
В Godot 3 нельзя, без модификации кода движка, записывать ни ID материала ни какие-либо дополнительные данные в процессе создания кадра.


Поэтому единственный способ это использовать дополнительную framebuffer(Viewport) где еще раз рендерить все нужные объекты, и пока объектов мало можно не волноваться о производительности, но это плохой способ в любом случае, ждем Godot 4.


В моем случае я поставил еще одну камеру на сцену, и эта камера видит только один объект — волка, поэтому всегда контур будет, камера в Viewport разрешение которого в 2 раза меньше текущего экрана.


Шейдер для освещения и теней



В Godot довольно мало возможностей влиять на освещение и тени, и некоторые из заявленных возможностей в Godot 3 просто не реализованы и перенесены в Godot 4.


Код этого шейдера в файле box/floor.shader


void light() {
    vec3 col=texture(floor_img,UV).rgb;
    if(col.r>0.001){
        float dif = clamp(dot(NORMAL,LIGHT), 0.0, 1.0);
        vec3 hal = normalize(VIEW+LIGHT);
        float spe = pow(clamp(dot(hal, NORMAL), 0.0, 1.0), 32.0);
        vec3 ta=ATTENUATION;
        vec2 tuv=UV*vec2(15.,10.)*50.;
        vec2 ddx = dFdx(tuv); 
        vec2 ddy = dFdy(tuv);
        float tx=filteredSquares(tuv, ddx, ddy);
        float tx2=filteredCrosses(tuv, ddx, ddy);
        DIFFUSE_LIGHT = dif*co*spe*4.* ta*col;
        DIFFUSE_LIGHT = clamp(DIFFUSE_LIGHT,0.,1.);
        SPECULAR_LIGHT = mix(ta,vec3(0.)+DIFFUSE_LIGHT,clamp(dif*spe*5.,0.,1.))*tx+0.5*((1.-tx2)*(clamp(1.-ta*5.,0.,1.)));
        SPECULAR_LIGHT = clamp(SPECULAR_LIGHT*col,0.,1.);
    }
    else{
        DIFFUSE_LIGHT=vec3(0.);
        SPECULAR_LIGHT=vec3(0.);
    }
}

Логика такая что, берется значение текстуры floor_img чтобы ограничить тень и свет в пределах белого прямоугольника текстуры, функции filteredSquares и filteredCrosses от iquilezles.org.
Эти функции выводят свой узор(патерн), и этот узор накладывается в зависимости от ATTENUATION, и дальше разделение цвета SPECULAR_LIGHT от DIFFUSE_LIGHT чтоб один сделать белым другой желтого цвета.


Depth — контур у фиолетового щита



Вся логика работы с глубиной(depth) отсюда godot_force_shield_shader
Шейдер шума на основе этого ссылка на shadertoy
Сам код шейдера в файле shield.shader.


Этот эффект рисуется двумя слоями, внутренним и внешним, внутренний слой после внешнего чтобы не влиять на SCREEN_TEXTURE на основе которого строится смещение(волны) снаружи.


Area lights




Используя материал Real-Time Polygonal-Light Shading with Linearly Transformed Cosines этот код на shadertoy ссылка, для прямоугольных источников.
И код этого шейдера для сферы и трубы ссылка на shadertoy.


Код этих шейдеров в этих файлах area_lights/floor.shader и area_lights2/floor_area.shader


Никакой сложности их переноса в Godot нет, все так же как во многих других движках, где этот эффект уже встроенный.


Немного про логику скриптов


Навигация модели волка — использует встроенную в Godot возможность Navigation, логика скопирована из туториала Godot 3D Navigation Mesh. Волк бежит к камере по клику правой кнопкой мыши.


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


Анимация квадратов на полу — используется отдельный framebuffer(Viewport) разрешения 20x20 пикселей.
В нем храниться состояние анимации всех квадратов, и передается положение камеры и волка, двух персонажей.


Бесконечное поле:



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


Используются две сторонние модели с анимациями.
Взяты из sketchfab, ссылки на оригинал — модель волка и модель робота.


Производительность — я запускал на Nvidia 750 и Vega 8 картах, работает на 60fps в 1080p разрешении, думаю производительность в пределах нормы. Проверил на Windows и Linux — работает. В WebGL2 также работает очень хорошо.


Конец статьи


Кто прочитал — спасибо Вам что уделили столько времени этому тексту.