О чем этот пример
Шейдеры позволяют создавать в играх сложные визуальные эффекты, которые невозможно достичь стандартными средствами графики. В этой статье на примере "диско-шара" мы разберем, как загружать и настраивать GLSL-шейдеры в Phaser 3, а также управлять ими в реальном времени с помощью ввода пользователя. Вы научитесь комбинировать шейдеры с масками для создания динамичных и интерактивных визуальных композиций, что особенно полезно для спецэффектов, UI-элементов или атмосферных задних планов.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
const fragmentShader = `
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
float rand(int seed, float ray) {
return mod(sin(float(seed)*1.0+ray*1.0)*1.0, 1.0);
}
void main( void ) {
float pi = 3.14159265359;
vec2 position = ( gl_FragCoord.xy / resolution.xy ) - mouse;
position.y *= resolution.y/resolution.x;
float ang = atan(position.y, position.x);
float dist = length(position);
gl_FragColor.rgb = vec3(0.5, 0.5, 0.5) * (pow(dist, -1.0) * 0.05);
for (float ray = 0.0; ray < 18.0; ray += 1.0) {
//float rayang = rand(5234, ray)*6.2+time*5.0*(rand(2534, ray)-rand(3545, ray));
//float rayang = time + ray * (1.0 * (1.0 - (1.0 / 1.0)));
float rayang = (((ray) / 9.0) * 3.14) + (time * 0.1 );
rayang = mod(rayang, pi*2.0);
if (rayang < ang - pi) {rayang += pi*1.0;}
if (rayang > ang + pi) {rayang -= pi*2.0;}
float brite = 0.3 - abs(ang - rayang);
brite -= dist * 0.2;
if (brite > 0.0) {
gl_FragColor.rgb += vec3(sin(ray*mouse.y+0.0)+1.0, sin(ray*mouse.y+2.0)+1.0, sin(ray*mouse.y+4.0)+1.0) * brite;
}
}
gl_FragColor.a = 2.0;
}
`;
class Example extends Phaser.Scene
{
constructor()
{
super();
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.glsl('discoball', 'assets/shaders/disco-ball.frag');
this.load.image('pic', 'assets/pics/rick-and-morty-by-sawuinhaff-da64e7y.png');
this.load.image('logo', 'assets/sprites/phaser3-logo-x2.png');
}
create ()
{
const shape1 = this.make.graphics().fillCircle(400, 300, 300);
const shape2 = this.make.graphics().fillCircle(400, 300, 200);
const mask1 = shape1.createGeometryMask();
const mask2 = shape2.createGeometryMask();
const maskImage = this.make.image({
x: 400,
y: 300,
key: 'logo',
add: false
});
// const mask3 = maskImage.createBitmapMask();
// this.cameras.main.setMask(mask3, false);
this.add.image(400, 300, 'pic');
// this.add.image(400, 300, 'pic').setMask(mask1);
// const baseShader = new Phaser.Display.BaseShader('BufferShader', fragmentShader);
const shader = this.add.shader({
name: 'discoball',
fragmentKey: 'discoball',
setupUniforms: (setUniform, drawingContext) =>
{
setUniform('time', this.game.loop.getDuration());
},
}, 400, 300, this.scale.width * 2, this.scale.width * 2);
shader.enableFilters().filters.external.addMask(maskImage);
this.input.on('pointermove', function (pointer)
{
shader.setPosition(pointer.x, pointer.y);
});
// shader.setPointer(this.input.activePointer);
// this.add.image(400, 300, 'logo').setMask(mask2);
// this.add.image(400, 400, 'logo');
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Анатомия GLSL-шейдера
В примере используется фрагментный шейдер (Fragment Shader), написанный на языке GLSL. Он выполняется для каждого пикселя на экране и вычисляет его итоговый цвет.
Ключевые элементы шейдера:
* uniform переменные — это входные данные, передаваемые из JavaScript (например, time и mouse).
* Функция main(void) — точка входа, где происходит вычисление цвета пикселя gl_FragColor.
* Основная логика эффекта — создание лучей, исходящих из центра, цвет которых зависит от расстояния до курсора (mouse) и времени (time).
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
void main( void ) {
// ... вычисление позиции, угла и расстояния
gl_FragColor.rgb = vec3(0.5, 0.5, 0.5) * (pow(dist, -1.0) * 0.05);
// ... цикл для генерации лучей и добавления цвета
gl_FragColor.a = 2.0;
}Загрузка ресурсов и создание сцены
В методе preload() загружаются все необходимые ресурсы: сам шейдер с ключом 'discoball', фоновое изображение и логотип. Обратите внимание на использование this.load.glsl() для загрузки шейдеров.
Конфигурация игры (config) указывает на использование WebGL-рендерера, что является обязательным условием для работы шейдеров.
preload ()
{
this.load.glsl('discoball', 'assets/shaders/disco-ball.frag');
this.load.image('pic', 'assets/pics/rick-and-morty-by-sawuinhaff-da64e7y.png');
}
const config = {
type: Phaser.WEBGL, // Важно: тип должен быть WEBGL
width: 800,
height: 600,
scene: Example
};Создание и настройка шейдера
Основной объект шейдера создается в методе create() с помощью this.add.shader(). В параметрах передается ключ загруженного шейдера, его позиция и размеры.
Критически важная часть — функция setupUniforms. Здесь мы связываем GLSL-переменные (uniform) с данными из игрового цикла. В данном примере в шейдер передается текущее время выполнения игры (this.game.loop.getDuration()), что делает анимацию лучей динамичной.
const shader = this.add.shader({
name: 'discoball',
fragmentKey: 'discoball',
setupUniforms: (setUniform, drawingContext) =>
{
setUniform('time', this.game.loop.getDuration());
},
}, 400, 300, this.scale.width * 2, this.scale.height * 2);Добавление интерактивности и масок
Шейдеру добавляется интерактивность через слушатель события 'pointermove'. При движении мыши позиция шейдера меняется с помощью метода shader.setPosition(), заставляя эффект "диско-шара" следовать за курсором.
Более сложный элемент — применение маски. Сначала создается изображение-маска (maskImage). Затем шейдеру включаются фильтры (shader.enableFilters()), и к ним добавляется внешняя маска, созданная из этого изображения. Это обрезает видимую область шейдера по форме логотипа Phaser.
const maskImage = this.make.image({ x: 400, y: 300, key: 'logo', add: false });
shader.enableFilters().filters.external.addMask(maskImage);
this.input.on('pointermove', function (pointer) {
shader.setPosition(pointer.x, pointer.y);
});Что попробовать дальше
Этот пример демонстрирует мощную связку шейдеров и системы рендеринга Phaser 3. Вы можете экспериментировать: изменять формулы в GLSL-коде для получения других световых эффектов, привязывать к uniform переменным не время, а другие параметры (здоровье игрока, громкость звука), или использовать маски более сложной формы для создания UI-шедеров. Попробуйте заменить битмаск-маску на геометрическую, созданную через this.make.graphics(), чтобы увидеть разницу в производительности и качестве краев.