Archive for October, 2011

Three.js PhotoSynth Viewer with pictures and new UI

October 3rd, 2011

I really like JS development and my Google Chrome PhotoSynth extension is a really good opportunity to experiment new thing with WebGL. So I’ve added new features to my previous version:

Navigation system (like the Microsoft Silverlight one)
Thumbnails display in the WebGL content [beta]

Adding the pictures wasn’t easy: it is not possible to draw a texture coming from another domain on a WebGL context for security reason. I have found a workaround for this issue (AFAIK unknown: see my post about it). I’ve also managed to “clone” the UI of the Silverlight viewer and to find out how to parse some navigation information from the JSON file provided with each Synth. But I wish that the PhotoSynth team gives me some information about the meaning of some other undocumented parameters…

I won’t release this new version as it is CPU hungry (because of the WebGL restriction workaround), but if the PhotoSynth team adds the missing CORS header this could solve the current WebGL restriction in a cleaner way .

A new feature is coming too (related to my new work at Acute3D).

1 comment »

Posted in html

Tags: google chrome javascript photosynth three.js webgl

How to bypass WebGL Sop restriction

October 3rd, 2011

Google Chrome and Firefox are blocking cross-domain image in WebGL (because of a security issue). This is really annoying when you want to display image from other domain in WebGL. To bypass this same-origin-policy restriction you have several options:

Ask the other domain to add a CORS http header
Use a proxy
Use my trick

Ok, to be honest my “trick” only work for browser extensions (tested with Google Chrome extension only). How is it working?

Add the domain in the list of allowed cross-domain ajax call in the manifest of the extension.
Do a binary ajax request on the jpeg
Parse the jpeg in javascript using jpgjs
Fill the WebGL texture with the jpeg decoded in JS

The drawbacks are that it can only be used by browser extensions and that JS jpeg decoding is slow compared to native decoding.

I’ve used this workaround to add the pictures in my WebGL PhotoSynth Viewer extension.

I’ve posted a new version which is really much faster.

6 comments »

Posted in html

Tags: javascript restriction same-origin-policy sop webgl

I'm Henri Astre, a French guy who likes visual experiments. I've done some nice demos in various domains (augmented reality, GPU computing, structure from motion, 3d rendering, web app...) that you can see on this blog. [+ resume]
Subscribe
You are currently browsing the archives for October, 2011.