Sign in to follow this  
aWeirdo

Cinematic recorder (Experimental)

Recommended Posts

Hi all,
i've thought about making a simple scene recorder for a while now which could do light-weight cinematics out-of-the-box,

So today i had a bit of time and gave it a quick go.

The basic idea is that you can code your scene (move meshes, camera & play animations, visual effects, etc etc) to playout a cinematic, and use this for easy recording & download.
It could be anything from a ball rolling down a hill to a large scale battle recorded from a bird-view camera, all controlled by pre-made animations.

Use-cases include;
Large in-game cinematics that would otherwise cause FPS issues.
Promotional videos / cinematics. 

Currently, it uses whammy to convert webp frames into a webm https://github.com/antimatter15/whammy
 

Basic useage;

Quote

Small update; 
Uncomment line 133 to activate recording.
http://playground.babylonjs.com/#Z5RY9C#4

// Added _targetFps (simple implementation, only supports 30 & 60 fps so far.)
// Added _lengthInMs, preset the length/duration of the downloaded webm.(when set, & length is reached, endRecording is called automaticly.)
// Added renderLoop hijacking. (Sometimes bugs in the PG..)
// Slight quality issue with webp, might have to replace with other format in the future.

newCinematic.startRecording(targetFps<nullable>, lengthInMs<nullable>, downloadOnEnd<boolean><default: false>);

 

 

To-Do's;
- Add support for different frame-rates. (Partially done, 30 & 60 fps)
- Add sound support.
- Add renderLoop overwrite. (Partially done, missing re-activation of default renderloop)
- Include conversion.

Share this post


Link to post
Share on other sites

Cinematics key: JSON configurations that triggers cinematics... 

CONSIDER:

anim = {...
,cam:{cur:{"x":0,"y":8,"z":-28},tgt:{x:0,y:8,z:-20}, tar:{"x":0,"y":6,"z":0}, dur:1000},
...}

 Animation Factory Pattern.

QUESTION:

@aWeirdo Is there any chance that recorder could record as JSON (like above)?

Not familiar with webp... +1 for experimental.

Share this post


Link to post
Share on other sites

Hi @aFalcon 
webp is just a image format,
the recorder simply grabs an image of the rendered scene each frame and then converts it into a webm video file :) 

The goal at the moment is to provide an alternative to normal screen recorders, e.g. creating promotional cinematics, etc.
and hopefully, be able to cut off some "post-recording" editing time aswell.

But your idea is nice, full-fletched cinematic extention? to display in-game cinematics loaded via a json file i suppose?

Share this post


Link to post
Share on other sites

@aWeirdo, webp, really cool. Thanks for describing. Spent 2 big ones on cam-tases-ya... would love to see it jettison out the 3DPipeline!

In game cinematics... yes sir. Or, er, maybe... 

loads with JSON-script, true.

Got the downloads... checking...

It worked! Woah...  3000ms limit looks like. super cool.

thanks aWeirdo new things take a while to sink into brain...

<jokes-removed/>

@Dad72 hero.

Thx.

Share this post


Link to post
Share on other sites

Small update; 
Uncomment line 133 to activate recording.
http://playground.babylonjs.com/#Z5RY9C#4

// Added _targetFps (simple implementation, only supports 30 & 60 fps so far.)
// Added _lengthInMs, preset the length/duration of the downloaded webm.
// Added renderLoop hijacking.
// Slight quality issue with webp, might have to replace with other format in the future.
newCinematic.startRecording(targetFps<nullable>, lengthInMs<nullable>, downloadOnEnd<boolean><default: false>);


@Dad72 no plans to putting it on Github atm, it's all available in the PG so far, WhammyVideo code is included at the bottom of the editor.

 

Share this post


Link to post
Share on other sites

This is interesting, thanks.  I have used a different antimatter15 repo (modified) to generate GIFs from my animation system, QI.   See a sample scene.  Remember to first size the window the size you wish the GIF to be, & then re-center the character.  You can practice without recording first.  It takes a while for the first frame to complete.

I think you may problems / quality issues with any BABYLON.Animation which are based on BABYLON.Now, like skeletons.  I implemented QI with an afterrender.  For the recording part, your renderloop replacement is equivalent, but mine defines time itself in the after render.  I can get very accurate recordings (either 25 or 50 fps for GIF).  You are hostage to using BABYLON.Now.  You might want to change BABYLON.Now so it will report time to support fixed rate rendering, similar to how QI.TimelineControl does.  Maybe for 3.2, @Deltakosh?

FYI, QI is very sound oriented.  I was originally going to try to convert a Java implementation of mp4, but settled on this.  I still need to write the frame # & millis since recording start to the console, of all sounds QI starts.  That way after using a conversion tool to mp4, I can add sound back in at the exact right spot, without trial & error.

Share this post


Link to post
Share on other sites

Hi @JCPalmer very interesting,

i was expecting problems with anything real-time based, having to overwrite with a per-frame solution,
as recording in real-time is quite tricky, grabbing a copy of the render each frame seems to be quite a heavy operation, so a render-hijack & slowly processing the scene seemed the best solution.

As for sound, i'm hoping i can simply copy the sound track & cache the start frame, then when compiling the video insert it at that frame directly, might meet some unexpected errors..

But anyways, i think i'm putting a lid on this for now, and return to it at a later date, i have some other things to do that takes priority.

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

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.