klaude Posted July 18, 2018 Share Posted July 18, 2018 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(); }); } Quote Link to comment Share on other sites More sharing options...
Guest Posted July 18, 2018 Share Posted July 18, 2018 @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 Dad72, klaude and dbawel 2 1 Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted July 18, 2018 Share Posted July 18, 2018 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. Quote Link to comment Share on other sites More sharing options...
klaude Posted July 19, 2018 Author Share Posted July 19, 2018 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. Quote Link to comment Share on other sites More sharing options...
klaude Posted July 23, 2018 Author Share Posted July 23, 2018 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? Quote Link to comment Share on other sites More sharing options...
Guest Posted July 23, 2018 Share Posted July 23, 2018 We are still working on the GIF creator, please stay tuned klaude 1 Quote Link to comment Share on other sites More sharing options...
Rodrix3 Posted July 28, 2018 Share Posted July 28, 2018 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 adam 1 Quote Link to comment Share on other sites More sharing options...
klaude Posted July 30, 2018 Author Share Posted July 30, 2018 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. Quote Link to comment Share on other sites More sharing options...
Rodrix3 Posted July 30, 2018 Share Posted July 30, 2018 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! Quote Link to comment Share on other sites More sharing options...
klaude Posted July 31, 2018 Author Share Posted July 31, 2018 Hello, @Rodrix3 made sample below. https://codepen.io/klaude/pen/pZpBOz?editors=1010 ignore before thread. had some misunderstanding. good luck! Rodrix3 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.