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.
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.
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.
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?
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:
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
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… 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?
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.
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);
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
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)
Unfortunately I don’t know…
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).
