Print Story Modest 3D effects with SVG, version 3.1
By NoMoreNicksLeft (Sat Apr 22, 2006 at 05:49:15 PM EST) svg, javascript, 3d, database, sql, matrix algebra (all tags)
The basic SVG 3d applet is nearly complete. (Safe for work)

Scaling was finished awhile ago, though technically I am resizing, since scaling implies something done in funky 3d math. When you drag, it just adjusts the 4 corners' 3d coordinates. (Which is good, because this is easier to directly translate to size).

Rotation itself was a different matter. Before, the camera was always set at 0,0,0. When you moved the grid, you were adjusting it's XYZ coordinates... literally moving it.

Now, to rotate around the center of the grid is hard. The way 3d rotation works, it's easiest if you rotate around 0,0,0 ... which is only fine if the grid is embedded in the same space as the camera.

Now, you can move it there, do the rotation, and then move it back where it needs to be. And because I was confused, it took awhile to figure out the exact order of all the matrix operations... I eventually figured that out. I think. You see, with the object even temporarily at 0,0,0 (though not shown), half of it will be behind the camera. And, the half that is behind the camera ends up coming up with some bullshit numbers that derail the entire thing.

Infinities and divide by zeroes... it's a mess. Sometimes, one point of the line is visible, but the others aren't... so merely refusing to draw those line segments isn't an ideal solution.

Screw that.

Instead, I move the camera now. The same numbers are used, but instead of 7 units in front of the camera, the camera is 7 units behind the grid. The same numbers are there, need no translation, and will give us the placement of the grid.

And since the grid is centered on 0,0,0 no matter what, rotation is damn simple.

Rotation on two axis at once is a pain, and not usable. Eventually, I will have a seperate radio button for each axis. I also need some simple controls where you can rotate it at say, 45 degree angles with a button click, instead of trying to freehand things.

This isn't perfect yet, but it's nearly feature complete. Still need to fix the perspective... from a numbers perspective, the 4x4 grid is perfectly square (unless you change that). And yet, it looks squashed. This I believe, is simply two parameters that I have hardcoded in, and I believe that they should have a ratio that matches that of the height/width of the SVG canvas. I'm not that far off though. It should look better...

Wonder if I've got each in the wrong place. Hell, maybe I'll set the canvas to a square aspect ratio, see if that helps.

The other major problem, though not immediately obvious, is controlling the vanishing point. It's centered on the canvas. Now, I'm pretty dumb when it comes to photography, so will I run across photos where the vanishing point isn't dead center? I mean, especially if some are cropped...

Those of you that wish to see the application itself without viewing hardcore porn are welcome to check out the demo I've set up. It's hardcoded to use a single photo, that of a woman wearing a bathing suit, probably not even up to par for Sports Illustrated's Swimsuit Edition. This demo doesn't require an account. If anyone would like to submit it to Digg for me (*hint, hint* *nudge, nudge*), that wouldn't be unwelcome either.

In the demo, the Relevant Srufaces link opens the applet that this 3d stuff is meant for. It may not be updated in the demo to reflect that I've figured out all this quite yet. Now, to do 3d posable stick figures...

< CFC mashup entry | BBC White season: 'Rivers of Blood' >
Modest 3D effects with SVG, version 3.1 | 2 comments (2 topical, 0 hidden)
WIPO by 256 (2.00 / 0) #1 Sat Apr 22, 2006 at 06:06:16 PM EST
displays nothing at all
I don't think anyone's ever really died from smoking. --ni
Sorry, didn't give the usual disclaimer. by NoMoreNicksLeft (2.00 / 0) #2 Sat Apr 22, 2006 at 06:57:17 PM EST
Those who use jackassed browsers can expect to see nothing, because they're unwilling to install firefox or opera.

Firefox 1.5+
Opera 9 beta
Any recent Mozilla or gecko-based browser.

Pick one.
Do not look directly into laser with remaining good eye.

[ Parent ]
Modest 3D effects with SVG, version 3.1 | 2 comments (2 topical, 0 hidden)