UV-координаты: масштаб, смещение и поворот

UV-координаты — это система двумерных координат, которая используется для проекции текстуры на 3D-модель. Эти координаты задаются для каждого из вершин объекта и описывают, как и где текстура будет накладываться на поверхность. В Babylon.js работа с текстурами и UV-координатами является неотъемлемой частью создания реалистичных 3D-сцен.

Каждая вершина объекта имеет три основные компонента: координаты X, Y и Z, которые определяют ее положение в пространстве. В свою очередь, UV-координаты (обычно обозначаемые как U и V) определяют, как эта вершина “связывается” с текстурой.

Масштабирование текстуры

Масштабирование текстуры с помощью UV-координат представляет собой процесс изменения размера текстуры на поверхности модели. Для этого достаточно корректировать значения UV-координат, чтобы увеличить или уменьшить размер текстуры, при этом оставляя геометрическую форму объекта неизменной.

Как работает масштаб

Если взять исходную текстуру размером N x M, то каждая из UV-координат будет определять положение текстуры на объекте в интервале от 0 до 1 (где 0 — это начало текстуры, а 1 — ее конец). Когда необходимо изменить масштаб, это можно сделать путём умножения значений UV-координат на множитель:

var uScale = 2; // Увеличиваем размер текстуры в два раза по оси U
var vScale = 1.5; // Увеличиваем размер текстуры в 1.5 раза по оси V

После этого UV-координаты будут изменяться так, что каждый пиксель текстуры будет «растягиваться» на более широкую или узкую часть поверхности объекта, в зависимости от масштаба.

mesh.setUVs(0, 0, uScale, vScale);

Этот подход позволяет гибко настраивать размер текстуры и адаптировать её под разные размеры объектов.

Пример применения

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

var material = new BABYLON.StandardMaterial("textureMaterial", scene);
material.diffuseTexture = new BABYLON.Texture("texture.jpg", scene);

// Масштабирование текстуры
material.diffuseTexture.uScale = 2;
material.diffuseTexture.vScale = 1;

mesh.material = material;

В этом примере текстура будет растянута по оси U в два раза, а по оси V останется неизменной.

Смещение текстуры

Смещение текстуры с помощью UV-координат позволяет перемещать текстуру вдоль поверхности модели. Это полезно, например, для создания эффектов сдвига, таких как анимация или подгонка текстуры под другую часть поверхности.

Как работает смещение

Для сдвига текстуры достаточно добавить или вычесть значение от UV-координат. В Babylon.js для этого используются свойства uOffset и vOffset у текстуры:

var uOffset = 0.5; // Сдвиг текстуры по оси U на 50%
var vOffset = 0;   // Сдвиг текстуры по оси V на 0%

Если uOffset и vOffset равны 0, то текстура будет “приклеена” к начальной точке поверхности (0,0). Увеличивая эти значения, можно смещать текстуру по поверхности объекта. Например, чтобы сдвигать текстуру влево по оси U, можно установить uOffset в отрицательное значение.

material.diffuseTexture.uOffset = 0.5; // Сдвиг текстуры на 50% по оси U
material.diffuseTexture.vOffset = 0.5; // Сдвиг текстуры на 50% по оси V

Этот метод позволяет точно управлять тем, как текстура будет располагаться на объекте.

Пример применения

Предположим, что у нас есть текстура с изображением дерева, и мы хотим разместить её на поверхности стены. Однако текстура слишком маленькая, и мы хотим сдвигать её, чтобы она была размещена в нужном месте:

var material = new BABYLON.StandardMaterial("treeMaterial", scene);
material.diffuseTexture = new BABYLON.Texture("tree.jpg", scene);

// Сдвиг текстуры
material.diffuseTexture.uOffset = 0.3;
material.diffuseTexture.vOffset = 0.2;

mesh.material = material;

Текстура будет сдвигаться, и её начало будет расположено с учетом установленных смещений.

Поворот текстуры

Поворот текстуры на 3D-объекте происходит через изменение UV-координат. Это позволяет наклонить текстуру, создавая иллюзию поворота без физического изменения самой текстуры.

Как работает поворот

Поворот текстуры осуществляется путём применения матрицы поворота к UV-координатам. В Babylon.js это можно сделать через использование метода uRotation и vRotation у текстуры. Эти параметры описывают поворот текстуры вокруг её центра.

Поворот текстуры можно реализовать следующим образом:

var rotationAngle = Math.PI / 4; // Поворот на 45 градусов

После этого текстура будет повернута на указанный угол относительно её оси. В Babylon.js это делается с помощью установки значений uRotation и vRotation.

material.diffuseTexture.uRotation = rotationAngle;
material.diffuseTexture.vRotation = rotationAngle;

Пример применения

Допустим, текстура на поверхности объекта требует поворота, чтобы соответствовать направлению объекта. Поворот на 90 градусов может быть выполнен следующим образом:

var material = new BABYLON.StandardMaterial("textureMaterial", scene);
material.diffuseTexture = new BABYLON.Texture("floor.jpg", scene);

// Поворот текстуры на 90 градусов
material.diffuseTexture.uRotation = Math.PI / 2; // 90 градусов по оси U

mesh.material = material;

В результате текстура будет повернута, и её ориентация на объекте будет изменена.

Заключение

Работа с UV-координатами в Babylon.js включает в себя манипуляции с масштабированием, смещением и поворотом текстур. Эти операции дают гибкость при создании визуальных эффектов и позволяют более точно адаптировать текстуры под различные 3D-объекты. В Babylon.js для каждой из этих операций предусмотрены удобные параметры, такие как uScale, vScale, uOffset, vOffset, а также методы для управления поворотом текстуры. Эти инструменты позволяют создавать детализированные и качественные сцены с динамическими изменениями текстур в реальном времени.