Show HN: 1M+ animated GPU sprites in JavaScript(phaser.io)
phaser.io
Show HN: 1M+ animated GPU sprites in JavaScript
https://phaser.io/news/2025/01/phaser-v4-beta-5-released
4 comments
This is super cool & I'm impressed that it's working with WebGL.
From reading the code & seeing the examples in the sandbox, it looks like the sprite layer is defined one time (initialization) with specific sprite & animation properties that are exposed to JS via the SpriteGPULayer config https://github.com/phaserjs/phaser/blob/v4.0.0-beta.5/src/ga... , then that class passes the info over to the vertex shader which has ifdefs to determine which animation, other features are enabled for a given SpriteGPULayer - https://github.com/phaserjs/phaser/blob/v4.0.0-beta.5/src/re...
This way you don't end up having to do any updates per frame on the CPU and it remains one draw call for the entire layer right?
Are there other use cases besides from large scale sprite/animated backgrounds that you've thought of?
From reading the code & seeing the examples in the sandbox, it looks like the sprite layer is defined one time (initialization) with specific sprite & animation properties that are exposed to JS via the SpriteGPULayer config https://github.com/phaserjs/phaser/blob/v4.0.0-beta.5/src/ga... , then that class passes the info over to the vertex shader which has ifdefs to determine which animation, other features are enabled for a given SpriteGPULayer - https://github.com/phaserjs/phaser/blob/v4.0.0-beta.5/src/re...
This way you don't end up having to do any updates per frame on the CPU and it remains one draw call for the entire layer right?
Are there other use cases besides from large scale sprite/animated backgrounds that you've thought of?
Yes, this is correct! You _can_ update the GPU Layer data, the API allows it, but you pay the upload cost each time, which is why we framed it as for 'backgrounds' - but in reality, it could be used for anything animated. I mean, you don't HAVE to create 1m sprites! You could just do 100 and it'd still be significantly less overhead than 100 actual sprites. Going to be interesting to see what devs come up with here.
While it is undoubtedly impressive, The demos are a bit slow on my laptop with integrated graphics. In general I prefer to see smooth animation as a priority over image detail. It does become a tough balance to strike, my desktop machines can probably handle this fine.
Just tested on an older (2015) Intel UHD 620 GPU (integrated), and surprisingly all the demos except one hit ~45FPS and up. The first one - Big Forest - struggled to get ~10fps, and was extremely laggy.
Wow, runs smoothly even on much older desktop and Galaxy phones, impressive work
These pack together simple JS object definitions onto the GPU and renders them using a custom vertex shader. This skips all CPU computation and GPU upload operations, resulting in vastly increased performance. For objects that don't need to be updated by input, physics, or other interactive behaviors, we found it to be a great solution.
In testing, we've easily managed to blast millions of sprites around on moderate desktop-grade GPUs. Indeed, we hit the fill rate limitation of the GPU far sooner than we hit any other type of limitation. But as with all hardware-related things, ymmv. Frankly, we'd love to get our hands on a 5090 to see what we could do.
The link includes 4 demos to play with, and the full source is on GitHub and npm under the MIT license.