Greeting y’all, this might sound insane, but does anyone know of a way to prevent the HTML canvas from updating while PlayCanvas still renders new frames. The gist is, I need to update the scene in a way that requires I render new frames; however, I don’t want to show the user the ugliness. I can of course overlay some HTML element on top of the canvas to hide the ugly duckling, but being able to “freeze” how the canvas looks would be the ideal solution.
Hi @Chris,
That’s an interesting request, indeed the easiest way would be to overlay something on top.
If you would like to keep the active frame in place, the hard way which I imagine you want to avoid would be to grab it (e.g. render it to a texture or use the full canvas image), extract it as an image and use it on an HTML element. That is too much work already 
Searching online I came up with this, I haven’t ever tried it myself but you may be able to patch the forward renderer in the PlayCanvas engine to give it a try:
1 Like
Would disabling autorender work in this case?
https://developer.playcanvas.com/en/api/pc.Application.html#autoRender
1 Like
Thanks for the suggestion @yaustar. Unfortunately it wouldn’t because for my weird use-case, basically I’m working with dynamic cubemaps that make a material briefly appear black when they first load, after a couple hundred milliseconds the dynamic cubemap is rendered and applied to the material, and it looks normal again. I’m trying to see if I can hide this from the user, but this requires that the scene still gets rendered for these dynamic cubemaps to work.
I’ve been hoping maybe there was a way to freeze things on the canvas side of things.
@Leonidas I tried monkey-patching the forward rendered by altering the graphics device draw function. While it did freeze the canvas perfectly, I found it also wasn’t rendering frames in WebGL behind the scenes.
Most recently, I’ve been toying with updating the graphics device to briefly use the experimental API, Offscreen Canvas, and switch back to the normal canvas afterward. But, I’m running into a lot of engine errors suggesting OffscreenCanvas can’t just be swapped in.
While doing the research, I came across an MDN doc about WebGL Canvas performance improvements that are possible by putting the player sprite or the UI into a separate canvas, which can be sized differently and updated independently. Pretty cool stuff.
1 Like
That’s quite interesting, hope it works out for you.
If not, wouldn’t capturing a screenshot and overlaying it on top of the canvas as an HTML element work for you? Or the performance cost is too high?
1 Like
Oh that’s an interesting idea. Maybe you can use render to texture like this Resolution Scaling | Learn PlayCanvas in a similar way?
2 Likes