Monthly Archives: February 2014

Browser frame rates rendering lines on a HTML5 Canvas using JavaScript

Here are some framerates for the 3D rotating object using HTML5 and the Canvas running on different devices and browsers. IE is impressive!

I’ll add more devices over the next few weeks.

Platform / OS Processor Ram Browser Version Framerate
Windows 8 / PC i7 (1st Gen) 2.80 GHz 16 GB IE 10 306
Firefox 27.0.1 77
Chrome 33.0.1750.117 m 178
Android 4.4.2 / Nexus 7 (2013) 32 GB Chrome 118
WinPhone 8.0 / Lumia 620 (£140) IE 58
Amazon Paperwhite (1st Gen) Experimental 3
Kindle Fire (1st Gen) Silk 38
iPhone 5s (£629) 32 GB Safari 117

3D rotating object using HTML5 and JavaScript

This is my first attempt at coding 3D graphics so it’s pretty raw. All rendering is done in JavaScript by calculating the object’s coordinates and then drawing lines directly onto a HTML5 Canvas object.

The maths is almost entirely matrix and vector manipulation. The main calculations are: rotating an object in 3D, calculating a vector perpendicular to a plane, and working out if the perpendicular vector and the “camera” vector are pointing towards each other (and if so, render the plane).

3D Rotating Object

What this code does: it handles the 3D rotation, distance and perspective of an object and works out what planes of the object are visible and need to be rendered. It also optimises the rendering, so a line that borders two visible planes will only be drawn once. The rotation of the object is constant across all devices, but the framerate is the maximum the browser can support. This allows the object to rotate as smoothly as the local hardware and browser will allow.

What this code doesn’t do: you’ll notice the object is convex, which means no part of the object can ever obscure another part. This is due to a limitation in the code as there is currently no facility for one part of an object to intelligently obscure another part. Also, the code does not allow a near object to obscure a distant object – at the moment both will be rendered. I’m going to fix these issues next.

If you have a JavaScript enabled HTML5 browser, you can view the working code here.

Vector graphics game using C# / WPF and the Canvas

This began as a simple 2d maths exercise that turned into a legacy arcade game to give the project some focus. I’ve never written a game before so part of the fun was working out the algorithms myself and not looking up any accepted way to write a game loop or perform the real time calculations. The end result is a pretty good game that runs fine at 50fps (frames per second). My choice of display technology was WPF and the Canvas. I read some time ago that Microsoft advise against using WPF for games, but the whole project was meant to be fun and I figured it would be interesting to see where WPF failed. As it was, WPF didn’t fail. The WPF rendering engine had to update almost 1000 spinning lines at an attempted 50fps before it started to stutter (on a first generation i7 2.8GHz processor). I’ll re-factor the game using either OpenGL or Direct2D when I get the chance and see how they compare.

The game is smoother than the video suggests but my screen scraper added some jerkiness. To stay within the limits of the rendering engine I had to reduce the lifetime of both shrapnel and explosions and give the floating scores a distinct lifetime (1500ms) which reduces their effect. It will be interesting to see if I can remove these constraints with OpenGL and Direct2D.

A clear omission is collision detection between asteroids. It would have been easy to add this, but I want to implement it properly as the existing collision detection is simply “if touch then explode”. For the asteroids, I would like to create a “physics engine” so rather than just bounce off each other like billiard balls, their contours, momentum and the angle of the collision are all taken into consideration when calculating their impact and new velocity. A nice feature would be if a sharp edge of one asteroid squarely hits a straight edge of another then the second asteroid cracks at the point of contact or, if the impact is sufficient, breaks into smaller pieces.

All sounds and music are in-game.