Stupid JavaScript Tricks: "3D" Panorama

December 15, 2007 | Uncategorized | 11 Comments

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:

11 Responses to “Stupid JavaScript Tricks: "3D" Panorama”

  1. jesusvld says:

    It is a great JS utility. Greetings.

  2. Luke says:

    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.

  3. John Dyer says:

    @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.

  4. el_vartauy says:

    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 ;-)
    http://blog.vlad1.com/2007/11/26/canvas-3d-gl-power-web-style/

  5. Tom Robinson says:

    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.

  6. WTF says:

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

  7. assel says:

    this is like 2000 when flash 4 came out….

  8. Awesome! Useless, but I love the concept!

  9. serhat says:

    very nice

  10. sullivan says:

    I liked so much light

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.