作者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/m.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