Topic: Speeding up texture mapping onto a sphere in JS (Page 1 of 1)

I've been dabbling at a very basic level with some 3d stuff for a while, not fully comprehending the maths, etc, behind it. Over the last few weeks, I've been reading more material than I care to imagine including some great stuff at Wolfram MathWorld, and finally got my head around mapping points onto a sphere.

I've taken it one step further now, after reading this handy guide to texture mapping onto a sphere (http://www.codeproject.com/KB/graphics/Sphere_mapping.aspx) and have come up with a very basic 2d canvas implementation:

http://www.soterm.com/spheremap/index_v3.html

Right now, it runs very, very nicely in Chrome, but like a dog in Fx 2, Safari, and not at all in Opera 9.5. Fire up Chrome and have a play - the z-rotation is automatic, but you can drag any of the X/Y/Z sliders at any stage.

It's entirely possible my maths is shot to bits, but I'm wondering if there is any way of speeding it up in Fx2 / Safari at all?

One issue I'm aware of is that the algorithm to map img -> sphere leaves gaps at a larger radius, presumably because it isn't stretching the image, but just doing basic mapping x/y -> theta/phi. I found another guide (http://local.wasp.uwa.edu.au/~pbourke/texture_colour/spheremap/) which sounds like it might address this issue, but I've yet to play around with it

Thanks in advance for any tips on optimisation!

Dan

(Edited by BillyRayPreachersSon on 10-05-2008 13:32)

Spammer. Please cease existing.

(Edited by Tyberius Prime on 10-23-2008 10:27)

I had a quick look when you posted that. And the first thing I noticed was that you do things the other way around : you actually plot a pixel for every angle. This will result in gaps for large radius and a lot of overdraw for small radius.

What you should do is start from the screen coordinates and compute the corresponding angles to figure the UV coordinate.

I tried to make a sphere mapping, didn't do all the rotations but the basic rendering loop, and noticed that the size of the texture changes dramatically the speed. I don't remember if that was just in Opera or also in Firefox. Chrome was super slick.

Size of the texture does indeed matter a lot in my experience, so make sure that the canvas you're drawing from is as small as possible. Maybe even cut the texture into smaller pieces?

Also, what p01 said. Doing it the other way around would save a lot of trouble.

Jacob Seidelin - http://blog.nihilogic.dk/