Topic: Speeding up texture mapping onto a sphere in JS (Page 1 of 1) Pages that link to <a href="" title="Pages that link to Topic: Speeding up texture mapping onto a sphere in JS (Page 1 of 1)" rel="nofollow" >Topic: Speeding up texture mapping onto a sphere in JS <span class="small">(Page 1 of 1)</span>\

Bipolar (III) Inmate

From: London
Insane since: Jul 2004

IP logged posted posted 10-05-2008 13:30 Edit Quote

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 ( and have come up with a very basic 2d canvas implementation:

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 ( 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!


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

Nervous Wreck (II) Inmate

Insane since: Sep 2008

IP logged posted posted 10-23-2008 10:21 Edit Quote

Spammer. Please cease existing.

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

Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-23-2008 12:04 Edit Quote

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.

Bipolar (III) Inmate

Insane since: Jul 2008

IP logged posted posted 10-30-2008 22:10 Edit Quote

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 -

Bipolar (III) Inmate

Insane since: May 2011

IP logged posted posted 05-31-2011 11:11 Edit Quote
Edit TP: spam removed

Post Reply
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
Your Text:
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu