Google Chrome PhotoSynth Viewer using Three.js

July 21st, 2011 by Henri Leave a reply »

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.



  1. Mr.doob says:

    Neat! Maybe you can delete the array once the buffer gets created to save memory? The typedArrays should be removed automatically on the latest versions, unless object.dynamic == true.

  2. Henri says:

    @Mr.doob: Thanks, it’s an honor to have your comment on my blog!

    Concerning the memory issue: I need to keep a copy of the array in order to generate the PLY point cloud file on the client-side.
    Furthermore there is a limitation in Chrome extension: you can’t pass a Float32Array from the background page to the content script.
    Sadly only background page can do cross-domain ajax call, this is why I have to use regular js array to pass the buffer to the content script.

    Is is possible to create a THREE.Geometry directly from one Float32Array anyway (without iterating through element and creating THREE.Vertex)?
    I also don’t know if it is possible to use unsigned char representation instead of float32 for vertex color (Intel “GPU” don’t like float vertex color).

    Thanks again for Three.js!

    BTW I hope that I’ll find enough time to complete my modifications to the THREE.Quaternion class (I’ve added some features).

  3. knygar says:

    Will you open-source your work with XB PointStream? This one?

  4. Henri says:

    @knygar: Yes, otherwise I would have packed and obfuscated the source code ;-)

  5. Josh Harle says:

    Fantastic work Henri :)

    (and mr doob!)

  6. Henri says:

    @Josh: Thanks!

    @all: I’m also very proud of a new feature that I’ve just added to the viewer (not yet available). I’ve implemented a C++ WebService in the spirit of Read/Write World :)
    I really hope that Microsoft plans is equivalent to this demo with Read/Write World! I should showcase this demo next week as I’m currently in holiday…

  7. Henri, it took me a while to get this version of the extension and give it a run through. I’m loving the ability to view the camera frusta and the addition of top view is pleasing as well.

    I’ve long wondered about the rendering possibilities of WebGL for the point clouds. I notice that you prefer to render each point as having a concrete dimension, rather than always rendering one point to one pixel as the default Photosynth viewers have. I wouldn’t mind seeing an option for this official Photosynth point cloud rendering method, if it’s possible.

    Also, is there a reason that you chose squares for the shape to render each point to? I wouldn’t mind an option to try other things like circles, hexagons, or spheres. I also have long been interested in the possibility of applying metallic reflectivity or light-emitting qualities to the points. I am especially fond of thinking of the entire point cloud twinkling like Christmas lights.

    I assume that you are familiar with the work of directtovideo such as Agenda Circling Forth and Numb Res . Combining that sort of rendering of the point cloud with something like Thiago Costa’s Lagoa Multiphysics engine would be an absolutely amazing spectacle.

    I know that I’m dreaming fairly large dreams, but there they are.

    Thank you for your continued sharing of your work with the rest of us.


  8. Henri, I’m having trouble getting either of your alternate Photosynth 1 viewer extensions to work.

    Has Chrome or changed anything that would stop the extensions from taking effect?

  9. fine says:

    hi,i’m very interested in the webgl viewer.where can i get the code?thanks

Leave a Reply