Процедурные материалы через uniforms

Процедурные материалы представляют собой способ создания материалов с помощью вычислений, а не текстур. Это позволяет добиться высокого уровня детализации и уникальности объектов, при этом снижая нагрузку на память и ускоряя рендеринг. В PlayCanvas для реализации процедурных материалов часто используют шейдеры, которые получают параметры через uniforms — параметры, передаваемые из JavaScript кода в шейдеры для дальнейших вычислений.

Основные принципы работы с uniforms

Uniforms — это переменные в шейдерах, чьи значения задаются программой (JavaScript) до рендеринга каждого кадра. Они предоставляют способ передавать данные, такие как цвета, координаты или параметры, которые должны быть одинаковыми для всех вершин или фрагментов в кадре.

В PlayCanvas работа с uniforms происходит через механизмы шейдеров, которые могут быть написаны на языке GLSL (OpenGL Shading Language). Для передачи этих данных используется объект pc.Shader, который принимает различные параметры через API PlayCanvas.

Создание шейдера с uniforms

Чтобы использовать uniforms в PlayCanvas, необходимо создать кастомный шейдер, который будет принимать параметры из JavaScript. Например, создадим шейдер для процедурного материала, который изменяет цвет объекта в зависимости от времени.

var vertexShader = `
attribute vec3 vertex_position;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;
void main() {
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(vertex_position, 1.0);
}`;

var fragmentShader = `
precision mediump float;
uniform float time;
void main() {
    vec3 color = vec3(sin(time), cos(time), 0.5);
    gl_FragColor = vec4(color, 1.0);
}`;

var shader = new pc.Shader(device, {
    attributes: {
        vertex_position: pc.SEMANTIC_POSITION
    },
    vshader: vertexShader,
    fshader: fragmentShader
});

В этом примере шейдер использует uniform переменную time, которая будет изменяться в зависимости от времени. Таким образом, цвет объекта будет динамически изменяться.

Передача данных через uniforms

Для передачи данных из JavaScript в шейдеры используются методы объекта pc.Shader. Например, чтобы передать переменную time, можно использовать метод setParameter:

var material = new pc.Material();
material.shader = shader;

var time = 0;
app.on("update", function(dt) {
    time += dt;
    material.shader.setParameter("time", time);
});

В этом примере переменная time обновляется каждый кадр, и её значение передаётся в шейдер, что приводит к изменению цвета объекта на основе времени.

Использование процедурных текстур с помощью uniforms

Процедурные материалы могут включать не только простые вычисления, но и генерацию более сложных эффектов, таких как шум или фрактальные структуры. Эти эффекты могут быть реализованы с помощью math-функций, а также с использованием псевдослучайных значений, передаваемых через uniforms.

Пример процедурного шума:

var fragmentShader = `
precision mediump float;
uniform float time;
uniform vec2 resolution;
float random(vec2 p) {
    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
}
void main() {
    vec2 p = gl_FragCoord.xy / resolution;
    float noise = random(p + time);
    gl_FragColor = vec4(vec3(noise), 1.0);
}`;

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

Для передачи данных разрешения экрана (например, для нормализации координат пикселей) и времени используются следующие uniforms:

material.shader.setParameter("time", time);
material.shader.setParameter("resolution", new pc.Vec2(app.graphicsDevice.width, app.graphicsDevice.height));

Применение процедурных материалов

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

Пример применения процедурного материала для создания эффекта воды:

var fragmentShader = `
precision mediump float;
uniform float time;
uniform vec2 resolution;
void main() {
    vec2 uv = gl_FragCoord.xy / resolution;
    float wave = sin(uv.x * 10.0 + time) * 0.5 + 0.5;
    gl_FragColor = vec4(vec3(wave), 1.0);
}`;

В этом шейдере создаётся эффект волн на воде, где wave вычисляется в зависимости от координат пикселя и времени. Таким образом, вся поверхность воды будет динамично изменяться, создавая иллюзию движения.

Ограничения и оптимизация

Хотя процедурные материалы обладают множеством преимуществ, они также могут быть ресурсоёмкими. Каждый расчёт в шейдере требует времени на выполнение, и сложные математические операции могут замедлить рендеринг, особенно если их много. Для оптимизации можно использовать несколько подходов:

  1. Снижение сложности вычислений: Простые математические операции и регулярное использование стандартных функций GLSL, таких как sin, cos и т.д., помогут уменьшить нагрузку на GPU.

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

  3. Снижение частоты обновлений uniforms: Если данные, передаваемые через uniforms, не изменяются каждую кадр, их обновление можно выполнять реже, что снизит нагрузку на процессор и графический процессор.

Заключение

Процедурные материалы через uniforms являются мощным инструментом для создания динамичных и уникальных визуальных эффектов. В PlayCanvas они реализуются с использованием шейдеров, которые могут получать данные через uniforms и выполнять различные вычисления на GPU. Такой подход позволяет создавать более сложные и гибкие материалы, которые могут изменяться в реальном времени, создавая уникальные визуальные эффекты без необходимости загружать тяжёлые текстуры в память.

Оглавление