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, и показывать им именно реальную трехмерную графику, а мобильным и планшетам показывать уже готовое записанное видео. Но при этом, мы лишаемся интерактивности...
Все же начнем..
- Перейдите на данную страницу...
- На ней Вы сможете увидеть все, что необходимо.
- Скачайте архив (ссылка внизу статьи).
- Извлеките из него одержимое. Затем, выберите на DEMO странице, какой эффект Вам нужен.
- Закиньте необходимые JS файлы к себе на хостинг/сервер.
- Примените некоторые стили и все будет 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>
Вот такая картинка должна получится:
