search

spite / ccapture.js

A library to capture canvas-based animations at a fixed framerate
MIT License
3.6k stars 406 forks source link

Webm capture corrupted by enabled alpha in THREE.js #40

Open vaneenige opened 7 years ago

vaneenige commented 7 years ago

Capturing with format set to Webm causes the file to be corrupt on export when the alpha of the canvas is set to true.

With the latest version THREE.js (v82) and THREE.WebGLRenderer({ alpha: false }) it works totally fine! With alpha set to true and format set to png the export does actually work.

spite commented 7 years ago

Corrupt as in can't be played, or as in it plays but there are glitches and artifacts?

WebM doesn't support transparency, I don't think the conversion from alpha-enabled canvas to webm frame is defined, so the glitchy playback would be the expected result.

Related: https://github.com/spite/ccapture.js/issues/18

vaneenige commented 7 years ago

Corrupt as in can't be played. The problem wasn't directly obvious to me but when I saw the PNG working with transparency I knew it had to do with the alpha. Might this be added to the documentation to let the user know it wouldn't work?

devotionsolutions commented 7 years ago

Same here. I'm trying to capture an animation created with Babylon.js and using an alpha channel background. The result is a corrupted webm file.

mrdoob commented 7 years ago

WebM doesn't support transparency

Are you sure?

spite commented 7 years ago

May be it does now. What's for sure is that the library that I'm using to encode WebPs into a WebM doesn't support it -and it doesn't look like it will: https://github.com/antimatter15/whammy/issues/7

Previously if you tried to save a video with transparent background, the background would be solid white, or have glitches. I don't know what's changed to make the videos not playable.

I'm still looking into the issue, may be I'll try another encoder (like https://github.com/Kagami/webm.js)

Simran-B commented 5 years ago

WebM supported an alpha channel mid 2013 already: https://developers.google.com/web/updates/2013/07/Alpha-transparency-in-Chrome-video

bmarotta commented 4 years ago

People who still have this problem should try the library: https://github.com/thenickdude/webm-writer-js