{"id":118,"date":"2010-07-07T12:15:17","date_gmt":"2010-07-07T10:15:17","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=118"},"modified":"2010-07-14T19:17:27","modified_gmt":"2010-07-14T17:17:27","slug":"texturing-with-transform-without-webgl-or-canvas","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/texturing-with-transform-without-webgl-or-canvas\/","title":{"rendered":"Texturing with Transform, without WebGL or Canvas"},"content":{"rendered":"<p><em>Update: I&#8217;ve checked it in Firefox 3.6.6 and to my surprise it works perfectly.<\/em><\/p>\n<p><video autoplay=\"autoplay\" loop=\"loop\" onended=\"this.play();\"><source src=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.webm\" type=\"video\/webm\" \/><source src=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.ogv\" type=\"video\/ogg\" \/><source src=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.mp4\" type=\"video\/mp4\" \/><source src=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.asf\" type=\"video\/x-ms-asf\" \/><object width=\"560\" height=\"368\" classid=\"CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95\"><param name=\"filename\" value=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.asf\"><param name=\"Showcontrols\" value=\"False\"><param name=\"autoStart\" value=\"True\"><param name=\"loop\" value=\"True\"><img decoding=\"async\" src=\"\/data\/video\/embed\/3d-without-canvas-or-webgl.gif\"\/><\/object><\/video><\/p>\n<p><a href=\"\/data\/devel\/web\/apps\/js.depthTransform\/index.xhtml\">Demo<\/a><\/p>\n<p>With the maturing of Direct2D support in Firefox I feel that it&#8217;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.<\/p>\n<p>After a long discussion that I had recently, I should point out that this is a DEMO, meaning that it&#8217;s supposed to show what you CAN do with HTML+Transformations, rather than what you SHOULD do. A demo is not useful on it&#8217;s own, it&#8217;s just meant to illustrate a concept.<\/p>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Update: I&#8217;ve checked it in Firefox 3.6.6 and to my surprise it works perfectly. Demo With the maturing of Direct2D support in Firefox I feel that it&#8217;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 &hellip; <a href=\"https:\/\/www.tapper-ware.net\/blog\/texturing-with-transform-without-webgl-or-canvas\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Texturing with Transform, without WebGL or Canvas<\/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\/118"}],"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=118"}],"version-history":[{"count":8,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":200,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/118\/revisions\/200"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}