Skip to content

Instantly share code, notes, and snippets.

@munrocket

munrocket/shadertoy_exporter.js

Last active November 14, 2023 18:51
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save munrocket/d4fc18abfb9c98f0cfce6eda772dcb45 to your computer and use it in GitHub Desktop.
Save munrocket/d4fc18abfb9c98f0cfce6eda772dcb45 to your computer and use it in GitHub Desktop.
Download ZIP
How to record cycled video from shadertoy
Raw
shadertoy_exporter.js
// copy paste this in console
function shader_exporter(duration, width, heigth, paused) {
document.getElementById('demogl').style.width = width + 'px';
document.getElementById('demogl').style.height = heigth + 'px';
document.getElementById('myResetButton').click();
document.getElementById('myRecord').click();
if (paused) document.getElementById('myPauseButton').click();
let t0 = performance.now();
function loop(){
if (performance.now() - t0 > duration * 1000) {
document.getElementById('myRecord').click();
if (paused) document.getElementById('myPauseButton').click();
} else {
requestAnimFrame(loop)
}
};
requestAnimFrame(loop);
}
shader_exporter(6.28318530, 512, 512, false);
@Masynchin
Copy link

@munrocket What result should I expect from this script? I have run this and nothing is saved or exported.

@munrocket
Copy link
Author

@Masynchin it should record a video with fixed duration and resolution in Chrome.

If your FPS is bad, better to use shadertoy frame exporter extension and then this cmd
ffmpeg -r 30 -i "img%02d.png" -pix_fmt yuv420p -movflags +faststart perfectloop.mp4

@Masynchin
Copy link

@munrocket Sorry, I was running this script in Safari which does not support Webm. Works fine in Chrome, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment