- PVSM.RU - https://www.pvsm.ru -
Как-то утром, пробегая мимо славного урока [1], я подумал: «Это круто, только всё же кой-чего тут не хватает». Если надо много кода написать легко и быстро, то нужна нам, без сомнений, для сего библиотека. Только как её нам выбрать, если каждый, кто умеет на гитхабе заводить репозиторий, запилил велосипед свой? И об этом для тебя, друг, напишу сегодня пост вдруг.
Я, как и многие другие пользователи технологии WebGL, начал своё с ней знакомство с одной-единственной библиотеки, о которой где-то прочитал или от кого-то услышал, и теперь забиваю все гвозди одним и тем же молотком. Однако, если бы я только начинал знакомство с WebGL сегодня, то всё могло бы сложиться иначе. Дело в том, что в прошлом году один добрый человек [2] потратил 6 месяцев на то, чтобы написать серию простейших примеров работы с WebGL с использованием всех библиотек, до которых смог дотянуться — что даёт вам уникальную возможность сравнить API различных библиотек ещё до того, как начать углублённое изучение одной из них:
Библиотека | Версия | Размер | ||||
---|---|---|---|---|---|---|
Голый 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, которым придётся расплачиваться вашему сайту или приложению за их использование. Кроме того, автор выполнил те же примеры с использованием библиотечных примитивов, где это было возможно:
Библиотека | Версия | Размер | ||||
---|---|---|---|---|---|---|
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/
Нажмите здесь для печати.