Recording Babylon to Video; video animation is faster

[klaude]

 

Hello,

found this solution for creating video.

but this result video is faster than runtime animation.

thought that _alpha variable usage is strange, so tried milliseconds controls but not easy for me.

in my opinion every 1000/fps milliseconds, to render and to capture are correct.

but it makes more speedy video

any advice?

 

ps. 

i solved using CCapture. but video quality is not good.

function record() {

scene.getEngine().stopRenderLoop();

render()

}

 

function render() {

requestAnimationFrame(function() {

scene.render();

capturer.capture(scene.getEngine().getRenderingCanvas());

render();

});

}

[Guest]

@Sebavan is working on a video capture solution. And we will soon merge this PR which will allow GIF capture: https://github.com/BabylonJS/Extensions/pull/140

[aWeirdo]

Hi @klaude 
that PG code isn't really production-ready, just a test and still has bugs,

It wasn't designed to record in real-time, (what you see in the PG when recording is slowed down, the video is not (supposed to be) speed up )
_alpha is counting the frames rendered and telling when to capture, e.g. if you want a 30 fps video, but you render at 60 fps, we only want to capture every 2'nd frame.
this avoids issues caused by fps drops, frames being captured multiple times can make the video appear to change "speed" or if bad, even make the results look choppy.

This method, sadly also limits posibilities for target frame rates.

as for quality, the frames are converted to a webm, so yes, it is what it is right now.

[klaude]

Hi @aWeirdo

if engine's target fps is 60 then every scene.render() is render after 1/60s.

so setTimeout function's millisecs parameter do not affect rendering video speed.

right?

still it doesn't work as what i think. :(

Sebavan's new solution is genius thing, i cannot approach near around it.

 

 

[klaude]

Hello @Sebavan and @Deltakosh

Thanks for your efforts

https://github.com/BabylonJS/Extensions/tree/master/GIFExporter/examples/basic

there is no example.js so i'm just trying using js files in 'dist'.

Script tag and code like

new GIFCreator(scene.getEngine());

it shows GIFCreator not found error.

how to fix it it's available?

 

 

[Guest]

We are still working on the GIF creator, please stay tuned

[Rodrix3]

Hi guys! The initial code posted and ccapture was from my thread.

 

@klaude have you used ccapture or the playground I posted? I wasn't able to fully port ccapture into Babylon and test to be able to specify the target fps and be in sync.  Were you finally successful? and if so  can you please share your PG?

 

@Deltakosh and @Sebavan does the solution in implementation allow recording to mp4/ webm/ or photo frames in a constant fps without lost frames?

I am interested in recording high quality video. With ThreeJs and ccapture library I was able to render at 4K at 60fps, if I wanted (script would render every frame in slow motion locked at the target fps)

Looking forward to the news

[klaude]

Hello, @Rodrix3

Maybe you have also some logics in engine.runRenderLoop function callback.

In my case like this example.

var capturer = new CCapture( { format: 'webm',  framerate: 30 } );

function _render() {
  // some logics...
  scene.render();
}

engine.runRenderLoop(_render.bind(this));

// stop render loop and capture
function record() {
   scene.getEngine().stopRenderLoop();
   render();
}

// recording: call scene.render function and capture in loop
function render() {
   requestAnimationFrame(function() {
      scene.render();
      capturer.capture(scene.getEngine().getRenderingCanvas());
      render();
   });
}

// and  finally when to stop recording, call capturer.stop(); capturer.save();

i tested until this but for more exactly at last, 

you may should stop requestAnimationFrame in render() and call engine.runRenderLoop again. 

and can't tell you its time sync is exactly right but looks fine.

[Rodrix3]

9 hours ago, klaude said:

Hello, @Rodrix3

Maybe you have also some logics in engine.runRenderLoop function callback.

In my case like this example.

var capturer = new CCapture( { format: 'webm',  framerate: 30 } );

function _render() {
  // some logics...
  scene.render();
}

engine.runRenderLoop(_render.bind(this));

// stop render loop and capture
function record() {
   scene.getEngine().stopRenderLoop();
   render();
}

// recording: call scene.render function and capture in loop
function render() {
   requestAnimationFrame(function() {
      scene.render();
      capturer.capture(scene.getEngine().getRenderingCanvas());
      render();
   });
}

// and  finally when to stop recording, call capturer.stop(); capturer.save();

i tested until this but for more exactly at last, 

you may should stop requestAnimationFrame in render() and call engine.runRenderLoop again. 

and can't tell you its time sync is exactly right but looks fine.

 

Thanks so much @klaude! I appreciate it.Could I ask you one more thing please? Could you please post your code into a working playground so I can see it in action and fully understand it (or into a codepen if you need to make further adjustments?) I would really appreciate it. Thanks!

[klaude]

Hello, @Rodrix3

made sample below.

https://codepen.io/klaude/pen/pZpBOz?editors=1010

ignore before thread. had some misunderstanding.

good luck!