How many images needed to create JavaScript 360 degree image spin effect?

Question

I was looking at some demos over at Apple showcasing some cool HTML5, CSS3 and JavaScript demos and I got intrigued by this one, a 360 degree product viewer of sorts.

I was wondering out many photos you think I would need to try and replicate this. Apple themselves say several on the page, but that isn't very descriptive.

It seems like it would be a very arduous task to try and accomplish so I may not do it, but I'm just wondering.

Thanks.

Answer 1

They don't specify because there is no real answer. If you want it to be super-smooth, 360 images would be nice. Apple used 72. You can use any number from 2 to 72 to 360 to infinity to technically get the effect, so it's your call just how much work is worth just how smooth an effect.

Sorry.

Answer 2

The demo uses 72 images.

^{Incidentally, the demo seems to just update the image src attribute.}

Answer 3

Depends on the precision of the rotation you want.

There is no fixed number.

In that specific example they are using 72.

the images can be found at http://developer.apple.com/safaridemos/showcase/threesixty/images/optimized/Seq_v04_640x378_72.jpg

replace the last 72 part of the url with 01 to 72 to get all images.

Answer 4

You need several, that's as descriptive as it gets.

But note one thing. If you load them in a specific order, you can get a progressive effect.

For example, load first "north" and "south". Then "east" and "west". Then "northwest", "southwest", "northeast" and "southeast" and so on, that way you can have more than 72 images but the user won't have to wait to get a progressively smooth experience.

Note that in this case you'd be loading them in powers of two.

1st load (after one image is already there): 1 image (the opposite)
2nd load: 2 images (the sides)
3rd load: 4 images
4th load: 8 images
...
8th load: 128 images.

Note that you wouldn't use degrees as easily. (they just had to divide by 5, 360/5=72)
For calculating which image is on a given degree you'd use interpolation.
So first you'd interpolate 360 degrees down to 2 (images), then to 4, then 8... to know which image to pick based on which you have

An easy explanation of interpolation is here.

Answer 5

From the visual not the technical... The Smoothness of the rotation is the factor that you want to look at on how many images you need. The size if the object and the level of detail help in the answer, you then have the bandwidth. 20 images is a minimum, 40 is a good recommendation, but 72 looks great. Remember that if it is photography, each image adds more work and difficulty.

Here is a chart the helps showcase the amount of images. http://www.photospherix.com/matrix.html

Answer 6

You can download the demo from here Have a play around with it I reckon 24 is a good number but it depends how many rotating view you plan on creating.

http://lukedurrant.com/2011/08/apples-360-rotating-ipod-html-5-source-code-download/