От автора: предпринималось множество попыток по созданию по-настоящему интерактивных 3D элементов, в том числе были VRML и Flash. Однако стандарт появился только в 2013 году, и это стал WebGL на основе OpenGL ES 2.0. С появлением данной технологии стала возможна интеграция нативного 3D прямо в веб-страницы без каких-либо плагинов и расширений для браузеров.
Что такое WebGL?
WebGL рисует 3D объекты на страницах с помощью JavaScript в теге canvas. В отличие от HTML, WebGL не создает элементы на странице. Все происходит на пиксельном уровне. Таким образом, WebGL можно отнести к низкоуровневому API, которое предлагает точный контроль над 3D пространством через шейдеры без какой-либо абстракции.
В отличие от большинства 3D приложений, в WebGL нет встроенных сцен, объектов и моделей, что делает инструмент крайне мощным. Однако с другой стороны это затрудняет разработчикам изучение WebGL, сложно быстро получить желаемый результат.
По этой причине большинство разработчиков используют фреймворк для написания WebGL кода, хотя его можно писать напрямую в JS. На данный момент самый популярный WebGL фреймворк — threeJS. Есть множество других фреймворков.
Необходимость 3D фреймворка
Если вы читали другие статьи на сайте the new code, вы знаете, что я плохо отношусь к фреймворкам. Я верю, что разработчики получают гораздо больше долгосрочных знаний, изучая основы, а не «сокращенные версии».
3D и так довольно сложный предмет. Пытаться понять WebGL поверх остальных знаний о веб-разработке – это сложная задача для любого человека. А изучение WebGL с основ отнимет у вас очень много времени, прежде чем вы сможете создать что-то стоящее.
По этой причине большая часть материалов по WebGL на сайте the new code будет использовать фреймворк – вышеупомянутый threeJS. Для изучения вам не потребуются предыдущие знания о 3D, необходимо среднее знание HTML, CSS и JavaScript.
Будущие материалы будут использовать последние версии threeJS и WebGL. Когда WebGL 2.0 станет нормой, статьи будут отредактированы, чтобы отражать все изменения.
Чем отличается этот метод изучения
Большая часть учебных материалов по threeJS, на мой взгляд, довольно низкого качества: демо зачастую не работают из-за того, что код не обновлялся (в фреймворк threeJS часто вносятся изменения), пропускаются или остаются без объяснений целые шаги. В этой серии уроков все будет иначе: будет разобран каждый этап, что позволит строить уроки на основе предыдущих. Мы начнем с практических и веселых примеров, которые вызывают широкий интерес. Я выбрал планеты солнечной системы, смоделированные в 3D. Наша первая остановка – Марс…
Источник: //thenewcode.com/
Редакция: Команда webformyself.
