Archive for the ‘html’ category

Google Chrome PhotoSynth Viewer using Three.js

July 21st, 2011

I’m finally back from holiday and found enough time to update the Google Chrome extension with my new PhotoSynth Viewer based on Three.js.

You can download the new Google Chrome extension from the chrome web store: Three.js Google Chrome extension. The old one is still available but this is not a good idea to have both activated at the same time… Do not hesitate to use the donate button ;-) (located in the right side-panel) if you find this extension useful… thanks!

Warning: this extension may use a lot of ram (point cloud are store in memory as regular js array not TypedArray).

Possible improvement

  • Add picture thumbnails in the 3d environment (may become impossible without Microsoft adding CORS to the jpeg due to WebGL security issue)
  • Add a free flight camera (easy to add but harder without roll: I’ve added features to Three.js Quaternion class for this purpose, but still not ready)
  • Make the download point cloud link work! This is not my fault (I hope) I think that this is a Chrome bug. The only workaround that I can think of (without being sure that it would work) for this issue would be that Microsoft host downloadify.swf on… please ask them to do that!
  • Add a Meshlab like camera system (mouse handling + white sphere): if you know Three.js please give it a try!


Please take a look at the list of all dependencies used for this demo in my previous post describing this PhotoSynth viewer.


PhotoSynth Viewer using Three.js

June 20th, 2011

I wasn’t happy with my previous WebGL PhotoSynth Viewer: my javascript parser was aware of the position of the cameras and I wasn’t doing anything useful with it… Furthermore I was only relying on XB-PointStream for the rendering (which manage to display perfectly a dense point cloud). But I definitively want to do more fancy stuff. So Goodbye XB-PointStream, Hello Three.js!

The only trouble with this demo is that it is using a proxy PHP page to bypass ajax cross-domain security issue. Thus I won’t put it online (as it would kill my bandwidth limit). But I’ll try to update my Google Chrome extension so that you can give it a try too (will take time and I’m going in holiday…sorry).

On the tech side, this demo is using:

Other news

On another side I’ve been up to:

  • compile a bundler version with PBA support (with bad result: fast BA but erroneous point cloud)
  • create a new framework for fast matching: already 3x faster than OpenSynther (which is already really fast). This new framework is compatible with multi-gpu and multi-cpu + you can add constraints to memory usage!
  • create an hybrid AR solution for my current work based on my panorama tracking demo and using gyroscope information to fix the computing time of the vision part

Google Chrome PhotoSynth WebGL Viewer extension

April 13th, 2011

Google Chrome PhotoSynth WebGL Viewer extension

I definitively have been distracted, working on something else than PhotoSynth2CMVS, sorry about that ;-) . I have to say that I’m a Javascript lover and being able to do the same thing as my PhotoSynthDownloader and PhotoSynthViewer in Javascript was just irresistible!

As you can see in the video above, my Google Chrome extension allow you to view the point cloud of a PhotoSynth if you don’t have Silverlight using WebGL. This extension was very easy to implement thanks to 2 open-source project:

The source code of my extension should be available soon on my GitHub (with an html page working with Firefox 4 and Opera 11.5 using a PHP proxy to fix ajax cross-domain security issue).


The Google Chrome extension is available for free on the Chrome Web Store.

Warning: I’ve released this extension without Microsoft approval so if they don’t accept it, I will remove it immediately.


This is my first Google Chrome extension! It’s currently labeled 0.0.1 so don’t expect that much feature for now. But I’ve lot of idea of feature that I want to add to this viewer:

  • Use Web Workers to parse file in a background thread.
  • Display cameras positions and orientation as in my Ogre3D Viewer.
  • Display Bing map on the ground if the Synth is geo-referenced.
  • Display the collection of picture and if you click on one, animated the 3d camera to the corresponding viewpoint.


This is not directly linked to this post but if you have used one of my project:

…and find it useful, your help will be appreciated ;-) . The PayPal donate button is on the sidebar on the right. Thanks!


PhotoSynth WebGL Viewer

April 5th, 2011

CMVS support in PhotoSynthToolkit:

First of all, I’m sorry this post is not about CMVS support in PhotoSynthToolkit :-( . Releasing the PhotoSynthToolkit with CMVS support is way more complicated than predicted… This is because it is not just a file conversion process (as in my PhotoSynth2PMVS). I have designed a library (OpenSyntherLib) that extract features, match them, build tracks and then triangulate them using PhotoSynth cameras parameters. The problem is that this library is highly configurable to match each dataset needs. So providing an automatic solution with good parameters is difficult.

The new PhotoSynth2CMVS tool generates bundler-compatible file (“bundle.out”). I’ve sent the bundle.out file of the V3D dataset to Olafur Haraldsson and he has managed to create a 36 million vertices point cloud with it! It will be showcased in a next post.

PhotoSynth WebGL Viewer:

As soon as I’ve seen the SpiderGL presentation at the 3D-Arch Workshop I’ve decided to implement a PhotoSynth viewer with WebGL! Thanks to Cesar Andres Lopez I’ve found XB PointStream which is very well designed and documented. Implementing a PhotoSynth Parser turns out to be super easy! Porting my PhotoSynthParser.cpp took less than 10min thanks to the jDataView and binary ajax developed by Vjeux. After 2 hours of hacking I got this first viewer:


I can’t host the viewer on my website has it is using a proxy to fix ajax cross-domain security issue (thus it will kill my bandwidth limit). So I’ve made a video to show you how it looks:


The viewer source code will be hosted on my GitHub and I’m working on a Google Chrome extension to by-pass the need of a proxy… Having a Google Chrome extension that replace the Silverlight viewer on would be nice too (if you don’t have Silverlight).


My 5 years old Quiksee competitor

September 27th, 2010

I’ve just heard that Google has bought Quiksee for 10 millions $. I was curious about Quiksee virtual tour technology as I’ve written myself something that seem equivalent 5 years ago. But their website doesn’t explain anything, neither their “nice” demo clip.

Like Quiksee, my virtual tour system is composed of panoramic pictures linked by videos. The first version of my virtual tour was created in 2005 (2 years before Google Street View launch).

During my internship in the beautiful city of the Puy-en-velay I’ve taken around 1800 pictures to create a virtual tour. This virtual tour is composed of 18 panoramic pictures and 44 videos links. I’ve first created a full featured version using Flash for video playback (Yajev) and then I’ve improved this version with a full HTML5 version (Html5 Virtual Tour).


Ok, I’m not gifted to find a product name (Yajev -> Yaj3v (l33t) -> yajvvv -> yet another virtual visit viewer). My first demo of Yajev was created in 2005 and was showing a small French village (5000 pictures, 51 videos and 20 panoramic pictures), but it’s not visible anymore.

->Live demo<-

Best viewed with IE9 (there is a bug with the Flash player with the other browser)


  • 360° panoramic player
  • Flash video player
  • Map
  • Hotspot links and tips displayed over panoramic picture
  • Dijkstra shortest path finder and player
  • Plugin system: compass, debug, 3d sound, lytebox, debug
  • XML based virtual tour configuration

Html5 VirtualTour

This version is 2 years old now. Unfortunately the videos were encoded with Theora, so this demo can’t run on IE9. So this demo is best viewed with Google Chrome and Firefox.

->Live demo<-

Best viewed with Google Chrome


  • 360° panoramic player with smooth animation
  • Html5 video player
  • Canvas map
  • Hotspot links and tips displayed over panoramic picture
  • XML based virtual tour configuration


There is no support for this virtual tour ! The javascript files are not obfuscated: you are free to do what you want with it. I’ve created this to improve my javascript skills, but I’m much more interested by computer vision now, so I’m sorry but I can’t provide any support for Yajev nor Html5 Virtual Tour.