Welcome to Cooliris Labs. Here you'll find videos, demos and sample code for some of our most interesting work. We'll also be puttin gou early previews of products that are in development on this page.
Note that all the resources and products on this page are experimental, so we may make frequent changes to them, and may discontinue them at any time.
HTML5 and WebGL Goodies
3D ads built on HTML5 and WebGL
We're working on developing immersive 3D ads that will work on modern browsers. This demonstration shows three different ads, including one that has the ability to allow the user to interact with an HTML form on the ad, another with embedded video in the 3D ad, and another that becomes a fully immersive experience.
We're showing the sample source code for this (which we've cleaned up a bit). Essentially, we're working on a framework that allows developers to write advanced 3D ads in a declarative syntax, which is far simpler than trying to code in WebGL.
<3D ad video>
By leveraging WebGL, Cooliris has brought its immersive 3D image browsing experience to HTML5. Cooliris also took advantage of the pixel shaders available in WebGL to add per pixel, glossy highlights as users scroll through images. Enter a search query to view Google Images results in the revolutionary interface. Navigate left and right by using your mouse to navigate horizontally along the wall. If you have a track pad on Mac, be sure to check out two-finger scrolling. Simply click on an item to view it in a beautiful, high-resolution display.
If you have WebGL enabled in your browser, you can try out the wall here:
If you don't, here's a video for you:
<HTML5 wall demo video>
Shadowbox needs to be installed as described on the Shadowbox website, and should be set up to load the SWF player when it initializes:
You can then use the Shadowbox library to make links to the embeddable wall SWF file load in the Shadowbox interface. Note that in this case, the flashvars must be passed as a query string on the swf url:
<a rel="shadowbox;width=600;height=370" href="http://apps.cooliris.com/embed/cooliris.swf? feed=api://www.flickr.com&numrows=2"> Show the wall </a>
You can also use an HTML snippet to launch the Cooliris plugin. If the user does not have the Cooliris client installed, it will launch the embeddable Cooliris Wall instead.
Here, the flashvars should again be passed as a query string at the end of the URL:
The feed for the embeddable wall that appears for users without the Cooliris plugin must be specified in the flashvars, and have the required crossdomain.xml file set up. It will not automatically use the same feed that the plugin displays.