HyperlapseMB: Hyperlapse.js with Motion Blur

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!


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.


Tags: , , , , ,

11 Responses to “HyperlapseMB: Hyperlapse.js with Motion Blur”

  1. Aristide Says:

    Hey, congrats for this awesome work, I’m looking forward to use this for a little short movie, however, some streets are unavailable in the demo, as well as in the original hyperlapse, even though they are available in the basic StreetView.
    I think those streets are the pedestrian ones.
    (try “rue de la porte dijeaux, bordeaux” for instance)
    Is there something that can be done to access those streets in hyperlapse ?

  2. Aristide Says:

    I should add that I’m no webdeb, i’m a video editor, but used to make some dev many years ago.
    So I’ve looked into the code of your example.html.
    I tried to change the travelmode var to WALKING instead of DRIVING but for some reason it then returns “could not retrieve panoramic data, zero results”… Do you have any clue ?

  3. elementroar Says:

    Hi, thanks for the motion blur effect to improve the hyperlapse. I’m trying to use this for a video project, but I have very limited coding experience. I was hoping to use the ‘simple.html’ file and just put in the coords I needed and record it on-screen as it plays.

    However, I only have a blank white screen and nothing loads. Could you look at the code that’s currently on github for both your fork of hyperlapse.js and the original hyperlapse.js examples and see what the problem is?


    • 0xef Says:

      I fixed the simple example, please have a look at the new version. I also noticed the server which hosts the demo is not available anymore. I uploaded it to another host and updated the links as well.

      Note that if you just download the source and run simple.html from your local filesystem, the shaders can not be loaded, as AJAX requests for files on the local system are usually not allowed (more info). You can copy the files to a server or use one of the workarounds mentioned in the link.

      • elementroar Says:

        I’m getting Javascript error pop-ups about syntax and missing shaders. I uploaded the whole zip to my website, so I should have preserved the file structure.

        Here’s the url of the simple.html on my website: http://www.samooi.com/hyperlapse/examples/simple.html

        For me it shows white with ‘Loading…’, and then the pop-ups of errors and missing shaders comes up.

        I didn’t modify the code, but I did just let Dreamweaver upload to my FTP server automatically. Did I do anything wrong or missed a step?

      • 0xef Says:

        You have to copy the shaders (GSVPanoEffectMotionBlur.vs and GSVPanoEffectMotionBlur.fs) into the examples folder or set the shader path in simple.html like this:

        var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
        lookat: new google.maps.LatLng(-28.8003314927684, 29.67021392578124),
        zoom: 1,
        use_lookat: true,
        elevation: 50,
        shaderPath: "../src/"

      • elementroar Says:

        Thank you, the animation was generated!

      • elementroar Says:

        Hi, me again. I’ve got the basic functions of the script down, but is there a way to tilt the angle that the lookat command uses? Example: Tilting at a 60 degree angel towards a particular set of coords.

        I’ve tried the elevation offset, offset values etc. from the readme, but they do not affect the resulting video. I think I’m writing in the right syntax.

        Current video: http://www.samooi.com/hyperlapse/examples/simple.html

        What my script looks like:

        var hyperlapse = new Hyperlapse(document.getElementById(‘pano’), {
        lookat: new google.maps.LatLng(1.28305913,103.86063834),
        zoom: 2,
        width: 800,
        height: 400,
        millis: 60,
        use_lookat: true,
        shaderPath: “../src/”

      • 0xef Says:

        Try to set use_elevation=true, then elevation=... should work. If you want to tilt, you have to call hyperlapse.tilt = 1; before play in onLoadComplete.

  4. Ryan Says:


    The blur effect is great thank you. However I’m receiving syntax errors and a shaders not found error. I moved the files you suggested above but the errors are still there. Any suggestions would be much appreciated. this is the URL i’m using


  5. Enrico Raspadori Says:

    Hi, thanks for your good job. I have a question. How can I make the controls disappearing during the hyperlapse? Thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: