[程式] 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