Tangent128

My 3D Globe Widget

Wednesday, 22. August 2007, 22:54:55

As far as my experiments go, my most recent and currently favorite one can be seen in my 3d globe widget.

There are lots of ways to fake 3D on a 2D canvas context; I'll just note my texture mapping method here since I haven't seen it elsewhere.

In a nutshell, my textures are images like the following:

From the coordinates of the destination triangle, I calculate a transformation to map the texture triangle to the rendered triangle, then draw the texture with drawImage(...). While true perspective mapping doesn't work well, this method does seem to work reasonably fast.

Here's the unzipped widget file, if you are reading this on a Wii or just don't want to bother with a widget. You can click and drag the globe to rotate it.
edit: This is an old, 20 polygon version. If I can find an easy way to upload 132 files, I'll update this with a link to the 128-poly version.

Typical first post...Globe Updates

Comments

yeeliberto # 28. September 2007, 12:10

I tried it and it is cool.

geekrecon # 27. May 2008, 16:21

You have some good stuff here. I wrote a triangle texture-mapping function for my Wii Opera SDK then came across your globe widget. What I did in scanlines, you did in single passes. I modified the functions to use your transformations and rotations, speeding up the drawing about 20x. I've also added real-time shading by using variable transparent black and white triangle fills that depend on the direction of the lightsource. The result can be seen here: http://wiioperasdk.com/texturemap.html . Of course since I used parts of your code, I am citing your work in the Draw class of the Wii Opera SDK.