為什麼這篇WebGL 2D鄉民發文收入到精華區：因為在WebGL 2D這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者oopFoo (3d)看板GameDesign標題[程式] HTML5 webgl 2D引擎的笑...
昨天分享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了 08/18 08:58
→ oopFoo: wasm是加分，繪圖也要快才行 08/18 10:10
→ dreamnook: 推 只是cd 08/18 10:34
→ dreamnook: pixijs 跟 phraser js 好像都有一定客群 08/18 10:36
→ dreamnook: rpgmaker mv印象中是base pixijs的樣子 08/18 10:36
推 Bencrie: 都 4 瀏覽器不好 (x 08/18 12:49
推 kingroy: 都在用3d的 2d反而不熟 08/18 15:33
→ oopFoo: 真的很久沒看2D的。今天多看 一下，格鬥三人組4都出了。 08/18 19:39
→ oopFoo: 遊戲魂大爆發。不過看Xbox X 的die shot. 08/18 19:41
→ oopFoo: 看gpu的面積，還是把程式運算交給gpu好了。 08/18 19:42
推 wangm4a1: 試用過Phaser 不太推薦 除非是即有範例小改 08/19 11:27
→ oopFoo: 今天看一下cocos-creator.看起來是文件最完整。 08/19 18:23