3

I have encountered a problem while developing a dashboard which is supposed to run on a Raspberry Pi 3. It is a combination of a HTML5 canvas as background to create visuals and some simple elements with CSS transitions on top of that.

I have noticed very bad performance (low framerate) during the tests on the device itself, which lead me to believe that the canvas was the reason for the drastic fps drop. I temporarily removed it and was surprised, that the performance didn't improve at all.

I have found following post on this forum, which sadly wasn't able to help me but may be valuable for someone reading this: Why is my simple HTML Canvas rendering only 11fps in Chromium a Pi3? (I have tested the answer given by a user but it resulted in even worse frame rate)

Another important thing to mention is that I have a constant symbol of "undervoltage" on the top right corner since I am using a standard micro-USB cable. It's possible that this is the main reason contributing to the poor performance but i have ordered a official power supply and hope to see better results. I will be able to update this post in a few days.

Ghanima
  • 15,958
  • 17
  • 65
  • 125
Loris Sikora
  • 39
  • 2

2 Answers2

2

This question was asked back when chromium was not hardware accelerated (much).
But for those who have the same problem nowadays, this will enable hardware acceleration:

  1. Run sudo raspi-config in the terminal.
  2. Select "Advanced options" using the down arrow key and pressing Enter.
  3. Select "GL Driver"
  4. Select "GL (Fake KMS)"
  5. Exit raspi-config by selecting "Finish". Reboot for the changes to take effect.
Botspot
  • 1,829
  • 9
  • 29
0

translate3d can "force" hardware acceleration. It's a trick web developers use for responsive design. They found it particularly useful to force GPU on smartphones. Turns out it works pretty well for the Pi as well. Use that in your CSS instead of translate.

  • transform: translateZ(0);
  • transform: translate3d(0,0,0);
  • perspective: 1000; backface-visibility: hidden;
DOSed_And_Confused
  • 3
  • 4