- PVSM.RU - https://www.pvsm.ru -

Выбираем библиотеку для работы с WebGL

Как-то утром, пробегая мимо славного урока [1], я подумал: «Это круто, только всё же кой-чего тут не хватает». Если надо много кода написать легко и быстро, то нужна нам, без сомнений, для сего библиотека. Только как её нам выбрать, если каждый, кто умеет на гитхабе заводить репозиторий, запилил велосипед свой? И об этом для тебя, друг, напишу сегодня пост вдруг.

Я, как и многие другие пользователи технологии WebGL, начал своё с ней знакомство с одной-единственной библиотеки, о которой где-то прочитал или от кого-то услышал, и теперь забиваю все гвозди одним и тем же молотком. Однако, если бы я только начинал знакомство с WebGL сегодня, то всё могло бы сложиться иначе. Дело в том, что в прошлом году один добрый человек [2] потратил 6 месяцев на то, чтобы написать серию простейших примеров работы с WebGL с использованием всех библиотек, до которых смог дотянуться — что даёт вам уникальную возможность сравнить API различных библиотек ещё до того, как начать углублённое изучение одной из них:

Библиотека Версия Размер Выбираем библиотеку для работы с WebGL - 1 Выбираем библиотеку для работы с WebGL - 2 Выбираем библиотеку для работы с WebGL - 3 Выбираем библиотеку для работы с WebGL - 4
Голый WebGL 1.0 0 Тыц [3] Тыц [4] Тыц [5] Тыц [6]
Голый WebGL 2.0 0 Тыц [7] Тыц [8] Тыц [9] Тыц [10]
WebGL Helper [11] - 15KB Тыц [12] Тыц [13] Тыц [14] Тыц [15]
TWGL.js [16] v0.0.20 19KB Тыц [17] Тыц [18] Тыц [19] Тыц [20]
glCubic.js [21] v0.01 22KB Тыц [22] Тыц [23] Тыц [24] Тыц [25]
webgl-utils.js [26] - 50KB Тыц [27] Тыц [28] Тыц [29] Тыц [30]
stackgl [31] v1.4.0 67KB Тыц [32] Тыц [33] Тыц [34] Тыц [35]
lightgl.js [36] - 72KB Тыц [37] Тыц [38] Тыц [39] Тыц [40]
GLOW.js [41] r1.1 77KB Тыц [42] Тыц [43] Тыц [44] Тыц [45]
TDL [46] v0.0.8 91KB Тыц [47] Тыц [48] Тыц [49] Тыц [50]
GLBoost [51] - 132KB Тыц [52] Тыц [53] Тыц [54] Тыц [55]
PhiloGL [56] v1.4.3 136KB Тыц [57] Тыц [58] Тыц [59] Тыц [60]
WebGLU [61] - 178KB Тыц [62] Тыц [63] Тыц [64] -
xeoEngine [65] v0.1.0 224KB Тыц [66] Тыц [67] Тыц [68] Тыц [69]
SceneJS [70] v4.2.1 242KB Тыц [71] Тыц [72] Тыц [73] Тыц [74]
CubicVR.js [75] v0.2.1 347KB Тыц [76] Тыц [77] Тыц [78] Тыц [79]
three.js [80] r71 419KB Тыц [81] Тыц [82] Тыц [83] Тыц [84]
SpiderGL [85] v0.2.0 498KB Тыц [86] Тыц [87] Тыц [88] Тыц [89]
Babylon.js [90] v2.1 814KB Тыц [91] Тыц [92] Тыц [93] Тыц [94]

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

Библиотека Версия Размер Выбираем библиотеку для работы с WebGL - 5 Выбираем библиотеку для работы с WebGL - 6 Выбираем библиотеку для работы с WebGL - 7 Выбираем библиотеку для работы с WebGL - 8
lightgl.js [36] - 72KB Тыц [95] Тыц [96] Тыц [97] Тыц [98]
Processing.js [99] 1.4.13 223KB Тыц [100] Тыц [101] Тыц [102] Тыц [103]
p5.js [104] v0.4.13 236KB Тыц [105] Тыц [106] Тыц [107] Тыц [108]
three.js [80] r71 419KB Тыц [109] Тыц [110] Тыц [111] Тыц [112]
Babylon.js [90] v2.1 814KB Тыц [113] Тыц [114] Тыц [115] Тыц [116]
AwayJS [117] v0.4.31 1,008KB Тыц [118] Тыц [119] Тыц [120] Тыц [121]

Разумеется, процедурная геометрия — это далеко не всё, что вам понадобится в работе, однако из данной серии примеров также можно усвоить общие принципы работы с тем или иным API, и составить собственное проинформированное мнение ещё до того, как начать что-либо делать.

Автор: makc3d

Источник [122]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/114284

Ссылки в тексте:

[1] славного урока: https://habrahabr.ru/company/2gis/blog/273735/

[2] один добрый человек: https://twitter.com/cx20

[3] Тыц: http://jsdo.it/cx20/oaQC

[4] Тыц: http://jsdo.it/cx20/veHj

[5] Тыц: http://jsdo.it/cx20/FPzz

[6] Тыц: http://jsdo.it/cx20/jqD6

[7] Тыц: http://jsdo.it/cx20/tYEN

[8] Тыц: http://jsdo.it/cx20/k8ar

[9] Тыц: http://jsdo.it/cx20/gMEb

[10] Тыц: http://jsdo.it/cx20/6Hfz

[11] WebGL Helper: https://github.com/edom18/WebGLHelper

[12] Тыц: http://jsdo.it/cx20/avc4

[13] Тыц: http://jsdo.it/cx20/AlTE

[14] Тыц: http://jsdo.it/cx20/ijP3

[15] Тыц: http://jsdo.it/cx20/iiJC

[16] TWGL.js: https://github.com/greggman/twgl.js

[17] Тыц: http://jsdo.it/cx20/giVf

[18] Тыц: http://jsdo.it/cx20/3ZFk

[19] Тыц: http://jsdo.it/cx20/tiBJ

[20] Тыц: http://jsdo.it/cx20/h4OJ

[21] glCubic.js: https://github.com/doxas/glcubic.js

[22] Тыц: http://jsdo.it/cx20/lRsw

[23] Тыц: http://jsdo.it/cx20/9RLh

[24] Тыц: http://jsdo.it/cx20/7gZU

[25] Тыц: http://jsdo.it/cx20/gGQG

[26] webgl-utils.js: https://github.com/greggman/webgl-fundamentals/tree/master/webgl/resources

[27] Тыц: http://jsdo.it/cx20/d23X

[28] Тыц: http://jsdo.it/cx20/hSkH

[29] Тыц: http://jsdo.it/cx20/6GRf

[30] Тыц: http://jsdo.it/cx20/euz6

[31] stackgl: https://github.com/stackgl/gl-now

[32] Тыц: http://jsdo.it/cx20/2LaV

[33] Тыц: http://jsdo.it/cx20/1c7U

[34] Тыц: http://jsdo.it/cx20/sLc1

[35] Тыц: http://jsdo.it/cx20/nBES

[36] lightgl.js: https://github.com/evanw/lightgl.js/

[37] Тыц: http://jsdo.it/cx20/b5t6

[38] Тыц: http://jsdo.it/cx20/br0W

[39] Тыц: http://jsdo.it/cx20/eKUR

[40] Тыц: http://jsdo.it/cx20/e4tY

[41] GLOW.js: https://github.com/empaempa/GLOW/

[42] Тыц: http://jsdo.it/cx20/5BvD

[43] Тыц: http://jsdo.it/cx20/mNo2

[44] Тыц: http://jsdo.it/cx20/dx1o

[45] Тыц: http://jsdo.it/cx20/qvfF

[46] TDL: https://github.com/greggman/tdl

[47] Тыц: http://jsdo.it/cx20/xUPI

[48] Тыц: http://jsdo.it/cx20/cKtv

[49] Тыц: http://jsdo.it/cx20/5Fo9

[50] Тыц: http://jsdo.it/cx20/mjQJ

[51] GLBoost: https://github.com/emadurandal/GLBoost

[52] Тыц: http://jsdo.it/cx20/KXXM

[53] Тыц: http://jsdo.it/cx20/Uvah

[54] Тыц: http://jsdo.it/cx20/Elgc

[55] Тыц: http://jsdo.it/cx20/wf7T

[56] PhiloGL: https://github.com/senchalabs/philogl

[57] Тыц: http://jsdo.it/cx20/bfyq

[58] Тыц: http://jsdo.it/cx20/dpi3

[59] Тыц: http://jsdo.it/cx20/pbs2

[60] Тыц: http://jsdo.it/cx20/3zmy

[61] WebGLU: https://github.com/OneGeek/WebGLU

[62] Тыц: http://jsdo.it/cx20/mNEX

[63] Тыц: http://jsdo.it/cx20/867h

[64] Тыц: http://jsdo.it/cx20/utwP

[65] xeoEngine: https://github.com/xeolabs/xeoengine

[66] Тыц: http://jsdo.it/cx20/MKkV

[67] Тыц: http://jsdo.it/cx20/0jGW

[68] Тыц: http://jsdo.it/cx20/ApVP

[69] Тыц: http://jsdo.it/cx20/cwdH

[70] SceneJS: https://github.com/xeolabs/scenejs

[71] Тыц: http://jsdo.it/cx20/ABgh

[72] Тыц: http://jsdo.it/cx20/zVHS

[73] Тыц: http://jsdo.it/cx20/mYPt

[74] Тыц: http://jsdo.it/cx20/508z

[75] CubicVR.js: https://github.com/cjcliffe/CubicVR.js

[76] Тыц: http://jsdo.it/cx20/bOkq

[77] Тыц: http://jsdo.it/cx20/rhim

[78] Тыц: http://jsdo.it/cx20/yGJm

[79] Тыц: http://jsdo.it/cx20/adD8

[80] three.js: https://github.com/mrdoob/three.js/

[81] Тыц: http://jsdo.it/cx20/yCyD

[82] Тыц: http://jsdo.it/cx20/vryW

[83] Тыц: http://jsdo.it/cx20/yv6Z

[84] Тыц: http://jsdo.it/cx20/2XDY

[85] SpiderGL: https://github.com/dibenedetto/SpiderGL

[86] Тыц: http://jsdo.it/cx20/jKwi

[87] Тыц: http://jsdo.it/cx20/kbMz

[88] Тыц: http://jsdo.it/cx20/ymPN

[89] Тыц: http://jsdo.it/cx20/7Xe1

[90] Babylon.js: https://github.com/BabylonJS/Babylon.js

[91] Тыц: http://jsdo.it/cx20/84AP

[92] Тыц: http://jsdo.it/cx20/mJuge

[93] Тыц: http://jsdo.it/cx20/o79P

[94] Тыц: http://jsdo.it/cx20/wNbW

[95] Тыц: http://jsdo.it/cx20/rm4H

[96] Тыц: http://jsdo.it/cx20/ejpI

[97] Тыц: http://jsdo.it/cx20/elUj

[98] Тыц: http://jsdo.it/cx20/u16o

[99] Processing.js: https://github.com/processing-js/processing-js

[100] Тыц: http://jsdo.it/cx20/xde6

[101] Тыц: http://jsdo.it/cx20/eA2K

[102] Тыц: http://jsdo.it/cx20/qfGQ

[103] Тыц: http://jsdo.it/cx20/eHwD

[104] p5.js: https://github.com/processing/p5.js

[105] Тыц: http://jsdo.it/cx20/uwAD

[106] Тыц: http://jsdo.it/cx20/wc94

[107] Тыц: http://jsdo.it/cx20/0qsG

[108] Тыц: http://jsdo.it/cx20/QVpx

[109] Тыц: http://jsdo.it/cx20/vvCa

[110] Тыц: http://jsdo.it/cx20/d11S

[111] Тыц: http://jsdo.it/cx20/kwGs

[112] Тыц: http://jsdo.it/cx20/dutP

[113] Тыц: http://jsdo.it/cx20/oRtWo

[114] Тыц: http://jsdo.it/cx20/anpf

[115] Тыц: http://jsdo.it/cx20/uqcv

[116] Тыц: http://jsdo.it/cx20/jwt0

[117] AwayJS: https://github.com/awayjs

[118] Тыц: http://jsdo.it/cx20/4wLt

[119] Тыц: http://jsdo.it/cx20/4bRc

[120] Тыц: http://jsdo.it/cx20/wiQT

[121] Тыц: http://jsdo.it/cx20/nTGl

[122] Источник: https://habrahabr.ru/post/278731/