John Dyer

Technology and web development in curly bracket languages {Javascript, C#, ActionScript}

Stupid JavaScript Tricks: "3D" Panorama

by John Dyer 15. December 2007 23:53

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

12/19/2007 8:30:19 PM # Luke Luke United Kingdom | Reply
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.

12/19/2007 9:07:05 PM # John Dyer John Dyer United States | Reply
@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: feedproxy.google.com/.../post.aspx" rel="nofollow">Simple Cross-Browser HTML5 video with a single H.264 file and fallback options
12/19/2007 9:50:04 PM # el_vartauy el_vartauy Uruguay | Reply
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/.../
12/20/2007 2:25:16 PM # WTF WTF Germany | Reply
common guys, this is like 2000 when flash 4 came out....
the wheel is invented, gunpowder is plentyful, stop replicating, start innovating...
12/31/2007 1:08:48 AM # assel assel Egypt | Reply
this is like 2000 when flash 4 came out....
3/25/2008 9:56:11 AM # serhat serhat | Reply
very nice
8/12/2010 10:41:21 AM # Replica Watche Replica Watche People's Republic of China | Reply
Our shop offers many famous Chopard Replica Watches. for example:Chopard Mille Miglia Replica Watches,Chopard Grand Prix de Monaco Historique 2008 Chronograph, They are all wrist watches and you can buy one for your father to show your love ,moreover. no one could know it a replica one.

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



Web Statistics