More Html5 Performance with Godot

[erayzesen]

Hi all. I'm making Html5 games with Godot and I'm selling the licenses of these games for 2 years. So this part is not as only hobby, I really use as a side work. I know there are Godot users that target HTML5 like me. I love Godot and I am grateful to their developers.

But can we improve html5 performance? I'm having a constant problem with that. I'm using C# and sometimes GDscript in my projects.

[duane-r]

I'd love to see better web support. I've pretty much given up on godot for web and gone back to native javascript at this point. I'd like to hear more from people targeting the web. It doesn't seem to enter discussions much.

[Marzin-bot]

I think this will change with the arrival of WEBGPU.

[eon-s]

But can we improve html5 performance? I'm having a constant problem with that. I'm using C# and sometimes GDscript in my projects.

There could be infinite sources of bad performance, can you show a profiling to be more specific on the problem? otherwise it will be impossible to propose improvements.

[erayzesen]

Bad performance usually comes from algorithms outside the Godot API I wrote. The other important part that reduces performance in my tests was Godot's drawing API. In my last experimental project; I was receiving 200-250 fps from the desktop, I was receiving 15-20 fps in HTML5. I canceled my project due to bad performance. Unfortunately I don't have an active project that I can show you profiling right now. But I would like to indicate that I have often experienced problems with performance on the HTML5 side.

[eon-s]

Well, drawing tends to be bad even in pixi which is one of the most performant html game engines/frameworks out there, but that is why we need something to look at to show to the devs the possible reasons of rendering bottlenecks.

[duane-r]

Edit: Poorly contrived test -- see below

If you want a trivial example, here are three bunnymarks coded as much alike as I could manage. The first is in pure javascript -- no webgl -- just a canvas. I can get it to move about 700 sprites without dropping framerate below 55fps.

https://www.duanerobertson.com/bunny-js/

The second is done in haxe-flixel, compiled to javascript. It runs about 1100 sprites at the same framerate.

Edit: Here's a better haxe example:

https://haxeflixel.com/demos/FlxBunnymark/

The third, I coded in godot. It's hard to compare because the first ten sprites drops the framerate below 50fps. Ten sprites.

Edit: bunny-godot now works better in gdscript than in haxe.

https://www.duanerobertson.com/bunny-godot/

Now, this is performance on my computer with my web browser, and it's not a real game. I also tried using godot's physics to move the sprites, but the results were worse than just moving them in gdscript. This at least gives an idea of the magnitude of the problem.

By the way, if you haven't checked out haxe-flixel, I recommend it. It can compile to every platform godot can, though I don't like the language as well.

[erayzesen]

@duane-r Your test results aren't different in my system.(1900 bunny with Haxeflixel) We are now only testing the rendering part. When you write your game codes you get more bad performance.

[erayzesen]

@eon-s Your system is probably better than my system, you get 60 fps I get 45-49 fps. This is not a very mysterious situation. I just wanted to indicate that, the bullets you make spawn don't have the FPS decline. Because bullets go out of the screen. For a more accurate test; https://youtu.be/_z7Z7PrTD_M?t=33

[duane-r]

Ok, I retract everything I said about the difference in bunnymark results. I had some spare time, so I studied the official haxe-flixel bunnymark on their demo page (which I think cheats, but what the hey). With it's example, I was able to rewrite mine -- still in gdscript -- to perform better than theirs. And the graphics look better. I no longer have flixel-envy.

Of course flixel isn't a high bar, but my initial test was deeply flawed. :)

[eon-s]

You can try this one https://github.com/cart/godot3-bunnymark
I think that most of these may be possible to export to web (and remember always to use release versions) to compare.

Maybe that project can be ported to 4 but it may not make sense until beta I guess.

[duane-r]

The problem with the first set of tests was that I was expecting godot's web export to reach 60fps. It won't do that on my system, even when it isn't pushing any graphics. Haxe and javascript can manage 60fps initially. When they started doing actual work, haxe and godot were fairly close in performance.

I thought it was interesting that flixel uses an animated sprite to simulate rotation, because blitting the sprites is an order of magnitude slower if they have to be rotated. I tried the same thing in godot, but it didn't help. I don't really know much about how godot renders.