Posts Tagged ‘html5’

Improving PhotoSynth extension performance

March 19th, 2012

I’ve recently discover the new transferable object feature in Google chrome. BTW transferable objects are really great! Furthermore you really should use them as I’ve found that structure cloning is leaking (you can try this leaking demo with chrome 17). Thus I’ve started to update my extension and done a benchmark of various solution with a big synth of 20mo (1200k vertices and 1000 pictures).

I’ve also improved a lot my binary parsing by using only native binary parsing (DataView). One thing about DataView: did they realize that if you forgot the endianness parameter it will use BigEndian? (littleEndian = x86, bigEndian = Motora 68k).

Thanks to both optimization the new version is 4x faster! (loading time: 24s > 6s)

solution 1



  • cross-orign was forbidden in contentscript (fixed now since chrome 13)
  • lack of TypedArray copy/transfert -> JS array replacement
  • Loading time: 13600ms (24400ms with the previous version without optimized binary parsing)

solution 2



  • Issue: the UI is frozen during parsing (lack of threading)
  • Loading time: 6500ms

solution 3



  • I’m using transferable objects to both send the xhr.response (ArrayBuffer) and receive the parsed Float32Array (vertex positions) and Uint8Array (vertex colors).
  • Issue: I didn’t manage to spawn a worker from my extension directly (SECURITY_ERR: DOM Exception 18): I’ve been forced to inline the worker as a workaround.
  • Loading time: 6000ms

solution 4



  • Issue: because of this bug workers can not do cross-orign xhr.
  • Loading time: N/A

I’ve also optimized the PLY file generation by generating binary file on the client side instead of ascii.

  • Ascii: 74mo in 9000ms
  • Binary: 17mo in 530ms (~17x faster!)

Sadly I didn’t manage to find a way to accelerate “bundle.out” ascii file generation yet (involving lot of string concatenation and numbers formatting).

I didn’t have updated the extension on the chrome web store yet as I’m working on using the new BufferGeometry of Three.js that should be more efficient. Building BufferGeometry directly from Float32Array (vertex positions array) and Uint8Array (vertex colors array) seems a really better solution IMO.

Mesh compression

I’ve also discover the webgl-loader mesh compression solution recently. I’ve compiled my own version of objcompress.cc and fixed the JSON export. Then I’ve created my own format allowing to pack in one file all the utf8 files (thus reducing the number of http request needed). I will post about it soon: stay tuned!

Firefox extension?


On a side note I’ve also been playing with the new mozilla add-on builder SDK… well IMO Firefox isn’t the best browser for extension anymore. I’ve been very disappointed by the restriction applied to code running in the contentscript (for example prototype.js is not working: I had to use a clone that I’ve built long time ago). And I’m also very concerned about their security strategy: they don’t have a cross-orign xhr permissions field in the manifest. Thus extensions can do cross-orign request to all domains by default! Nevertheless I’ve managed to port the binary parsing of the point cloud but Three.js is not working either :-( .

Share

PhotoSynth bundle.out export!

February 1st, 2012

I’ve updated my Google Chrome extension to export a valid bundle.out from a PhotoSynth. The bundle.out generated need to be used with HD version of the images (not the thumbnails). Moreover I’ve removed tracks of length 2 from the bundle.out as I guess that PhotoSynth is keeping them only to get a “denser” point cloud (aesthetic purpose only)? One more thing: you can not use the bundle.out file to run a bundle adjustment as the 2d measurements are unknown (I have computed them by projecting the tracks in corresponding cameras).

I’m sure that some of you have an idea of what to do with a bundle.out file from a PhotoSynth ;-) .
BTW, this export wouldn’t have been possible without Peter Sibley help, thanks Peter! He has help me by giving me the missing information needed to do the bundle.out PhotoSynth export.

Share

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

Download

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.

Ideas

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.

Donate

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!

Share

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

Yajev

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)

Features:

  • 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

Features:

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

Download

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.

Share