Posts Tagged ‘depth map’

HyperlapseMB: Hyperlapse.js with Motion Blur

May 1, 2013

With the help of GSVPanoDepth.js (see previous post), I have created HyperlapseMB, a fork of Hyperlapse.js that uses the depth information to create a nice motion blur effect. The images are filtered as a pre-processing step before the hyperlapse is played. The algorithm is similar to the technique used as post-processing effect in video games as described in Rosado (2007). Altough the filtering is done before the hyperlapse is played, it is implemented in WebGL. In pure JavaScript, the filtering takes multiple seconds, nearly the same time the GPU needs for the whole sequence.

You can watch a demo (Firefox/Chrome) or get the source code. Enjoy!

References:

Rosado (2007): Motion Blur as a Post-Processing Effect. In GPU Gems 3: Programming Techniques for High-Performance Graphics and General-Purpose Computation, edited by Hubert Nguyen.

Extract depth maps from Google Street View

May 1, 2013

Besides high-resolution images, Google Street View also provides a depth map for each panorama, containing the distance from the camera to the nearest surface at each pixel. As far as I know, there is no official documentation of the format, but there are some open source projects which contain code showing how to interpret the data. The depth information is stored in a slightly complicated way, probably to save bandwidth. Each pixel in a grid of 512×256 pixels references one of several planes. A plane is given by its normal vector and its distance to the camera. Therefore, in order to calculate the depth at a pixel, one has to determine the intersection point of a ray starting at the center of the camera and the plane corresponding to the pixel.

The geometry of the planes and the map containing the index of the plane at each pixel can be retrieved as Base64-encoded and zlib-compressed data by requesting the following URL:


http://maps.google.com/cbk?output=json&cb_client=maps_sv&v=4&dm=1&pm=1&ph=1&hl=en&panoid=1234

I have written a small JavaScript library that fetches the data, decompresses it and computes a depth map from the planes. Here is an example:

depthmap

As usual, you can find the code on my github page.