teehanlax / hyperlapse.js

JavaScript hyper-lapse utility for Google Street View.

Hyperlapse.js

JavaScript hyper-lapse utility for Google Street View.

This library was written to create dynamic hyper-lapse (time-lapse with movement) sequences using Google Street View.

See it action.

Read about this project.

Video of what's possible.

Example

Simple example

var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
	lookat: new google.maps.LatLng(37.81409525128964,-122.4775045005249),
	zoom: 1,
	use_lookat: true,
	elevation: 50
});

hyperlapse.onError = function(e) {
	console.log(e);
};

hyperlapse.onRouteComplete = function(e) {
	hyperlapse.load();
};

hyperlapse.onLoadComplete = function(e) {
	hyperlapse.play();
};

// Google Maps API stuff here...
var directions_service = new google.maps.DirectionsService();

var route = {
	request:{
		origin: new google.maps.LatLng(37.816480000000006,-122.47825,37),
		destination: new google.maps.LatLng(37.81195,-122.47773000000001),
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	}
};

directions_service.route(route.request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		hyperlapse.generate( {route:response} );
	} else {
		console.log(status);
	}
});

Dependencies

• Three.js (r57)
• a modified version of GSVPano.js
• Google Maps API v3.12

API Docs

API Documentation

License

The MIT License

Copyright (c) 2013 Teehan+Lax

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

hyperlapse.js's Issues

How do you work this?

Hi, i'm using a mac with no experience of coding.... How do I actually get this program to work?
Thank you!

Look at points

Hello,

If we add lookat_point as the array will it take coordinates based on the look at points? I want to select transit line between start and end points.

Thanks
Siva

simple.html does not work by Cross-Origin error

Hi.

I tried viewer.html, and it was working fine.
But simple.html did not work properly in the following errors.

Does anyone know how to fix this error?

Image from origin 'http://maps.google.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. simple.html:1
GET http://maps.google.com/cbk?output=tile&panoid=v_n6NqVhurgAAAQWh5FkkQ&zoom=1&x=0&y=0&1404267653455 400 (Bad Request) GSVPano.js:90
Image from origin 'http://maps.google.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. simple.html:1
GET http://maps.google.com/cbk?output=tile&panoid=v_n6NqVhurgAAAQWh5FkkQ&zoom=1&x=1&y=0&1404267653455 400 (Bad Request) GSVPano.js:90

viewer.html turn out to be black background~

when I run the viewer.html under localhost, it goes wrong. (nothing has been changed)
After it loads the 39 numbers of K B ,and zoom 2, the background turn out to be black!
it supposes to be a video, but I don't know why.
please let me know~
thx~

t

Visual error

Hi, i'm trying the simple.html and viewer.html in my localhost (Firefox and Chrome) but i get white triangles in the route video. Seems like its not rendering properly. Can you guys help me figuring it out?

Thanks in advance.

viewer.html not working?! hyperlapse.tllabs.io outage?

Hello,

I found this project and I tried to make a video using the files here on github but the file viewer.html seems to have a serious issue... It keeps displaying the same message: "ERROR: Could not retrieve panorama for the following reason: ZERO_RESULTS" an then a black screen appears...
Elsewhere, I can't access the hyperlapse.tllabs.io website. Is the project over?
Thank you for your time and support,
Julien

Btw I'm a complete newbie at programming, excuse me!

Simple example not working

Hi,

Just found about your project but the simple example is not working and I'd like to have a look to understand it better.

Thanks!

t

Export

Possibility to export images from hyperlapse

(Readme file) Documentation link is broken

TypeError in GSVPano.js

I get the following TypeError when watching the demo on http://hyperlapse.tllabs.io/

It doesn't load further than 1/3th on any demo.

Using Chrome 28.0.1500.71 on a Mac OSX 10.7.5

Getting Started: Editing

Just wanted to know what kind of browser editors is best used when modifying or editing Hyperlapse scripts...like Greasemonkey, Firebug or Dreamweaver. I'm a newbie who just needs to get a starting handle on this.

Viewer example broken.

Probably due to all the look_at changes.

Null lookat throws exception

Terrific work. I've installed the Git repo locally and it's working excellently, for everything except a sequence with param lookat set to null (or not passed in), or use_lookat set to false. In both instances, the play method throws "Uncaught TypeError: Cannot read property 'jb' of null" to the console. Is the following config correct?

var hyperlapse = new Hyperlapse(document.getElementById('pano'),{use_lookat: false, zoom: 2, elevation: 50 });

Previous function doesn't go all the way back to the first frame

I think the -1 in the code below is causing the problem. When using the previous button or the comma key on the keyboard in viewer.html the prev function is called. However, it only goes back as far as frame 2. I'm not sure but removing the -1 seems to correct the issue for me.

this.prev = function() {
    self.pause();

    if(_point_index-1 !== 0) {
        _point_index--;
        drawMaterial();
    }
};

Is this still working?

Hi, first things first. Im not a coder, but a film-maker, and could really use this on a project of mine.
Now I dont know how complex it would be to get it working, but I tried the following.

Downloaded the zip to computer and ran the player.html

It opens some kind of interface, google maps window and console window ok, but apart from setting new points I dont know quite what to do next.

I read one of the comments saying I must run a local webserver. I can find out what this means later, but tried simply uploading the whole project to my own website server and running it online.
Google maps window helpfully states "Oops! Something went wrong" (dont you just hate those chatty errors?) and that theres more info in the javascript console.

I find THAT, and it says:
three.min.js:386 THREE.WebGLRenderer 57
dat.gui.min.js:57 'webkitRequestAnimationFrame' is vendor-specific. Please use the standard 'requestAnimationFrame' instead.
E @ dat.gui.min.js:57
js?v=3.exp&sensor=false:34 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error
_.kb @ js?v=3.exp&sensor=false:34
common.js:161 Uncaught TypeError: Cannot read property 'toUrlValue' of undefined
at Array. (common.js:161)
at js?v=3.exp&sensor=false:108
at js?v=3.exp&sensor=false:39
at js?v=3.exp&sensor=false:108
at Xb (js?v=3.exp&sensor=false:41)
at Wb.cb (js?v=3.exp&sensor=false:108)
at stats.js:1
util.js:210 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
iB.j @ util.js:210
util.js:210 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required
iB.j @ util.js:210

NONE OF WHICH I UNDERSTAND !!! Apart from the need for a Google maps API key...

I managed to get an API code, but no point really as I dont know what to do with it.

So... Any help would be great on this.

Cheers

MArk

20 kms

A direction is reversed

Hi there,

I am Japanese.　I am sorry to be poor at English.

use_lookat: false

If it changes,
The back of a direction of movement may be displayed.

In the case of the route with many corner of a streets instead of a linear route

I would appreciate your favor

hyperlapse

Full-Time Rendering

Hi there,

I'm not a specialist of Three.js and WebGLRendering, but I was exploring the source code of this excellent stuff, and just found that the requestAnimationFrame is launched automatically at the loading end event.

I wonder if it is not better to launch it on the play callback, then cancel it on the pause one ?

I'm joining a few lines of code that may interest you !

It's still using requestAnimationFrame(), and now cancelAnimationFrame(), that should be overwritten by a polyfill, that is not included, like in this way: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

// New var in Hyperlapse scope
var self = this,
    [...]
    _raf;

// Keep the id of the RAF in this new var
var animate = function() {
    var ptime = _ctime;
    _ctime = Date.now();
    _dtime += _ctime - ptime;
    if (_dtime >= self.millis) {
        if (_is_playing) loop();
        _dtime = 0;
    }
    _raf = requestAnimationFrame( animate );
    render();
};

// Remove the animate() call in loadComplete callback
/**
 * @event Hyperlapse#onLoadComplete
 */
var handleLoadComplete = function (e) {
    _is_loading = false;
    _point_index = 0;

    if (self.onLoadComplete) self.onLoadComplete(e);
};

// Insert it in the play callback instead
/**
 * Animate through all frames in sequence
 * @fires Hyperlapse#onPlay
 */
this.play = function() {
    if(!_is_loading) {
        _is_playing = true;
        animate();
        handlePlay({});
    } 
};

// Cancel the RAF in the pause callback
/**
 * Pause animation
 * @fires Hyperlapse#onPause
 */
this.pause = function() {
    _is_playing = false;
    cancelAnimationFrame(_raf);
    handlePause({});
};

How to replace the route with a specific set of coordinates

Hey - I'd love to modify your example to include a specific set of coordinates rather than driving directions from point to point. Could you give me a high level idea of where I might start digging to modify the code to enable this?

this one doesn't work...

Hi,

http://hyperlapse.tllabs.io/#-33.879029,151.218283,-33.650364,151.268892,-33.421700,151.319500,13,92
doesn't work but google maps can find a route between these points ...

Greetings,
Koem

Look at in realtime

need to have look at co-ordiates with out the offset.

Create fallback to canvasRenderer when WebGL is not available

Currently it is impossible to render Hyperlapse on a browser that doesn't have WebGL. The usual fallback in this case is to use Canvas which has significantly worse performances.

I think adding this fallback would be interesting as for example I use Hyperlapse in PhantomJS which doesn't have WebGL (for full headless possibility....).

Probably this is not interesting for usages other than this as indeed it's really slow without using CanvasRenderer (from my tests on a Macbook Pro running FF). Therefore maybe the fallback should be a parameter of Hyperlapse.
I mean to enable the user to do something like:

var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
        canvasFallback: true                
});

If this is the case should the fallback be available by default or not?

How do you get smoother hyperlapses

I've got this working but it's really choppy. What parameters are there for me to change to get a more smooth hyperlapse?

hyperlapse

var hyperlapse = new Hyperlapse(document.getElementById('pano'), {
lookat: new google.maps.LatLng(37.81409525128964,-122.4775045005249),
zoom: 1,
use_lookat: true,
elevation: 50
});

hyperlapse.onError = function(e) {
console.log(e);
};

hyperlapse.onRouteComplete = function(e) {
hyperlapse.load();
};

hyperlapse.onLoadComplete = function(e) {
hyperlapse.play();
};

// Google Maps API stuff here...
var directions_service = new google.maps.DirectionsService();

var route = {
request:{
origin: new google.maps.LatLng(37.816480000000006,-122.47825,37),
destination: new google.maps.LatLng(37.81195,-122.47773000000001),
travelMode: google.maps.DirectionsTravelMode.DRIVING
}
};

directions_service.route(route.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
hyperlapse.generate( {route:response} );
} else {
console.log(status);
}
});

add tags for each version

would you please consider adding tags for each version so that we can add your lib on https://cdnjs.com/ with git auto-update.
thank you very much!
cdnjs/cdnjs#5787

NO pano

Hi!

I think I am missing something here. I can make this thing work but in a trip it is constantly doing a pano. I do not want any panoramic view, I want the view to be stil like if we would be driving a car. How to achieve that?

t

t

examples showing how to change resolution and amount of frames per animation

hey there you got any examples showing how to change resolution and amount of frames per animation? Cant seem to find where to tweak the script.

t

add package.json

would you please consider adding package.json so that we can add your lib on https://cdnjs.com.
thank you very much!
cdnjs/cdnjs#5787

Is this project still active?

If so, is the api documentation available anywhere online?