It is currently 28 Mar 2017, 11:03



3d transforms in html producer

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

3d transforms in html producer

Postby philetaylor » 29 Dec 2014, 04:20

Hi.

I am using the Christmas break to redesign many of my CasparCG templates and thought I would take the opportunity to use the HTML producer in CasparCG 2.0.7 (I never really got on with flash!)

I am finding it much easier (especially debugging) and so far performance seems comparable. Most of my Flash templates use the Greensock GSAP library and the Javascript version seems to work just as well.

I have hit a snag with one of my templates though. It it a 'team sheet' and uses a flipping-card effect (to display player images). The template works perfectly in Chrome but when I run it in CasparCG, the flip effect works but it isn't flipping between the front and back of the cards is is just showing the back.

I have read some stuff with seems to suggest that 3d transforms aren't supported by CEF3 but I can't confirm this. Unfortunately, this is required by the way I am flipping the cards. Each card has two DIVs (front and back) and I rotate them through 180 degrees. I have the CSS properties backface-visibility: none; and transform-style: preserve-3d; which means that when one side is rotated through 180 degrees, it should be transparent and show the other side but this doesn't seem to be happening, the card flips over but only ever shows the back image!

As I said this works perfectly in Chrome browser so I am at a bit of a loss and suspect it is a CEF3 bug/feature?

Alternatively, does anybody have any suggestions how to do this without requiring 3d-transforms?

Cheers

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby philetaylor » 29 Dec 2014, 18:11

I have done a bit more research on this issue and it does appear to be specific to CasparCG.

I have downloaded the same version of libcef.dll and cefclient.exe from cefbuilds.com as is being used in CasparCG 2.0.7 (CEF 3.1750.1714) and that displays a test webpage perfectly ( http://thewebrocks.com/demos/3D-css-tester/ ) I tried both the 32bit and 64bit versions of cefclient.exe to see if that makes any difference.

If I load the same page in CasparCG ( PLAY 1-1 [html] http://thewebrocks.com/demos/3D-css-tester/ ) the animation at the top is flat (not 3d)

It is possible that this is a problem with my development PC so could somebody try loading the above page into CasparCG and see if it animates correctly in 3d? (you will need to try it in Chrome or some other browser as well so you know what it should look like!!!). I am hoping that it is just the crappy ATI chipset in my devel pc and that it works fine on our "proper" server?

If not, suspect that there may be a configuration option missing to enable 3d but it is possible that this was intentional???

Cheers

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby didikunz » 29 Dec 2014, 20:09

I just tried it on my system. It does not work either. Please post a bug report. Link in my signature.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: 3d transforms in html producer

Postby CoyHot » 30 Dec 2014, 17:19

Hi

I made some tests a few months ago using the CEF3 lib with Python and Qt for the interface.
I tried to recreate a "mini-CasparCG" (just for experimental purpose) without any FFMPEG support. Just focussing on the HTML part.

3D CSS and WebGL worked perfectly, GPU accelerated of course ... but at this time I only used direct rendering mode in the CEF lib. As far as I know, CasparCG use the Offscreen Rendering mode of the CEF library and catch the output buffer to composite the resulting image with the other producers. And by this way, I can't confirm that GPU is supported for this mode, yet.

Some posts on the CEF developement forum seems to be contradictory about this topic. Maybe that's the reason why HTML producer does not support 3D and GPU acceleration yet.

In the case of WebGL, some features are supported, but only the ones who can be computed by the CPU instead of the GPU (no GLSL shader, no Depth buffer, etc ...)
Francois "CoyHot" Grassard
2D/3D/VFX Artist and Developper
Automate-It / ivory.fr
User avatar
CoyHot
 
Posts: 20
Joined: 27 Jul 2014, 14:35

Re: 3d transforms in html producer

Postby philetaylor » 30 Dec 2014, 17:35

If CasparCG does use Offscreen Rendering that probably explains why it isn't working... I agree that the CEF3 dev forum does seem a bit confusing on this point but there seem to be recent discussions around redevelopment of this part of CEF3.

I have also tried the above test site in the older cefclient with offscreen rendering enabled and it is exactly the same as in CasparCG. Interestingly, the latest version of cefclient (3.2217.1950) works fine in both modes so that suggests that they have fixed it?

I'm not sure what exactly is involved in upgrading the version of libcef.dll so may have a play with this for dev purposes.

Cheers

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby philetaylor » 30 Dec 2014, 20:43

In answer to my last question, it appears quite a bit is involved in upgrading to the latest branch of CEF3 as the API seems to have changed significantly.

I have found (almost) a workaround using jQuery to swap the z-index of the card front/back. This should be sufficient to get round my current problem but the animation isn't that great...

Cheers

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby Jesper Stærkær » 30 Dec 2014, 21:10

Glad to see someone investing time in HTML workflow. CoyHot, how's your AE workflow coming?
Jesper Stærkær
Independent Consultant at SuperFly.tv
User avatar
Jesper Stærkær
 
Posts: 835
Joined: 13 Apr 2010, 18:06
Location: Trondheim, Norway

Re: 3d transforms in html producer

Postby philetaylor » 06 Jan 2015, 16:52

Hi.

I have found some other things that aren't working as expected (but work fine in Chrome) that seem to be directly related to offscreen rendering.

The latest one is video clip opacity or masking (basically doing anything other than simply playing the video clip). This also requires hardware acceleration which isn't supported in the version of CEF3. These are the sort of features that can really make a template "sparkle" so it is a shame but having looked at the code, I realise it is a fairly significant change and would involve using an unreleased version of CEF3 which I appreciate is not ideal (my solution for now is to manually mask all of the video clips with ffmpeg into new files at the same time as converting them to webm.)

I am still really impressed with the .html template support though, apart from working around these little issues, it seems to be rock-solid. We had our first match using some of the new templates on Sunday and apart from me throwing a cup of coffee over my 3 x-keys keyboards everything went without a hitch! (yes I know you should NEVER have drinks in the control room!)

Cheers

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby gray1st » 15 Feb 2015, 15:28

hi Phil

If possible I'd be really interested to know what your end solution was for the 3d effects. I'm trying to learn various 3d effects in html5, and didn't think css3 was supported by Caspar, is that incorrect?
gray1st
 
Posts: 69
Joined: 16 Mar 2011, 17:47

Re: 3d transforms in html producer

Postby philetaylor » 15 Feb 2015, 15:35

Hi.

The CasparCG HTML producer supports everything that Chromium Embedded Framework (CEF3) supports (including CSS3). The issue is that off-screen rendering is used within CEF3 and the released version of CEF3 doesn't support 3d transforms when using off-screen rendering.

I didn't really get around my problem as instead of doing a 3d transform, I rotated the cards around the z azis and when they were at exactly 90 degrees, swapped the front and back images. It doesn't look as slick as a proper 3d transform but does work.

Thanks

Phil
philetaylor
 
Posts: 16
Joined: 18 Jan 2014, 14:45

Re: 3d transforms in html producer

Postby balte » 16 Feb 2015, 17:19

3d effects are however supported when using OpenGL or Canvas elements. Canvas elements do appear to have some performance issues however.
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 243
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: 3d transforms in html producer

Postby itod » 25 Aug 2016, 17:18

Sorry to ping an old thread, but this issue is still not resolved in most recent Caspar 2.1 server. You can see, for instanace, when you visit http://desandro.github.io/3dtransforms/examples/carousel-02-dynamic.html a nice carousel which I wanted to use, but when I've sent "play 1-1 [HTML] http://desandro.github.io/3dtransforms/ ... namic.html" to the server this is the result:
Image

In some places they say that CEF now supports hardware acceleration for off-screen rendering. Is it possible that CEF is not updated in the latest Caspar server build? If it is updated and it is really CEF's fault CSS 3D transformations don't work - should we consider switching HTML rendering engine to something that works?
itod
 
Posts: 95
Joined: 29 Oct 2011, 20:54

Re: 3d transforms in html producer

Postby balte » 26 Aug 2016, 07:55

The cef producer is not updated in 2.1.0 due to issues regarding performance and webgl rendering.
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 243
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee

Re: 3d transforms in html producer

Postby itod » 26 Aug 2016, 09:34

balte wrote:The cef producer is not updated in 2.1.0 due to issues regarding performance and webgl rendering.


Can you please point to where are those issues discussed? Is it something that can be resolved? I'm willing to help developers if they need it, this 3D transformations are important to me.
itod
 
Posts: 95
Joined: 29 Oct 2011, 20:54

Re: 3d transforms in html producer

Postby balte » 26 Aug 2016, 11:39

Discussion about why cef hasn't been upgraded is here: viewtopic.php?f=3&t=3153&p=23782&hilit=cef#p23782

But any new discussions should probably be started on github: http://github.com/CasparCG/server
CasparCG enthusiast and broadcast geek - Sometimes, I do get payed for this stuff.
User avatar
balte
 
Posts: 243
Joined: 24 Jan 2015, 16:23
Location: The Netherlands, Goeree Overflakkee


Return to Content

Who is online

Users browsing this forum: No registered users and 3 guests