[程式] HTML5 webgl 2D引擎的笑能

楼主: oopFoo (3d)   2020-08-18 07:39:14
昨天分享2D编辑器后,就稍微看看PixiJS的webgl shader原始码。
看了吐血,再看PhaserJs,没错,真的是PixiJS forked来的,吐血的地方一样。
不确定自己是不是误解程式,网络找找有没资料,看到有人分析PixiJS的Batch Rendering
https://medium.com/swlh/inside-pixijs-batch-rendering-system-fad1b466c420
没错,我没误解,fragment Shader里面用%forloop%来选择Texture Binding。真的在fragment Shader跑一长串if else来选texture,每一个画出来的点都要跑if else。这样绘图速度怎么会快呢?
是,你不能用non constant index来address array,所以只能用if else或loop,但与其这样还不如rebind texture,而且webgl 2支援non-constant index,可以加个Webgl2的 backend,这样70%的电脑手机可以大幅加速。
会写出这种fragment shader大概是不够了解硬件跟软件。不管如何PixiJS是号称最快的Renderer,但我看大概连GPU的1%能力都发挥不出来。
我知道这些引擎是从Canvas2D延伸来的,所以沿用2d的绘图方式是正常的,不过既然gpu已经是标配n年了,重新架构来提升速度是应该要作的。
粗浅的想法,写最少的程式到最多的程式。
+webgl2的backend,简单10x~100x的加速。
webgl1,去除%forloop%,batch by texture,要稍微动到batching code。加速10x?
重新架构renderer,用Webgl的instance drawing。多加5x?
不过真的有人在用PixiJS或PhaserJS吗?如果没人用,我也懒的去contribute。
PS:
https://developer.nvidia.com/content/how-modern-opengl-can-radically-reduce-driver-overhead-0
要最佳化gpu的基本,webgl2可以作到大部分,但真的还是要等Webgpu来解放gpu的效能。
我也是很无聊,不在游戏业这么久了还在关心这些事。
作者: damody (天亮damody)   2020-08-18 08:58:00
效能党都用wasm了
楼主: oopFoo (3d)   2020-08-18 10:10:00
wasm是加分,绘图也要快才行
作者: dreamnook (亚龙)   2020-08-18 10:34:00
推 只是cdpixijs 跟 phraser js 好像都有一定客群rpgmaker mv印象中是base pixijs的样子
作者: Bencrie   2020-08-18 12:49:00
都 4 浏览器不好 (x
作者: kingroy (手残总比脑残好)   2020-08-18 15:33:00
都在用3d的 2d反而不熟
楼主: oopFoo (3d)   2020-08-18 19:39:00
真的很久没看2D的。今天多看 一下,格斗三人组4都出了。游戏魂大爆发。不过看Xbox X 的die shot.https://i.imgur.com/YCJw4wj.jpg看gpu的面积,还是把程式运算交给gpu好了。
作者: wangm4a1 (水兵)   2020-08-19 11:27:00
试用过Phaser 不太推荐 除非是即有范例小改
楼主: oopFoo (3d)   2020-08-19 18:23:00
今天看一下cocos-creator.看起来是文件最完整。

Links booklink

Contact Us: admin [ a t ] ucptt.com