HTML5 performance on Linux

[88.josh]

Hi everyone,

I have a tool used for syncing animations with music built in defold and installed on a raspberry pi. It’s the latest model with the highest spec:

• Broadcom BCM2711, Quad core Cortex-A72 (ARM v8) 64-bit SoC @ 1.5GHz
• 8GB LPDDR4-3200 SDRAM
• 2 × micro-HDMI ports (up to 4kp60 supported)
• H.265 (4kp60 decode), H264 (1080p60 decode, 1080p30 encode)
• OpenGL ES 3.0 graphics
• 64bit OS

And I am trying to run a very simple app - no ray tracing, no particle effects, no dependencies etc. The largest sprites are around 1024 by 1024, moving with go.animate.

• Hardware acceleration is enabled in Chromium (I believe that hardware acceleration is not available in opera, so I am going to stick to Chromium)
• I’m using simplehttp server
• I’m on a release build.
• I have tried 30fps and 60fps

Any my symptoms are:

• noticeable jerky animations
• the performance tool provided by chromium says that I am getting a dropped frame every 3 - 4 frames.

[88.josh]

Dropped frames

Smooth on my mac: https://photos.app.goo.gl/wXUzTs9ZZXSFAsKA7

Jerky (… or is it my imagination?!?): https://photos.app.goo.gl/4nF4du86p2DEYC4L9

[88.josh]

My questions are:

Is this more or less expected performace on a Pi? Youtube works fine.
Is there any way to improve performance?

Thank you.

[britzl]

@88.josh

Jerky (… or is it my imagination?!?)

Looks like it stutters a bit yes.

@88.josh

Is this more or less expected performace on a Pi? Youtube works fine.
Is there any way to improve performance?

Probably. But I’d need to know what you are doing each frame. What do you have running in update(), on_input() and on_message() functions and what do you have in timer callbacks? Also are you using a custom render script? Any extensions?

[88.josh]

I send one message every minute, on average.
Hardly anything in update, no timers (just animation)
My input is basically 15 if statements.

and my render is custom, because i have two GUI layers, one in front of and one behind the GOs. I guess that is the problem right? How can I slim this down? I don’t have much experience with rendering.

function update(self)
	render.set_depth_mask(true)
	render.set_stencil_mask(0xff)
	render.clear({[render.BUFFER_COLOR_BIT] = self.clear_color, [render.BUFFER_DEPTH_BIT] = 1, [render.BUFFER_STENCIL_BIT] = 0})
	render.set_viewport(0, 0, render.get_window_width(), render.get_window_height())
	render.set_view(self.view)
	render.set_depth_mask(false)
	render.disable_state(render.STATE_DEPTH_TEST)
	render.disable_state(render.STATE_STENCIL_TEST)
	render.enable_state(render.STATE_BLEND)
	render.set_blend_func(render.BLEND_SRC_ALPHA, render.BLEND_ONE_MINUS_SRC_ALPHA)
	render.disable_state(render.STATE_CULL_FACE)

	render.set_projection(vmath.matrix4_orthographic(0, render.get_window_width(), 0, render.get_window_height(), -1000, 1000))
	render.enable_state(render.STATE_STENCIL_TEST)
	render.draw(self.bgui_pred)
	render.disable_state(render.STATE_STENCIL_TEST)

	render.set_projection(get_projection(self))
	render.draw(self.tile_pred)
	render.draw(self.particle_pred)
	render.draw_debug3d()


	render.set_view(vmath.matrix4())
	render.set_projection(vmath.matrix4_orthographic(0, render.get_window_width(), 0, render.get_window_height(), -1000, 1000))
	render.enable_state(render.STATE_STENCIL_TEST)
	render.draw(self.gui_pred)
	render.draw(self.text_pred)
	render.disable_state(render.STATE_STENCIL_TEST)

end

[88.josh]

Went back to the standard render script and I’m still getting many dropped frames (around 1 in 3)

[britzl]

If you want to share the project with me (bjorn@defold.se) I can take a quick look and give you some advice.

[88.josh]

thank you.

Britzl render.zip

Boot up and then press 2 and 6 to load the windows logo and clouds collections, which is where the jerking is most obvious.

This version uses the default render, but that is still jerky. See my custom Render scripts in files - render - joshrender.renderscript

The collections for the windows logo and scrolling clouds are

finshed / FG / 24_windowslogo
finished / BG / 15_clouds

let me know if you have any questions.

[88.josh]

To be clear, if all you do is boot and press 2 and 6, there are only 3 scripts running:

megabox.script
windowscloudds.script
gentlefloat.script

[aglitchman]

@88.josh

Hardware acceleration is enabled in Chromium

Could you please check whether hardware acceleration for WebGL is turned on in Chromium by typing chrome://gpu into the address bar at the top of the browser?

[88.josh]

Thank you for your very clear instructions.

Report as follows:

Graphics Feature Status

• Canvas: Hardware accelerated
• Canvas out-of-process rasterization: Disabled
• Direct Rendering Display Compositor: Disabled
• Compositing: Hardware accelerated
• Multiple Raster Threads: Enabled
• Out-of-process Rasterization: Hardware accelerated
• OpenGL: Enabled
• Rasterization: Hardware accelerated
• Raw Draw: Disabled
• Skia Renderer: Enabled
• Video Decode: Software only. Hardware acceleration disabled
• Video Encode: Software only. Hardware acceleration disabled
• Vulkan: Disabled
• WebGL: Hardware accelerated
• WebGL2: Hardware accelerated

[88.josh]

I have been checking out other HTML5 games on the raspberry pi and have yet to find one that works without jerkiness. I think defold is not to blame here. I thought that the Pi would be capable of this… how disappointing. Maybe there is some way to force 30fps? To try and get better stability?

[britzl]

@88.josh

let me know if you have any questions

I wasn’t able to run the project since it didn’t contain the videos/video.atlas file, but I stripped down the missing files and got it running. There’s nothing that stands out in the project that would explain the stutters.

@88.josh

Maybe there is some way to force 30fps? To try and get better stability?

You can set the update interval in game.project to 30 to force 30 fps.

[88.josh]

@britzl

There’s nothing that stands out in the project that would explain the stutters.

I passed the britzl test!

@britzl

I wasn’t able to run the project since it didn’t contain the videos/video.atlas file, but I stripped down the missing files and got it running.

even though I lost points on a technicality… I removed the video stuff because I stopped using that dependency and didn’t want to confuse the issue, I must have sent you a slightly older version (but only a few days older).

@britzl

You can set the update interval in game.project to 30 to force 30 fps.

I am going to investigate chromium and the pi itself (chromium seems to be stuck at 60fps, but I’d be happy with 30fps and no dropped frames…). There are a few things I can do (assigning more RAM to the GPU is my first step). Any other suggestions would be gratefully recieved.

[88.josh]

I know that you can’t make any promises, but I am considering buying and seeed studio odyssey computer (similar to Pi, but x86) and it would be great to know your POV @britzl.

it has the following specs:

• Intel Celeron J4125 CPU up to 2.7GHz
• 32-bit ARM Cortex M0+ coprocessor
• Intel UHD Graphics 600 GPU
• 8 GB RAM

It works with Linux and also Windows. More info: https://www.seeedstudio.com/ODYSSEY-X86J4105800-p-4445.html

Would that be likely to work well, if I build an x86 Linux excutable?

Thanks for your opinion.

[britzl]

@88.josh

• Intel Celeron J4125 CPU up to 2.7GHz
• 32-bit ARM Cortex M0+ coprocessor
• Intel UHD Graphics 600 GPU
• 8 GB RAM

Would that be likely to work well, if I build an x86 Linux excutable?

I think so, but I can’t give any promises. I’m not sure of the purpose of that coprocessor, but if the main CPU is an Intel Celeron x86 CPU then that in combination with the Intel GPU should be sufficient.

[Mathias_Westerdahl]

Note that we only support x86_64 on linux.

[88.josh]

I believe that the Intel Celeron J4125 CPU up to 2.7GHz is 64 bit (the coprocessor is a 32-bit ARM) from what I have checked online. In any case, it’s good enough for me to give it a try (it’s an inexpensive computer and I have seen several hands-on reviews with people actually using it). Generally speaking the brand appears to have been going for some time and seem trustworthy- the market for small SBC like the raspberry pi is a strange place full of marketing promises and companies that disappear very quickly… so I’ll report back my results.

@britzl

I’m not sure of the purpose of that coprocessor

P.s the coprocessor is, from what I can gather, used to control arduino/raspberry pi compatible modules that use the GPIO.

[masterneme]

Just like you, I’ve tried in the past to make my own programs (mostly games HAHA) for RasPi. Tried the HTML5 route as well with the same results.

RasPis are powerfull but, IMO, they’re very underutilized devices. Because of this, there’s still no easy way to develop for them. The best way I found is using Löve2D or Raylib.

Another alternative is installing Android. This way you could use any engine with Android export capabilities, like Defold.

So if you want to use your RasPi and Defold I suggest you try installing Android first.

Maybe one day Defold supports RasPi too… wink Defold Team wink ( ͡° ͜ʖ ͡°)

[88.josh]

Oh nice!! Very useful tip. My other game (which you can see at donot-open.com) runs directly on an android phone with a USBOTG cable for the controller, so I will definitely try that tonight.

I have a couple of unusual requirements for this project like:

• I must be able to boot directly to my app with no user input
• the computer can’t have an on button, because I want to put it inside a metal box (pi was perfect for this, odyssey is not)
• must work with a USB gamepad

So I’ve yet to find anything which works perfectly. But if I can get android running, and find a way of automatically opening an app upon boot, that could be perfect, and if the gampead works… that would be perfect!