Replace Whammy with Ccapture Library. Simple.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Whammy is used to record from canvas in webm format. (https://github.com/antimatter15/whammy/blob/master/README.md)

Ccapture is also used to record from canvas, but has plenty of additional options.
(https://github.com/spite/ccapture.js/)

Bounty: Update this code https://www.babylonjs-playground.com/#Z5RY9C#6 and replace Whammy library (which is being used) with Ccapture, exposing all options from Ccapture into the currently implemented Cinematic class. Simple.

Options exposed in class should include:

  • Render target size: resize canvas before rendering to specified width x height. (So it is possible record at 4K with a 1080p monitor, for example). Two variables: width, height.
  • Callback onStart function: function to call when starts recording.

.. in addition to all parameters defined on cCapture documentation should be implemented on class:
https://github.com/spite/ccapture.js/

  • framerate: target framerate for the capture
  • motionBlurFrames: supersampling of frames to create a motion-blurred frame (0 or 1 make no effect)
  • format: webm/gif/png/jpg/ffmpegserver
  • quality: quality for webm/jpg
  • name: name of the files to be exported. if no name is provided, a GUID will be generated
  • verbose: dumps info on the console
  • timeLimit: automatically stops and downloads when reaching that time (seconds). Very convenient for long captures: set it and forget it (remember autoSaveTime!)
  • autoSaveTime: it will automatically download the captured data every n seconds (only available for webm/png/jpg)
  • startTime: skip to that mark (seconds)
  • workersPath: path to the gif worker script

IMPORTANT:
I believe cCapture is even SIMPLER to implement than Whammy. So you could actually trash the entire code, and just implement cCapture library from scratch, in just a few lines, without even needing to create much code. There is a possibility that the solution is almost trivial, if so, expose the required parameters.

From what I've seen so far, I don't think CCapture can work with Babylon. Simply creating a new CCapture object and calling it's start() method freezes the Babylon rendering. This seems to be a problem with the timestep, since the only relationship bewieen the two is the fact that CCapture alters the common time related functions like SetInterval and SetTimeout. Maybe it could work if there is a way to manually update Babylon's animation
Revanee 6 months ago
Hi Revanee. Thanks for the comment. Ccapture is actually based on Whammy. If it was possible to make Whammy work, I am sure there is a way to make Ccapture work. About hijacking the render loop, I suggest searching on Babylon Playground Search for examples that do that: https://doc.babylonjs.com/playground/?code=requestAnimationFrame or Babylon documentation: https://doc.babylonjs.com/. The keywords might be requestAnimationFrame or scene.registerBeforeRender which is already used might be the trick, and if so the solution might be trivial.
georgefountain 6 months ago
I would suggest first understanding the example provided, https://www.babylonjs-playground.com/#Z5RY9C#6. They were able to succesfully hijack the render loop using Whammy - and again - if they were able to do it with Whammy it is possible to do it with Ccapture, as the last is based on the first - and it should be easy to switch libraries. Let me know what you find. Thanks so much!
georgefountain 6 months ago
awarded to Codeword
Tags
javascript

Crowdsource coding tasks.

1 Solution

Winning solution

Hey george, I am trying to go through this babylon and let see what I can do.Thank you