Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Export HTML5 - high GPU usage when viewing HTML in browser

Explorer ,
Mar 07, 2021 Mar 07, 2021

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?

 

 

413
Translate
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
LEGEND ,
Mar 07, 2021 Mar 07, 2021

Animate redraws the entire stage every frame.

Translate
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

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?

Translate
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
LEGEND ,
Mar 07, 2021 Mar 07, 2021

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. 

Translate
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
LEGEND ,
Mar 07, 2021 Mar 07, 2021

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.

Translate
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
LATEST

Thank you for explaining this. Makes sense.

Translate
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