I have a few of AE animations with fine drawings and small texts in them and I want to play them in a browser.
I tried to export to MP4, but somehow the compression is very poor, so all fine lines look like they have a different color.
MOV export looks perfect but won’t play on the web.
JPEG sequence export also looks perfect, so I’m thinking I can use THREE to male a JPEG sequence player (show textures in NDC space).
To make files smaller I could compare next JPEG with the previous one and make pixels that match black to decrease overall sequence size.
Before I start, just wanted to double check - is there an easier way to accomplish what I want, has anything similar been done before?
thats right. it is still an mp4, but the encoding has been changed. And it can be played in a browser.
You may find it easier to upload your video to youtube studio, and then download it again. It will still be an mp4, but you have less control of the compression options.
In my case exporting to mp4 ends up with poor compression and wrong colors. Are you saying re-encoding this bad file will somehow make it look more like the animation looks inside AE?
mp4 doesnt mean its encoded using h264. it depends on the what your chosen video editor uses by default. And it changes throughout the years. And possibly your version of AE will give you some choices.
But if you like the mov output, then you can experiment using ffmpeg. This is what I would do.
Export multiple video sources… assuming you control the flow of information. Ultimately the users may have low bandwidth or a small screen.
Export to some Adobe XD (type) ecosystem. There are usually plugins and macros for layer types. Ultimately the wrapper overlays elements with granular control, albeit in a proprietary (un-sharable?) format.
If the AE export as video has a poor result when compressed, I would export it without compression and do the compression manually using ffmpeg like @ seanwasere suggested. You can export from AE as mov and use ffmpeg to convert to mp4 + compress it.
Using a JPEG sequence and then trying to use some tricks to reduce the file size means that you’re effectively trying to create your own video compression algorithm. Unless you’re an expert in this field you won’t get better results than when using a dedicated video compression tool.
In my experience, the only situation where an image sequence beats a video if you want to be able to precisely stop / start the video at specific points, or do something like use your mouse to scroll through the video. Setting video.currentTime is imprecise, if I remember correctly the best precision is maybe 0.1s so it’s not a viable solution.
If you have an animation that should be played either forwards or backwards, but the user always has to wait for the animation to complete, then you can just use one video where the animation is played forwards and another where it’s played backwards. In most cases, with proper compression, the file size will be way smaller for 2 videos than for a single video played using an image sequence.
So, after a couple of days of experiments, I found a solution that works very well for all kinds of animations I have.
Step 1:
export AE animation as JPEG or PNG sequence
Step 2:
convert those sequences to mp4 via ffmpeg like so ffmpeg -framerate 30 -i "sequence_folder/%05d.jpg" -c:v libx264 -preset slower -crf 17 -r 30 -vf "format=rgb24,scale=in_range=full:out_range=full,colormatrix=bt601:bt709,colorspace=bt709:iall=bt709:range=pc:format=yuv444p:fast=0" -color_range pc -colorspace bt709 -color_primaries bt709 -color_trc bt709 -pix_fmt yuv444p -profile:v high444 output.mp4
Probably, not all parameters here are needed, but the crucial part is colormatrix=bt601:bt709 - without it all colors in the output will be wrong no matter what.
Not sure why it is needed to specify that conversion of PNG/JPEG images should be to BT.601 first, but it does the trick.
