Emscripten SDL2 performance

Rob_Probin · February 16, 2020, 2:10pm

Hi - anyone got any ideas how many SDL_RenderCopy and SDL_RenderFillRect we should be able to do per frame, when in emscripten/wasm?

On on a 2015MBP 2.8 GHz Intel Core i7, AMD Radeon R9 M370X 2 GB, Intel Iris Pro 1536 MB,

Here are some results for FireFox 72.0.2 (64-bit), using the test program that can be downloaded from http://robprobin.com/dl_files/SDL2_emscripten_tests.zip

Edit: Try here: http://robprobin.com/SDL2_emscripten_tests/

#define SPRITE_BACKGROUND 0
#define ENABLE_COLOUR_KEY 0
#define ENABLE_BLEND_MODE 0
#define ENABLE_FOX 1

Astrid:SDL2_emscripten_tests rob$ emcc -o sdl2_test.html sdl2_test.cpp -Wall -O3 -s USE_SDL=2 --preload-file img@ --emrun
Astrid:SDL2_emscripten_tests rob$ emrun --serve_after_close sdl2_test.html
Starting browser: open http://localhost:6931/sdl2_test.html
Starting main loop
FPS = 38.461538 inf inf Sprites=100 Rects=0
FPS = 47.619048 58.882449 66.666667 Sprites=100 Rects=0
FPS = 47.619048 58.921400 66.666667 Sprites=200 Rects=0
FPS = 47.619048 59.135036 66.666667 Sprites=200 Rects=0
FPS = 47.619048 58.933573 71.428571 Sprites=300 Rects=0
FPS = 47.619048 58.822777 71.428571 Sprites=300 Rects=0
FPS = 47.619048 58.564789 66.666667 Sprites=400 Rects=0
FPS = 43.478261 58.898571 66.666667 Sprites=400 Rects=0
FPS = 47.619048 59.682079 71.428571 Sprites=500 Rects=0
FPS = 50.000000 59.415205 66.666667 Sprites=500 Rects=0
FPS = 47.619048 56.378124 71.428571 Sprites=600 Rects=0
FPS = 40.000000 50.672607 66.666667 Sprites=600 Rects=0
FPS = 38.461538 45.136617 62.500000 Sprites=700 Rects=0
FPS = 35.714286 44.113496 62.500000 Sprites=700 Rects=0
FPS = 30.303030 40.294267 71.428571 Sprites=800 Rects=0
FPS = 27.027027 41.572716 62.500000 Sprites=800 Rects=0
FPS = 25.000000 35.806923 62.500000 Sprites=900 Rects=0
FPS = 23.255814 37.242214 66.666667 Sprites=900 Rects=0
FPS = 25.000000 36.303895 66.666667 Sprites=1000 Rects=0
FPS = 27.027027 36.066495 62.500000 Sprites=1000 Rects=0
FPS = 23.809524 32.917964 62.500000 Sprites=1100 Rects=0
FPS = 22.727273 33.083493 66.666667 Sprites=1100 Rects=0
FPS = 20.833333 30.906043 71.428571 Sprites=1200 Rects=0
FPS = 15.384615 29.445245 58.823529 Sprites=1200 Rects=0
FPS = 15.625000 29.262815 71.428571 Sprites=1300 Rects=0
FPS = 13.698630 27.892530 71.428571 Sprites=1300 Rects=0
FPS = 14.492754 27.159995 66.666667 Sprites=1400 Rects=0
FPS = 9.433962 27.116049 66.666667 Sprites=1400 Rects=0
FPS = 12.345679 24.000651 62.500000 Sprites=1500 Rects=0
FPS = 12.500000 23.386089 58.823529 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 22.222222 57.572475 66.666667 Sprites=0 Rects=100
FPS = 45.454545 58.400911 66.666667 Sprites=0 Rects=100
FPS = 45.454545 59.030687 71.428571 Sprites=0 Rects=200
FPS = 45.454545 58.612761 66.666667 Sprites=0 Rects=200
FPS = 47.619048 58.335145 66.666667 Sprites=0 Rects=300
FPS = 47.619048 58.942935 66.666667 Sprites=0 Rects=300
FPS = 47.619048 59.009871 66.666667 Sprites=0 Rects=400
FPS = 47.619048 58.485777 66.666667 Sprites=0 Rects=400
FPS = 50.000000 59.343754 66.666667 Sprites=0 Rects=500
FPS = 45.454545 59.099154 66.666667 Sprites=0 Rects=500
FPS = 33.333333 59.075561 66.666667 Sprites=0 Rects=600
FPS = 34.482759 58.244607 66.666667 Sprites=0 Rects=600
FPS = 26.315789 54.782814 66.666667 Sprites=0 Rects=700
FPS = 26.315789 54.454822 71.428571 Sprites=0 Rects=700
FPS = 28.571429 48.223897 62.500000 Sprites=0 Rects=800
FPS = 27.027027 47.058400 62.500000 Sprites=0 Rects=800
FPS = 10.869565 35.806676 66.666667 Sprites=0 Rects=900
FPS = 30.303030 43.302954 62.500000 Sprites=0 Rects=900
FPS = 10.752688 31.935921 66.666667 Sprites=0 Rects=1000
FPS = 22.727273 37.011391 66.666667 Sprites=0 Rects=1000
FPS = 7.407407 29.539633 66.666667 Sprites=0 Rects=1100
FPS = 19.230769 32.499471 66.666667 Sprites=0 Rects=1100
FPS = 7.246377 28.151898 66.666667 Sprites=0 Rects=1200
FPS = 22.727273 33.877094 62.500000 Sprites=0 Rects=1200
FPS = 8.547009 28.419470 62.500000 Sprites=0 Rects=1300
FPS = 19.230769 31.247830 62.500000 Sprites=0 Rects=1300
FPS = 6.451613 24.660696 58.823529 Sprites=0 Rects=1400
FPS = 15.625000 28.398354 62.500000 Sprites=0 Rects=1400
FPS = 7.194245 24.171073 55.555556 Sprites=0 Rects=1500
FPS = 15.625000 28.334136 66.666667 Sprites=0 Rects=1500
Switch to variable rects
FPS = 40.000000 57.776135 66.666667 Sprites=0 Rects=100
FPS = 47.619048 58.698278 71.428571 Sprites=0 Rects=100
FPS = 47.619048 58.173067 71.428571 Sprites=0 Rects=200
FPS = 43.478261 58.660413 66.666667 Sprites=0 Rects=200
FPS = 50.000000 59.491345 71.428571 Sprites=0 Rects=300
FPS = 45.454545 59.360781 66.666667 Sprites=0 Rects=300
FPS = 47.619048 58.923058 66.666667 Sprites=0 Rects=400
FPS = 45.454545 58.478807 66.666667 Sprites=0 Rects=400
FPS = 41.666667 59.301148 66.666667 Sprites=0 Rects=500
FPS = 38.461538 58.737917 66.666667 Sprites=0 Rects=500
FPS = 41.666667 57.537616 66.666667 Sprites=0 Rects=600
FPS = 26.315789 57.651031 66.666667 Sprites=0 Rects=600
FPS = 25.000000 49.127283 62.500000 Sprites=0 Rects=700
FPS = 29.411765 46.381822 66.666667 Sprites=0 Rects=700
FPS = 29.411765 43.535638 62.500000 Sprites=0 Rects=800
FPS = 9.174312 36.504504 66.666667 Sprites=0 Rects=800
FPS = 25.000000 37.780087 62.500000 Sprites=0 Rects=900
FPS = 25.641026 36.274479 58.823529 Sprites=0 Rects=900
FPS = 20.000000 33.847602 66.666667 Sprites=0 Rects=1000
FPS = 20.833333 36.137052 66.666667 Sprites=0 Rects=1000
FPS = 16.949153 32.096366 62.500000 Sprites=0 Rects=1100
FPS = 18.867925 31.430233 62.500000 Sprites=0 Rects=1100
FPS = 17.857143 31.968774 58.823529 Sprites=0 Rects=1200
FPS = 18.867925 30.741849 62.500000 Sprites=0 Rects=1200
FPS = 15.384615 29.121713 62.500000 Sprites=0 Rects=1300
FPS = 17.241379 27.991839 52.631579 Sprites=0 Rects=1300
FPS = 16.129032 27.502781 62.500000 Sprites=0 Rects=1400
FPS = 16.949153 29.145233 62.500000 Sprites=0 Rects=1400
FPS = 13.698630 25.340574 62.500000 Sprites=0 Rects=1500
FPS = 14.492754 26.665220 58.823529 Sprites=0 Rects=1500
Switch to sprites
FPS = 40.000000 58.883001 66.666667 Sprites=100 Rects=0
FPS = 45.454545 58.954092 71.428571 Sprites=100 Rects=0
FPS = 50.000000 58.720939 66.666667 Sprites=200 Rects=0
FPS = 47.619048 58.349827 66.666667 Sprites=200 Rects=0
FPS = 47.619048 58.642834 66.666667 Sprites=300 Rects=0
FPS = 45.454545 58.837905 66.666667 Sprites=300 Rects=0
FPS = 47.619048 58.625183 71.428571 Sprites=400 Rects=0
FPS = 43.478261 59.768222 71.428571 Sprites=400 Rects=0

#define SPRITE_BACKGROUND 0
#define ENABLE_COLOUR_KEY 1
#define ENABLE_BLEND_MODE 1
#define ENABLE_FOX 0

Astrid:SDL2_emscripten_tests rob$ emcc -o sdl2_test.html sdl2_test.cpp -Wall -O3 -s USE_SDL=2 --preload-file img@ --emrun
Astrid:SDL2_emscripten_tests rob$ emrun --serve_after_close sdl2_test.html
Starting browser: open http://localhost:6931/sdl2_test.html
Pixel Uint32 = 1
Starting main loop
FPS = 30.303030 inf inf Sprites=100 Rects=0
FPS = 47.619048 58.933998 66.666667 Sprites=100 Rects=0
FPS = 47.619048 57.980782 71.428571 Sprites=200 Rects=0
FPS = 47.619048 59.721388 71.428571 Sprites=200 Rects=0
FPS = 47.619048 60.229429 71.428571 Sprites=300 Rects=0
FPS = 47.619048 59.038502 66.666667 Sprites=300 Rects=0
FPS = 47.619048 58.656604 66.666667 Sprites=400 Rects=0
FPS = 47.619048 59.307429 66.666667 Sprites=400 Rects=0
FPS = 47.619048 59.706645 66.666667 Sprites=500 Rects=0
FPS = 50.000000 59.710433 66.666667 Sprites=500 Rects=0
FPS = 45.454545 56.541212 66.666667 Sprites=600 Rects=0
FPS = 47.619048 56.231136 66.666667 Sprites=600 Rects=0
FPS = 41.666667 49.129171 58.823529 Sprites=700 Rects=0
FPS = 35.714286 47.104149 62.500000 Sprites=700 Rects=0
FPS = 19.230769 43.632465 62.500000 Sprites=800 Rects=0
FPS = 38.461538 43.717891 50.000000 Sprites=800 Rects=0
FPS = 16.393443 37.117091 66.666667 Sprites=900 Rects=0
FPS = 18.867925 38.424433 66.666667 Sprites=900 Rects=0
FPS = 19.230769 35.673975 66.666667 Sprites=1000 Rects=0
FPS = 21.739130 34.240274 66.666667 Sprites=1000 Rects=0
FPS = 14.705882 30.175335 62.500000 Sprites=1100 Rects=0
FPS = 16.666667 31.503972 62.500000 Sprites=1100 Rects=0
FPS = 13.888889 30.394848 66.666667 Sprites=1200 Rects=0
FPS = 19.607843 31.198802 66.666667 Sprites=1200 Rects=0
FPS = 14.084507 27.291215 66.666667 Sprites=1300 Rects=0
FPS = 14.084507 26.972521 66.666667 Sprites=1300 Rects=0
FPS = 12.500000 25.099889 66.666667 Sprites=1400 Rects=0
FPS = 14.285714 24.762110 58.823529 Sprites=1400 Rects=0
FPS = 12.048193 20.847936 47.619048 Sprites=1500 Rects=0
FPS = 12.820513 21.002445 23.809524 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 34.482759 58.851664 66.666667 Sprites=0 Rects=100
FPS = 43.478261 59.281200 66.666667 Sprites=0 Rects=100
FPS = 41.666667 59.342356 66.666667 Sprites=0 Rects=200

#define SPRITE_BACKGROUND 0
#define ENABLE_COLOUR_KEY 0
#define ENABLE_BLEND_MODE 0
#define ENABLE_FOX 1

NOTICE: -s WASM=0

Astrid:SDL2_emscripten_tests rob$ emcc -o sdl2_test.html sdl2_test.cpp -Wall -O3 -s USE_SDL=2 --preload-file img@ --emrun -s WASM=0
Starting browser: open http://localhost:6931/sdl2_test.html
Starting main loop
FPS = 47.619048 inf inf Sprites=100 Rects=0
FPS = 45.454545 58.830078 66.666667 Sprites=100 Rects=0
FPS = 45.454545 59.942070 71.428571 Sprites=200 Rects=0
FPS = 47.619048 59.779043 71.428571 Sprites=200 Rects=0
FPS = 50.000000 59.677718 66.666667 Sprites=300 Rects=0
FPS = 47.619048 59.673679 66.666667 Sprites=300 Rects=0
FPS = 50.000000 59.355005 66.666667 Sprites=400 Rects=0
FPS = 50.000000 60.167228 71.428571 Sprites=400 Rects=0
FPS = 50.000000 59.713121 66.666667 Sprites=500 Rects=0
FPS = 45.454545 58.981458 71.428571 Sprites=500 Rects=0
FPS = 45.454545 56.888183 62.500000 Sprites=600 Rects=0
FPS = 47.619048 57.156238 66.666667 Sprites=600 Rects=0
FPS = 35.714286 46.901088 62.500000 Sprites=700 Rects=0
FPS = 40.000000 49.421870 62.500000 Sprites=700 Rects=0
FPS = 35.714286 43.038074 55.555556 Sprites=800 Rects=0
FPS = 31.250000 41.403758 66.666667 Sprites=800 Rects=0
FPS = 27.027027 37.941889 66.666667 Sprites=900 Rects=0
FPS = 27.027027 36.830214 62.500000 Sprites=900 Rects=0
FPS = 22.222222 32.955286 66.666667 Sprites=1000 Rects=0
FPS = 26.315789 36.313981 62.500000 Sprites=1000 Rects=0
FPS = 22.727273 33.327957 62.500000 Sprites=1100 Rects=0
FPS = 21.739130 33.336796 62.500000 Sprites=1100 Rects=0
FPS = 18.867925 30.209232 66.666667 Sprites=1200 Rects=0
FPS = 20.833333 31.309010 62.500000 Sprites=1200 Rects=0
FPS = 16.949153 29.314049 66.666667 Sprites=1300 Rects=0
FPS = 18.867925 29.124239 66.666667 Sprites=1300 Rects=0
FPS = 17.543860 27.239759 62.500000 Sprites=1400 Rects=0
FPS = 17.241379 27.383164 62.500000 Sprites=1400 Rects=0
FPS = 15.873016 25.827392 62.500000 Sprites=1500 Rects=0
FPS = 16.129032 26.595720 66.666667 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 45.454545 58.992955 66.666667 Sprites=0 Rects=100

Test with sprite movement disabled.

Astrid:SDL2_emscripten_tests rob$ emcc -o sdl2_test.html sdl2_test.cpp -Wall -O3 -s USE_SDL=2 --preload-file img@ --emrun
sdl2_test.cpp:238:9: warning: unused variable ‘maxx’ [-Wunused-variable]
int maxx = w - SPRITE_SIZE;
^
sdl2_test.cpp:239:9: warning: unused variable ‘maxy’ [-Wunused-variable]
int maxy = h - SPRITE_SIZE;
^
sdl2_test.cpp:240:9: warning: unused variable ‘minx’ [-Wunused-variable]
int minx = 0;
^
sdl2_test.cpp:241:9: warning: unused variable ‘miny’ [-Wunused-variable]
int miny = 0;
^
4 warnings generated.
Astrid:SDL2_emscripten_tests rob$ emrun --serve_after_close sdl2_test.html
Starting browser: open http://localhost:6931/sdl2_test.html
Starting main loop
FPS = 45.454545 inf inf Sprites=100 Rects=0
FPS = 47.619048 59.009708 71.428571 Sprites=100 Rects=0
FPS = 47.619048 58.596394 71.428571 Sprites=200 Rects=0
FPS = 47.619048 59.223933 71.428571 Sprites=200 Rects=0
FPS = 45.454545 59.117137 66.666667 Sprites=300 Rects=0
FPS = 45.454545 59.326300 66.666667 Sprites=300 Rects=0
FPS = 45.454545 58.685733 66.666667 Sprites=400 Rects=0
FPS = 47.619048 59.290552 66.666667 Sprites=400 Rects=0
FPS = 47.619048 58.591147 66.666667 Sprites=500 Rects=0
FPS = 47.619048 59.079981 66.666667 Sprites=500 Rects=0
FPS = 50.000000 56.875251 66.666667 Sprites=600 Rects=0
FPS = 47.619048 56.950331 66.666667 Sprites=600 Rects=0
FPS = 40.000000 49.463765 62.500000 Sprites=700 Rects=0
FPS = 38.461538 49.585487 66.666667 Sprites=700 Rects=0
FPS = 33.333333 44.246863 62.500000 Sprites=800 Rects=0
FPS = 35.714286 44.200764 66.666667 Sprites=800 Rects=0
FPS = 29.411765 40.159422 66.666667 Sprites=900 Rects=0
FPS = 30.303030 39.618298 58.823529 Sprites=900 Rects=0
FPS = 25.641026 36.535071 71.428571 Sprites=1000 Rects=0
FPS = 17.857143 36.276476 62.500000 Sprites=1000 Rects=0
FPS = 20.000000 33.726883 62.500000 Sprites=1100 Rects=0
FPS = 23.809524 33.547046 66.666667 Sprites=1100 Rects=0
FPS = 20.833333 31.575828 66.666667 Sprites=1200 Rects=0
FPS = 20.833333 31.137702 62.500000 Sprites=1200 Rects=0
FPS = 17.543860 29.496992 66.666667 Sprites=1300 Rects=0
FPS = 18.181818 29.072709 66.666667 Sprites=1300 Rects=0
FPS = 17.543860 27.557977 62.500000 Sprites=1400 Rects=0
FPS = 19.230769 26.774554 47.619048 Sprites=1400 Rects=0
FPS = 14.285714 25.829726 62.500000 Sprites=1500 Rects=0
FPS = 14.705882 26.397934 66.666667 Sprites=1500 Rects=0
Switch to fixed width rects

Rob_Probin · February 16, 2020, 2:25pm

Assuming my code is right, over a 120 frame sample, this FPS should be min, average and max. My concern is that the average is min and average are low, and I don’t know why. The max framerate is great

I have about another 16 apps running, and 10 tabs open in Firefox. However, the processor load is 4%, and this is a quad core machine with hyperthreading and a SSD.

Ideas welcome on the variability or my crappy code. I tried to make the code as simple as possible - and copied fragments from the wiki and also the SDL2 Happy face demo by Holmes Futrell, although all errors are mine. I’m using SDL_GetPerformanceCounter for timing - although usually I use SDL_GetTicks - which is where I noticed the FPS problem in my game ported to the web. The native binary version of my game is fine, even with a fully loaded machine, as far as I can tell (60FPS).

Rob_Probin · February 16, 2020, 2:27pm

Switch to fixed width rects are 32x32 pixel - which I use for multicolour background on character rendering.

The game is a port of an old ZX Spectrum game http://robprobin.com/pmwiki.php?n=Main.Gulpman - atlhough some of my newer games use a much enhanced version of this engine.

The game itself generates 408 render copies and 810 draw blanks (for character background colour) with Fill Rects.

Rob_Probin · February 16, 2020, 5:00pm

Anyone wanting to try it locally without compiling it, you can click here to try:
http://robprobin.com/SDL2_emscripten_tests/

sjr · February 18, 2020, 4:46am

My emscripten install is totally hosed apparently, so I can’t test it, but:
1)Instead of setting a target FPS to 60, set it to 0. Per the emscripten docs, this will make it request frames from the browser, which will typically be at the monitor’s native refresh rate.
2)Are you generating a build that uses WebGL? IIRC there are some extra build options you need to supply to make it use WebGL, otherwise you get software rendering.

okuoku · February 18, 2020, 7:17pm

It seems you have called emscripten_set_main_loop with non zero FPS specified. Given const int expected_framerate = 60; , browser will artificially limit FPS around 60.

Even if zero FPS specified with emscripten_set_main_loop, by default, browser will set some artificial limit for updates. We might able to override this behaviour with --disable-frame-rate-limit --disable-gpu-vsync etc.

Web browsing is co-operative environment, do not try to draw-as-many-as-i-could; browsers think we don’t have to draw more than display’s VSYNC rate by default and giving zero FPS to emscripten_set_main_loop will do so, through requestAnimationFrame JavaScript API. Instead, profiler is your friend; hit F12 and take profile then it will provide you some timeline.

Rob_Probin · February 18, 2020, 10:20pm

Number of renderers = 2
Renderer 0: opengles2 ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 1: software SOFTWARE TARGETTEXTURE
Current Renderer: opengles2 ACCELERATED TARGETTEXTURE

Not sure if I have there are extra build options for WebGL … the only thing I could find for SDL is this, which sounds like it’s enabled automatically:
“Additionally, in WebGL, unlike in desktop or mobile OpenGL, extensions must be activated first before the features they expose take effect. If you use one of the native APIs SDL, EGL, GLUT or GLFW to create your GL context, this will be done automatically for most extensions.”

https://emscripten.org/docs/porting/multimedia_and_graphics/OpenGL-support.html

Rob_Probin · February 18, 2020, 10:34pm

I tried zero FPS specified with `emscripten_set_main_loop.

Top average frame rate until about 500 sprites/rects was about 60fps.

For 1500 sprites/rects:
FPS = 16.393443 24.709283 31.250000 Sprites=1500 Rects=0
FPS = 17.241379 24.779869 30.303030 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 18.518519 27.159727 38.461538 Sprites=0 Rects=1500
FPS = 14.492754 26.559265 37.037037 Sprites=0 Rects=1500
Switch to variable rects
FPS = 9.615385 22.064362 34.482759 Sprites=0 Rects=1500
FPS = 17.543860 25.475322 34.482759 Sprites=0 Rects=1500

This is close to the FPS set to 60 for the average figures, but interestingly the maximum is much lower for the FPS=0 (30-38 fps for FPS=0 rather ~60 for FPS=60) ?!?!? So it seems I’m better at setting a fixed FPS.

(It doesn’t help that this old code doesn’t have variable framerate timing code throughout and instead relies on 60fps - but I guess it wouldn’t be too hard to add…)

joyrider3774 · February 19, 2020, 12:08am

i’m getting these figures https://pastebin.com/VFTngX3M
With an i7 6700 and nvidia GTX 1070 running in one tab on chrome on windows 10.

The value with 9 fps is when my screen entered powersaving mode and i to touch mouse to get the display back on

okuoku · February 19, 2020, 12:52pm

(Build using requestAnimationFrame (fps = 0) https://sdlframeratetest-20feb19.glitch.me/ )

Perhaps you haven’t override FPS limiter of the browser. For example, "%ProgramFiles(x86)%\Google\Chrome\Application\chrome" --disable-frame-rate-limit --disable-gpu-vsync will launch Windows version of Chrome without FPS limiter. Without FPS limit and with URL above it gives 500+ fps.

SnapCrab_NoName_2020-2-19_21-46-8_No-00

Rob_Probin · February 23, 2020, 10:21am

How many fps do you get for 1500 sprites, and 1500 polys?
Have you tried running this on your phone?

okuoku · February 23, 2020, 12:51pm

How many fps do you get for 1500 sprites, and 1500 polys?

It seems around 60 to 200fps with 1500 objects(attached full log below). But anyway FPS is not a good performance indicator – on the web page it will have substantial overhead for each screen update as browser needs to repaint whole page.

Have you tried running this on your phone?

I haven’t tried in-depth, but it’s well below 30fps on iOS Safari at least on iPad 2018… Currently, emscripten uses SDL 2.0.9 which lacks any sprite batching. It’d be interesting see if updating to 2.0.10 improve performance there.

(On PC w/ Intel GPU)

Starting main loop
FPS = 46.511628 inf inf Sprites=100 Rects=0
FPS = 282.885351 841.215573 1015.229457 Sprites=100 Rects=0
FPS = 382.409178 707.269294 970.874729 Sprites=200 Rects=0
FPS = 333.333333 690.842649 904.978195 Sprites=200 Rects=0
FPS = 365.630713 602.260475 772.200176 Sprites=300 Rects=0
FPS = 398.406375 596.786110 724.637681 Sprites=300 Rects=0
FPS = 288.600205 495.308363 677.966561 Sprites=400 Rects=0
FPS = 234.192037 462.467958 655.738135 Sprites=400 Rects=0
FPS = 227.531337 409.280496 598.802754 Sprites=500 Rects=0
FPS = 253.807171 420.110135 561.797753 Sprites=500 Rects=0
FPS = 259.067290 390.063960 505.050250 Sprites=600 Rects=0
FPS = 223.964166 369.836041 520.833605 Sprites=600 Rects=0
FPS = 212.539806 334.178370 457.665904 Sprites=700 Rects=0
FPS = 188.146790 314.731892 417.536534 Sprites=700 Rects=0
FPS = 188.146790 298.388146 382.409324 Sprites=800 Rects=0
FPS = 191.754554 303.118186 369.003690 Sprites=800 Rects=0
FPS = 167.364017 283.965378 343.053056 Sprites=900 Rects=0
FPS = 163.934426 262.730191 364.298592 Sprites=900 Rects=0
FPS = 157.480340 252.865929 348.432056 Sprites=1000 Rects=0
FPS = 161.943320 262.893386 321.543512 Sprites=1000 Rects=0
FPS = 120.700046 230.235171 307.219662 Sprites=1100 Rects=0
FPS = 150.262960 238.693624 324.149109 Sprites=1100 Rects=0
FPS = 136.332633 213.115552 359.066556 Sprites=1200 Rects=0
FPS = 138.026225 220.815717 292.397661 Sprites=1200 Rects=0
FPS = 120.481928 203.886342 261.437840 Sprites=1300 Rects=0
FPS = 126.422234 205.340022 301.204729 Sprites=1300 Rects=0
FPS = 121.432923 192.137561 250.312891 Sprites=1400 Rects=0
FPS = 118.413276 190.102443 224.215196 Sprites=1400 Rects=0
FPS = 82.304520 175.740803 213.219662 Sprites=1500 Rects=0
FPS = 115.141048 179.091947 209.863545 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 50.251259 610.956819 1142.855837 Sprites=0 Rects=100
FPS = 341.297045 869.790423 1156.069364 Sprites=0 Rects=100
FPS = 331.674959 730.184258 877.193752 Sprites=0 Rects=200
FPS = 364.963504 731.615150 1030.926772 Sprites=0 Rects=200
FPS = 335.008487 598.633589 749.063109 Sprites=0 Rects=300
FPS = 355.871886 608.919603 966.182641 Sprites=0 Rects=300
FPS = 316.455796 493.498306 722.022182 Sprites=0 Rects=400
FPS = 332.225914 485.661278 660.066007 Sprites=0 Rects=400
FPS = 270.270270 422.545383 503.778338 Sprites=0 Rects=500
FPS = 236.966825 427.578317 613.496933 Sprites=0 Rects=500
FPS = 239.520958 371.544081 428.265708 Sprites=0 Rects=600
FPS = 227.272727 372.392278 440.528828 Sprites=0 Rects=600
FPS = 198.609692 334.093542 383.877159 Sprites=0 Rects=700
FPS = 194.552529 341.011875 389.105210 Sprites=0 Rects=700
FPS = 187.441425 306.545287 346.620571 Sprites=0 Rects=800
FPS = 159.235669 290.773951 353.356890 Sprites=0 Rects=800
FPS = 186.219705 284.705354 336.134341 Sprites=0 Rects=900
FPS = 172.413823 276.837665 321.543305 Sprites=0 Rects=900
FPS = 155.159038 248.832459 290.697674 Sprites=0 Rects=1000
FPS = 150.829540 251.783140 292.397661 Sprites=0 Rects=1000
FPS = 151.975684 235.174639 293.685756 Sprites=0 Rects=1100
FPS = 136.332633 242.242499 268.096515 Sprites=0 Rects=1100
FPS = 147.492625 214.379976 252.206873 Sprites=0 Rects=1200
FPS = 141.342756 216.015805 247.218728 Sprites=0 Rects=1200
FPS = 137.931054 202.371845 230.946936 Sprites=0 Rects=1300
FPS = 132.100414 203.249910 232.828925 Sprites=0 Rects=1300
FPS = 102.774933 191.129218 224.215196 Sprites=0 Rects=1400
FPS = 120.264568 189.361442 221.729490 Sprites=0 Rects=1400
FPS = 103.626943 183.934829 205.549846 Sprites=0 Rects=1500
FPS = 103.039660 178.588545 206.611570 Sprites=0 Rects=1500
Switch to variable rects
FPS = 157.853221 616.938860 1204.817826 Sprites=0 Rects=100
FPS = 310.559103 815.053427 1098.901099 Sprites=0 Rects=100
FPS = 319.488920 721.724649 1020.408163 Sprites=0 Rects=200
FPS = 253.164493 731.662000 1000.000000 Sprites=0 Rects=200
FPS = 245.700246 609.420696 740.740741 Sprites=0 Rects=300
FPS = 100.755668 569.919047 763.359361 Sprites=0 Rects=300
FPS = 263.157825 420.184432 584.795322 Sprites=0 Rects=400
FPS = 228.832900 439.247293 591.716326 Sprites=0 Rects=400
FPS = 207.039337 357.428868 506.328858 Sprites=0 Rects=500
FPS = 234.191983 372.117647 500.000000 Sprites=0 Rects=500
FPS = 203.251991 332.860260 448.430493 Sprites=0 Rects=600
FPS = 189.035917 332.384835 441.501104 Sprites=0 Rects=600
FPS = 172.117040 265.703109 396.039447 Sprites=0 Rects=700
FPS = 173.460538 289.879352 419.287212 Sprites=0 Rects=700
FPS = 155.763216 266.744998 357.142985 Sprites=0 Rects=800
FPS = 158.102767 248.789234 335.570470 Sprites=0 Rects=800
FPS = 139.860140 237.076256 332.778813 Sprites=0 Rects=900
FPS = 137.080211 245.858989 337.837952 Sprites=0 Rects=900
FPS = 148.809502 248.735825 302.114712 Sprites=0 Rects=1000
FPS = 154.202005 246.016573 308.641975 Sprites=0 Rects=1000
FPS = 127.388551 233.112946 287.356404 Sprites=0 Rects=1100
FPS = 135.135135 231.916932 280.898876 Sprites=0 Rects=1100
FPS = 124.146493 213.659763 260.077956 Sprites=0 Rects=1200
FPS = 127.388551 221.894767 271.739204 Sprites=0 Rects=1200
FPS = 145.243282 200.164757 239.234393 Sprites=0 Rects=1300
FPS = 131.839156 197.446243 235.294118 Sprites=0 Rects=1300
FPS = 118.835427 190.196393 225.225276 Sprites=0 Rects=1400
FPS = 104.602510 178.821126 208.116545 Sprites=0 Rects=1400
FPS = 91.157695 167.168299 197.238659 Sprites=0 Rects=1500
FPS = 83.787188 167.063076 199.401795 Sprites=0 Rects=1500
Switch to sprites
FPS = 145.985401 844.391201 1041.665582 Sprites=100 Rects=0
FPS = 322.580645 869.876334 1020.408163 Sprites=100 Rects=0
FPS = 213.903698 711.143110 892.857143 Sprites=200 Rects=0
FPS = 297.619048 686.114571 947.867299 Sprites=200 Rects=0
FPS = 247.524752 580.976287 740.740741 Sprites=300 Rects=0
FPS = 277.392433 564.738664 751.879699 Sprites=300 Rects=0
FPS = 257.400257 508.892455 671.141390 Sprites=400 Rects=0
FPS = 241.545894 501.817190 651.465374 Sprites=400 Rects=0
FPS = 249.687890 432.683058 589.970501 Sprites=500 Rects=0
FPS = 248.138896 440.279766 574.712974 Sprites=500 Rects=0
FPS = 199.203227 384.706545 563.380282 Sprites=600 Rects=0
FPS = 227.531234 371.761377 534.759644 Sprites=600 Rects=0
FPS = 200.400761 334.767687 441.501104 Sprites=700 Rects=0
FPS = 160.256436 334.883025 414.078675 Sprites=700 Rects=0
FPS = 145.032632 305.204660 410.677449 Sprites=800 Rects=0
FPS = 208.550617 313.762408 396.039761 Sprites=800 Rects=0
FPS = 186.393290 283.741639 419.287212 Sprites=900 Rects=0
FPS = 129.785853 275.510781 370.370233 Sprites=900 Rects=0
FPS = 160.901072 260.710175 382.409032 Sprites=1000 Rects=0
FPS = 136.612022 246.295888 328.947368 Sprites=1000 Rects=0
FPS = 145.560408 227.833138 273.597811 Sprites=1100 Rects=0
FPS = 125.234800 234.620050 323.101673 Sprites=1100 Rects=0
FPS = 129.701669 218.802619 314.465409 Sprites=1200 Rects=0
FPS = 130.463144 220.078421 273.972678 Sprites=1200 Rects=0
FPS = 124.843945 203.515954 266.311655 Sprites=1300 Rects=0
FPS = 112.107623 196.691487 322.580541 Sprites=1300 Rects=0
FPS = 108.932462 187.512152 248.138896 Sprites=1400 Rects=0
FPS = 128.865979 196.176868 221.729490 Sprites=1400 Rects=0
FPS = 105.540897 184.847766 207.468837 Sprites=1500 Rects=0
FPS = 103.252442 182.288834 210.748200 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 182.315439 647.742428 1052.631579 Sprites=0 Rects=100
FPS = 209.424040 872.034457 1176.469204 Sprites=0 Rects=100
FPS = 267.737545 740.186892 892.857143 Sprites=0 Rects=200
FPS = 286.944046 736.955900 975.609756 Sprites=0 Rects=200
FPS = 204.498978 578.765817 687.285223 Sprites=0 Rects=300
FPS = 267.022697 599.570721 694.444927 Sprites=0 Rects=300
FPS = 261.096674 500.103873 578.034682 Sprites=0 Rects=400
FPS = 261.096538 492.633882 775.194399 Sprites=0 Rects=400
FPS = 186.219739 431.724925 487.804878 Sprites=0 Rects=500
FPS = 235.849001 425.048610 586.510608 Sprites=0 Rects=500
FPS = 239.520958 373.439075 649.351071 Sprites=0 Rects=600
FPS = 242.130692 366.263681 422.832981 Sprites=0 Rects=600
FPS = 222.717100 336.568228 396.039761 Sprites=0 Rects=700
FPS = 220.994475 338.128776 444.444444 Sprites=0 Rects=700
FPS = 173.310195 305.948788 395.256917 Sprites=0 Rects=800
FPS = 191.021931 305.461405 400.801603 Sprites=0 Rects=800
FPS = 180.342619 277.018688 347.826087 Sprites=0 Rects=900
FPS = 175.746924 275.698913 314.960630 Sprites=0 Rects=900
FPS = 67.091580 244.879479 508.905593 Sprites=0 Rects=1000
FPS = 165.562914 250.354533 309.597523 Sprites=0 Rects=1000
FPS = 114.942529 226.086837 276.243094 Sprites=0 Rects=1100
FPS = 127.959053 230.378558 280.898798 Sprites=0 Rects=1100
FPS = 88.495583 211.051927 250.941029 Sprites=0 Rects=1200
FPS = 127.795527 212.870275 256.410256 Sprites=0 Rects=1200
FPS = 51.572973 192.391018 236.966825 Sprites=0 Rects=1300
FPS = 125.078174 200.446087 240.963913 Sprites=0 Rects=1300
FPS = 95.283459 194.368284 235.017682 Sprites=0 Rects=1400
FPS = 117.647059 195.111091 220.264366 Sprites=0 Rects=1400
FPS = 90.049519 180.242199 213.675214 Sprites=0 Rects=1500
FPS = 98.619339 183.056520 220.507215 Sprites=0 Rects=1500
Switch to variable rects
FPS = 157.977883 635.552167 1197.604790 Sprites=0 Rects=100
FPS = 272.851296 830.697474 1036.269430 Sprites=0 Rects=100
FPS = 251.572327 735.203344 934.579439 Sprites=0 Rects=200
FPS = 252.206810 727.278985 881.058045 Sprites=0 Rects=200
FPS = 258.064450 596.562702 784.314341 Sprites=0 Rects=300
FPS = 244.200304 609.136157 806.450963 Sprites=0 Rects=300
FPS = 234.466589 455.472110 746.268100 Sprites=0 Rects=400
FPS = 209.643606 484.470157 569.800894 Sprites=0 Rects=400
FPS = 249.376496 417.183286 571.428898 Sprites=0 Rects=500
FPS = 197.823898 409.767098 492.610837 Sprites=0 Rects=500
FPS = 220.750503 365.196075 462.962749 Sprites=0 Rects=600
FPS = 227.531337 371.037577 459.770115 Sprites=0 Rects=600
FPS = 195.694755 339.280953 397.614156 Sprites=0 Rects=700
FPS = 157.480290 315.920781 396.039604 Sprites=0 Rects=700
FPS = 207.900251 301.617424 358.423068 Sprites=0 Rects=800
FPS = 143.163923 281.940626 347.222343 Sprites=0 Rects=800
FPS = 177.777778 264.996746 325.203252 Sprites=0 Rects=900
FPS = 150.489090 265.390289 302.114712 Sprites=0 Rects=900
FPS = 146.198852 243.460260 290.697674 Sprites=0 Rects=1000
FPS = 142.755195 245.558257 299.850075 Sprites=0 Rects=1000
FPS = 132.362674 221.518484 252.206810 Sprites=0 Rects=1100
FPS = 126.903537 223.732580 272.851222 Sprites=0 Rects=1100
FPS = 141.342736 211.510945 259.403372 Sprites=0 Rects=1200
FPS = 142.045475 209.406465 251.572327 Sprites=0 Rects=1200
FPS = 100.603612 191.804335 243.605419 Sprites=0 Rects=1300
FPS = 131.319764 196.250961 238.948683 Sprites=0 Rects=1300
FPS = 60.404715 178.970631 207.684363 Sprites=0 Rects=1400
FPS = 58.088876 181.742484 212.539896 Sprites=0 Rects=1400
FPS = 118.835399 170.296749 195.312500 Sprites=0 Rects=1500
FPS = 62.015504 170.478403 196.078431 Sprites=0 Rects=1500

Rob_Probin · February 23, 2020, 3:29pm

I really don’t get why it’s so slow for 1500 SDL_RenderCopy & SDL_RenderFillRect on Emscripten on this Mac with Firefox, Chrome, Safari. To give you an example with a native build…

We compiled against SDL version 2.0.8 …
But we are linking against SDL version 2.0.8.
Number of renderers = 4
Renderer 0: opengl ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 1: opengles2 ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 2: metal ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 3: software SOFTWARE TARGETTEXTURE
Current Renderer: opengl ACCELERATED TARGETTEXTURE
Starting main loop
FPS = 8.799504 inf inf Sprites=100 Rects=0
FPS = 64.195232 3456.326031 5017.032826 Sprites=100 Rects=0
FPS = 49.671088 2709.079559 3957.684438 Sprites=200 Rects=0
FPS = 55.919004 2622.157774 4016.419121 Sprites=200 Rects=0
FPS = 50.531051 2378.756506 3311.335031 Sprites=300 Rects=0
FPS = 59.918307 2308.135843 3225.411079 Sprites=300 Rects=0
==snip==
FPS = 47.016288 957.900516 1243.915697 Sprites=1300 Rects=0
FPS = 47.545999 985.690099 1213.194706 Sprites=1300 Rects=0
FPS = 43.355660 853.921306 1190.961082 Sprites=1400 Rects=0
FPS = 54.448568 888.342731 1162.875885 Sprites=1400 Rects=0
FPS = 54.983268 864.326324 1096.778651 Sprites=1500 Rects=0
FPS = 49.880061 765.177798 1057.431204 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 64.708853 3838.783816 6172.382293 Sprites=0 Rects=100
FPS = 60.178060 3411.863351 6673.740832 Sprites=0 Rects=100
FPS = 61.763104 3594.520597 5670.284308 Sprites=0 Rects=200
FPS = 44.322294 2696.379641 4609.781957 Sprites=0 Rects=200
FPS = 64.717622 3353.109580 4937.223207 Sprites=0 Rects=300
FPS = 58.955493 3399.084991 5550.190372 Sprites=0 Rects=300
==snip==
FPS = 62.266551 2036.369512 2645.558636 Sprites=0 Rects=1400
FPS = 62.648002 1909.424472 2630.422946 Sprites=0 Rects=1400
FPS = 81.069988 1936.827331 2454.680462 Sprites=0 Rects=1500
FPS = 87.198091 1952.801845 2540.366422 Sprites=0 Rects=1500
Switch to variable rects
FPS = 82.714902 3438.846747 6028.563333 Sprites=0 Rects=100
FPS = 68.498072 3548.457693 6192.065487 Sprites=0 Rects=100
FPS = 79.243076 3153.202871 5836.927908 Sprites=0 Rects=200
FPS = 63.188159 2840.020349 5422.522991 Sprites=0 Rects=200
FPS = 67.174849 2840.259641 4872.914393 Sprites=0 Rects=300
FPS = 49.026871 2557.626756 5201.776927 Sprites=0 Rects=300
==snip==
FPS = 72.479419 1360.302606 2270.585698 Sprites=0 Rects=1400
FPS = 56.245741 1191.643725 2220.460657 Sprites=0 Rects=1400
FPS = 61.878623 1105.698855 1891.342380 Sprites=0 Rects=1500
FPS = 61.100486 1231.114259 2018.033144 Sprites=0 Rects=1500

(over 30 times slower average frame rate??!?!).

If it was locked to 60 fps, that would be fine … but why <30 fps at 1500?

Rob_Probin · February 23, 2020, 3:49pm

May that is true - I’m just surprised HOW bad it is compared with native on this machine. We are talking about 118 times slower for the average framerate between native and web assembly for the fixed width SDL_FillRect. This isn’t some 2x or 10x case. And it’s pretty close across all browsers…

I’d be interested in how many fixed-width 1500 SDL_FillRects your machine manages on a native build…

I can’t help but think there might be something getting in the way of rendering - maybe if we replaced the stock html Emscripten frame with a full window or full screen canvas? There isn’t much information on how this stuff works under the hood without looking at the source code.

P.S. My test code is now here: https://github.com/robzed/SDL2_emscripten_tests (I have a Mac build setup, but not a Linux or Windows build yet. )

Rob_Probin · February 23, 2020, 3:59pm

Does the full screen button work on your Machine?

okuoku · February 23, 2020, 6:26pm

1500 drawcalls per frame is simply too much…

It’s largely because how web browser and WebGL works. In WebGL, it will always do range-check over buffers, (at least on Chrome,) GPU access will be done in separate process, GL drawings will be copied to <canvas> backbuffer so we need to do more full-screen copies, we have to call JS function to each OpenGL calls …

Of course, there’s much room to improve performance (batching, reduce <canvas> resolution to save RAM traffic, …) but in general WebGL does not provide raw hardware performance freely. Thus generic OpenGL performance tips become more and more important. e.g.) Reduce drawcall – because draw calls are now inter-process communication, use VertexArrayObjects – so security validation can be reduced, …

So I think updating to SDL 2.0.10 would be interesting; on smaller draw call counts by batching SDL renderer, WebGL overhead will be (relatively) small. In case that was not enough, I guess I would try reducing <canvas> size and adjust its size with CSS.

Does the full screen button work on your Machine?

(Fullscreen doesn’t help in this regard; it’s just a large window. Even on fullscreen mode, direct framebuffer access is not possible because we still have other web content on it.)

okuoku · February 23, 2020, 7:06pm

Uh, no, I have just tried SDL_HINT_RENDER_BATCHING with latest SDL Hg but it does not help at all for reducing drawcalls…

Drawing a rectangle always calling a glDrawArrays

github.com

spurious/SDL-mirror/blob/5a0ed0a7e4d285e8ba5310b0ff0917d1510df9d0/src/render/opengles2/SDL_render_gles2.c#L1316-L1318


for (i = 0; i < count; ++i, offset += 4) {
    data->glDrawArrays(GL_TRIANGLE_STRIP, (GLsizei) offset, 4);
}

so ultimately we’ll need to reduce sprites to reduce draw calls.

Rob_Probin · February 24, 2020, 9:25pm

I tried the software renderer on Chome (haven’t had chance to do it on Firefox or Safari yet).

It turns out that SDL_FillRect is significantly faster on the software render than hardware acclerated!?!?!

Even SDL_CopyRect is only something like 30% slower on Software.

To try it yourself, switch the second parameter to the render index, e.g.:
renderer = SDL_CreateRenderer(window, 1, SDL_RENDERER_ACCELERATED);

Astrid:SDL2_emscripten_tests rob$ emrun --browser=chrome sdl2_test2.html
Starting browser: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --enable-nacl --enable-pnacl --disable-restore-session-state --enable-webgl --no-default-browser-check --no-first-run --allow-file-access-from-files http://localhost:6931/sdl2_test2.html
We compiled against SDL version 2.0.9 …
But we are linking against SDL version 2.0.9.
Number of renderers = 2
Renderer 0: opengles2 ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 1: software SOFTWARE TARGETTEXTURE
Current Renderer: software SOFTWARE TARGETTEXTURE
Starting main loop
FPS = 20.408163 inf inf Sprites=100 Rects=0
FPS = 55.555556 60.118464 66.666667 Sprites=100 Rects=0
FPS = 55.555556 60.077614 66.666667 Sprites=200 Rects=0
FPS = 55.555556 60.093273 66.666667 Sprites=200 Rects=0
FPS = 55.555556 60.084423 66.666667 Sprites=300 Rects=0
FPS = 28.571429 59.905170 66.666667 Sprites=300 Rects=0
FPS = 29.411765 59.042354 66.666667 Sprites=400 Rects=0
FPS = 55.555556 60.075572 66.666667 Sprites=400 Rects=0
==snip==
FPS = 18.181818 19.844733 21.276596 Sprites=1400 Rects=0
FPS = 18.181818 19.885803 21.276596 Sprites=1400 Rects=0
FPS = 17.241379 18.654962 20.000000 Sprites=1500 Rects=0
FPS = 16.666667 18.526014 20.000000 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 29.411765 59.954528 66.666667 Sprites=0 Rects=100
FPS = 52.631579 60.134266 66.666667 Sprites=0 Rects=100
FPS = 52.631579 60.178664 66.666667 Sprites=0 Rects=200
FPS = 52.631579 60.148758 71.428571 Sprites=0 Rects=200
FPS = 52.631579 60.139713 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.019744 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.121187 66.666667 Sprites=0 Rects=400
FPS = 55.555556 60.099401 66.666667 Sprites=0 Rects=400
==snip==
FPS = 52.631579 60.136452 66.666667 Sprites=0 Rects=1300
FPS = 52.631579 60.128139 66.666667 Sprites=0 Rects=1300
FPS = 55.555556 60.190146 71.428571 Sprites=0 Rects=1400
FPS = 52.631579 60.059375 66.666667 Sprites=0 Rects=1400
FPS = 52.631579 60.177159 66.666667 Sprites=0 Rects=1500
FPS = 52.631579 60.206721 66.666667 Sprites=0 Rects=1500
Switch to variable rects
FPS = 55.555556 60.093273 66.666667 Sprites=0 Rects=100
FPS = 55.555556 60.109613 66.666667 Sprites=0 Rects=100
FPS = 55.555556 60.086465 66.666667 Sprites=0 Rects=200
FPS = 52.631579 60.231768 66.666667 Sprites=0 Rects=200
FPS = 52.631579 60.103629 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.136166 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.113017 66.666667 Sprites=0 Rects=400
FPS = 55.555556 60.121187 66.666667 Sprites=0 Rects=400
==snip==
FPS = 47.619048 57.486573 62.500000 Sprites=0 Rects=1300
FPS = 45.454545 57.255866 58.823529 Sprites=0 Rects=1300
FPS = 43.478261 53.468696 55.555556 Sprites=0 Rects=1400
FPS = 45.454545 53.556176 55.555556 Sprites=0 Rects=1400
FPS = 41.666667 50.425543 52.631579 Sprites=0 Rects=1500
FPS = 41.666667 50.758383 52.631579 Sprites=0 Rects=1500
Switch to sprites

Compare this to the hardware acceleration…

Astrid:SDL2_emscripten_tests rob$ emrun --browser=chrome sdl2_test2.html
Starting browser: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --enable-nacl --enable-pnacl --disable-restore-session-state --enable-webgl --no-default-browser-check --no-first-run --allow-file-access-from-files http://localhost:6931/sdl2_test2.html
We compiled against SDL version 2.0.9 …
But we are linking against SDL version 2.0.9.
Number of renderers = 2
Renderer 0: opengles2 ACCELERATED PRESENTVSYNC TARGETTEXTURE
Renderer 1: software SOFTWARE TARGETTEXTURE
Current Renderer: opengles2 ACCELERATED TARGETTEXTURE
Starting main loop
FPS = 30.303030 inf inf Sprites=100 Rects=0
FPS = 55.555556 60.182462 66.666667 Sprites=100 Rects=0
FPS = 55.555556 60.069444 66.666667 Sprites=200 Rects=0
FPS = 55.555556 60.061275 66.666667 Sprites=200 Rects=0
FPS = 55.555556 60.091912 66.666667 Sprites=300 Rects=0
FPS = 55.555556 60.111656 66.666667 Sprites=300 Rects=0
FPS = 52.631579 60.120650 66.666667 Sprites=400 Rects=0
FPS = 55.555556 60.085784 66.666667 Sprites=400 Rects=0
==snip==
FPS = 17.857143 28.652802 58.823529 Sprites=1400 Rects=0
FPS = 17.857143 28.616811 47.619048 Sprites=1400 Rects=0
FPS = 11.627907 27.712723 47.619048 Sprites=1500 Rects=0
FPS = 17.241379 27.114697 47.619048 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 11.904762 59.699560 66.666667 Sprites=0 Rects=100
FPS = 55.555556 60.081019 66.666667 Sprites=0 Rects=100
FPS = 52.631579 60.160281 66.666667 Sprites=0 Rects=200
FPS = 52.631579 60.134947 66.666667 Sprites=0 Rects=200
FPS = 52.631579 60.170350 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.095997 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.063317 66.666667 Sprites=0 Rects=400
FPS = 55.555556 60.072849 62.500000 Sprites=0 Rects=400
==snip==
FPS = 7.142857 31.452951 142.857143 Sprites=0 Rects=1300
FPS = 9.433962 28.237564 142.857143 Sprites=0 Rects=1300
FPS = 10.989011 44.452337 200.000000 Sprites=0 Rects=1400
FPS = 7.299270 36.446927 125.000000 Sprites=0 Rects=1400
FPS = 6.289308 29.953635 166.666667 Sprites=0 Rects=1500
FPS = 4.201681 33.029884 142.857143 Sprites=0 Rects=1500
Switch to variable rects
FPS = 18.518519 62.726817 500.000000 Sprites=0 Rects=100
FPS = 55.555556 60.123911 66.666667 Sprites=0 Rects=100
FPS = 52.631579 60.179969 71.428571 Sprites=0 Rects=200
FPS = 52.631579 60.149245 66.666667 Sprites=0 Rects=200
FPS = 55.555556 60.084423 66.666667 Sprites=0 Rects=300
FPS = 55.555556 60.075572 66.666667 Sprites=0 Rects=300
FPS = 52.631579 60.134266 66.666667 Sprites=0 Rects=400
FPS = 55.555556 60.095997 66.666667 Sprites=0 Rects=400
==snip==
FPS = 9.708738 43.691633 125.000000 Sprites=0 Rects=1300
FPS = 10.101010 42.506288 142.857143 Sprites=0 Rects=1300
FPS = 9.009009 36.010872 125.000000 Sprites=0 Rects=1400
FPS = 9.708738 39.058487 142.857143 Sprites=0 Rects=1400
FPS = 7.518797 35.660855 166.666667 Sprites=0 Rects=1500
FPS = 9.345794 28.156400 142.857143 Sprites=0 Rects=1500

Rob_Probin · February 24, 2020, 9:26pm

I clicked like, it’s useful info … if not overly happy…

Rob_Probin · February 24, 2020, 9:52pm

Summary: on my machine, with this specific test…

Software renderer is faster for SDL_FillRect. Don’t bother with accelerated.
Software renderer is faster on Safari and Firefox for SDL_CopyRect. Chrome is a bit faster on acclerated.

What’s the point of the hardware renderer option with Emscripten in SDL2 then?

I guess if you are not using SDL for 2D games?

==Safari==

Current Renderer: opengles2 ACCELERATED TARGETTEXTURE
Starting main loop
FPS = 12.195122 inf inf Sprites=1500 Rects=0
FPS = 22.727273 24.082571 25.000000 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 27.777778 30.848117 32.258065 Sprites=0 Rects=1500
FPS = 27.777778 30.841753 32.258065 Sprites=0 Rects=1500
Switch to variable rects
FPS = 22.222222 25.586292 27.027027 Sprites=0 Rects=1500
FPS = 23.809524 25.603836 27.027027 Sprites=0 Rects=1500
Switch to sprites
FPS = 21.739130 24.047597 25.000000 Sprites=1500 Rects=0
FPS = 15.151515 23.891156 25.000000 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 10.989011 29.321394 45.454545 Sprites=0 Rects=1500
FPS = 15.151515 30.561931 45.454545 Sprites=0 Rects=1500

Current Renderer: software SOFTWARE TARGETTEXTURE
Starting main loop
FPS = 8.064516 inf inf Sprites=1500 Rects=0
FPS = 23.255814 26.119976 27.777778 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 55.555556 60.411034 90.909091 Sprites=0 Rects=1500
FPS = 55.555556 60.140251 66.666667 Sprites=0 Rects=1500
Switch to variable rects
FPS = 41.666667 50.093178 52.631579 Sprites=0 Rects=1500
FPS = 43.478261 50.002803 52.631579 Sprites=0 Rects=1500
Switch to sprites
FPS = 23.809524 26.041337 27.777778 Sprites=1500 Rects=0
FPS = 23.255814 26.058132 27.777778 Sprites=1500 Rects=0

==FireFox==

Current Renderer: opengles2 ACCELERATED TARGETTEXTURE
Starting main loop
FPS = 16.949153 inf inf Sprites=1500 Rects=0
FPS = 13.157895 23.892442 31.250000 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 16.129032 28.212888 43.478261 Sprites=0 Rects=1500
FPS = 16.129032 26.863069 40.000000 Sprites=0 Rects=1500
Switch to variable rects
FPS = 13.333333 25.553440 34.482759 Sprites=0 Rects=1500
FPS = 16.129032 25.169379 35.714286 Sprites=0 Rects=1500
Switch to sprites
FPS = 12.048193 19.594238 25.000000 Sprites=1500 Rects=0
FPS = 10.989011 19.710892 24.390244 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 10.204082 23.430847 35.714286 Sprites=0 Rects=1500
FPS = 17.543860 26.576207 38.461538 Sprites=0 Rects=1500
Switch to variable rects
FPS = 17.241379 25.247701 34.482759 Sprites=0 Rects=1500

Current Renderer: software SOFTWARE TARGETTEXTURE
Starting main loop
FPS = 10.416667 inf inf Sprites=1500 Rects=0
FPS = 17.543860 26.179814 28.571429 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 41.666667 59.926614 66.666667 Sprites=0 Rects=1500
FPS = 55.555556 60.169526 66.666667 Sprites=0 Rects=1500
Switch to variable rects
FPS = 23.255814 36.886400 41.666667 Sprites=0 Rects=1500
FPS = 22.727273 37.085163 40.000000 Sprites=0 Rects=1500
Switch to sprites
FPS = 20.000000 27.266992 29.411765 Sprites=1500 Rects=0
FPS = 18.867925 27.050841 29.411765 Sprites=1500 Rects=0

==Chrome==

Current Renderer: opengles2 ACCELERATED TARGETTEXTURE
Starting main loop
FPS = 12.987013 inf inf Sprites=1500 Rects=0
FPS = 13.333333 52.374011 142.857143 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 10.204082 39.145430 100.000000 Sprites=0 Rects=1500
FPS = 19.607843 32.040406 62.500000 Sprites=0 Rects=1500
Switch to variable rects
FPS = 17.857143 26.859651 35.714286 Sprites=0 Rects=1500
FPS = 17.857143 26.956748 37.037037 Sprites=0 Rects=1500
Switch to sprites
FPS = 17.543860 26.796820 43.478261 Sprites=1500 Rects=0
FPS = 15.151515 26.947322 43.478261 Sprites=1500 Rects=0

Current Renderer: software SOFTWARE TARGETTEXTURE
Starting main loop
FPS = 10.101010 inf inf Sprites=1500 Rects=0
FPS = 16.666667 18.725731 20.000000 Sprites=1500 Rects=0
Switch to fixed width rects
FPS = 30.303030 60.571519 125.000000 Sprites=0 Rects=1500
FPS = 52.631579 60.134947 66.666667 Sprites=0 Rects=1500
Switch to variable rects
FPS = 29.411765 49.747647 52.631579 Sprites=0 Rects=1500
FPS = 45.454545 50.234393 52.631579 Sprites=0 Rects=1500
Switch to sprites
FPS = 16.949153 18.863499 20.000000 Sprites=1500 Rects=0
FPS = 16.393443 18.497562 19.607843 Sprites=1500 Rects=0