I am trying to render an animated Three.js scene (basically a dynamic mesh loader that rotates the object 360 degrees automatically) to a GIF file. Basically I would like the GIF to contain frames that would be "screenshoted" from the WebGL canvas every x seconds/ms.

I have been searching for a few hours but I didn't find any good ressources on this subject.

Thanks.

I am trying to render an animated Three.js scene (basically a dynamic mesh loader that rotates the object 360 degrees automatically) to a GIF file. Basically I would like the GIF to contain frames that would be "screenshoted" from the WebGL canvas every x seconds/ms.

I have been searching for a few hours but I didn't find any good ressources on this subject.

Thanks.

• javascript
• html
• three.js
• webgl
• gif

• it is not for gif but you can still add it on a web page. take a look at antimatter15.com/wp/2012/08/… – gaitat Commented Aug 15, 2014 at 15:16

2 Answers 2

Some years ago I did exactly that. You can have a look at the code here:

https://mrdoob.github.io/omggif-example/

I've just found this repository that seems the right one!

Quickly and easily generate looping GIFs using WebGL

Or maybe have a look at this:

A library to capture canvas-based animations