Motion blur


#1

Hi,

Is there some possibility to apply motion blur for HTML templates?
We have many lower third graphics with intro animations in vertical direction and the horizontal edges not seems very good - they are too sharp when moving upwards and look jerkily.
I fiddle with the css box-shadow, but in that case is necessary to set and animate parameters for each div in the template independently.
When I have tryied to use the css blur filter during the intro animation it looked good in Chrome browser, but Caspar was not able to render it smoothly even when I have increased th “buffer-depth” parameter and set latency to normal.

Thanks

Jarda


#2

Which version are you on?
Enabling GPU and forcing antialiasing and other settings in Nvidia’s control pannel helped in some cases.
Unfortunately GPU mode on HTML templates have a bug in my setups.


#3

@rrebuffo What’s the bug you’re currently facing using GPU mode on HTML templates?


#4

GPU memory leak.
Not a big issue on short use cases but a no go on 24/7 broadcasts that rotate templates regularly.
It seems I’m the only one experiencing this issue, so go ahead and try. You might be ok.


#5

I use version 2.3.
I have this:

<html>
    <enable-gpu>true</enable-gpu>
</html>

in casparcg.config. Is this the right way to enable gpu?

There is tons of parameters in NVIDIA Control Panel… Could You please write me exactly what and how to set up there? I have P2000 card.
Thanks
J


#6

Have you found that you also face this issue when using a single, long-running template? Such as a template with multiple functions that can ibe nvoked to hide/show discrete elemets of the template? Or only when switching between templates over the course of a long session?


#7

Can you share a video of that?

I tested with some templates and although specific filters and animation timings make for some weird glitches on CEF, it seems ok both in GPU and CPU modes (sometimes CPU mode can’t catch up with blurs)

I usually set texture handling to maximum performance (not sure if it affects Caspar’s mixer) and force antialiasing to smooth out borders.
I don’t have access to a P2000 control panel for the moment, but these are the settings I change in Geforce control panel:


#8

No, it just affects new HTML producers. If I update the same producer it behaves correctly.


#9

I set nVidia according to Your dispositions.
I share three examples:

First - only TranslateY without blur - works ok, but without blur it is too sharp and looks jerkily:

  animationObject = $(idObj); 
  animationObject.css({transform: 'translateY(0px)'});
  animationObject.css({transitionDuration:  titDurationIn }); 
  animationObject.css({transitionTimingFunction: 'cubic-bezier(.17,.67,.41,1)'}); 

The first result is here: https://youtu.be/XJaS4Za7_rY

Second - TranslateY and filter blur - looks nice in Chrome, but not usable in Caspar because there is a big twitch after the start of the animation - I can’t tell caspar to do a complete rendering first and then play everything smoothly

CSS
.blur { animation: blur 650ms forwards }
@keyframes blur {
  0% {  filter: blur(0px); }
  50% { filter: blur(4px); }
  100% { transform: translateY(0px); filter: blur(0px); }
}
JS
animationObject.addClass('blur');

The second result is here: https://youtu.be/nSSZRW12rnY

Third attempt - the same, but with using translate3d and blur 4px - the animation is total unusable in Caspar - a few jumps instead of a smooth motion. There is everything beautifully smooth again in the Chrome browser. I do not understand it at all…:disappointed_relieved:
https://youtu.be/HTKO2x-sGAU

My Hw configuration is good - Xeon-W2133/3,6 GHz, 32 GB RAM, Win 10, Two SSD disc etc…

Where could be a problem?
Could you publish the source code of the animation you created the attached sample?

Thans a lot.

Jarda


#10

Why are you starting with blur(0px), then blurring it, then moving it and then deblurring?

How does this look?

@keyframes blur {
  0% {  filter: blur(4px); }
  99% { transform: translateY(0px); }
  100% { filter: blur(0px); }
}

Or reverse it and have the element originally blurred but the class just moves it and deblurs.

I’d also time it so it works better with your intended framerate - multiples of the milliseconds of one frame duration.

Also check the animation with DevTools>Animation set to 10 or 25%.


#11

I have change my animation according to Your settings of keyframes and have tryied many similar variants.
I use 25 frames per second so I set the animation time to 600ms, that means 15 frames .
Everything goes welll in Chrome and everything jumps in Caspar. Usually around the frames where the low blur changed to zero blur.
When I have inspected the animation in Chrome DevTool it looks quite nice without any problem.


#12

Though filter should make sure the element is in a composite layer (but only if you have the filter on before adding the class, like I suggestsed with having it blurred initially) you could try adding 'will-change: filter; or transform: translate3d(0,0,0);


#13

It seems to be something wrong with 2.3 version.
When I went back to 2.2. and set blur in 100% not to exactly ZERO, but to 0.3px the result is much more better:
https://youtu.be/acTarRhTp-U


#14

Ha.
The problem was not CS version 2.3. but in settings of NVIDIA card. When I set it to default values, both versions (2.2 and 2.3) produce the same results.

But what is still strange is that the actual usage of the GPU is the same even if I set the parameter gpu-enabled to true and to false in casparcg.config

<html>
    <enable-gpu>true</enable-gpu>
</html>

Incomprehensible to me is the fact that on two very similar PCs
(Xeon 6 core resp. 8 core, 3.6GHz, 32GB RAM, NVIDIA P2000, SSD, Decklink Duo 2, Win10)
and exactly the same version of CasparCG (2.3.0. 7829b13b Dev x64)
is a significantly different picture of resource usage when running exactly the same simple HTML templates (one div with text and linear translate3d in X axis - crawl)

see both pictures from DIAG:

Where could be the cause and is there anything suspicious in either of the two pictures?


#15

Windows build difference? Driver version differences?


#16

Unfortunately I don’t know…:disappointed_relieved:
Did You mean Chrome driver or some other?

I’m a little concerned that the use of gpu (measured by Task manager ) by Caspar is exactly the same in both settings of enable-gpu parameter in config (tested with html template with css translate3d transform)
Only difference between true and false settings seems to be the text: “[0509/213718,889:ERROR:gpu_process_transport_factory.cc(990)] Lost UI shared context” in console log after starting Caspar server in case of enable-gpu=false. This text has been written only to console window, not to the log file (before initializing html module).

[2020-05-09 21:37:18.100] [info]    ############################################################################
[2020-05-09 21:37:18.100] [info]    CasparCG Server is distributed by the Swedish Broadcasting Corporation (SVT)
[2020-05-09 21:37:18.100] [info]    under the GNU General Public License GPLv3 or higher.
[2020-05-09 21:37:18.100] [info]    Please see LICENSE.TXT for details.
[2020-05-09 21:37:18.101] [info]    http://www.casparcg.com/
[2020-05-09 21:37:18.101] [info]    ############################################################################
[2020-05-09 21:37:18.101] [info]    Starting CasparCG Video and Graphics Playout Server 2.3.0 7829b13b Dev
[2020-05-09 21:37:18.762] [info]    Initializing OpenGL Device.
[2020-05-09 21:37:18.763] [info]    Initialized OpenGL 4.5.0 NVIDIA 440.97 NVIDIA Corporation
[2020-05-09 21:37:18.854] [info]    D3D11: Selected adapter: NVIDIA Quadro P2000
[2020-05-09 21:37:18.854] [info]    D3D11: Selected feature level: 45312
[2020-05-09 21:37:18.861] [info]    Initialized ffmpeg module.
[2020-05-09 21:37:18.861] [info]    Initialized oal module.
[2020-05-09 21:37:18.861] [info]    Initialized decklink module.
[2020-05-09 21:37:18.861] [info]    Initialized screen module.
[2020-05-09 21:37:18.861] [info]    Initialized newtek module.
[2020-05-09 21:37:18.958] [info]    Initialized html module.
[2020-05-09 21:37:19.332] [info]    Initialized flash module.
[2020-05-09 21:37:19.333] [info]    Initialized bluefish module.
[2020-05-09 21:37:19.333] [info]    Initialized image module.
[2020-05-09 21:37:19.333] [info]    "C:/CasparCG23\casparcg.config":
[2020-05-09 21:37:19.333] [info]    -----------------------------------------
[2020-05-09 21:37:19.333] [info]    <?xml version="1.0" encoding="utf-8"?>
[2020-05-09 21:37:19.333] [info]    <configuration>
[2020-05-09 21:37:19.333] [info]       <log-level>info</log-level>
[2020-05-09 21:37:19.333] [info]       <paths>
[2020-05-09 21:37:19.333] [info]          <media-path>d:/Grafika/Joby/CTSport2019/Images/</media-path>
[2020-05-09 21:37:19.333] [info]          <log-path>log/</log-path>
[2020-05-09 21:37:19.333] [info]          <data-path>data/</data-path>
[2020-05-09 21:37:19.333] [info]          <template-path>d:/Grafika/Joby/CTSport2019/Html/</template-path>
[2020-05-09 21:37:19.333] [info]          <font-path>d:/Grafika/Joby/CTSport2019/Fonts/</font-path>
[2020-05-09 21:37:19.333] [info]       </paths>
[2020-05-09 21:37:19.333] [info]       <html>
[2020-05-09 21:37:19.333] [info]          <enable-gpu>false</enable-gpu>
[2020-05-09 21:37:19.333] [info]       </html>
[2020-05-09 21:37:19.333] [info]       <lock-clear-phrase>secret</lock-clear-phrase>
[2020-05-09 21:37:19.333] [info]       <thumbnails>
[2020-05-09 21:37:19.333] [info]          <generate-thumbnails>false</generate-thumbnails>
[2020-05-09 21:37:19.333] [info]       </thumbnails>
[2020-05-09 21:37:19.333] [info]       <channels>
[2020-05-09 21:37:19.333] [info]          <channel>
[2020-05-09 21:37:19.333] [info]             <video-mode>1080i5000</video-mode>
[2020-05-09 21:37:19.333] [info]             <straight-alpha-output>true</straight-alpha-output>
[2020-05-09 21:37:19.333] [info]             <consumers>
[2020-05-09 21:37:19.333] [info]                <decklink>
[2020-05-09 21:37:19.333] [info]                   <device>1</device>
[2020-05-09 21:37:19.333] [info]                   <embedded-audio>false</embedded-audio>
[2020-05-09 21:37:19.333] [info]                   <latency>normal</latency>
[2020-05-09 21:37:19.333] [info]                   <key-only>false</key-only>
[2020-05-09 21:37:19.333] [info]                   <keyer>external</keyer>
[2020-05-09 21:37:19.333] [info]                   <buffer-depth>8</buffer-depth>
[2020-05-09 21:37:19.333] [info]                   <custom-allocator>true</custom-allocator>
[2020-05-09 21:37:19.333] [info]                </decklink>
[2020-05-09 21:37:19.333] [info]                <system-audio/>
[2020-05-09 21:37:19.333] [info]             </consumers>
[2020-05-09 21:37:19.333] [info]          </channel>
[2020-05-09 21:37:19.333] [info]          <channel>
[2020-05-09 21:37:19.333] [info]             <video-mode>1080i5000</video-mode>
[2020-05-09 21:37:19.333] [info]             <straight-alpha-output>true</straight-alpha-output>
[2020-05-09 21:37:19.333] [info]             <consumers>
[2020-05-09 21:37:19.333] [info]                <decklink>
[2020-05-09 21:37:19.333] [info]                   <device>2</device>
[2020-05-09 21:37:19.333] [info]                   <embedded-audio>false</embedded-audio>
[2020-05-09 21:37:19.333] [info]                   <latency>normal</latency>
[2020-05-09 21:37:19.333] [info]                   <key-only>false</key-only>
[2020-05-09 21:37:19.333] [info]                   <keyer>external</keyer>
[2020-05-09 21:37:19.333] [info]                   <buffer-depth>8</buffer-depth>
[2020-05-09 21:37:19.333] [info]                   <custom-allocator>true</custom-allocator>
[2020-05-09 21:37:19.333] [info]                </decklink>
[2020-05-09 21:37:19.333] [info]                <system-audio/>
[2020-05-09 21:37:19.333] [info]             </consumers>
[2020-05-09 21:37:19.333] [info]          </channel>
[2020-05-09 21:37:19.333] [info]       </channels>
[2020-05-09 21:37:19.333] [info]       <controllers>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5250</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5251</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5252</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5260</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5261</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]          <tcp>
[2020-05-09 21:37:19.333] [info]             <port>5262</port>
[2020-05-09 21:37:19.333] [info]             <protocol>AMCP</protocol>
[2020-05-09 21:37:19.333] [info]          </tcp>
[2020-05-09 21:37:19.333] [info]       </controllers>
[2020-05-09 21:37:19.333] [info]       <amcp>
[2020-05-09 21:37:19.333] [info]          <media-server>
[2020-05-09 21:37:19.333] [info]             <host>localhost</host>
[2020-05-09 21:37:19.333] [info]             <port>8000</port>
[2020-05-09 21:37:19.333] [info]          </media-server>
[2020-05-09 21:37:19.333] [info]       </amcp>
[2020-05-09 21:37:19.333] [info]    </configuration>
[2020-05-09 21:37:19.333] [info]    -----------------------------------------
[2020-05-09 21:37:19.368] [info]    Initialized OpenGL Accelerated GPU Image Mixer for channel 1
[2020-05-09 21:37:19.369] [info]    video_channel[1|1080i5000] Successfully Initialized.
[2020-05-09 21:37:19.369] [info]    Initialized OpenGL Accelerated GPU Image Mixer for channel 2
[2020-05-09 21:37:19.370] [info]    video_channel[2|1080i5000] Successfully Initialized.
[2020-05-09 21:37:19.391] [info]    DeckLink Duo 2 [1-1|1080i5000] Disabled low-latency mode.
[2020-05-09 21:37:19.392] [info]    DeckLink Duo 2 [1-1|1080i5000] Enabled external keyer.
[2020-05-09 21:37:19.397] [info]    DeckLink Duo 2 [1-1|1080i5000] Initialized.
[2020-05-09 21:37:19.489] [info]    DeckLink Duo 2 [1-1|1080i5000] Reference signal: not detected.
[2020-05-09 21:37:19.824] [info]    oal[1|1080i5000] Initialized.
[2020-05-09 21:37:19.847] [info]    DeckLink Duo 2 [2-2|1080i5000] Disabled low-latency mode.
[2020-05-09 21:37:19.847] [info]    DeckLink Duo 2 [2-2|1080i5000] Enabled external keyer.
[2020-05-09 21:37:19.852] [info]    DeckLink Duo 2 [2-2|1080i5000] Initialized.
[2020-05-09 21:37:19.852] [info]    oal[2|1080i5000] Initialized.
[2020-05-09 21:37:19.852] [info]    Initialized channels.
[2020-05-09 21:37:19.860] [info]    Initialized controllers.
[2020-05-09 21:37:19.860] [info]    Initialized osc.
[2020-05-09 21:37:19.912] [info]    DeckLink Duo 2 [2-2|1080i5000] Reference signal: not detected.

#17

Why do you open 6 ports for communication? You can connect multiple clients to one port.


#18

You are right. I will open only one port, but it does not solve my problem with GPU…


#19

Any idea why Caspar do not use the GPU for HTML templates with enable-gpu=true in one computer?