Загрузка шейдеров GLSL

Phaser — это мощная библиотека для разработки 2D-игр на JavaScript, предоставляющая встроенную поддержку WebGL и шейдеров. GLSL (OpenGL Shading Language) позволяет создавать эффекты на уровне графического процессора, что значительно расширяет визуальные возможности игр. В Phaser шейдеры используются через объекты типа Shader и Pipeline, что позволяет интегрировать их как для спрайтов, так и для целых сцен.

Загрузка шейдеров

Шейдеры в Phaser обычно хранятся в виде отдельных файлов с расширением .frag (фрагментный шейдер) или .vert (вершинный шейдер). Для их использования необходимо предварительно загрузить их через загрузчик ресурсов.

function preload() {
    this.load.glsl('myShader', 'assets/shaders/myShader.frag.js');
}

Ключ ресурса (myShader) используется для идентификации шейдера в дальнейшем.
Путь к файлу должен указывать на текстовый ресурс с кодом GLSL.

Phaser автоматически компилирует фрагментные шейдеры в объект WebGLShader, который затем можно применить к спрайтам или камерам.

Создание кастомного шейдера

После загрузки шейдера создается объект Shader или применяется через кастомный Pipeline. Для простейшего применения к спрайту используется GameObject.setPipeline.

function create() {
    const sprite = this.add.sprite(400, 300, 'myTexture');
    sprite.setPipeline('myShader');
}

Pipeline — это абстракция, связывающая шейдер с конкретным объектом рендеринга.
Phaser поддерживает несколько встроенных pipeline, таких как TextureTintPipeline, Light2DPipeline, которые можно наследовать для создания собственного.

Использование uniform-переменных

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

sprite.pipeline.setFloat('time', 0);
sprite.pipeline.setVec2('resolution', { x: 800, y: 600 });

time — часто используется для анимации эффекта с течением времени.
resolution — размер канваса или спрайта, чтобы шейдер корректно масштабировал координаты.

Для динамического обновления значений в игровом цикле используют метод update сцены:

function update(time) {
    sprite.pipeline.setFloat('time', time / 1000);
}

Создание кастомного Pipeline

Phaser позволяет создавать собственные pipeline, наследуя базовые классы. Это дает полный контроль над шейдером и позволяет реализовывать сложные эффекты.

class MyPipeline extends Phaser.Renderer.WebGL.Pipelines.SinglePipeline {
    constructor(game) {
        super({
            game: game,
            fragShader: `
            precision mediump float;
            uniform float time;
            uniform vec2 resolution;
            void main() {
                vec2 uv = gl_FragCoord.xy / resolution.xy;
                gl_FragColor = vec4(uv.x, uv.y, abs(sin(time)), 1.0);
            }`
        });
    }
}

this.game.renderer.addPipeline('MyPipeline', new MyPipeline(this.game));

Класс SinglePipeline предназначен для простых шейдеров, где требуется только фрагментный шейдер.
После добавления pipeline его можно назначить объекту через setPipeline.

Интеграция шейдеров с текстурами

Shader в Phaser может принимать текстуры как uniform-переменные, что позволяет создавать эффекты искажения, размытия или цветокоррекции.

sprite.pipeline.setTexture('uTexture', sprite.texture);

uTexture — uniform-переменная шейдера, в которой хранится текстура.
Поддерживаются множественные текстуры, что дает возможность комбинировать эффекты.

Советы по оптимизации

Минимизировать количество pipeline: Каждый pipeline добавляет нагрузку на GPU, поэтому рекомендуется использовать общий pipeline для нескольких объектов с одинаковыми эффектами.
Использовать uniform-переменные вместо констант в GLSL: Это позволяет изменять параметры без перекомпиляции шейдера.
Тестировать на разных устройствах: WebGL поведение может отличаться в зависимости от драйверов и браузеров.
Разделять сложные эффекты на несколько фаз: Иногда проще создать несколько простых шейдеров, чем один сложный.

Применение к камере и сцене

Шейдеры можно применять не только к спрайтам, но и к целой сцене через Camera.setRenderToTexture:

const camera = this.cameras.main;
camera.setRenderToTexture('myShader');

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

Поддержка WebGL версий

Phaser использует WebGL 1 по умолчанию, что накладывает ограничения на доступные функции GLSL. Некоторые расширенные эффекты требуют WebGL 2, для чего нужно явно проверять поддержку:

if (this.game.renderer.gl instanceof WebGL2RenderingContext) {
    console.log('WebGL2 доступен');
}

WebGL 2 предоставляет расширенные возможности работы с текстурами, буферами и шейдерами, что полезно для сложной графики.

Загрузка шейдеров GLSL