Month: February 2007

I’ve updates the Canvas 3D Renderer with new sample data, a few performance tweaks, background image support, support for colored polygons and a few tweaks here and there.

Note however that the car you see is not a sprite, it’s simply an image put in front of the canvas for my amusement. So don’t get confused if it doesn’t behave the way you expect it to do.

Right now the sample data has around 200 faces and while the code is almost ready for shared vertices (which means that one vertex belongs to many faces, resulting in a much lower number of vertices in memory and therefore a lot less calculations) right now a face still consists of 3 vertices, meaning that it does about 500-600 rotations, projections,clipping and collision tests per frame update, with very few optimizations so far and for that the speed is (at least in my opinion) amazing.

What’s interesting to me are the test results… I didn’t time them, so I can’t give you any numbers, but
Opera 9.1 is definitely the slowest one, but with a very steady framerate, which probably means that drawing and garbage collection are very fast (as these tend to take up a variable amount of time), but arithmetic is slow.

Firefox 2 is pretty steady as well, and a lot faster than Opera.

Firefox 3 Alpha is certainly the fastest browser, but with a very unsteady framerate. I guess the new garbage collector is causing this while drawing speed is increasing thanks to Cairo.

You can still find it at http://tapper-ware.net/canvas3d/ (Note that the background gets drawn during the first screen update after the image has loaded, so it will probably take a second or two to appear the first time you load the page. Screen updates happen whenever you move around).

P.S. I’d appreciate it if you could send me mail if you want me to answer your comments. hansschmucker at gmail dot com

So far, you’ve always needed a plugin to even display dynamic 2D graphics, never mind 3D. So here‘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’re outside the map, on the map you’ll get put onto the nearest surface automatically.

Now a bit of background info:
This is a demo program for the Canvas element, which is right now being formulated as a standard over at
WHATWG.
The Canvas element is a 2D Bitmap surface to which you can draw to directly from JavaScript. So far, you couldn’t
do graphics in Javascript, aside from dynamically loading different bitmaps from the server. The Canvas element closes
that gap. Now you can actually draw arbitrary shapes, without loading anything from the Server.
For that purpose, the Canvas element provides an API that allows you to draw vector shapes and bitmaps.

The target for Canvas is to not only provide a 2D API, but also one for 3D based on OpenGLes. Sadly, this API
hasn’t yet arrived, and it looks like it will take some time until browsers support it, but the 2D API is here and it’s
working just fine in anything but InternetExplorer, and even for that Google provides wrapper code free of charge
(note however that this wrapper code isn’t being used here, so you’ll need either Firefox 2+ or Opera 9+, Safari hasn’t
been tested). So I decided to write a little 3D Renderer myself. It’s not complex, it’s not finished, but what the hell:
it works. While this isn’t the first attempt to do this
(Canvascape comes to mind),
it 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
Alias Wavefront OBJ file, and builds the model from the triangles it finds in there.

So what does this demo do? Well, basically this:

• Load a model
• Set up controls to modify a view object
• Find the nearest triangle below the player
• Move the player down to that triangle
• Rotate the model
• Clip it against Z=0 so you only render what’s in front of you
• Split partially visible triangles against Z=0
• Project all vertices, so that they get smaller the farther away they are
• Draw them, with the distance dictating the color

It’s a bit more complex, but these are the important parts.

So what do I want to do with this? Well, eventually it should becomes a little racing game. Remember ReVolt?
Something like that and from the performance I get so far, it seems possible.
Which brings me to the needed optimizations:
I’ve got absolutely no idea why, but it seems like all Canvas implementations do pixel based clipping against
the drawing window, instead of shape-based clipping… essentially that means that drawing a 1000×1000 pixel
shape, it takes 100 times as long as drawing a 100×100 pixel shape, even when the Canvas is only 20×20 pixels
in size.
Then the game needs a BSP tree because JavaScript is too slow to calculate visibility for every triangle in
realtime… so there has to be a structure that dictates that from position 1,1,1 faces 2,5,8,10 are visible, while
from position 5,6,12 faces 3,15,33,110 are visible.
Then we need a real colission detection for a meaningfull game and support for sprites.
There will probably be a 1000 other things to do, but that’s what I have in mind now.
Oh, and forget about textures… it’s just not possible at descent speed.

Notes. The code is copyrighted Hans Schmucker and licensed und the GPL v2.5

OK, so yesterday evening I started working on a new Javascript minigame: Sudoku.

I know what you’re going to say: there already are way too many Sudoku games around. And you’re absolutely right.

Problem is, there are very few good games around, and even less that run in your browser and almost none that require no plugins.

There’s already a first Alpha version available here (but with just a single puzzle):
Here!

The feature list is already longer than for most other Sudoku games:

1. Use the buttons at the bottom to add notes to the selected field.
2. Use the buttons at the right to confirm a number.
3. Use the “?” to get all notes automatically.
4. You can’t confirm numbers that collie with other numbers in the field, however you can enter numbers that are simply wrong.

So what’s still missing (aside from a new UI):

• Automatic Solver
• Generator
• Tabs for different versions of the same puzzle
• True handwritten notes
• Menu to enable/disable solvers.

Did I forget anything? Tell me!

Update:

Now there are 1000 new puzzles available. While there is still no generator in this, I have instead opted to instead create a converter for the files generated by QQwing, A free Sudoku generator published as OpenSource. Now, on launch the game will select a random number between 0 and 1000 and load the level with that number. However there are no difficulty levels yet: While QQwing supports this, it is not being used yet. All levels are difficulty “Expert”.