Знайомство з WebGL

35

Від автора: робилося безліч спроб по створенню по-справжньому інтерактивних 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. Наша перша зупинка – Марс…