feedback
Dec 15 2007

Stupid JavaScript Tricks: "3D" Panorama

by John Dyer

Update: Please note, this a Firefox-only, totally experimental "fun" project, not meant for real world use :)

I'm putting together a tutorial for making 3D panoramas using Papervision3D (example) and I though I would release some pretty pointless JavaScript code I wrote a while back that attempts to make a panorama using just JavaScript. Here's how it works: it creates a series of div columns, and then puts copies of the image in each column. As you move your mouse across the image, it stretches the columns vertically along a sin curve to fake the 3D look. And then it destroys your processor.

Here's part of a photo before the effect is applied:

image

Here's the photo split into 1px wide columns. Notice how the roof is straightened out. 

image

Unfortunately, its too slow to be usable. So here's the photo split into 5px wide columns, which makes it pretty usable and doesn't look too bad.

 image

Here are links to try it out:

Comments

jesusvld December 19. 2007 10:15

It is a great JS utility. Greetings.

jesusvld
Luke December 19. 2007 11:30

Hey thats very interesting even if LOL, it will run slow . Have you looked at any Java applets code that generate the 360 degree photos effect / panoramas? Maybe there are ways of optimizing it therein?  A Javascript version would be great for the Virtual Tours my company provide - even if the Java version we use is generally found as supported as default on most web browsers -- I think Javascript would future proof the whole effect.

Luke
trackback December 19. 2007 12:05

Trackback from purrl.net |** the web's most interesting news **|

The web's most interesting stories on Wed 19th Dec 2007

purrl.net |** the web's most interesting news **|
John Dyer December 19. 2007 12:07

@Luke, yes I'm aware of Java options, but I personally don't like Java applets very much. Right now I'm working with Flash (under Papervision3d) to produce 3D panoramas. This is just a "Stupid JavaScript Trick" that probably would never work for real-world use. It's just for fun to show what JavaScript could theoretically do.

Here's a sample from the papervision site: http://www.papervision3d.org/demos/panorama/

It might be a great fit for your company.
John Dyer's last post: Purple CMS - Super Early Alpha (0.1)

John Dyer
el_vartauy December 19. 2007 12:50

i think this pure js trick/hack is more funny than stupid.
don't worry John, OpenGL is arriving to JS hands, then let's see what looks more stupid Wink
blog.vlad1.com/.../

el_vartauy
Tom Robinson December 19. 2007 18:15

I've been experimenting with some 3D (actually more like 2.5D) JavaScript stuff as well:

http://tlrobinson.net/misc/3d.html

note this is very very alpha and probably only works well in Safari and Firefox, though i dont think the menu work in FF so youll only see the first one. Sorry.

Tom Robinson
WTF December 20. 2007 05:25

common guys, this is like 2000 when flash 4 came out....
the wheel is invented, gunpowder is plentyful, stop replicating, start innovating...

WTF
jindw December 20. 2007 23:11

good

jindw
assel December 30. 2007 16:08

this is like 2000 when flash 4 came out....

assel
Julien Lecomte January 13. 2008 14:02

Awesome! Useless, but I love the concept!

Julien Lecomte
serhat March 25. 2008 00:56

very nice

serhat
sullivan April 20. 2008 15:57

I liked so much light

sullivan
Comments are closed
Web Statistics