В прошлом году в Интернете наблюдалась «заметная» тенденция. Я не говорю о гифках кошек и собак. Нет, я здесь, чтобы рассказать вам об API WebGL. Мы немного погрузимся в занудную тему, но не бойтесь, вы, сами того не осознавая, могли уже использовать ее. Вы когда-нибудь использовали свойство перевода, преобразования или анимации в CSS? Вы когда-нибудь задумывались, почему все это так гладко? Читайте, пока мы рассыпаемся по поверхности графического программирования.

Короче говоря, WebGL - это язык программирования низкого уровня, который позволяет вам напрямую общаться с графической картой. Современные компьютерные игры требуют высокопроизводительных графических карт. Это почему? Ну, игровые программисты используют OpenGL, который по сути является дедушкой WebGL. Так что же делает видеокарту такой важной для этой задачи?

Каждое электронное устройство имеет процессор. Также известный как ЦП, он выполняет все поставленные задачи и обычно состоит из пары ядер. Одно ядро ​​может обрабатывать одну задачу, даже если кажется, что вы выполняете несколько задач одновременно, на самом деле оно выполняет только одну задачу. Но он справляется с этой задачей с невероятной скоростью.

Но что, если нам нужно рассчитать цвета каждого пикселя на мониторе? Возьмем экран с разрешением 1920x1080, который в наши дни не так уж и скромен, и это уже 2,073,600 пикселей. Теперь добавьте частоту обновления 60 Гц, что означает, что пиксели обновляются 60 раз в секунду. Это 124,416 000 вычислений пикселей в секунду!

Современная видеокарта или GPU содержит тысячи ядер. Эти ядра не так сложны, как ЦП, но таким образом могут быстрее справляться с большим количеством задач.

WebGL основан на OpenGL и является языком программирования низкого уровня. Это означает, что мы почти напрямую разговариваем с аппаратными компонентами. Похоже на C, и чтобы овладеть этим, вы обнаружите, что вам нужно изучить очень много нового жаргона и тем:

  • Буферы памяти
  • Матрицы
  • Шейдеры
  • Конвейер рендеринга
  • И многое другое

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

У них есть красивые примеры, с которыми вы можете поиграть.

Служба поддержки? Все основные браузеры поддерживают WebGL, включая мобильные браузеры.

В Интернете вы можете найти множество удивительно красивых примеров:

Надеюсь, вы почувствуете вдохновение! Я сам начал ежедневный проект, в котором комбинирую WebGL со звуком: аудиовизуализацию. Весь код доступен на Github, и я веду простой журнал, в котором записываю все, что узнал.

Если вам нравится то, что вы только что прочитали, вы можете согреть мое сердце 💚 хлопая в ладоши или купите мне кофе ☕️