Vanta.js – это 3D WEBGL Three.js фон на сайт, который также может быть интерактивным. Vanta имеет 11 шаблонов и некоторые настройки для каждого из них, чтобы Вы смогли максимально персонализировать эффекты, цвета и некоторые функции.

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

В данной статье будет приведены примеры того, как можно легко и быстро подключить к любой WEB-странице данные скрипты, адаптировать их под Ваш сайт. А также мы приведем примеры того, как можно использовать различные методы для определения опрерационной системы и мобильности/планшетности браузера пользователя, чтобы снизить вероятность того, что данные эффекты каким бы то ни было образом смогут затормозить работы WEB-страницы.

С помощью нехитрых PHP скриптов, Вы сможете показывать разное содержимое для различных операционных систем, тем самым хотя бы так элементарно контролируя нагрузку на устройство конечного пользователя.

Смотрите как определить мобильный/ПК/планшет с помощью Mobile Detect PHP

Смотрите как определить какая OS у пользователя с помощью PHP.

Стоит отметить, что любые, даже, на первый взгляд, самые элементарные WEBGL эффекты, могут значительно повлиять на производительность устройства, что может привести к значительному увеличению показателя отказов Вашей WEB-страницы или сайта в целом, где задействованы WEBGL эффекты.

Поэтому очень важно уделить особое внимание тестированию нагрузки на конечный и конкретный браузер пользователя. А также учитывать то, что некоторые устройства и/или браузеры вовсе неспособны отобразить WEBGL и/или Canvas (на котором и строится вся сцена WEBGL). Т.е., есть небольшая доля и таких пользователей, поэтому, стоит определить, что именно будет отображаться им, если действительно WEBGL не сработает.

Итого. Выполнить WEBGL-эффекты от Vanta.js очень просто. Но насколько они повлияют на конечного пользователя с конкретным браузером и конкретным устройствам - никто до конца не знает. Поэтому, важно учесть, то WEBGL имеет свои недостатки - высокая нагрузка на системные ресурсы пользователя, а также иногда возможная не поддержка этой технологии некоторыми браузерами.

В общем, мы имеем некий компромисс между использованием уже отрендеренного видео, например, при помощи Adobe After Effects или Cinema 4D, или 3D Studio MAX – и технологией WEBGL. Этот компромисс заключается в том, что отрендеренное видео будет весить как минимум 8 MB (а может и несколько сотен MB), чтобы оно имело хотя бы несколько секунд контента, а также было хотя бы минимально допустимого качества. При этом, WEBGL дает свои преимущества - это небольшой вес библиотеки Three.js, на которой основывается Vanta.js, но необходимо дополнительно руками создавать все эффекты, имея углубленные знания в математике, а также имея способность мыслить в трехмерном пространстве (если писать код чисто для WEBGL с ThreeJS, без каких-либо дополнений). При этом, отрендеренное видео, может использовать уже какие-то готовые пресеты, различные плагины, которые могут создать более уникальное видео, чем мы можем потенциально создать с помощью WEBGL, но будет иметь большой вес...

Vanta.JS может быть записана Вами, как видео, прям с экрана монитора и предоставлено конечному пользователю. При этом, данное видео можно максимально минифицировать, а также смело использовать на мобильных/планшетах, что гарантированно даст возможность показать его если не 100, то 90 процентам пользователей, которые зашли на Ваш ресурс через браузер с поддержкой HTML5 видео.

Иначе говоря, для PC пользователей, можно собрать Vanta.JS на Three.JS, и показывать им именно реальную трехмерную графику, а мобильным и планшетам показывать уже готовое записанное видео. Но при этом, мы лишаемся интерактивности...


Все же начнем..

  1. Перейдите на данную страницу...
  2. На ней Вы сможете увидеть все, что необходимо.
  3. Скачайте архив (ссылка внизу статьи).
  4. Извлеките из него одержимое. Затем, выберите на DEMO странице, какой эффект Вам нужен.
  5. Закиньте необходимые JS файлы к себе на хостинг/сервер.
  6. Примените некоторые стили и все будет WEBGL!

Например, Вы выбрали эффект Birds. Закиньте файлы three.r92.min.js и vanta.birds.min.js к себе на сервер.

Затем добавьте следующий JS код:

<script>
VANTA.BIRDS({
el: ".birds"
})
</script>

Также добавьте ВЫШЕ кода JS следующий DIV:

<div class="pa z0 birds"></div>

в том месте, где необходимо вывести WEBGL VantaJS.

Примените стили:

.pa{position:absolute;top:0;right:0;bottom:0;left:0}
.z0{z-index:0}

При этом, родительский контейнер должен иметь position: relative

Весь код должен быть приблизительно такой. Важно соблюдать иерархию!

<!doctype html>
<html lang="en">
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pa{position:absolute;top:0;right:0;bottom:0;left:0}
.z0{z-index:0}
</style>
</head>

<body>
<div id="" class="pa z0 birds"></div>

<script src="/js/three.r92.min.js"></script>
<script src="/js/vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
el: ".birds"
})
</script>

</body>
</html>

Вот такая картинка должна получится:

Vanta.js
Официальный сайт

Файлы Vanta.js:

Скачать Vanta JS
DEMO