Знакомство с WebGL

Знакомство с WebGL

От автора: предпринималось множество попыток по созданию по-настоящему интерактивных 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.

Последний из нас: использование last-child и last-of-type в CSS

Будущие материалы будут использовать последние версии threeJS и WebGL. Когда WebGL 2.0 станет нормой, статьи будут отредактированы, чтобы отражать все изменения.

Чем отличается этот метод изучения

Большая часть учебных материалов по threeJS, на мой взгляд, довольно низкого качества: демо зачастую не работают из-за того, что код не обновлялся (в фреймворк threeJS часто вносятся изменения), пропускаются или остаются без объяснений целые шаги. В этой серии уроков все будет иначе: будет разобран каждый этап, что позволит строить уроки на основе предыдущих. Мы начнем с практических и веселых примеров, которые вызывают широкий интерес. Я выбрал планеты солнечной системы, смоделированные в 3D. Наша первая остановка – Марс…

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree