New block - ciAnimatedGif

sharkbox · October 3, 2016, 3:59pm

Hey amigos. Here is a quick block for a more advanced playback of animated gifs. It takes into account that framerates can be different between every single frame, and also exposes global palettes often included in gifs. While I don’t recommend using a lot of gifs in your project, it’s something that gets requested enough from clients that I finally made this so I could stop worrying about it. Use is super simple.

ciAnimatedGifRef    mGif = ciAnimatedGif::create( loadAsset("someGif.gif") );
mGif->draw();

Find the block here: https://github.com/cwhitney/ciAnimatedGif
It’s based on the information in this article: http://giflib.sourceforge.net/whatsinagif/bits_and_bytes.html

Now - a question! When I load the gif frames, I am storing them as a vector of Surfaces. When they get displayed, I convert it to a texture right before it displays, which means an upload to the gpu. The alternative is to upload every frame to the gpu at the beginning, and just leave them there with gl::TextureRefs. I did it this way because if you’re displaying gifs, then you might be displaying a lot of them, and I didn’t want to clog the gpu, especially if you’re not displaying them. How would you handle this?

-c

eight_io · October 3, 2016, 6:11pm

@sharkbox –– Thanks! Works on iOS too.

–8

sharkbox · October 3, 2016, 6:13pm

Amazing, thanks for checking!

rich.e · October 3, 2016, 7:01pm

Definitely handy when it comes up, thanks for sharing it.

Now - a question! When I load the gif frames, I am storing them as a vector of Surfaces. When they get displayed, I convert it to a texture right before it displays, which means an upload to the gpu. The alternative is to upload every frame to the gpu at the beginning, and just leave them there with gl::TextureRefs. I did it this way because if you’re displaying gifs, then you might be displaying a lot of them, and I didn’t want to clog the gpu, especially if you’re not displaying them. How would you handle this?

What about making most of that a virtual AnimatedGifBase, then you can make two more concrete subclasses: AnimatedGif that stores the data as Surface's and another AnimatedGifGl that stores them as gl::Textures all on the gpu. I know that at least for me, I’d almost always use the gl version, especially if I’m using a card with like 4+ gigs of VRAM. Also, I think it would be nice if you could return the current frame to be drawn, and let the user draw it however they like. Could be in addition to the draw() methods if you find that more convenient.

cheers,
Rich

sharkbox · October 3, 2016, 7:20pm

Good advice Rich. I might just make ciAnimatedGif use textures as a default and provide ciAnimatedGifSurf as well.

num3ric · October 4, 2016, 6:48pm

For the gl version, using a GL_TEXTURE_2D_ARRAY over a vector of gl::Texture2d would be significantly more optimal in the scenario where you want +1000 gifs all scrubbing at a different frame, which we may want Though it implies a custom playback shader, and not sure it would work on mobile platforms? You could argue for or against it.

github.com

cinder/Cinder/blob/master/include/cinder/gl/Texture.h#L645


	
	friend class Texture2dCache;
};


#if ! defined( CINDER_GL_ES_2 )
class CI_API Texture3d : public TextureBase {
public:
	struct CI_API Format : public TextureBase::Format {
		//! Default constructor, sets the target to \c GL_TEXTURE_3D, wrap to \c GL_CLAMP, disables mipmapping, the internal format to "automatic"
		Format() : TextureBase::Format() { mTarget = GL_TEXTURE_3D; }


		//! Chaining functions for Format class.
		//! Sets the target, defaults to \c GL_TEXTURE_3D, also supports \c GL_TEXTURE_2D_ARRAY
		Format& target( GLenum target ) { mTarget = target; return *this; }
		Format& mipmap( bool enableMipmapping = true ) { mMipmapping = enableMipmapping; return *this; }
		//! Sets the maximum amount of anisotropic filtering. A value greater than 1.0 "enables" anisotropic filtering. Maximum of getMaxAnisotropyMax();
		Format& maxAnisotropy( float maxAnisotropy ) { mMaxAnisotropy = maxAnisotropy; return *this; }
		Format& internalFormat( GLint internalFormat ) { mInternalFormat = internalFormat; return *this; }
		Format& wrap( GLenum wrap ) { mWrapS = mWrapT = mWrapR = wrap; return *this; }
		Format& wrapS( GLenum wrapS ) { mWrapS = wrapS; return *this; }
		Format& wrapT( GLenum wrapT ) { mWrapT = wrapT; return *this; }

I did so with image sequences, but had to fix an issue with mimaps. You might have the same problem.
https://github.com/cinder/Cinder/pull/1432