klaude

Recording Babylon to Video; video animation is faster

Recommended Posts

 

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();
});
}

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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. :o

 

 

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.