{"id":139,"date":"2010-07-11T10:17:20","date_gmt":"2010-07-11T08:17:20","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=139"},"modified":"2010-07-11T10:17:20","modified_gmt":"2010-07-11T08:17:20","slug":"update-on-the-simplistic-3d-renderer-for-canvas-2d-tinydim","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/update-on-the-simplistic-3d-renderer-for-canvas-2d-tinydim\/","title":{"rendered":"Update on the simplistic 3D renderer for Canvas 2D: TinyDim"},"content":{"rendered":"<p><video autoplay=\"autoplay\" loop=\"loop\" onended=\"this.play();\"><source src=\"\/data\/video\/embed\/tinyDim.webm\" type=\"video\/webm\" \/><source src=\"\/data\/video\/embed\/tinyDim.ogv\" type=\"video\/ogg\" \/><source src=\"\/data\/video\/embed\/tinyDim.mp4\" type=\"video\/mp4\" \/><source src=\"\/data\/video\/embed\/tinyDim.asf\" type=\"video\/x-ms-asf\" \/><object width=\"480\" height=\"512\" classid=\"CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95\"><param name=\"filename\" value=\"\/data\/video\/embed\/tinyDim.asf\"><param name=\"Showcontrols\" value=\"False\"><param name=\"autoStart\" value=\"True\"><param name=\"loop\" value=\"True\"><img decoding=\"async\" src=\"\/data\/video\/embed\/tinyDim.gif\"\/><\/object><\/video><\/p>\n<p><a href=\"\/devel\/js\/JS.tinyDim\/\">Demo<\/a><\/p>\n<p>You control the demo mainly by left\/right dragging the mouse, but some basic, unoptimized support for keyboard navigation is in there as well (Arrow Key\/PgUp\/PgDn). If you click on a face it will light up briefly and you can now enter a new color in the fields below the canvas.<\/p>\n<p>A guy named Luke recently posted a comment on a three year old post that I honestly had mostly forgotten about: &#8220;<a href=\"\/blog\/?p=20\">Canvas 3D Renderer updated<\/a>&#8220;. It was about one of the first Javascript programs capable of rendering a file exported from a 3D program without a plugin.<\/p>\n<p>There are by now several such engines using Canvas 2D, a good deal of them more advanced, faster and better supported. However: TinyDim, which was the name I used when I compiled that sample into a sort of generic Javascript library has its advantages in being small, simple, easy to understand and therefore easy to hack and extend.<\/p>\n<p>So this is a sort of update what has happened since then: I&#8217;ve actually used TinyDim <a href=\"\/devel\/js\/JS.StereoVideo\/real3d.xhtml\">sometimes<\/a> and it has received some level of basic optimization at the code level (it&#8217;s still missing any structural optimizations like caching or viz-areas), but I never got around to post about it. It now has support for one global light and has its own mouse navigation class for when you just want to view a static 3D model. Support for colored faces is still only hacked in with a proprietary format (although that would be easy to change, you just have to write a MAT file parser) and It can return the face you&#8217;ve clicked on.<\/p>\n<p>So, if you want to hack in texture support using <a href=\"\/blog\/?p=118\">this technique<\/a> or anything else, be my guest \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Demo You control the demo mainly by left\/right dragging the mouse, but some basic, unoptimized support for keyboard navigation is in there as well (Arrow Key\/PgUp\/PgDn). If you click on a face it will light up briefly and you can now enter a new color in the fields below the canvas. A guy named Luke &hellip; <a href=\"https:\/\/www.tapper-ware.net\/blog\/update-on-the-simplistic-3d-renderer-for-canvas-2d-tinydim\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Update on the simplistic 3D renderer for Canvas 2D: TinyDim<\/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\/139"}],"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=139"}],"version-history":[{"count":7,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/139\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}