regl-recorder
A small utility that can be used for recording videos in the WebGL framework regl.
Example
A small example for recording a rotating bunny is shown below
var createReglRecorder = const normals = const mat4 = const bunny = const VIDEO_WIDTH = 3840 * 01const VIDEO_HEIGHT = 2160 * 01 const regl = VIDEO_WIDTH VIDEO_HEIGHT preserveDrawingBuffer: truevar recorder = const drawBunny = reglframe { reglclear depth: 1 color: 0 0 0 1 recorderframeviewportWidth viewportHeight}
Notice from the above that we have to do two things to use
regl-recorder
. Firstly, we must create a
headless WebGL context, and
give it to the regl
:
const regl = VIDEO_WIDTH VIDEO_HEIGHT preserveDrawingBuffer: truevar recorder =
Secondly, at the end of a frame, we must insert
recorderframeviewportWidth viewportHeight
And then you start the recording by running the program in node with
node example/indexjs
If you do the above, regl-recorder
will record 150 frames of a bunny
animation. Since the tool records at 30FPS, this will result in a
5 minutes long video.
This tool will not output a video file, but only the recorded
frames. They are put into a folder named something like
video-71f41ec69ea844df11b0
. You can convert these frames into a
video file with ffmpeg
, by doing
ffmpeg -y -framerate 30 -i video-71f41ec69ea844df11b0/frame%08d.jpg -b 10000k -vf "vflip" -c:v libx264 -r 30 out.mp4
And you will thus obtain a video like the below:
Note that since the recorder uses headless, you can only record regl programs that uses extensions supported by headless. So you can only use these extensions
API
var recorder = require('regl-recorder')(regl, frames)
This creates a new recorder instance.
regl
a regl contextframes
the number of frames to record. The recording rate is 30FPS, so the resulting video will beframes/30
seconds long.
recorder.frame(viewportWidth, viewportHeight)
Records the current frame. Should be called at the end of every frame.
viewportWidth, viewportHeight
the current dimensions of the viewport.