Feature request/implementation: GPU acceleration

[Syonyk]

Playing with this on my home TV computer (WIn10, 4k display), I found it would frequently start dropping the framerate on crossfades (I'd reduced the time of images to match our desires, so they're moving a bit faster than default, and this shows up).

Forcing GPU acceleration seems to resolve the issue with no downsides.

Adding:

transform: translateZ(0);

to the .photo section in index.css will, on most browsers, force GPU acceleration and smooth out the transitions.

So, mine looks like this (transform speeds changed, you don't need to change those):

.photo
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: none;
	opacity: 0;
	transition: opacity 5s linear, transform 20s linear;
        transform: translateZ(0);
}

[RandScullard]

I'm curious why you needed to add that -- I'm getting GPU acceleration (and smooth 60 FPS rendering) without any change to the CSS. When I change the transform speed, it doesn't seem to make any difference to the frame rate. I'd like to get more information to understand why we're getting different results.

Using Developer Tools on my setup, it looks like Chrome promotes the photo element to a separate layer without being told to do so; adding transform: translateZ(0) (or its more modern equivalent, will-change: transform) doesn't alter Chrome's behavior at all in my testing. (I'm following the instructions in this article to see the compositing layers.)

Using Developer Tools, do you see that the layering changes when you add transform: translateZ(0)? The "Paint flashing" and "FPS meter" options might also provide some clues.

[Syonyk]

I don't have developer tools installed on the box it runs on (living room TV computer). I just noticed it was animating at a low framerate, and adding the translateZ flag fixed it. That install involves copying the folder over after it's been built on a different box.

How do you bring up the dev console on a full screen app? NodeJS/Electron is a new framework for me - I normally live far lower in the stack doing embedded work.

[RandScullard]

The good news is there's nothing to install - the developer tools are part of Chrome. To make debugging easier, there are a few quick changes you can make to the photo-screen-saver source code (and rebuild of course):

Edit main.ts and un-comment this line:

//mainWindow.webContents.openDevTools();

You can optionally comment out these lines:

mainWindow.setKiosk(true);
mainWindow.setAlwaysOnTop(true);

In index.ts, you can comment out this line to stop it closing when you move the mouse:

setupEvents();

(It can be a bit frustrating when you're in the middle of debugging and the whole thing closes because you moved the mouse over the viewport.)

[Syonyk]

Perfect, I'll see what I can figure out when I have some time in the next few weeks. Thanks!

[RandScullard]

Closing due to inactivity.