Jump to content

Recording Babylon to Video; video animation is faster


klaude
 Share

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();
});
}
Link to comment
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. :)

Link to comment
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

 

 

Link to comment
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 :)

Link to comment
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.

Link to comment
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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...