Интерактивная анимация для сайта на three.jsСегодня мы собираемся реализовать интерактивный анимационный фон с  немного психоделическим стилем. Идея состоит в том, чтобы показать, как можно соединить искусство с веб-дизайном в результате чего мы получим интерактивный визуальный эффект, который можно использовать в различных проектах, таких как веб, печать, иллюстрация, VJing, инсталляции, игры и многие другие. Мы сделали 3 варианта ландшафта, чтобы показать вам, как небольшие изменения параметров могут сильно изменить визуальные эффекты.

 

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

Демонстрации сделаны с помощью three.js, а анимация и цвета контролируются в специальном шейдере GLSL. Для анимации букв мы используем TweenMax.

Классные вещи получаются в сочетании с WebGL, а также приятно, что он широко поддерживается, а с помощью шейдеров GLSL мы можем анимировать тысячи, даже миллионы точек со скоростью 60 кадров в секунду на компьютерах и на мобильных устройством.

Если вы не знакомы с шейдерами three.js и GLSL, вы можете начать статью о  созданию сцены и прочтите инструкцию введения в шейдеры. Давайте пройдемся по основному построению демо.

Создание сетки с плоскостями

Давайте создадим простую сцену three.js, поместим плоскость с большим количеством вершин, повернем ее на 90 градусов по оси x и немного поднимем камеру:

Интерактивная анимация для сайта

Создайте произвольные вершины и фрагментные шейдеры и свяжите их с ShaderMaterial. Цель состоит в том, чтобы переместить вершины вверх в шейдере с помощью шума и умножить его на значение высоты:

Интерактивная анимация для сайта JS

Создаем поверхность с помощью математики

Теперь мы будем использовать математику. Мы реализуем формулу ниже, где x — это координата x вершины, h — максимальная высота местности, c — центр местности, а w — ширина местности:

Формула расчета фона

Играя с этими переменными, мы можем получить разные результаты, как мы видим на графиках:

Играфик создания анимированного фона сайта

Играфик создания анимированного фона сайта на JS

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

Как создать анимацию поверхностей при помощи шейдеров WebGL

Чтобы сделать изогнутую поверхность, мы используем uv.y, а в качестве углов у нас будет отвечать sinчтобы осциллировать центр вдоль оси y (плоскость вращается вокруг оси x, помните?).

Как создать анимацию поверхностей при помощи шейдеров WebGL сайта

Добавление цветовых слоев

Давайте раскрасим поверхность при помощи небольшой хитрости. Сначала создайте цветное изображение, как это:

Цветовая палитра для фона сайта

И затем мы будем использовать его как текстуру в фрагментном шейдере, получая значение цвета из высоты, вычисленной в вершинном шейдере, как координату текстуры uv.y:

Как создать анимацию поверхностей при помощи шейдеров WebGL

Добавляем интерактивность

Теперь мы выполним самую тяжелую часть: с помощью мыши, касания или любого другого ввода вы можете легко управлять переменными формулы и получать интересные формы интерактивности:

Последние штрихи

Давайте отрегулируем положение камеры, добавим красивый цвет, туман, фон неба, и все готово!

Как создать анимацию поверхностей при помощи шейдеров WebGL и Three js

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