Three.js — как развитие технологий позволило нам создавать 3D-графику в Интернете

Сегодняшняя сеть совсем не похожа на то, что было много лет назад. Некоторые из нас могут помнить времена, когда веб-сайты были просто набором неотзывчивых, в основном табличных представлений в черной, белой или серой цветовой палитре. Сетка? Флексбокс? Градиенты? Забудь об этом. Конечно, эти веб-сайты нельзя было назвать «красивыми», но их можно было назвать «революционными». Важно было то, что они выполняли свою работу.

А теперь представьте, что есть среда, веб-сайт, к которому может получить доступ практически любой человек в мире, каждый, у кого есть компьютер и подключение к Интернету. Это не сложно, не так ли? Но тогда это было что-то из ряда вон выходящее, так что вам было все равно, как это выглядит.

Веб-сайты не должны быть красивыми

И это было все, что действительно имело значение. Не причудливый вид, продвинутая анимация или другие вещи, почти неизбежные в современном дизайне, а способность быть неким всемирным носителем информации, простым в использовании и ориентированным на контент. Они были созданы для информирования, рекламы или просто создания компаний в Интернете.

Кроме того, эти веб-сайты не могли быть красивыми, принимая во внимание технологии, которые были доступны в то время. Просто было не так много вещей, которые разработчики и дизайнеры могли сделать, чтобы он выглядел современно. И ==по мере развития технологий веб-сайты и их дизайн начали развиваться==.

Эволюция веб-разработки

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

Но в веб-разработке важно не только то, как мы это делаем (какие инструменты мы используем), но и то, что мы как разработчики делаем, поэтому хороший дизайн имеет решающее значение. Кроме того, ==мы должны учитывать состояние технологий== потому что при создании сайта дизайнер должен знать, на что способен разработчик. Поэтому работа разработчика тесно связана с работой дизайнера, и сегодня этим двоим есть где покрасоваться.

Небо это предел

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

Новые решения — RWD, Flexbox, Grid и другие

У нас есть адаптивный веб-дизайн (RWD), поэтому мы можем создавать приложения для любого типа устройств. Есть много новых способов обработки макета веб-сайта. Мы не ограничиваемся только таблицами и поплавками.

Есть Flexbox и сетка, поэтому мы можем создать практически любую конфигурацию элементов, а затем просто изменить ее, когда окно станет меньше. У нас также есть способы изменить внешний вид элементов, таких как градиенты, цвета, границы, тени, SVG и многие другие.

В повседневной разработке мы часто используем Javascript для создания взаимодействий, анимации, переходов, модальных окон, прослушивателей событий и так далее. В настоящее время мы даже можем писать CSS на JS! Вот как далеко и быстро изменились технологии.

Конечно, это не значит, что нельзя сделать что-то интересное, просто используя простые решения HTML и CSS — иногда красота кроется в простоте, но бывают моменты, когда хочется чего-то большего, чего-то, что просто производит впечатление.

От необработанных данных к чудесам 3D

То же самое можно сказать и о современном дизайне. С начала технологической революции мы пережили множество стилей дизайна. ==От минималистичных элегантных веб-сайтов до удивительных пользовательских интерфейсов с эффектами==.

Где-то по пути они начали не просто показывать сырые данные, а рассказывать какую-то историю. Это потому, что у нас есть анимация, современная графика, взаимодействие с пользователем на основе событий и многое другое, что действительно помогает в этом. И вся эта эволюция привела к появлению технологии, которая может быть использована для создания почти кинематографического опыта (а также простых эффектов), и она называется WebGL.

Давайте поговорим о WebGL

Что такое WebGL? Это расширение Javascript, которое дает нам доступ к 2D- и 3D-API в совместимом веб-браузере. Проще говоря, это технология, которая может очень быстро отображать треугольники на элементе холста HTML, используя мощность графического процессора, способного выполнять тысячи вычислений параллельно.

WebGL не является новой технологией, поскольку она появилась в 2007 году, но особенно в последние несколько лет она востребована разработчиками и дизайнерами, поскольку все больше и больше дизайнов веб-сайтов создается с учетом WebGL. Они не только используют отдельные 3D-элементы, чтобы придать своим проектам некоторую современность, но и создают веб-сайты, в которых WebGL играет главную роль.

Но чтобы иметь возможность рисовать что-то в WebGL, нам нужно использовать что-то, называемое шейдерами, которые довольно сложно освоить. Это программы, которые используются для предоставления инструкций WebGL о том, как расположить вершины в пространстве, как отрисовать каждый пиксель, который находится между ними, и так далее. Вот почему нам нужна помощь.

Но можно сделать проще

И вот мы, наконец, подошли к главной теме этой серии — Библиотека Three.js. Это библиотека Javascript и API, выпущенные на Github в 2010 году Рикардо Кабельо (mr.doob), которые помогают нам создавать и отображать анимированную трехмерную графику с ускорением на GPU в веб-браузере с использованием WebGL.

Это действительно упрощает WebGL API и позволяет нам создавать интересные веб-приложения. Конечно, мы все еще можем использовать возможности шейдеров и других вещей WebGL в нем (и тогда нам все еще нужно изучить это), но, как вы увидите позже, именно здесь начинается самое интересное.

Итак, в следующей статье мы узнаем немного больше об этой технологии, и я покажу вам, как создавать 3D-графику в Интернете! Это будет пошаговое руководство, так что не волнуйтесь. Будет весело.

Эта статья была написана Патриком Капковски, разработчиком программного обеспечения в Gorrion.