How to run cesium on server side and capture animation frames?

CesiumJS
1

I have a use case in which cesium has to run on server side. Basically i want to run an animation in cesium and capture its frames using PhantomJS (not necessarily phatomjs it can be some other way). How should i do it? Should i be running it in headless browser? I have no idea how to do it because i am still in learning phase. Can someone help?

2

Hi Qandeel,

There was recently a thread on this topic! Check it out here: https://groups.google.com/forum/?hl=en#!topic/cesium-dev/mvylCnnuabI

Please feel free to join that discussion – if none of the proposed solutions work for you, we’ll try to suggest another workaround.

Cheers,

  • Rachel
3

Hello Rachel,
I tried the solution given in the thread. I am facing a problem with CCapture. The redefinition of functions like window.performance.now and window.setTimeout in CCapture is giving strange camera animations. The camera.flyTo no longer works as desired (it just snaps to the location) and my custom animations which worked using performance.now are also behaving strange. When i remove the redefinition of performance.now and setTimeout from CCapture.js the animations start working again but the recorded animation is bit laggy. Am i doing something wrong?

This is my import sequence:

Video Creation

``

VideoComponent.js contains my code.

4

Hi Qandeel,

Unfortunately, I’m not familiar with CCapture, so I can’t tell you what your bug is. However, I’d encourage you to reach out to the CCapture community via their repo, and perhaps check through their open issues to see if your problem is a known issue (https://github.com/spite/ccapture.js/issues). Apart from that, capturing Cesium frames should be no different than capturing any canvas animation, it’s just not something that the Cesium team has spent time familiarizing ourselves with.

Best,

  • Rachel
5

What if I want to shift Cesium entirely at server side? Can i use it with headless-gl? If yes, can you give me some hints where to start?

6

Rendering Cesium frames in node with headless-gl is not an option because it does not implement enough of the WebGL specification (particularly its interaction with the DOM). Cesium itself also requires a DOM. Long term it is certainly possible that headless-gl improves enough to support Cesium, but we would need modifications in Cesium to allow this as well.

Your best bet for now is a browser-based framework like Electron, which you can use in Node just like headless-gl and will work with Cesium without any modifications. If your server is in a headless environment, then the only hurdle is figuring out how to enable either GPU-acceleration or mesa for software rendering of Cesium frames. You could start by simply writing a desktop command line Node app that takes an extent on the globe and then uses Cesium in the background to return a screenshot of it. Step two would be hooking that up to work in a webservice, which should be straightforward.

I think this would make for an awesome project, the only reason I haven’t done it myself yet is I just don’t have the time. If anyone decides to take this on, we would love to share it with the community and I think it would make an awesome guest blog post.

7

Glad to know that its possible with electron. I will try to follow your instructions and let you know what happens.

8

I am facing some issues running electron on my Ubuntu headless server. At first Electron was unable to even start because, i guess, it’s dependent on GUI libraries (GTK in ubuntu server). I installed those on the Server. But on running again, it is unable to open display. I connect to server via ssh. Below is screenshot of cmd output:

9

Matthew, can you please guide me?

10

This is where my knowledge starts to hit its limit. On our travis server, we use xvfb (https://www.x.org/archive/X11R7.6/doc/man/man1/Xvfb.1.xhtml) to set up a virtual x desktop so that we can run Electron. However, xvfb does not support webgl so it won’t help here.

I haven’t looked into this myself, but https://xpra.org/trac/wiki/Xdummy might be a good solution here. If you try it out and get it working, definitely let us know. Unfortunately I don’t know what the step by step solution would be.

11

I have implemented a very small desktop application with web service using your advice. I don't think this will work headless but it may be a useful starting point.

Please see here:
https://github.com/cleroux/cesium-server

12

Hi Qandeel,
I am facing with the same problem with CCapture. It made some animation unusual. Could you tell me how do you deal with it? Besides I call some animation in Cesium clock tick listener, which dose not work when use the CCapture. Should I call the function in postRender listener instead of clock tick listener?

Cheers,

Nill

在 2017年5月7日星期日 UTC+8上午12:52:35，Qandeel Abbassi写道：

13

I use this code:
viewer.scene.postRender.addEventListener(function(){
capturer.capture(viewer.canvas);
});

``

and use this CCapture file https://drive.google.com/file/d/0B8dF0ayiOZ1IVFRNWnR2cko1ajA/view?usp=sharing.