Переходы изображений с помощью WebGL

Делаем экспериментальные WebGL анимации и используем треугольники, как переходы между изображениями.

Experimental Triangle Image Transitions with WebGL Demo

Треугольники

Вы любите треугольники? А я вот люблю. И поскольку любить все треугольники скучно, я специально нацеливаю свою любовь на равносторонние, например на этот:

Blue triangle

Почему

Никто: …
Абсолютно никто: …
Я: а давайте делать полноэкранные переходы изображений с помощью равносторонних треугольников!

Да, причина так себе, но я делаю это из любви. Из любви к равносторонним треугольникам.

Итак, приступим! Как и в предыдущих анимация, мне понадобится некоторая плоская геометрия.

Но если использовать three.js PlaneBufferGeometry,

plane 800x484

... вообщем, это не то, что мы ищем. Чтобы сделать треугольники равносторонними, я просто создал свою геометрию с помощью математики! Окончательный результат выглядит так:

equi 800x488

Что тут за математика? На самом деле довольно простая: с равносторонними треугольниками вы точно знаете все координаты и размеры:

blue triangle math

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

Так или иначе, у меня получилась вот такая сетка:

equifull 800x494

Анимация треугольников

Теперь, когда у нас есть сетка, мы можем использовать GLSL и вершинный шейдер для анимации этих треугольников. Я рекомендую вам прочитать больше о шейдерах и GLSL в «Книге шейдеров».

Хорошая новость в том, что мы можем анимировать каждый треугольник отдельно; мы даже можем анимировать каждую из его вершин по отдельности!

Пример анимации.

Код выглядит так:

vec3 newPosition = move(position, progress);

Где функция move перемещает и поворачивает изначальную позицию с разной интенсивностью. Это может быть простой сдвиг по оси X, например:

vec3 newPosition = position + progress*vec3(1.,0.,0.);

Или все, что вы можете себе представить с числами.

Мне было очень весело экспериментировать с этими эффектами, надеюсь, они вам понравятся. И, конечно, возможности здесь безграничны.

Наши рекомендации
К сожалению, тут пока ничего нет.