Texturing with Transform, without WebGL or Canvas

Update: I’ve checked it in Firefox 3.6.6 and to my surprise it works perfectly.


With the maturing of Direct2D support in Firefox I feel that it’s time to revisit transformations. Transformations let you rotate, skew and so on arbitrary elements on a page. They are relatively slow to do in software but really fast in hardware.

After a long discussion that I had recently, I should point out that this is a DEMO, meaning that it’s supposed to show what you CAN do with HTML+Transformations, rather than what you SHOULD do. A demo is not useful on it’s own, it’s just meant to illustrate a concept.

In this case, it shows a very simple approach to doing free-form deformation of bitmaps. I tried it in pure HTML+JS+CSS here, but the concept and quickly and easily be applied to other drawing systems like Canvas2D, where it could be used to provide a fallback for WebGL.

This entry was written by Hans Schmucker , posted on Wednesday July 07 2010at 12:07 pm , filed under Default Category . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

6 Responses to “Texturing with Transform, without WebGL or Canvas”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>