[心得] Webgl+Js的Spa

看板Soft_Job作者 (3d)時間5年前 (2019/03/22 17:31), 5年前編輯推噓5(6推 1噓 32→)
留言39則, 8人參與, 5年前最新討論串1/2 (看更多)
先說心得： 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://www.ptt.cc/bbs/Soft_Job/M.1553247063.A.941.html
推
03/22 17:50, 5年前 , 1F
03/22 17:50, 1F
→
03/22 18:00, 5年前 , 2F
分享文 讚讚
03/22 18:00, 2F
推
03/22 18:00, 5年前 , 3F
那你覺得three.js如何？
03/22 18:00, 3F
three.js就普及的SceneGraph，看你的用途。展示Model很好。
噓
03/22 19:17, 5年前 , 4F
暈倒 TypedArrays不是這樣用的 根本沒有必要用到
03/22 19:17, 4F
就不好用啊。但必須要到啊，webgl只接收TypedArrays，要用glMatrix Library就必須用subarray()轉換成vec3。所以我才說要重寫適合TypedArrays的。還是你有高明作法？ ※ 編輯: oopFoo (180.217.178.79), 03/22/2019 19:29:04
→
03/22 19:17, 5年前 , 5F
subarray()或new ArrayBuffer()...
03/22 19:17, 5F
→
03/22 19:18, 5年前 , 6F
gltf當時的設計就是把多個mesh的vertex、indice等
03/22 19:18, 6F
→
03/22 19:18, 5年前 , 7F
全部放到同塊buffer 再藉由json去描述個別mesh的資
03/22 19:18, 7F
→
03/22 19:19, 5年前 , 8F
料區塊解讀(stride、offset、glsl type)
03/22 19:19, 8F
→
03/22 19:21, 5年前 , 9F
JS重頭到尾只要持有一塊buffer記憶體就好
03/22 19:21, 9F
→
03/22 19:33, 5年前 , 10F
你是要用glMatrix處理什麼？
03/22 19:33, 10F
→
03/22 19:34, 5年前 , 11F
我是持有幾個大buffers沒錯，但要用glMatrix處理就必須用
03/22 19:34, 11F
→
03/22 19:35, 5年前 , 12F
DataView沒錯啊。
03/22 19:35, 12F
→
03/22 19:38, 5年前 , 13F
抱歉 不是很懂你的問題癥結點 glMatrix應該是用來處
03/22 19:38, 13F
→
03/22 19:38, 5年前 , 14F
理數學矩陣運算的 除非你是做animation 否則應該不
03/22 19:38, 14F
→
03/22 19:39, 5年前 , 15F
會需要用到那麼大量的記憶體來存transform
03/22 19:39, 15F
→
03/22 19:41, 5年前 , 16F
至於vec3的問題 由於transform我都是在shader做的
03/22 19:41, 16F
→
03/22 19:42, 5年前 , 17F
你只要VBO、shader的input會bind 照理來說應該是不
03/22 19:42, 17F
→
03/22 19:42, 5年前 , 18F
需要額外處理
03/22 19:42, 18F
→
03/22 19:46, 5年前 , 19F
程式是model editing。所以需要Js處理運算3d points。
03/22 19:46, 19F
→
03/22 19:46, 5年前 , 20F
我也想只用Shader就好XDDD
03/22 19:46, 20F
→
03/22 19:49, 5年前 , 21F
http://glmatrix.net/是我用的Library，我一直誤解
03/22 19:49, 21F
→
03/22 19:50, 5年前 , 22F
subarray()的shallow view很cheap，其實超expensive的
03/22 19:50, 22F
→
03/22 19:54, 5年前 , 23F
一直被stupid fast騙。花了很多時間，才發現問題在這。
03/22 19:54, 23F
→
03/22 19:57, 5年前 , 24F
你做model editing的話 intersection演算法應該是自
03/22 19:57, 24F
→
03/22 19:57, 5年前 , 25F
己寫的吧？ 建議直接對typedarray作access就好
03/22 19:57, 25F
→
03/22 19:59, 5年前 , 26F
dot(), normalize(), scaleAndAdd(), multi()是常常需要的
03/22 19:59, 26F
→
03/22 20:00, 5年前 , 27F
就懶的重新寫，想說需要的時候就shallow view一下，那知道
03/22 20:00, 27F
→
03/22 20:02, 5年前 , 28F
shallow view需要這麼大的一個結構。所以才來分享問題。
03/22 20:02, 28F
→
03/22 20:03, 5年前 , 29F
你shallow view一次會處理多少vertex?
03/22 20:03, 29F
→
03/22 20:06, 5年前 , 30F
本來預先都抓出來，隨時可以處理。現在改成edit的時候才抓
03/22 20:06, 30F
→
03/22 20:07, 5年前 , 31F
出來，處理完再release。所以之後要重寫dot()....這部份。
03/22 20:07, 31F
→
03/22 20:08, 5年前 , 32F
就不須要subarray()再放掉。
03/22 20:08, 32F
推
03/22 23:33, 5年前 , 33F
聽起來就像 java 會取代 c++ 這樣 XD
03/22 23:33, 33F
→
03/23 05:17, 5年前 , 34F
Web真的會取代Desktop。Autodesk現在是用wasm把autocad帶
03/23 05:17, 34F
→
03/23 05:18, 5年前 , 35F
到web上，但我覺的直接寫Js會比較好。
03/23 05:18, 35F
推
03/23 13:14, 5年前 , 36F
希望 Blender 不會變成這樣
03/23 13:14, 36F
推
03/23 15:26, 5年前 , 37F
讚 謝謝分享
03/23 15:26, 37F
→
03/23 21:16, 5年前 , 38F
我有想過要port Blender to Web。還在想，哈哈。
03/23 21:16, 38F
推
03/29 23:14, 5年前 , 39F
還真的可能取代，現在連遊戲都可串流了
03/29 23:14, 39F
‣ 更多 oopFoo 的文章
文章代碼(AID): #1SbAjNb1 (Soft_Job)
‣ 更多 oopFoo 的文章
文章代碼(AID): #1SbAjNb1 (Soft_Job)