Redundant WebGL calls

[MartinSStewart]

I did some GPU profiling with Spector.js. It's reporting that there are some redundant calls made before and after each drawElements call.

In this screeshot for example, all the calls with orange text are apparently redundant.

Here is a capture I took of my game if you want to see more details. capture 17_59_02.json.zip

[w0rm]

@MartinSStewart thanks! I am aware of this happening. Basically each entity assumes it starts with a clean state, and then sets all the needed settings by making the function calls, and then resets them after the draw call.

Alternatively, we could store a virtual copy of the current gl state and diff each setting against that. This is a possible optimisation, but it assumes that diffing would be performing better than the redundant function calls. Is there any information on how slow these kind of calls are?

[MartinSStewart]

I counted up the duration of all the redundant draw calls for this specific capture and got approximately 0.845 (for some baffling reason sceptor's UI doesn't say what unit that's in but I'm guessing it's milliseconds). I don't know how reliable that value is though.

My gut feeling is that yes it's worthwhile to diff on the CPU rather than send redundant calls to the GPU. I can't find any direct evidence to support this though. I think the best approach is to try it and benchmark the results. If you'd like I can provide the source code for my game if you need something to profile.

[w0rm]

@ianmackenzie shared this article, that indicates that avoiding redundant WebGL calls can be a big win: https://emscripten.org/docs/optimizing/Optimizing-WebGL.html#avoid-redundant-calls

[MartinSStewart]

Interesting! It seems like a worthwhile tradeoff then to keep track of the GPU state and reduce redundant calls at the expense of complexity?

[MartinSStewart]

Saw the pull request. Thanks for all the hard work! I'll go ahead and close this issue then.