Рендеринг WebGL | Кодементор

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

Программный и аппаратный рендеринг

Первое различие, которое мы должны сделать, заключается в том, используем ли мы какое-либо специальное графическое оборудование. С одной стороны, мы можем говорить о программном рендеринге в случаях, когда все необходимые вычисления для рендеринга 3D-сцен выполняются с использованием центрального процессора компьютера (ЦП). С другой стороны, как и в случае с WebGL, мы используем термин «аппаратный рендеринг» для сценариев, в которых есть GPU, выполняющий вычисления 3D-графики. С технической точки зрения аппаратный рендеринг намного эффективнее, чем программный рендеринг, потому что первый требует специального оборудования, выполняющего необходимые операции. Напротив, решение для рендеринга на основе программного обеспечения может быть более распространенным из-за отсутствия аппаратных зависимостей.

Серверный и клиентский рендеринг

Второе различие, которое необходимо сделать, заключается в том, происходит ли процесс рендеринга локально или удаленно. Когда изображение, которое необходимо визуализировать, слишком сложное, визуализация, скорее всего, будет выполняться удаленно. Это относится к анимационным 3D-фильмам, где выделенные серверы с большим количеством аппаратных ресурсов отображают сложные сцены. Мы называем это серверным рендерингом. Противоположность этому подходу имеет место, когда рендеринг происходит локально. Мы называем это клиентским рендерингом. WebGL предлагает клиентский подход к рендерингу: элементы, являющиеся частью 3D-сцены, обычно загружаются с сервера. Однако вся обработка, необходимая для получения изображения, выполняется локально с использованием графического оборудования клиента. Хотя это не уникальное решение, по сравнению с другими технологиями (такими как Java 3D, Flash и плагин Unity Web Player), WebGL имеет несколько преимуществ:

• Программирование на языке JavaScript: язык JavaScript является естественным как для веб-разработчиков, так и для браузеров. Работа с JavaScript позволяет получить доступ ко всем частям модели DOM и легко интегрировать приложения WebGL с другими библиотеками JavaScript, такими как jQuery, React и Angular.
• Автоматическое управление памятью: WebGL — в отличие от других технологий, таких как OpenGL, где выделение и освобождение памяти обрабатываются вручную — следует правилам области видимости переменных JavaScript и автоматического управления памятью. Это значительно упрощает программирование, уменьшая объем кода. В конечном счете, это упрощение облегчает понимание логики приложения.
• Распространенность: веб-браузеры с возможностями JavaScript устанавливаются на смартфоны и планшеты по умолчанию. Это означает, что вы можете использовать WebGL в обширной экосистеме настольных и мобильных устройств.
• Производительность. Производительность приложений WebGL сравнима с аналогичными автономными приложениями (за некоторыми исключениями). Это возможно благодаря возможности WebGL обращаться к локальному графическому оборудованию. До недавнего времени многие технологии веб-рендеринга 3D использовали программный рендеринг.
• Нулевая компиляция: WebGL написан на JavaScript; поэтому нет необходимости компилировать код перед его выполнением в веб-браузере. Это дает вам возможность вносить изменения в режиме реального времени и видеть, как эти изменения влияют на ваше 3D-веб-приложение. Тем не менее, когда мы будем рассматривать шейдерные программы, мы поймем, что необходима некоторая компиляция. Однако это происходит на вашем графическом оборудовании, а не в вашем браузере.

Третье отличие состоит в том, что WebGL — это API 3D-рендеринга с немедленным режимом, разработанный для Интернета. API-интерфейсы графики можно разделить на API-интерфейсы режима сохранения и API-интерфейсы непосредственного режима.

Рендеринг в сохраненном режиме

API сохраненного режима является декларативным. Приложение строит сцену из примитивов, таких как формы и линии, а затем графическая библиотека поддерживает модель сцены в памяти. Чтобы изменить то, что визуализируется, приложение выдает команду на обновление сцены, которая может включать, например, добавление или удаление формы; затем библиотека отвечает за управление и перерисовку сцены:

1.png

Немедленный рендеринг

API немедленного режима является процедурным. Немедленный рендеринг требует, чтобы приложение напрямую управляло рендерингом. В этом случае графическая библиотека не поддерживает модель сцены. Каждый раз, когда рисуется новый кадр, приложение выдает все команды рисования, необходимые для описания всей сцены, независимо от фактических изменений. Этот метод обеспечивает максимальный контроль и гибкость прикладной программы:

2.png

Рендеринг в режиме удержания может быть проще в использовании, поскольку API выполняет за вас больше работы, например инициализацию, обслуживание состояния и очистку. Однако часто он менее гибкий, так как API использует свою собственную конкретную модель сцены; он также может иметь более высокие требования к памяти, поскольку ему необходимо предоставить модель сцены общего назначения. С другой стороны, рендеринг в непосредственном режиме, который предлагается в WebGL, является гораздо более гибким и может осуществлять целевую оптимизацию.

Если вам понравилось читать эту статью, вы должны проверить 3D-графика в реальном времени с WebGL 2 — второе издание. Следуя практическому подходу к обучению основным понятиям, 3D-графика в реальном времени с WebGL 2 — второе издание — это подробное руководство с более чем 80 примерами 3D-программирования в WebGL 2, охватывающее такие темы компьютерной графики, как рендеринг, 3D-математика, камера и многое другое.

Похожие записи

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

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