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.


12 thoughts on “HyperlapseMB: Hyperlapse.js with Motion Blur

  1. 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. 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. 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?


    1. 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.

      1. 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?

      2. 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/"

      3. 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/”

      4. 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. Hi, thanks for your good job. I have a question. How can I make the controls disappearing during the hyperlapse? Thanks

  5. Still works 🙂 developer allready closed his doors. How did you record this lapse without controlers like your example on youtube?

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 )

Connecting to %s

%d bloggers like this: