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

[oopFoo (3d)]

昨天分享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的效能。
我也是很無聊，不在遊戲業這麼久了還在關心這些事。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.137.191.156 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1597707561.A.9D7.html
推 damody: 效能黨都用wasm了
→ oopFoo: wasm是加分，繪圖也要快才行
→ dreamnook: 推 只是cd
→ dreamnook: pixijs 跟 phraser js 好像都有一定客群
→ dreamnook: rpgmaker mv印象中是base pixijs的樣子
推 Bencrie: 都 4 瀏覽器不好 (x
推 kingroy: 都在用3d的 2d反而不熟
→ oopFoo: 真的很久沒看2D的。今天多看 一下，格鬥三人組4都出了。
→ oopFoo: 遊戲魂大爆發。不過看Xbox X 的die shot.
→ oopFoo: https://i.imgur.com/YCJw4wj.jpg
→ oopFoo: 看gpu的面積，還是把程式運算交給gpu好了。
推 wangm4a1: 試用過Phaser 不太推薦 除非是即有範例小改
→ oopFoo: 今天看一下cocos-creator.看起來是文件最完整。