I've been working on a 3D engine on canvas for some time, and as I was posting a message on our blog, I figured you guys might be interrested as well :)
Ultimately the purpose of this engine would be to provide an easy to
use platform/interface for creating 3D stuff, from degrading interface
elements for sites, to complete games. Collada support is en route,
and with squirrelfish hitting air, I'm considering trying that too :)
Steven Wittens has taken on a challenge to make fake 3D in Canvas and built a library for projective texturing:
Canvas is still limited to 2D: its drawing operations can only do typical vector graphics with so-called affine transformations, i.e. scaling, rotating, skewing and translation. Though there have been some efforts to try and add a 3D context to Canvas, these efforts are still experimental and only available for a minority of browsers through plug-ins.
So when my colleague Ross asked me if we could build a Cover Flow-like widget with JavaScript, my initial reaction was no... but really, that's just a cop out. All you need are textured rectangles drawn in a convincing perspective: a much simpler scenario than full blown 3D.
Perspective views are described by so-called projective transforms, which Canvas2D does not support. However, it does support arbitrary clipping masks as well as affine transforms of both entire and partial images. These can be used to do a fake projective transform: you cut up your textured surface into a bunch of smaller patches (which are almost-affine) and render each with a normal affine transform. Of course you need to place the patches just right, so as to cover any possible gaps. As long as the divisions are small enough, this looks convincingly 3D.
So some hacking later, I have a working projective transform renderer in JavaScript. The algorithm uses adaptive subdivision to maintain quality and can be tuned for detail or performance. At its core it's really just a lot of linear algebra, though I did have to add a bunch of tweaks to make it look seamless due to annoying aliasing effects.
I’m really typecasting myself here. If there were an international “Person most likely to write a Spectrum emulator in Javascript” award, I’d have taken it for the last five years running.
If you crack this thing open, you'll see Matt is using the Canvas tag to do some interesting things:
The rest is just creative abuse of the element, as usual… it’ll take advantage of the putImageData interface to do the pixel pushing if available (on my machine Firefox has it, Safari doesn’t) and fall back on drawing 1×1 pixel rectangles otherwise. This time I’ve thrown in Google’s ExplorerCanvas as a nod to those poor unfortunates still stuck with Internet Explorer. Incidentally, I’d be curious to know how it rates on Google Chrome (I don’t have an XP/Vista box to test on) - if the hype is true (and it implements the putImageData interface like all good up-to-date browsers should) then I’d expect it to comfortably reach 100% Spectrum speed on modest hardware.
Tommy Maintz has created a fun project called GameJS a 2d game development framework using JavaScript and Canvas.
The API
GameJS.framework.Game - This is the main game class you extend when creating the game. It has the following methods which you have to override: initialize, loadContent, update and draw. This is all very similar to the XNA framework. Tetris.js is an example of how to extend this class.
GameJS.content.ContentManager - This class handles the asynchronous loading of resources saving you some headaches. The following code loads a new texture which can be drawn in the games draw() method:
GameJS.graphics.GraphicsDevice - This file sets up the main canvas. It also manages the Z-buffering, and has a method that creates a new resource context which individual textures can use. You can easily change its properties. A simple example:
GameJS.graphics.SpriteBatch - This class acts as a wrapper around the canvas element. It has a draw method which allows you to draw a texture to the graphicsDevice. You can pass it a destination and source rectangle. Code example:
GameJS.input.Keyboard and GameJS.input.KeyboardState - These classes handle the keyboard input. Since JavaScript is an event based language and a game cycle is something continues, the framework takes care of storing the pressed keys. This looks something like the following:
I got the demo working in Firefox 3, though there were some glitches in Safari 3. As a cool aside, when I was uploading the screencast above YouTube transparently saw that I have Gears installed and used it to give me better upload feedback ("Uploading... 31%") and resumability (Disclosure: I work for Google and with the Gears team):
Screenshot Uploading Blobular Screencast Using YouTube
Next on our round-the-web update is a cool graphing library named Bluff, taglined "Beautiful graphs in JavaScript":
Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy of JS.Class (about 2kb gzipped) and a copy of Google’s ExCanvas to support canvas in Internet Explorer. Both these scripts are supplied with the Bluff download. Bluff itself is around 8kb gzipped.
To draw a graph, you create a new Bluff graph object using the id of a canvas element on the page, set some options, add the data and labels, then tell the graph to draw. A basic example:
KDE 4 is the latest release of the KDE software stack. One of the most notable changes in KDE 4 is a pervasive usage of SVG. SVG files are used for themes, icons, storage system and transport. They are at the beating heart of beauty of the KDE 4 interfaces.
Furthermore, the whole graphics stack utilized by KDE has been heavily influenced by the SVG standard. A new Free Software graphics driver model, called Gallium3D, has been written in order to utilize modern graphics hardware for accelerating API's such as OpenVG and OpenGL to assure real time rendering of SVG files using minimum amount of resources. On top of that the Qt library, which KDE is layered upon, has a graphics API fully compatible with the SVG rendering model.
To cope with variety of uses of the SVG technology KDE comes with two SVG rendering engines. Th SVG 1.2 Tiny [SVG12] compliant QtSvg library, which is meant to be a minimal rendering engine, suitable for things like icons, and QtWebKit's SVG which is a full SVG engine.
KDE 4 has just begun its existence and almost every day engineers working on it come up with new and creative ideas, tools and use cases for how to better utilize SVG. Unlike most of the technologies leveraging SVG, KDE's focus is on interactivity and animation. A whole set of tools and utilities has been developed to aid that goal. The best example of such uncommon usage of the SVG standard is the Plasma [Plasma] project, which comes with its own animation framework layered on top of the SVG rendering model.
The openness of the SVG standard aided by the creativity of the Free Software engineers created something truly unique and exceptional.
Finally, here is something that will blow your mind (I'm still trying to wrap my mind around this one); someone has been working on getting Microsoft's XAML/WPF technologies to render in the browser without Silverlight using.... SVG:
This post is basically a pre-announcement...in my spare time, I’ve also been working on another system based around the same ideas, except this time based on the SVG implementations supplied by browsers, along with JavaScript.
It’s called Firelight, and the github wiki is here.
Think of it as a Silverlight-like implementation with some WPF thrown in, with no plugin. Just a JS file and a little initialization code. It loads almost instantly (it’s smaller than jquery for the time being, although it’s unlikely to stay that way) and immediately goes to work. And it will directly benefit from performance work being done in browser SVG, DOM, and Javascript implementations.
Since I don’t expect any of you to go grovel around that stream of consciousness wiki page, here’s a tiny demo of some of the core infrastructure in firelight: http://squeedlyspooch.com/firelight/xaml.xhtml. The xaml file which is loaded by that page is here. Note the event triggers on the smaller gradient filled canvas. Try mousing over it and clicking it.
That demo (as the wiki states) works in Firefox version 3.x, Safari (windows, at least) 3.1.2, and on the iPhone (that part I get a real kick out of). Opera has some issues with some of my code, and so I have some issues with Opera. But I’ll get it working there too soon (makes sense, since last I checked it had the most compliant version of SVG available.)
Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:
