{"id":44,"date":"2009-06-18T23:15:00","date_gmt":"2009-06-18T21:15:00","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=44"},"modified":"2010-07-11T12:04:53","modified_gmt":"2010-07-11T10:04:53","slug":"dynamically-textured-animations-in-the-browser","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/dynamically-textured-animations-in-the-browser\/","title":{"rendered":"Dynamically textured animations in the browser"},"content":{"rendered":"

\n<\/a>\n<\/p>\n

\n It’s probably best to let you play with this little demo<\/a> first. The animation is stored only once and the texture is applied dynamically. Keep in mind that this is only a techdemo. Somebody more familiar with animation could use this technique for something truely great (think along the lines of you uploading an image of yourself and suddenly you’re appearing in a movie, thanks to the combined power of the video tag and this).\n <\/p>\n

\n The technology is not the limiting factor here, just my artistic skills.\n <\/p>\n

The concept<\/h3>\n

\n .. .is actually pretty simple. An animation is rendered with a placeholder, instead of a real texture. This placeholder contains the position in the texture (encoded as color). Specifically, the model was rendered with this<\/a> texture, using a planar projection for UV coordinates.\n <\/p>\n

\n When the animation is shown, the pixels get replaced again with pixels from some texture that the user or the developer specifies.\n <\/p>\n

\n All this can be done with SVG filters, specifically feDisplacementMap. If you want to know in detail how it’s done, have a look here<\/a>. The only real difference here is that instead of a static map, a series of images is composed into an animation.
\n You may also want to look at the source of the demo<\/a>. Everything needed to recreate the effect shown here is marked with the keyword IMPO<\/span>RTANT<\/span>.\n <\/p>\n

Can only Firefox 3.5 do this? And why aren’t you using the video tag?<\/h3>\n

\n Most modern browsers can do this, but there are a few differences that you should be aware of: To make this work, your video has to be stored in a lossless format.\n <\/p>\n

\n For Gecko based browsers that’s usually APNG in an IMG or maybe at a later time Theora (the current encoders don’t allow for for lossless YUV compression, but that’s likely a limitation of the current tools, not the format, as we’ve seen with JPEG or h.264) via VIDEO. For Webkit it’s lossless h.264 and for legacy browsers it may be a greyscale GIF containing the color channels side by side, so they can be recombined by the filter.\n <\/p>\n

\n Older browsers also need the filter applied inside an SVG document, so you’ll have to load an SVG in an iframe to do the rendering.\n <\/p>\n

\n To sum it up: This demo only works in Firefox 3.5 because I didn’t want to spend more time optimizing it. I wanted to show you what can be done and Firefox 3.5 made it easiest for me. But you can make it work. For a few pointers, see this file<\/a>, which implements a similar solution in pure SVG.\n <\/p>\n","protected":false},"excerpt":{"rendered":"

It’s probably best to let you play with this little demo first. The animation is stored only once and the texture is applied dynamically. Keep in mind that this is only a techdemo. Somebody more familiar with animation could use this technique for something truely great (think along the lines of you uploading an image … Continue reading Dynamically textured animations in the browser<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/44"}],"collection":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":1,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/44\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}