作者oopFoo (3d)
看板Soft_Job
标题[心得] Webgl+Js的Spa
时间Fri Mar 22 17:30:56 2019
先说心得：
Web 3D程式会Eat the World。以後Desktop的3D程式（游戏除外）会被淘汰，虽然需要很长一段时间。
但Web程式要考虑很多，不要一不小心重踏Insomniac Games的惨痛经验
https://www.gdcvault.com/play/1024465/Insomniac-s-Web-Tools-A
我来分享一些自己写Webgl的心得。
首先TypedArrays不好用，Javascript 没有pointer，所以无法指向某member当base，一定要用subarray()或new ArrayBuffer()来做类似vec3的结构。可是
https://stackoverflow.com/questions/45803829/memory-overhead-of-typed-arrays-vs-strings
所以这样做的话，记忆体爆炸性成长，效能也差。所以Js的glmatrix library根本是误导人走错的方向。
现在我正在准备完全重写matrix library，(顺便用wasm?)适合Js TypedArray的。
Webgl好用，Webgl2更好用，Webgl2-compute出来就真的不得了。如果不介意暂时的相容性问题，请直接使用Webgl2，当你的程式可上线的时候，Webgl2应该是90%+了。
第三programmable vertex pull超赞。OpenGL Insight Chapter21，应该是始祖。
https://github.com/OpenGLInsights/OpenGLInsightsCode/tree/master/Chapter%2021%20Programmable%20Vertex%20Pulling
另外一个example
https://github.com/nlguillemot/ProgrammablePulling
Webgl没有1d texture要用2d texture来代替，需要确定gpu有vertex texture的支援（99%），然後需要oes_texture_float的extension(80%)。只能用float所以有16million index的限制。
programmable vertex pulling简化程式，把computation移到gpu刚好适合web，请多多利用。如果有碰到问题，我乐意回答，如果我有时间的话。
我正在写3d model editing的程式，browser处理几十万个polygons是没问题，现在我改写用vertex pulling希望能处理几百万个polygons。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 59.115.100.225
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Soft_Job/M.1553247063.A.941.html
1F：推 dreamnook: 03/22 17:50
2F：→ MOONY135: 分享文 赞赞 03/22 18:00
3F：推 pkro12345: 那你觉得three.js如何？ 03/22 18:00
three.js就普及的SceneGraph，看你的用途。展示Model很好。
4F：嘘 EricTCartman: 晕倒 TypedArrays不是这样用的 根本没有必要用到 03/22 19:17
就不好用啊。但必须要到啊，webgl只接收TypedArrays，要用glMatrix Library就必须用subarray()转换成vec3。所以我才说要重写适合TypedArrays的。还是你有高明作法？
※ 编辑: oopFoo (180.217.178.79), 03/22/2019 19:29:04
5F：→ EricTCartman: subarray()或new ArrayBuffer()... 03/22 19:17
6F：→ EricTCartman: gltf当时的设计就是把多个mesh的vertex、indice等 03/22 19:18
7F：→ EricTCartman: 全部放到同块buffer 再藉由json去描述个别mesh的资 03/22 19:18
8F：→ EricTCartman: 料区块解读(stride、offset、glsl type) 03/22 19:19
9F：→ EricTCartman: JS重头到尾只要持有一块buffer记忆体就好 03/22 19:21
10F：→ EricTCartman: 你是要用glMatrix处理什麽？ 03/22 19:33
11F：→ oopFoo: 我是持有几个大buffers没错，但要用glMatrix处理就必须用 03/22 19:34
12F：→ oopFoo: DataView没错啊。 03/22 19:35
13F：→ EricTCartman: 抱歉 不是很懂你的问题症结点 glMatrix应该是用来处 03/22 19:38
14F：→ EricTCartman: 理数学矩阵运算的 除非你是做animation 否则应该不 03/22 19:38
15F：→ EricTCartman: 会需要用到那麽大量的记忆体来存transform 03/22 19:39
16F：→ EricTCartman: 至於vec3的问题 由於transform我都是在shader做的 03/22 19:41
17F：→ EricTCartman: 你只要VBO、shader的input会bind 照理来说应该是不 03/22 19:42
18F：→ EricTCartman: 需要额外处理 03/22 19:42
19F：→ oopFoo: 程式是model editing。所以需要Js处理运算3d points。 03/22 19:46
20F：→ oopFoo: 我也想只用Shader就好XDDD 03/22 19:46
22F：→ oopFoo: subarray()的shallow view很cheap，其实超expensive的 03/22 19:50
23F：→ oopFoo: 一直被stupid fast骗。花了很多时间，才发现问题在这。 03/22 19:54
24F：→ EricTCartman: 你做model editing的话 intersection演算法应该是自 03/22 19:57
25F：→ EricTCartman: 己写的吧？ 建议直接对typedarray作access就好 03/22 19:57
26F：→ oopFoo: dot(), normalize(), scaleAndAdd(), multi()是常常需要的 03/22 19:59
27F：→ oopFoo: 就懒的重新写，想说需要的时候就shallow view一下，那知道 03/22 20:00
28F：→ oopFoo: shallow view需要这麽大的一个结构。所以才来分享问题。 03/22 20:02
29F：→ EricTCartman: 你shallow view一次会处理多少vertex? 03/22 20:03
30F：→ oopFoo: 本来预先都抓出来，随时可以处理。现在改成edit的时候才抓 03/22 20:06
31F：→ oopFoo: 出来，处理完再release。所以之後要重写dot()....这部份。 03/22 20:07
32F：→ oopFoo: 就不须要subarray()再放掉。 03/22 20:08
33F：推 Bencrie: 听起来就像 java 会取代 c++ 这样 XD 03/22 23:33
34F：→ oopFoo: Web真的会取代Desktop。Autodesk现在是用wasm把autocad带 03/23 05:17
35F：→ oopFoo: 到web上，但我觉的直接写Js会比较好。 03/23 05:18
36F：推 Bencrie: 希望 Blender 不会变成这样 03/23 13:14
37F：推 gravity067: 赞 谢谢分享 03/23 15:26
38F：→ oopFoo: 我有想过要port Blender to Web。还在想，哈哈。 03/23 21:16
39F：推 iven00000000: 还真的可能取代，现在连游戏都可串流了 03/29 23:14