[心得] Webgl+Js的Spa

作者: oopFoo (3d)   2019-03-22 17:30:56
先說心得:
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。
作者: MOONY135 (談無慾)   2019-03-22 18:00:00
分享文 讚讚
作者: pkro12345 (席龍)   2019-03-22 18:00:00
那你覺得three.js如何?
作者: EricTCartman (阿ㄆㄧㄚˇ)   2019-03-22 19:17:00
暈倒 TypedArrays不是這樣用的 根本沒有必要用到subarray()或new ArrayBuffer()...gltf當時的設計就是把多個mesh的vertex、indice等全部放到同塊buffer 再藉由json去描述個別mesh的資料區塊解讀(stride、offset、glsl type)JS重頭到尾只要持有一塊buffer記憶體就好你是要用glMatrix處理什麼?
作者: oopFoo (3d)   2019-03-22 19:34:00
我是持有幾個大buffers沒錯,但要用glMatrix處理就必須用DataView沒錯啊。
作者: EricTCartman (阿ㄆㄧㄚˇ)   2019-03-22 19:38:00
抱歉 不是很懂你的問題癥結點 glMatrix應該是用來處理數學矩陣運算的 除非你是做animation 否則應該不會需要用到那麼大量的記憶體來存transform至於vec3的問題 由於transform我都是在shader做的你只要VBO、shader的input會bind 照理來說應該是不需要額外處理
作者: oopFoo (3d)   2019-03-22 19:46:00
程式是model editing。所以需要Js處理運算3d points。我也想只用Shader就好XDDDhttp://glmatrix.net/是我用的Library,我一直誤解subarray()的shallow view很cheap,其實超expensive的一直被stupid fast騙。花了很多時間,才發現問題在這。
作者: EricTCartman (阿ㄆㄧㄚˇ)   2019-03-22 19:57:00
你做model editing的話 intersection演算法應該是自己寫的吧? 建議直接對typedarray作access就好
作者: oopFoo (3d)   2019-03-22 19:59:00
dot(), normalize(), scaleAndAdd(), multi()是常常需要的就懶的重新寫,想說需要的時候就shallow view一下,那知道shallow view需要這麼大的一個結構。所以才來分享問題。
作者: EricTCartman (阿ㄆㄧㄚˇ)   2019-03-22 20:03:00
你shallow view一次會處理多少vertex?
作者: oopFoo (3d)   2019-03-22 20:06:00
本來預先都抓出來,隨時可以處理。現在改成edit的時候才抓出來,處理完再release。所以之後要重寫dot()....這部份。就不須要subarray()再放掉。
作者: Bencrie   2019-03-22 23:33:00
聽起來就像 java 會取代 c++ 這樣 XD
作者: oopFoo (3d)   2019-03-23 05:17:00
Web真的會取代Desktop。Autodesk現在是用wasm把autocad帶到web上,但我覺的直接寫Js會比較好。
作者: Bencrie   2019-03-23 13:14:00
希望 Blender 不會變成這樣
作者: gravity067 (一步一腳印)   2019-03-23 15:26:00
讚 謝謝分享
作者: oopFoo (3d)   2019-03-23 21:16:00
我有想過要port Blender to Web。還在想,哈哈。
作者: iven00000000 (Iven CJ7)   2019-03-29 23:14:00
還真的可能取代,現在連遊戲都可串流了

Links booklink

Contact Us: admin [ a t ] ucptt.com