Текстуры и паттерны

Two.js предоставляет мощный и гибкий инструмент для работы с векторной графикой на HTML5 Canvas, SVG и WebGL. Одной из ключевых возможностей является применение текстур и паттернов, которые позволяют оживлять графические объекты и придавать им сложные визуальные эффекты без необходимости рисовать каждый элемент вручную.

Основы работы с текстурами

В Two.js текстуры создаются с помощью объекта Two.Texture, который позволяет загружать изображения и использовать их для заполнения фигур. Конструктор принимает один параметр — путь к изображению или объект изображения HTML:

const texture = new Two.Texture('images/pattern.png');

После создания текстуры её можно применить к фигуре через свойство fill или stroke:

const rect = two.makeRectangle(200, 200, 150, 100);
rect.fill = texture;

Ключевой момент: текстура автоматически повторяется по всей поверхности фигуры, если её размеры меньше фигуры. Поведение повторения можно контролировать через свойство repeat:

texture.repeat = 'repeat'; // возможные значения: 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'

Использование паттернов

Паттерн в Two.js — это особый тип текстуры, который создаётся не из изображения, а из другой графической сцены. Это позволяет строить динамические и интерактивные текстуры. Для создания паттерна используется Two.Texture с канвасом или элементом <canvas>:

const canvasPattern = document.createElement('canvas');
canvasPattern.width = 50;
canvasPattern.height = 50;
const ctx = canvasPattern.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 25, 25);
ctx.fillStyle = '#0000FF';
ctx.fillRect(25, 25, 25, 25);

const patternTexture = new Two.Texture(canvasPattern, function() {
  two.update();
});

const circle = two.makeCircle(300, 300, 100);
circle.fill = patternTexture;

В этом примере создаётся шахматный паттерн с динамически нарисованными квадратами. Паттерны особенно полезны для анимированных объектов, так как содержимое <canvas> можно обновлять в реальном времени.

Манипуляция текстурами

Two.js поддерживает трансформации текстур, которые позволяют смещать, масштабировать и вращать узор относительно фигуры:

  • offset — смещение текстуры по координатам x и y:
texture.offset.set(0.5, 0.5); // смещение на половину ширины и высоты
  • scale — масштабирование текстуры, полезно для увеличения или уменьшения узора:
texture.scale = 2; // увеличивает размер текстуры в 2 раза
  • rotation — вращение текстуры вокруг центра фигуры:
texture.rotation = Math.PI / 4; // поворот на 45 градусов

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

Комбинирование текстур и фигур

Для получения более интересных эффектов Two.js позволяет смешивать несколько текстур и градиентов:

const gradient = two.makeLinearGradient(0, 0, 100, 100, 
  new Two.Stop(0, '#FFD700'), 
  new Two.Stop(1, '#FF4500')
);

const shape = two.makeRectangle(400, 200, 200, 150);
shape.fill = gradient;
shape.stroke = texture;
shape.linewidth = 5;

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

Анимация текстур

Паттерны в Two.js можно анимировать, изменяя их параметры на каждом кадре. Это открывает возможности для создания движущихся узоров, морских волн, бегущих полос и других динамических эффектов:

two.bind('update', function(frameCount) {
  texture.offset.x += 0.01;
  texture.offset.y += 0.01;
}).play();

Здесь texture.offset смещается постепенно, создавая эффект движения паттерна. Можно одновременно изменять scale и rotation, чтобы создать эффект вращающегося и масштабирующегося узора.

Практические советы

  • Для векторных паттернов лучше использовать <canvas> или внутренние группы Two.js, так как это позволяет динамически обновлять текстуру без загрузки изображений.
  • Текстуры больших размеров лучше масштабировать заранее, чтобы избежать проблем с производительностью.
  • При работе с WebGL рендером Two.js текстуры должны быть подготовлены с учётом power-of-two размеров (например, 256×256, 512×512), иначе могут возникнуть артефакты при повторении.

Выводы по текстурам и паттернам

  • Two.Texture — универсальный инструмент для заливки фигур как изображениями, так и паттернами.
  • Паттерны позволяют использовать динамический и интерактивный контент внутри фигур.
  • Трансформации текстур (offset, scale, rotation) открывают широкие возможности для анимации и визуальных эффектов.
  • Комбинирование текстур с градиентами и обводкой создаёт сложные многослойные композиции.

Эти возможности делают Two.js удобным инструментом для создания богатых графических сцен с динамическими и декоративными элементами.

Оглавление