Show HN: WebGL Sprites Benchmark (opens in new tab)

(haxor.xyz)

38 pointseduardo-costa10y ago23 comments

23 comments

On my Mint Desktop:

    Firefox 40.0: 1000 Bunnies at 12 FPS
    Firefox 40.0: 10000 Bunnies at 12 FPS
    Firefox 40.0: 20000 Bunnies at 12 FPS
    Firefox 40.0: 30000 Bunnies at 12 FPS
    
    Chrome 44.0: 1000 Bunnies at 60 FPS
    Chrome 44.0: 10000 Bunnies at 60 FPS
    Chrome 44.0: 30000 Bunnies at 30 FPS

Why this extreme difference between Chrome and Firefox?

about:config in Firefox says "GPU Accelerated Windows: 0/3" so I guess it is somehow not using the GPU. Although then Im surprised it can render 30k bunnies at 12 FPS. On the other hand, it says "WebGL Renderer: NVIDIA Corporation -- GeForce GT 630/PCIe/SSE2". So I guess it's using the GPU. Also I would expect this WebGL demo to not even run without FF using the GPU. Strange. Any ideas?

fulafel10y ago

https://bugzilla.mozilla.org/show_bug.cgi?id=751082 -> https://bugzilla.mozilla.org/show_bug.cgi?id=594876 & https://bugzilla.mozilla.org/show_bug.cgi?id=942302

The issue seems to be in some kind of limbo, with many users reporting that the compositing mode doesn't even make a difference.

irq-110y ago

On Windows both Firefox and Chrome use ANGLE [0] to translate WebGL into DirectX calls, so this will be an issue in the browser not the driver or hardware.

[0] https://code.google.com/p/angleproject/

TD-Linux10y ago

The bunnies are being rendered on your GPU, but the final frames are being slowly composited in software. There is no fast path to quickly composite WebGL output on Linux yet.

mappu10y ago

300 000 sprites, i5 2500, R9 270, Windows 8

- Chrome 44: 60 FPS constant

- Firefox 39: 49 FPS

- Firefox 40: 59-60 FPS

- IE 11: 10-12 FPS, very poor.

The FPS counter doesn't appear on my smartphone (falcon, CM12.1 Browser), but i would estimate the performance is at about 10-15FPS at the default number of sprites, let alone the full 300 000.

satori9910y ago

For me, (nVidia GTX 980) Chrome beats Firefox on Windows 8.1 by a lot when rendering 300,000 bunnies.

- Chrome 44: 100 FPS

- Firefox 40: 60 FPS

- IE 11: 10 FPS

I don't think that FF is limiting itself to 60 FPS as I have a 144Hz monitor and other WebGL demos can render at frame rates well in excess of 60 FPS in firefox.

ahoge10y ago

Firefox's rAF implementation is currently hardcoded at 60 FPS.

https://bugzilla.mozilla.org/show_bug.cgi?id=707884

1 more reply

TwoBit10y ago

Just a black screen on both Firefox Android and Chrome Android.

zobzu10y ago

Wfm nightly z3c and its fluid but cant see fps counter

emn1310y ago

FF 40.0.0.3 22-23fps 23fps

FF nightly 2015-08-31 24fps

chrome 44.0.2403.157 (64bit) 26fps

MS Edge 20.10240.16384.0 30-33fps

(i7-4770k igfx)

The differences weren't visually very apparent. None of the browsers seemed to have periodic GC lag, which in the past certainly was an issue.

I'm curious: which browser did you develop this with/optimize on?

eduardo-costaOP10y ago

Chrome 44. The trick is to create 1 Mesh with 300.000 or more planes and render all stuff once. I pass the x,y data to a texture and sample it in the shader.

daurnimator10y ago

300000 sprites, i7-4712HQ, Linux

  - Chrome 44: between 10 and 20 fps.
  - Firefox 40: *very long load time* constant 14 fps

fla10y ago

This demo is very impressive !

300000 sprites

fps: 59-60

os: Linux

browser: Chrome 44

cpu: i7-3930k

gpu: GTX 970

driver: Nvidia 346.47

eduardo-costaOP10y ago

OP Here! Thank you for the data!

The hash worked here! http://haxor.xyz/demos/bunny-mark/#500000

For mobile, only touching and adding bunnies (with possible bugs for iOS)

Some extra info. I'm updating the [x,y] on JS and the rest is 1 drawcall in the WebGL side.

FunLover10y ago

IPad here: 1000 bunnies fall down. Apart from that, nothing happens. No FPS, no controls, nothing.

Rygu10y ago

Seems that screen/window resolution is an important factor.

fenomas10y ago

I think it's meant to be a stress test of their particular way of rendering Haxe sprites, not a measure of WebGL or browser performance.

It also seems ripe for tuning; it appears to leak a dom object every frame and churn through memory at a pretty epic rate :) (at least per chrome dev tools)

eduardo-costaOP10y ago

Sometime ago I profiled the FPS Stats tool and it generated some DOM garbage!

nness10y ago

Wow, 100,000 sprites running at a constant 60 FPS in Chrome on a Mid-2014 MBP. Very cool.

greggman10y ago

Interesting: I've got a Mid-2014 MBP and was only getting chunky 33fps at 40k

ousta10y ago

how do you increase to more than 300K he says to modify the hash but this does not work on my comp

eduardo-costaOP10y ago

http://haxor.xyz/demos/bunny-mark/#500000

j / k navigate · click thread line to collapse

23 comments

FunLover10y ago

On my Mint Desktop:

    Firefox 40.0: 1000 Bunnies at 12 FPS
    Firefox 40.0: 10000 Bunnies at 12 FPS
    Firefox 40.0: 20000 Bunnies at 12 FPS
    Firefox 40.0: 30000 Bunnies at 12 FPS
    
    Chrome 44.0: 1000 Bunnies at 60 FPS
    Chrome 44.0: 10000 Bunnies at 60 FPS
    Chrome 44.0: 30000 Bunnies at 30 FPS

Why this extreme difference between Chrome and Firefox?

fulafel10y ago

https://bugzilla.mozilla.org/show_bug.cgi?id=751082 -> https://bugzilla.mozilla.org/show_bug.cgi?id=594876 & https://bugzilla.mozilla.org/show_bug.cgi?id=942302

The issue seems to be in some kind of limbo, with many users reporting that the compositing mode doesn't even make a difference.

irq-110y ago

On Windows both Firefox and Chrome use ANGLE [0] to translate WebGL into DirectX calls, so this will be an issue in the browser not the driver or hardware.

[0] https://code.google.com/p/angleproject/

TD-Linux10y ago

The bunnies are being rendered on your GPU, but the final frames are being slowly composited in software. There is no fast path to quickly composite WebGL output on Linux yet.

mappu10y ago

300 000 sprites, i5 2500, R9 270, Windows 8

- Chrome 44: 60 FPS constant

- Firefox 39: 49 FPS

- Firefox 40: 59-60 FPS

- IE 11: 10-12 FPS, very poor.

The FPS counter doesn't appear on my smartphone (falcon, CM12.1 Browser), but i would estimate the performance is at about 10-15FPS at the default number of sprites, let alone the full 300 000.

satori9910y ago

For me, (nVidia GTX 980) Chrome beats Firefox on Windows 8.1 by a lot when rendering 300,000 bunnies.

- Chrome 44: 100 FPS

- Firefox 40: 60 FPS

- IE 11: 10 FPS

I don't think that FF is limiting itself to 60 FPS as I have a 144Hz monitor and other WebGL demos can render at frame rates well in excess of 60 FPS in firefox.

ahoge10y ago

Firefox's rAF implementation is currently hardcoded at 60 FPS.

https://bugzilla.mozilla.org/show_bug.cgi?id=707884

1 more reply

TwoBit10y ago

Just a black screen on both Firefox Android and Chrome Android.

zobzu10y ago

Wfm nightly z3c and its fluid but cant see fps counter

emn1310y ago

FF 40.0.0.3 22-23fps 23fps

FF nightly 2015-08-31 24fps

chrome 44.0.2403.157 (64bit) 26fps

MS Edge 20.10240.16384.0 30-33fps

(i7-4770k igfx)

The differences weren't visually very apparent. None of the browsers seemed to have periodic GC lag, which in the past certainly was an issue.

I'm curious: which browser did you develop this with/optimize on?

eduardo-costaOP10y ago

Chrome 44. The trick is to create 1 Mesh with 300.000 or more planes and render all stuff once. I pass the x,y data to a texture and sample it in the shader.

daurnimator10y ago

300000 sprites, i7-4712HQ, Linux

  - Chrome 44: between 10 and 20 fps.
  - Firefox 40: *very long load time* constant 14 fps

fla10y ago

This demo is very impressive !

300000 sprites

fps: 59-60

os: Linux

browser: Chrome 44

cpu: i7-3930k

gpu: GTX 970

driver: Nvidia 346.47

eduardo-costaOP10y ago

OP Here! Thank you for the data!

The hash worked here! http://haxor.xyz/demos/bunny-mark/#500000

For mobile, only touching and adding bunnies (with possible bugs for iOS)

Some extra info. I'm updating the [x,y] on JS and the rest is 1 drawcall in the WebGL side.

FunLover10y ago

IPad here: 1000 bunnies fall down. Apart from that, nothing happens. No FPS, no controls, nothing.

Rygu10y ago

Seems that screen/window resolution is an important factor.

fenomas10y ago

I think it's meant to be a stress test of their particular way of rendering Haxe sprites, not a measure of WebGL or browser performance.

It also seems ripe for tuning; it appears to leak a dom object every frame and churn through memory at a pretty epic rate :) (at least per chrome dev tools)

eduardo-costaOP10y ago

Sometime ago I profiled the FPS Stats tool and it generated some DOM garbage!

nness10y ago

Wow, 100,000 sprites running at a constant 60 FPS in Chrome on a Mid-2014 MBP. Very cool.

greggman10y ago

Interesting: I've got a Mid-2014 MBP and was only getting chunky 33fps at 40k

ousta10y ago

how do you increase to more than 300K he says to modify the hash but this does not work on my comp

eduardo-costaOP10y ago

http://haxor.xyz/demos/bunny-mark/#500000

j / k navigate · click thread line to collapse