Как-то утром, пробегая мимо славного урока, я подумал: «Это круто, только всё же кой-чего тут не хватает». Если надо много кода написать легко и быстро, то нужна нам, без сомнений, для сего библиотека. Только как её нам выбрать, если каждый, кто умеет на гитхабе заводить репозиторий, запилил велосипед свой? И об этом для тебя, друг, напишу сегодня пост вдруг.
Я, как и многие другие пользователи технологии WebGL, начал своё с ней знакомство с одной-единственной библиотеки, о которой где-то прочитал или от кого-то услышал, и теперь забиваю все гвозди одним и тем же молотком. Однако, если бы я только начинал знакомство с WebGL сегодня, то всё могло бы сложиться иначе. Дело в том, что в прошлом году один добрый человек потратил 6 месяцев на то, чтобы написать серию простейших примеров работы с WebGL с использованием всех библиотек, до которых смог дотянуться — что даёт вам уникальную возможность сравнить API различных библиотек ещё до того, как начать углублённое изучение одной из них:
В этой таблице представлены четыре простых примера работы с процедурной геометрией в рамках API соответствующих библиотек, и overhead, которым придётся расплачиваться вашему сайту или приложению за их использование. Кроме того, автор выполнил те же примеры с использованием библиотечных примитивов, где это было возможно:
Разумеется, процедурная геометрия — это далеко не всё, что вам понадобится в работе, однако из данной серии примеров также можно усвоить общие принципы работы с тем или иным API, и составить собственное проинформированное мнение ещё до того, как начать что-либо делать.
Update 9/III: Думал было продолжить работу над статьёй но, заценив реакцию, не буду. Учитесь жевать перед тем, как глотать, дорогие читатели.
Я, как и многие другие пользователи технологии WebGL, начал своё с ней знакомство с одной-единственной библиотеки, о которой где-то прочитал или от кого-то услышал, и теперь забиваю все гвозди одним и тем же молотком. Однако, если бы я только начинал знакомство с WebGL сегодня, то всё могло бы сложиться иначе. Дело в том, что в прошлом году один добрый человек потратил 6 месяцев на то, чтобы написать серию простейших примеров работы с WebGL с использованием всех библиотек, до которых смог дотянуться — что даёт вам уникальную возможность сравнить API различных библиотек ещё до того, как начать углублённое изучение одной из них:
| Библиотека | Версия | Размер |  |
 |
 |
 |
|---|---|---|---|---|---|---|
| Голый WebGL | 1.0 | 0 | Тыц | Тыц | Тыц | Тыц |
| Голый WebGL | 2.0 | 0 | Тыц | Тыц | Тыц | Тыц |
| WebGL Helper | - | 15KB | Тыц | Тыц | Тыц | Тыц |
| TWGL.js | v0.0.20 | 19KB | Тыц | Тыц | Тыц | Тыц |
| glCubic.js | v0.01 | 22KB | Тыц | Тыц | Тыц | Тыц |
| webgl-utils.js | - | 50KB | Тыц | Тыц | Тыц | Тыц |
| stackgl | v1.4.0 | 67KB | Тыц | Тыц | Тыц | Тыц |
| lightgl.js | - | 72KB | Тыц | Тыц | Тыц | Тыц |
| GLOW.js | r1.1 | 77KB | Тыц | Тыц | Тыц | Тыц |
| TDL | v0.0.8 | 91KB | Тыц | Тыц | Тыц | Тыц |
| GLBoost | - | 132KB | Тыц | Тыц | Тыц | Тыц |
| PhiloGL | v1.4.3 | 136KB | Тыц | Тыц | Тыц | Тыц |
| WebGLU | - | 178KB | Тыц | Тыц | Тыц | - |
| xeoEngine | v0.1.0 | 224KB | Тыц | Тыц | Тыц | Тыц |
| SceneJS | v4.2.1 | 242KB | Тыц | Тыц | Тыц | Тыц |
| CubicVR.js | v0.2.1 | 347KB | Тыц | Тыц | Тыц | Тыц |
| three.js | r71 | 419KB | Тыц | Тыц | Тыц | Тыц |
| SpiderGL | v0.2.0 | 498KB | Тыц | Тыц | Тыц | Тыц |
| Babylon.js | v2.1 | 814KB | Тыц | Тыц | Тыц | Тыц |
В этой таблице представлены четыре простых примера работы с процедурной геометрией в рамках API соответствующих библиотек, и overhead, которым придётся расплачиваться вашему сайту или приложению за их использование. Кроме того, автор выполнил те же примеры с использованием библиотечных примитивов, где это было возможно:
| Библиотека | Версия | Размер | |
|
|
|
|---|---|---|---|---|---|---|
| lightgl.js | - | 72KB | Тыц | Тыц | Тыц | Тыц |
| Processing.js | 1.4.13 | 223KB | Тыц | Тыц | Тыц | Тыц |
| p5.js | v0.4.13 | 236KB | Тыц | Тыц | Тыц | Тыц |
| three.js | r71 | 419KB | Тыц | Тыц | Тыц | Тыц |
| Babylon.js | v2.1 | 814KB | Тыц | Тыц | Тыц | Тыц |
| AwayJS | v0.4.31 | 1,008KB | Тыц | Тыц | Тыц | Тыц |
Разумеется, процедурная геометрия — это далеко не всё, что вам понадобится в работе, однако из данной серии примеров также можно усвоить общие принципы работы с тем или иным API, и составить собственное проинформированное мнение ещё до того, как начать что-либо делать.
Update 9/III: Думал было продолжить работу над статьёй но, заценив реакцию, не буду. Учитесь жевать перед тем, как глотать, дорогие читатели.
Комментарии (12)
xGromMx
07.03.2016 17:28+9Где сравнение производительности, скорости рендеринга и все такое?
makc3d
07.03.2016 18:11-6Хороший вопрос. Если найдёте где, с удовольствием добавлю ссылку в пост )
xGromMx
07.03.2016 18:14+2Ну тут немного есть https://playcanvas.com/project/337758/overview/comparison-of-webgl-3d-engines
xGromMx
07.03.2016 18:19Тут 3 сравниваются http://bnjm.github.io/WebGL-framework-comparison
makc3d
07.03.2016 18:33-4Спасибо. Короче, поступим так: пока коментов не тыща, эти ссылки всё равно наверху, и все их видят. А если мне удастся переварить их в абзац-другой годного униформного текста, то я тогда допишу вниз поста.
gfxdevrus
09.03.2016 12:22+1Не вижу в списке лидера гонки — популярного в России и не только движка Blend4Web.
Fen1kz
Если бы я понял что значит веб-страница по ссылке "ТЫЦ", я бы реквестировал добавить pixi.js.
К сожалению, я вообще не понял, что за страница там. Спамный 'Allow browser notification' с единственным 'Confirm', какие-то иероглифы, вырвиглазный шрифт, в одном из примеров 7000 строк кода… Не удивительно что такой отстой занял 6 месяцев.
Лучше бы сами потратили недельку и сделали нормальные примеры на нормальном сайте.
rPman
А может тысячи строк кода это уникальная информация, показывающая, на сколько неудобна соответствующая библиотека?
p.s. как можно не понять что это за сайт, ничего читать и переводить не нужно, очень удобно закладками разделен html и javascript
makc3d
Насколько я вижу, там примера 170 строк, а остальное — копипаста самой библиотеки и ещё каких-то модулей. Разумеется, от вас требуется какое-то усилие, чтобы разобраться в этом коде. Пока не придумано устройство, загружающее знания в мозг matrix style.