search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.82k stars 835 forks source link

Video capture of graph animations #598

Open LiamK opened 1 year ago

LiamK commented 1 year ago

Hi, I've created a 3d-force-graph I'm very happy with.
I would like to convert it to a video format I can import in another application. I want to start it, navigate around a bit, then stop it and export to video, somehow. I tried screen capture, but it was very unsatisfactory. I found CCapture.js and that depends on getting access to the canvas. However, from reviewing issues here, it appears that that is not possible because there isn't a 2d canvas that CCapture could use.

So... what would work for capturing a video of the animation?

LiamK commented 1 year ago

In the end I was able to capture decent video by adjusting resolution and frame rate. Kind of a hack. But this would still be a nice feature.

bradjasper commented 7 months ago

I also needed this and found CCapture.js and canvas-capture work ok. The issue is they hook into the requestAnimationFrame and the exported video is very choppy/missing frames.

What ended up working beautifully was using canvas.captureStream()

Add a MediaRecorder and build up the buffer, then save as a webm file.