Hello,
I have tryied to make some very simple HTML templates for testing CasparCG possibilities for our TV broadcasting in the future.
When I test a roll template (list of creators to the end of the boradcast) with a simple transition (translate3d(0px, -2600px, 0px), the text sometimes jerk. When I play a clip in the underlaying layer simultaneously, jerking of the text is terrible.
When the transition goes from right to left, everything is OK, but it is not a goal…
I have new workstation with 2 Xeons, Quadro P4000, 64 Gb RAM, W10 and Decklink Mini Monitor 4K - for testing connected by HDMI to videoinput of the TV.
Performance CPU/GPU was 4%/8%.
Settings Caspar Server and Decklink - 1080p50.
I am afraid, that “requestAnimationFrame” is for JavaScript based animations. I use CSS transition.
“Jerking” maybe is not the right word. The whole text just sometimes stops and after some miliseconds jumps up for some pixels and continues to run again. Sometimes it happened once per whole duration (15 seconds), sometimes not even once, sometimes three times. When the underlying clip is playing in the bottom layer it happeded for instance 20 times in 15 seconds.
There must be some settings for tunnig this behavior - CPU and GPU performance is under 10%, so there is more than 90% reserve!
When the transition goes from right to left, everything is OK. Why?
I’ve seen similar things. A friend who’s dealt a lot with graphics said that it’s due to the maths of scrolling speed, frame rate, and number of horizontal lines. To use a made-up example
frame 1- position is line 2
frame 2- position is 3.1, rounded to 2
frame 3- position is 4.2, rounded to 4
frame 4- position is 5.3 (5)
etc.
Apparently, it’s very difficult to get vertical scrolling to look good (usually involves adding motion blur and drop shadows). We usually end up rendering scrolls in Premier, but that’s not always possible.
I am afraid, that this is probably not the case, because my jerking is much more then one pixel (I estimate 10-20px), it occurs irregularry and frequency of appearance depends on whether the clip is running in the underlying layer. For instance sometimes it does not happen at all within 15 seconds when the text is scrolling.
J
I think it has to do with the fact, that the motion is not synchronized with the frame rate of the output channel and that make it sometimes not rendering a new frame, when the channel would need one, specially when performance is used elsewhere (clip playback). That is what this requestAnimationFrame callback does (if I understand that right), whenever the output stage needs to display a frame it calls for one. So there is never a moment, when one frame is shown twice. So, I think you will never get it to work reliably with CSS animation.
I tend to agree with Didi that using CSS transition is probably not the right way.
While I don’t know about 2.2, IIRC in 2.1 you could scroll a static HTML page (you can certainly scroll a image…1920px wide, 10000px tall ), would that work for you? (Can’t try it at the moment.)
I looked at the AMCP commands and tryied PLAY with “additional parameters” and also the FILL command which also can animate the content of the layer but I did not find any combination of parameters for moving an template which is higher then layer height from the bottom edge behind the top edge.
For a roll the image need to be the width of the channel and the height it needs (for instance 1920 x 10000), for a scroll it needs toi be the height of the channel (10000x1080). The numver after BLUR sets the motion blur, the number after SPEED ist the speed AFAIK in pixels per frame. This works in all versions before 2.2
The FILL command can not be used for this, as an image bigger than the channels size will be scaled on LOAD or PLAY.
I think CSS transitions as well as manual animating with the requestAnimationFrame callback is a totally legit way to do this and I am surprised that there is a problem with it. People are even building 3d engines with CSS transforms.
@Jarda, if you don’t mind, I would like to have a look at your template and see if I can find something. Could you dm me a download link?
I confirm, there is a problem with rendering engine.Roll01x.html (2.1 KB)
attached version is jQuery free, and i added Play/Stop events for ease of testing with CasparClient.
Jarda: your example is perfectly fine form HTML/CSS point of view.
I only replaced transform3d to normaln 2d transform (i assume, that You wanted to force HW acceleration) - i think it works a bit better, but still… form time to time, there is a small jump, and this can be platform dependent.
I can confirm that. I did some tests on my machine and I also couldn’t get rid of the lags. I added a frames counter and you can clearly see that rates are dropping below 10 fps. If I run the HTML template in the browser I have a rate constantly above 40 fps. Chromium Embedded Framework, the component that hosts the browser engine, is used with a max frame rate set to the frame rate of the video-mode. Trying 1080p5000 doesn’t really help: interestingly, the fps is seldom higher than 30 fps (even without the animation)
