Export HTML5 - high GPU usage when viewing HTML in browser

Explorer ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

I want to export my graphic design/animation from Adobe Animate to HTML5 canvas.
I'm a graphic designer and not a webdeveloper or coder.

 

I have noticed that when I export my graphic design to HTML5 in Animate, when viewing in the webbrowser, I see that it draws a lot of Power from the GPU.

 

I'm making something for a website where you see an animation when entering the website and then the final frame is a still frame and is kept on the screen. At the moment that still frame keeps drawing power from the GPU, and i don't understand why.

 

So i did some testing. I took a simple bitmap image (1920x1080) put it onto a HTML5 canvas (25fps) in Animate and exported that as a HTML5 without any animations.

I noticed that even though it is a still frame, it keeps drawing power from the GPU (+/- 10%).
When Changing the 25 fps to 1 fps, I noticed a drop to 1% GPU usage.

 

So this probably means that even though it is a still frame, HTML5 sees it as an animation?
Is that something that I can change in Animate without any coding?

 

 

Views

76

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

Animate redraws the entire stage every frame.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

Yes I understand. What I don't understand is why a still image that is just one frame keeps beeing redrawn.

My understanding of HTML is very limited, there are probably other and better ways to incorporate animations in HTML5 then use Animate?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

I don't know of the reason that Canvas has to redraw itself even if nothing has changed, but as a work around to your example, this should help:

createjs.Ticker.framerate = 1;

You could set the frame rate to be 1 fps, while you are lingering on a static image, and then change it to something faster if you need to animate something. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

It redraws the stage every frame because there's no way for it to track if anything's going to be different this time. There could be some code drawing different things each frame for all it knows. This is how pretty much all rendering engines work. Redraw everything, every time, no matter what.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 07, 2021 Mar 07, 2021

Copy link to clipboard

Copied

LATEST

Thank you for explaining this. Makes sense.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines