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

Ответ 1

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 2

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

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

Ответ 3

Какая 2D-возможность предлагает WebGL, что 2D-холст не работает? Самый большой IMHO - программируемые флеш-шейдеры на графическом оборудовании. Например, в WebGL можно реализовать игру Conway Game of Life в шейдере на вашем 3D-оборудовании:

http://glslsandbox.com/e#207.3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

Как вы специально хотите некоторые классические 2d вещи, которые плохо работают с холстом:

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

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

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

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

Ответ 8

Поскольку WebGL является особенно новой технологией, а HTML5 canvas более устоялся, то, что вы хотите использовать, зависит от ваших пользователей. Если вы думаете, что ваши пользователи будут использовать мобильные устройства, я бы предложил HTML5 canvas, но если вы хотите улучшить 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?