6 ms·
Speaking of batching, I look at this demo [1] on my mobile phone, and I can get ~3500 sprites without dropping below 60FPS. A web page may not be able to reuse
by SomeCallMeTim 9y ago
Speaking of batching, I look at this demo [1] on my mobile phone, and I can get ~3500 sprites without dropping below 60FPS.
A web page may not be able to reuse as much image data, I know. But smart game engines frequently look for ways to better batch sprites.
And technically speaking, if you're using a Z-buffer, you don't need to sort opaque layers at all. You can draw the layers in back and then draw more layers in front. Yes, you get overdraw in that case, but if you're using Z values for layering, you could potentially get better batches by drawing in arbitrary order (i.e., relying on Z-depth to enforce opaque object order), and in my experience larger batches gives you a bigger advantage than reducing overdraw.
[1] http://www.goodboydigital.com/pixijs/bunnymark/ http://www.goodboydigital.com/pixijs/bunnymark/
- markdog12 9y agoInterestingly, WebRender renders that demo at about 2fps. It's obviously a bug though, if you hold in the mouse, it's 60fps. Win 10, latest nightly, WebRender enabled
- steveklabnik 9y agoWeird; I'm on Win 10 with the latest nightly and WebRender enabled, I'm still getting 60fps with 10,000 bunnies. Maybe file a bug?
- markdog12 9y agoInterestingly enough, I'm getting same result on Mac OS. Unless I hold in the mouse, I get about 2 fps. Seems like the same result on all canvas instances. I'll file a bug. Edit: https://bugzilla.mozilla.org/show_bug.cgi?id=1407448 https://bugzilla.mozilla.org/show_bug.cgi?id=1407448
- MBCook 9y agoSafari obviously has some optimization’s being used. On my iPhone 7 it had no issues at all until around 60k. At that point adding new bunnies would slow it down but as soon as you stopped touching it would pop back up to 60fps. I had to get to hundreds of thousands (maybe 250k?) and it started bouncing between 40 and 60. Very neat.
- chronial 9y agoAs far as I understand this, that demo will have no benefit whatsoever from the changes described in the article. Since it uses <canvas> with WebGL, it has always done all its rendering on the GPU in a videogame style way – in any version of any browser.
- SomeCallMeTim 9y agoCorrect. But the idea is that WebRender uses the same (general) techniques that a game-engine like this would use to make web page renders happen faster.