{"id":19,"date":"2007-02-15T00:55:00","date_gmt":"2007-02-14T23:55:00","guid":{"rendered":"http:\/\/www.tapper-ware.net\/blog\/?p=19"},"modified":"2010-03-04T00:31:01","modified_gmt":"2010-03-03T23:31:01","slug":"real-3d-rendering-right-inside-the-browser","status":"publish","type":"post","link":"https:\/\/www.tapper-ware.net\/blog\/real-3d-rendering-right-inside-the-browser\/","title":{"rendered":"Real 3D Rendering right inside the browser"},"content":{"rendered":"<p>So far, you&#8217;ve always needed a plugin to even display dynamic 2D graphics, never mind 3D. So <a href=\"http:\/\/tapper-ware.net\/canvas3d\/\">here<\/a>&#8216;s a 3D engine that works right inside your browser, no plugin required.<\/p>\n<p>OK, first for all of you impatient guys, the controls:<\/p>\n<ul>\n<li>Arrow Keys: Turn\/Walk<\/li>\n<li>PageUp\/PageDown: Fly<\/li>\n<\/ul>\n<p>Flying only works when you&#8217;re outside the map, on the map you&#8217;ll get put onto the nearest surface automatically.<\/p>\n<p>Now a bit of background info:<br \/>\nThis is a demo program for the Canvas element, which is right now being formulated as a standard over at<br \/>\n<a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/#the-canvas\">WHATWG<\/a>.<br \/>\nThe Canvas element is a 2D Bitmap surface to which you can draw to directly from JavaScript. So far, you couldn&#8217;t<br \/>\ndo graphics in Javascript, aside from dynamically loading different bitmaps from the server. The Canvas element closes<br \/>\nthat gap. Now you can actually draw arbitrary shapes, without loading anything from the Server.<br \/>\nFor that purpose, the Canvas element provides an API that allows you to draw vector shapes and bitmaps.<\/p>\n<p>The target for Canvas is to not only provide a 2D API, but also one for 3D based on OpenGLes. Sadly, this API<br \/>\nhasn&#8217;t yet arrived, and it looks like it will take some time until browsers support it, but the 2D API is here and it&#8217;s<br \/>\nworking just fine in anything but InternetExplorer, and even for that Google provides wrapper code free of charge<br \/>\n(note however that this wrapper code isn&#8217;t being used here, so you&#8217;ll need either Firefox 2+ or Opera 9+, Safari hasn&#8217;t<br \/>\nbeen tested). So I decided to write a little 3D Renderer myself. It&#8217;s not complex, it&#8217;s not finished, but what the hell:<br \/>\nit works. While this isn&#8217;t the first attempt to do this<br \/>\n(<a href=\"http:\/\/www.abrahamjoffe.com.au\/ben\/canvascape\/\">Canvascape<\/a> comes to mind),<br \/>\nit is as far as I know the first one to try real 3D instead of Doom-style pseudo 3D. In fact, this demo loads a standard<br \/>\nAlias Wavefront OBJ file, and builds the model from the triangles it finds in there.<\/p>\n<p>So what does this demo do? Well, basically this:<\/p>\n<ul>\n<li>Load a model<\/li>\n<li>Set up controls to modify a view object<\/li>\n<li>Find the nearest triangle below the player<\/li>\n<li>Move the player down to that triangle<\/li>\n<li>Rotate the model<\/li>\n<li>Clip it against Z=0 so you only render what&#8217;s in front of you<\/li>\n<li>Split partially visible triangles against Z=0<\/li>\n<li>Project all vertices, so that they get smaller the farther away they are<\/li>\n<li>Draw them, with the distance dictating the color<\/li>\n<\/ul>\n<p>It&#8217;s a bit more complex, but these are the important parts.<\/p>\n<p>So what do I want to do with this? Well, eventually it should becomes a little racing game. Remember ReVolt?<br \/>\nSomething like that and from the performance I get so far, it seems possible.<br \/>\nWhich brings me to the needed optimizations:<br \/>\nI&#8217;ve got absolutely no idea why, but it seems like all Canvas implementations do pixel based clipping against<br \/>\nthe drawing window, instead of shape-based clipping&#8230; essentially that means that drawing a 1000&#215;1000 pixel<br \/>\nshape, it takes 100 times as long as drawing a 100&#215;100 pixel shape, even when the Canvas is only 20&#215;20 pixels<br \/>\nin size.<br \/>\nThen the game needs a BSP tree because JavaScript is too slow to calculate visibility for every triangle in<br \/>\nrealtime&#8230; so there has to be a structure that dictates that from position 1,1,1 faces 2,5,8,10 are visible, while<br \/>\nfrom position 5,6,12 faces 3,15,33,110 are visible.<br \/>\nThen we need a real colission detection for a meaningfull game and support for sprites.<br \/>\nThere will probably be a 1000 other things to do, but that&#8217;s what I have in mind now.<br \/>\nOh, and forget about textures&#8230; it&#8217;s just not possible at descent speed.<\/p>\n<p>Notes. The code is copyrighted Hans Schmucker and licensed und the GPL v2.5<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So far, you&#8217;ve always needed a plugin to even display dynamic 2D graphics, never mind 3D. So here&#8216;s a 3D engine that works right inside your browser, no plugin required. OK, first for all of you impatient guys, the controls: Arrow Keys: Turn\/Walk PageUp\/PageDown: Fly Flying only works when you&#8217;re outside the map, on the &hellip; <a href=\"https:\/\/www.tapper-ware.net\/blog\/real-3d-rendering-right-inside-the-browser\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Real 3D Rendering right inside 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\/19"}],"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=19"}],"version-history":[{"count":2,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"predecessor-version":[{"id":64,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/posts\/19\/revisions\/64"}],"wp:attachment":[{"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tapper-ware.net\/blog\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}