Типы данных GLSL: float, vec2, vec3, vec4, mat4

В шейдерах Three.js, написанных на языке GLSL (OpenGL Shading Language), все операции строятся вокруг строго типизированных данных. Понимание базовых типов — float, vec2, vec3, vec4 и mat4 — является фундаментом для создания визуальных эффектов, трансформаций и работы с геометрией.

Float

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

Пример объявления и использования:

uniform float uTime;
float intensity = 0.5 * sin(uTime);

Ключевые особенности:

  • Обязательная десятичная точка при присваивании литералов (1.0, 0.5), иначе компилятор GLSL может интерпретировать значение как int.
  • Поддержка арифметических операций: сложение, вычитание, умножение, деление.
  • Используется для интерполяции значений и управления параметрами шейдера.

vec2

vec2 — вектор из двух компонентов x и y. Применяется для работы с координатами текстур, 2D-позициями или двумерными направлениями.

Пример:

uniform vec2 uResolution;
vec2 uv = gl_FragCoord.xy / uResolution;

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

  • Доступ к компонентам через .x и .y или .r и .g для цветовых данных.
  • Арифметические операции могут применяться к вектору целиком или к отдельной компоненте.
  • Поддерживает функции GLSL для векторов, например length(uv) или normalize(uv).

vec3

vec3 — трёхкомпонентный вектор x, y, z. Основной тип для работы с 3D-координатами, нормалями и цветами в формате RGB.

Пример:

vec3 normal = normalize(vNormal);
vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
float diff = max(dot(normal, lightDir), 0.0);
vec3 color = diff * vec3(1.0, 0.5, 0.0);

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

  • Компоненты можно адресовать как .x, .y, .z или .r, .g, .b.
  • Поддерживает операции скалярного и векторного умножения.
  • Важен для вычисления освещения и работы с нормалями на поверхности объектов.
  • Часто комбинируется с функциями dot, cross, reflect для расчета физических эффектов.

vec4

vec4 расширяет vec3 на четвертую компоненту w. Используется для RGBA-цветов, кватернионных представлений или координат в гомогенных системах.

Пример:

vec4 color = vec4(1.0, 0.5, 0.0, 0.8); // оранжевый с прозрачностью 0.8
gl_FragColor = color;

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

  • Компоненты .x, .y, .z, .w или .r, .g, .b, .a.
  • Позволяет объединять цвет и альфа-канал в одну переменную.
  • Используется для передачи данных между вершинным и фрагментным шейдером.

mat4

mat4 — матрица 4x4, основной инструмент для трансформаций в 3D-пространстве: перемещения, масштабирования, вращения и проекции.

Пример использования:

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;

vec4 worldPosition = modelMatrix * vec4(position, 1.0);
vec4 clipPosition = projectionMatrix * viewMatrix * worldPosition;
gl_Position = clipPosition;

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

  • В GLSL матрицы умножаются на векторы слева (mat4 * vec4).
  • Используется для преобразования координат из локальной системы объекта в мировую и далее в экранную.
  • В Three.js стандартные униформы modelMatrix, viewMatrix, projectionMatrix позволяют управлять геометрией без ручного вычисления трансформаций.

Общие рекомендации

  • Инициализация: при объявлении векторов и матриц часто требуется явное присвоение значений (vec3(1.0, 0.0, 0.0)), что предотвращает неопределённое поведение шейдера.
  • Оптимизация: использование vec2/vec3 вместо vec4, если четвертая компонента не нужна, уменьшает нагрузку на GPU.
  • Комбинирование типов: типы можно смешивать в арифметических операциях, но с приведением к совместимому размеру. Например, vec3 + float добавляет скаляр ко всем компонентам вектора.

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

Оглавление