Add basic bring-your-own-encoder rendering #92
Conversation
sigvef
force-pushed
the
rendering
branch
4 times, most recently
from
49e4db0
to
0225f6e
Compare
This adds a basic encoder-agnostic rendering function to renin, so that
you can render your demos to video.
To use this, you need to add some boilerplate/integration code to your
demo project. In your project, you can for instance use mp4-wasm as the
encoder. Here is a quick guide on how to do that.
First, install mp4-wasm:
```bash
yarn add mp4-wasm
```
Then, add these imports to the top of your demo's `main.ts`:
```typescript
import loadMP4Module from "mp4-wasm";
import mp4wasm from "mp4-wasm/build/mp4.wasm?url";
```
And finally, comment out `renin.loop()` in `main.ts` and instead do
something like this:
```typescript
// commented out for rendering purposes
// renin.loop()
(async () => {
const wasmBinary = await (await fetch(mp4wasm)).arrayBuffer();
const MP4 = await loadMP4Module({ wasmBinary });
const width = 1920;
const height = 1080;
const encoder = MP4.createWebCodecsEncoder({
width,
height,
fps: 60,
encoderOptions: {
framerate: 60,
bitrate: 24_000_000,
},
});
render(renin, { encoder, width, height });
})();
```
Now, the demo should play automatically when you visit renin in the
browser, and at the end a render.mp4 will be automatically downloaded.
It is without sound though, so we can add the music using ffmpeg:
```bash
ffmpeg -i render.mp4 -i music.ogg -c:v copy -map 0:v -map 1:a -y output.mp4
```
Now you have a finished video file that you can upload to YouTube!
mp4-wasm doesn't play nice with building renin as a lib -- otherwise we
could have bundled it with renin to make things easier.
|
Only that i didn't want to spend any more time trying to get the renin build to bundle mp4-wasm correctly 😅 |
|
Closes #42 |
|
What's the best way to get an indication on the progress of the rendering? |
|
Unless you do something to hide it, the demo itself will probably be visible on-screen during rendering. Also, I guess you could check the current frame of the demo or something? |
|
I think in my case there was an error that made the whole demo black, but it was still using 40% GPU for a few minutes and rendered a ~3 minutes long MP4 file with all black frames. The errors in the console indicate that it is related to a height that is NaN. Maybe I had to specify the aspect ratio somewhere? We hard-code |
|
The barebones inited project runs as expected when I do renin.loop() instead of the mp4 rendering though |
|
Do you have aspectRatio in the renin options? renin/example-project/src/main.ts Line 17 in fc9aabe |
|
I can't remember (it's on my other laptop), but I briefly tried So yes, it's missing Time to make a new renin release? 😃 |
|
Yup, adding the |
Add basic bring-your-own-encoder rendering
This adds a basic encoder-agnostic rendering function to renin, so that
you can render your demos to video.
To use this, you need to add some boilerplate/integration code to your
demo project. In your project, you can for instance use mp4-wasm as the
encoder. Here is a quick guide on how to do that.
First, install mp4-wasm:
Then, add these imports to the top of your demo's
main.ts:And finally, comment out
renin.loop()inmain.tsand instead dosomething like this:
Now, the demo should play automatically when you visit renin in the
browser, and at the end a render.mp4 will be automatically downloaded.
It is without sound though, so we can add the music using ffmpeg:
Now you have a finished video file that you can upload to YouTube!
mp4-wasm doesn't play nice with building renin as a lib -- otherwise we
could have bundled it with renin to make things easier.