Есть ли причина использовать WebGL вместо 2D Canvas для 2D-игр / приложений?

114

Есть ли какая-либо причина, кроме производительности, для использования WebGL вместо 2D-Canvas для 2D- игр / приложений?

Другими словами, какие 2D-функции предлагает WebGL, чего невозможно легко достичь с помощью 2D-Canvas?

html html5-canvas webgl

— Али Шакиба
источник

5

Кстати: хотя вы не можете использовать API-интерфейсы 2d и 3d на одном холсте, вы все равно можете комбинировать их, используя несколько холстов. WebGL может использовать двумерные холсты в качестве текстур, а двухмерные холсты могут использовать холсты WebGL в качестве источников для drawImage.

— Филипп

85

Взглянем на этот вопрос с другой стороны:
как разработчик выбирает одну технологию перед другой?

лучше интегрируется в их уже построенную систему
проще в использовании
быстрее
имеет больше возможностей или лучше соответствует их потребностям
Стоимость
более независимый от платформы

Итак, я расскажу о различиях между API Canvas и webGL в отношении этих качеств.

И холст, и webGL - это API JavaScript. В отношении интеграции (привязки) они практически одинаковы. Оба они поддерживаются рядом библиотек, которые могут ускорить ваше кодирование. Различные библиотеки дают вам разные способы организации вашего кода, поэтому выбор библиотеки определяет, как структурированы ваши API-интерфейсы для рисования, но это все равно почти то же самое (как остальная часть кода связывается с ним). Если вы используете библиотеку, простота написания кода зависит от самой библиотеки.

Если вы пишете код с нуля, API холста будет намного легче изучить и понять. Это требует минимальных математических знаний, а разработка идет быстро и просто.

Работа с API WebGL требует сильных математических навыков и полного понимания конвейера рендеринга. Людей с такими навыками труднее найти, производство идет медленнее (из-за размера и сложности такой кодовой базы) и, следовательно, стоит дороже.

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

И холст, и webGL - это положительные моменты html5. Обычно устройства, которые поддерживают одно, будут поддерживать и другое.

Итак, подведем итоги:

объединение кода API рисования и остального (интеграция): аналогично
простота использования:
- (с библиотекой) холст = webGL
- (с нуля) webGL << холст
скорость: webGL> холст
возможности: webGL> холст
стоимость: webGL намного дороже
платформа: очень похожа

Надеюсь это поможет.

PS Открыт для обсуждения.

— Абстрактный алгоритм
источник

@Abstract, Где хорошие уроки по веб-GL и сколько часов это займет?

— Pacerier

1

@Pacerier, просто погуглите, первых нескольких совпадений, вероятно, будет достаточно. Однако на то, чтобы научиться хорошо разбираться в webgl и графическом программировании в целом, уйдут недели и месяцы, а на то, чтобы стать действительно хорошим, - годы. Это не просто какая-то случайная «библиотека», для которой нужно изучить API, и все.

— Абстрактный алгоритм

@AbstractAlgorithm, я имею в виду, что если вы являетесь мастером в области программирования, сколько часов займет переключение на веб-GL?

— Pacerier

@Pacerier, который зависит от разработчика и, как уже говорилось в Abstract, математические навыки участвующего разработчика. На самом деле невозможно произвести количественную оценку.

— scrappedcola

32

Самое большое преимущество - это программируемость конвейера и производительность. Например, скажем, вы рисуете 2 блока один над другим, и один скрыт, некоторые реализации GL имеют возможность отбрасывать скрытый блок.

Что касается сравнений, так как здесь нет быстрого способа создать таблицу, я просто загрузил изображение таблицы сравнения ниже. Добавлен Three.js только для полноты картины.

Стол

— Прабинд
источник

Re: «Некоторые реализации GL имеют возможность отбрасывать скрытый блок», но не могли бы вы обнаружить эту замещенную часть в JS и, таким образом, не перерисовать то, что не нужно?

— Pacerier

16

Судя по опыту работы с моими собственными приложениями , графические шейдеры были единственной причиной, по которой мне потребовалась поддержка WebGL. Для меня простота использования не имеет большого значения, поскольку обе структуры можно абстрагировать с помощью three.js. Предполагая, что шейдеры мне не нужны, я разрешаю использовать любую структуру для максимальной поддержки браузера / компьютера.

— 16807
источник

16

Какие возможности 2D у WebGL по сравнению с 2D холстом? ИМХО, самый большой - это программируемые фрагментные шейдеры на графическом оборудовании. Например, в WebGL можно реализовать игру Конвея в виде шейдера на вашем 3D-оборудовании:

http://glsandbox.com/e#207.3

Этот вид 2D-дисплея будет работать только на CPU, а не на GPU, с 2D-холстом. Все вычисления будут реализованы на JavaScript и не будут такими параллельными, как GPU, даже с помощью веб-воркеров. Это, конечно, только один пример, с помощью шейдеров можно реализовать всевозможные интересные 2D-эффекты.

— Emackey
источник

2

Таким образом, по сравнению с холстом, WebGL более или менее обременительна для ОС?

— Pacerier

Мне любопытно, весь ли холст в конечном итоге делает webgl; если он использует предварительно скомпилированный общий вариант использования webgl, что будет более эффективно, чем прямой webgl; или если он никак не взаимодействует с opengl, если вы не используете webgl.

— Дмитрий

1

@Dmitry отличный вопрос, и разные браузеры могут использовать разные подходы к этой проблеме. Но независимо от того, как они ускоряют Canvas 2D API, сам Canvas 2D API не предлагает программируемых шейдеров или буферов массива вершин. Это «болтливый» API (один вызов JavaScript-to-Native на каждый нарисованный элемент), тогда как API WebGL позволяет загружать массовые данные и настраивать обработку на основе графического процессора.

— emackey

14

Что ж, производительность была бы одной из главных причин, потому что когда вы пишете игру, она должна быть быстрой. Но есть несколько других причин, по которым вы можете предпочесть WebGL холсту. Он предлагает возможность кодирования шейдеров, освещения и масштабирования, что важно, если вы делаете коммерческое игровое приложение. Также холст становится лагающим после 50 спрайтов или около того.

— Xk0nSid
источник

Основная причина использования WebGL - передача нагрузки рендеринга на графический процессор, особенно на таких устройствах, как планшет Android, где ЦП быстро перегружается в javascript.

— Curtis

1

@ Xk0n, Re "дает возможность кодировать шейдеры, освещение и масштабирование", но разве это не становится зависимым от GPU?

— Pacerier

Вы все еще можете масштабировать с помощью setTransform в контексте 2D-холста. Однако у меня были проблемы с растеканием текстур на 2D-холсте при масштабировании из листов спрайтов, поэтому я обращаюсь к WebGL. Я видел учебное пособие, которое не позволяет выборке ближайшего соседа выходить за пределы исходного прямоугольника, что должно решить мою проблему с передним краем.

— Фрэнк

7

С Canvas вы ничего не можете сделать с webGL: холст позволяет дробить байты с помощью get / putImageData, и вы можете рисовать линии, круги ... программно с помощью webGL.
Но если вы хотите сделать довольно много рисунков, а также некоторые эффекты со скоростью 60 кадров в секунду, разрыв в производительности настолько велик, что это просто невозможно с холстом, когда он будет нормально работать в webGL. Производительность - это основная функция.

Тем не менее, webGL довольно сложно программировать: посмотрите, достаточно ли холста для вас, или найдите библиотеку, которая облегчит вашу боль ...
Другой недостаток: он не работает в IE (но что?) И на некоторых мобильных устройствах.
См. Здесь для совместимости: http://caniuse.com/webgl

— ИграАлхимик
источник

7

Поскольку вам конкретно нужны классические 2D-вещи, которые не работают с холстом:

цвет трансформируется (например, мигает спрайт)
повторение заливки растровым изображением
мозаичные карты при вращении (под холстом некоторые реализации будут создавать швы)
глубокое расслоение (очень зависит от реализации)
мультипликативное или аддитивное смешение

... но, конечно, у вас есть доступ к пикселям, так что вы действительно можете делать все, включая вышеперечисленное, вручную. Но это может быть очень, очень медленным. Теоретически вы можете написать Mesa openGl для рендеринга на холст.

Другой важной причиной использования webGL может быть то, что результат очень легко перенести в другое место. Что также делает навык более ценным.

Причины использования холста заключаются в том, что он все еще лучше поддерживается, и если вы научитесь делать что-то попиксельно, это тоже очень ценный урок.

— Starmole
источник

Кстати, многопоточен ли WebGL? Можно ли использовать два потока, отрисовывающих две части экрана одновременно?

— Pacerier

Я думаю, что ответ - «да и нет», поскольку веб-браузеры по своей сути однопоточные, поэтому копирование данных, которые будут отображаться на GPU, не является многопоточным. Но вы используете массовое распараллеливание графической карты, как только шейдеры начинают рендеринг, что, по сути, отрисовывает сразу несколько частей экрана. Пожалуйста, поправьте меня, если я ошибаюсь, кто угодно.

— Кент Вайгель

2

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

Например:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

Источники: Как
правильно определить поддержку WebGL?
Как лучше всего обнаружить мобильное устройство в jQuery?

— МэрМонти
источник

2

WebGL невозможно использовать без графического процессора.
Эта зависимость от оборудования не является большой проблемой, потому что большинство систем имеют графические процессоры, но если архитектуры графических процессоров или процессоров когда-либо будут развиваться, сохранение содержимого webgl путем эмуляции может оказаться сложной задачей. Запускать его на старых (виртуализированных) компьютерах проблематично.

Но «Canvas vs WebGL» не обязательно должен быть двоичным выбором. На самом деле я предпочитаю использовать webgl для эффектов, а остальное делаю на холсте. Когда я запускаю его на виртуальной машине, он по-прежнему работает хорошо и быстро, только без эффектов.

— user185953
источник