Контекст Canvas 2d или игра WebGL для 2D

Я планирую написать игру, в которой будет использоваться множество спрайтов и изображений. Сначала я попробовал EaselJS, но, играя в другие игры на холсте, я понял, что это не так быстро. И когда я увидел BananaBread от Mozilla, я подумал: "Если WebGL может делать 3D так быстро, то он может делать 2D еще быстрее". Поэтому я перешел на three.js(используя плоскости и прозрачные текстуры, смещение текстуры для спрайтов).

Вопрос: лучше? Быстрее? Большинство игр WebGL - 3D, поэтому я должен использовать контекст 2D для 2D и WebGL для 3D? Я также заметил, что нет библиотек для WebGL в 2D (кроме WebGL-2d, но это довольно низкий уровень).

Обратите внимание, что совместимость не является моей самой большой заботой, поскольку я не планирую выпускать что-либо в ближайшее время:).

Ответ 1

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

Несколько более подробных заметок: WebGL может очень быстро рисовать текстурированные квадратики (спрайты), но если вам нужны более продвинутые функции 2D-рисования, такие как трассировка пути, вы захотите придерживаться 2D-холста, реализуя эти типы алгоритмов в WebGL нетривиальна. Характер вашей игры также влияет на ваш выбор. Если у вас есть только несколько движущихся объектов на экране за один раз, холст будет довольно быстрым и достаточно простым. Однако, если вы перерисовываете всю сцену в каждом кадре, WebGL лучше подходит для этого типа цикла рендеринга.

Моя рекомендация? Если вы просто изучаете оба, начните с Canvas2D и сделайте игру с этим. Абстрагируйте свой рисунок простым способом, например, имея функцию DrawPlayer, а не ctx.drawImage(playerSprite, ....), и когда вы достигнете точки, в которой игра работает, и вы хотите, чтобы она работала быстрее или дизайн игры диктует, что вы ДОЛЖНЫ использовать более быстрый метод рисования, создайте альтернативный рендеринг для всех этих абстрактных функций с помощью WebGL. Это дает вам преимущества не повредить технику рендеринга ранее (которая ВСЕГДА совершает ошибку!), Позвольте вам сосредоточиться на геймплее, и если вы в конечном итоге реализуете оба метода, у вас есть отличный откат для браузеров, отличных от WebGL, таких как Интернет Проводник. Скорее всего, вам пока не понадобится повышенная скорость.

Ответ 2

WebGL может быть намного быстрее, чем холст 2D. В качестве примера см. http://blog.tojicode.com/2012/07/sprite-tile-maps-on-gpu.html.

Тем не менее, я думаю, вы в основном сами по себе. Я не знаю ни одной библиотеки 2d для WebGL, за исключением, может быть, PlayN http://code.google.com/p/playn/, хотя в Java и использует Google Web Toolkit для преобразования к JavaScript. Я также уверен, что он не использует методы, упомянутые в этом сообщении в блоге выше, хотя, если ваша игра не использует плитки, возможно, этот метод вам не подходит.

three.js, возможно, не является той библиотекой, которую вы хотите, если вы планируете 2d.