Performance problems using Canvas to Texture

Help & Support
1

Hi,
While trying to build a little fun Iron Man simulator. I followed the example on the playcanvas website for using the canvas as a texture for a HUD but have found that it seems to increasingly slow down the system as time goes on.

My example is

https://playcanvas.com/project/405441/overview/htc-vive-iron-man-test

I find that very slowly the framerate seems to drop until it eventually becomes unplayable. But if I take out the canvas bit it’s fine.

Anyone got any idea’s or experienced something similar with using canvas as a texture.

2

In canvas2d, you need to use ctx.beginPath() before each own shapes, otherwise it accumulates the commands and when you call stroke or fill it will iterate through accumulated list of shapes and perform drawing. Using beginPath it will flush that list.
That is probably why it gets slower and slower each frame.

3

That seem to improve the situation a bit but it still felt a bit sluggish so I have set the hud to refresh less often which seems to have solved the issue for the time being.

4

Uploading texture to GPU each frame - is expensive, especially if that texture is large.

5

ah! ok. do you know of some other techniques to use to create and update a HUD without uploading textures?

6

Use actual pre-made textures, and geometry. That will do.
Depends on hud complexity though.