[心得] 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