Hi, I’m programming a game + I want to understand how Phaser and WebGL works. During my research I was testing creating a 30k objects (all from single Atlas texture) mostly for static map purpose and I found out that there is high CPU usage even for static 30k sprites on scene.
My benchmark results for static display of 30k sprites (compare Blitter vs Sprite Group):
1. 60Hz (60 requestAnimationFrame/s)
a) Creating 30k Sprites in Group:
b) Creating 30k Sprites in Blitter
2. 144Hz
a) Creating 30k Sprites in Group:
b) Creating 30k Sprites in Blitter
SpriteGroup60hz30k
SpriteGroup144hz30k
BlitterGroup60hz30k
BlitterGroup144hz30k
About benchmark: Conditions aren’t ideal. There is some performance load due to chrome monitor tool, fps meter is flickering etc. I didn’t mention GPU cause both cases was really quick with GPU, drawing calls number where the same.
But: of course we can see that Blitter is ‘faster’.
From my understanding it’s need less operations during rendering, no need to check if it’s the same texture etc.
At the end my question: Blitter is faster but still need to process a lot to be render. I’ve search phaser code and I assume that in each frame are created Attributes for Vertex (iterate all sprites). Is there any way to create group of sprites (static, not moving, single texture and single pipeline) that cache Attributes arrays for WebGL and doesn’t recalc it every frame? Maybe i’m missing some obvious solution (I hope not) 
Thanks and have a nice day
1 Like
Hi @namonaihito
I know I’m kind of late, but thank you for the post. I was searching a comparison between Sprites and Blitters and your post matched it exactly.
Blitter is faster but still need to process a lot to be render. I’ve search phaser code and I assume that in each frame are created Attributes for Vertex (iterate all sprites). Is there any way to create group of sprites (static, not moving, single texture and single pipeline) that cache Attributes arrays for WebGL and doesn’t recalc it every frame? Maybe i’m missing some obvious solution (I hope not) 
I’m not sure about what you mean by static, but if the sprites are not going to move you can simply render them in a texture and them hide/remove them. Then you can render a single object with the texture instead.
I’m doing this for the shape grid of my game
Hi @Zizaco!
It was couple months ago and I’ve built my own render process. Let me explain what I meant “static”: rendering on texture is an obvious choice if you have many static image and you should use it as often as you can. But the problem is when you want to use Vector and Fragment shader for each sprite. In my current project I’ve created my custom buffer (and sub-buffers, joining system etc) for Vector shader attributes and I’m using cached array to render all sprites via GL. This solution uses only time for copy buffer to GPU and I don’t need to iterate each sprite. I’ve made next step and use buffer index for editing sprite params. Each object has BufferIndex and use it to edit attributes if needed directly in buffer (position, light, size, tint etc).
With this solution I managed rendering thousands of map tiles and all moving objects (with dynamic shader with uniforms) on my scene and rendering time is less than 0.4 ms.
Currently I’m working on animation shader to skip all CPU calculations /iterations for simple animations between 2 poionts. (Vector shader will calc position based on attributes and time).
I’m really enjoy to build efficient system for rendering and updating current game state with shaders. I’ll write post with all my findings and examples when I’ll finish my alpha version
3 Likes
