Add horizon leveling and harden re-orientation to the front

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapillary-js",
-  "version": "5.0.0-beta.5",
+  "version": "5.0.0-beta.5-fb15",
   "description": "A WebGL interactive street imagery library",
   "license": "MIT",
   "main": "dist/mapillary.js",

src/component/direction/DirectionComponent.ts

@@ -1,6 +1,7 @@
 import * as vd from "virtual-dom";
 import {
     combineLatest as observableCombineLatest,
+    concat as observableConcat,
     of as observableOf,
     Observable,
     Subject,
@@ -13,6 +14,7 @@ import {
     share,
     startWith,
     switchMap,
+    takeUntil,
     tap,
     withLatestFrom,
 } from "rxjs/operators";
@@ -151,18 +153,60 @@ export class DirectionComponent extends Component<DirectionConfiguration> {
             withLatestFrom(this._configuration$),
             switchMap(
                 ([image, configuration]: [Image, DirectionConfiguration]): Observable<[NavigationEdgeStatus, Sequence]> => {
-                    return observableCombineLatest(
-                        image.spatialEdges$,
-                        configuration.distinguishSequence ?
-                            this._navigator.graphService
-                                .cacheSequence$(image.sequenceId).pipe(
-                                    catchError(
-                                        (error: Error): Observable<Sequence> => {
-                                            console.error(`Failed to cache sequence (${image.sequenceId})`, error);
-
-                                            return observableOf<Sequence>(null);
-                                        })) :
-                            observableOf<Sequence>(null));
+                    if (!configuration.distinguishSequence) {
+                        return image.spatialEdges$.pipe(
+                            map(
+                                (edgeStatus: NavigationEdgeStatus): [NavigationEdgeStatus, Sequence] => {
+                                    return [edgeStatus, null];
+                                }));
+                    }
+
+                    return this._navigator.graphService
+                        .cacheSequence$(image.sequenceId).pipe(
+                            catchError(
+                                (error: Error): Observable<Sequence> => {
+                                    console.error(`Failed to cache sequence (${image.sequenceId})`, error);
+
+                                    return observableOf<Sequence>(null);
+                                }),
+                            switchMap(
+                                (sequence: Sequence): Observable<[NavigationEdgeStatus, Sequence]> => {
+                                    if (sequence == null) {
+                                        return image.spatialEdges$.pipe(
+                                            map(
+                                                (edgeStatus: NavigationEdgeStatus):
+                                                    [NavigationEdgeStatus, Sequence] => {
+                                                    return [edgeStatus, null];
+                                                }));
+                                    }
+
+                                    const spatialEdges$ = image.spatialEdges$.pipe(
+                                        filter(
+                                            (edgeStatus: NavigationEdgeStatus): boolean => {
+                                                return edgeStatus.cached;
+                                            }));
+                                    const sequenceEdges$ = this._navigator.graphService
+                                        .cacheSequenceSpatialEdges$(image.id).pipe(
+                                            takeUntil(spatialEdges$),
+                                            catchError(
+                                                (error: Error): Observable<NavigationEdgeStatus> => {
+                                                    console.error(
+                                                        `Failed to cache sequence spatial edges (${image.id})`,
+                                                        error);
+
+                                                    return observableOf<NavigationEdgeStatus>({
+                                                        cached: false,
+                                                        edges: [],
+                                                    });
+                                                }));
+
+                                    return observableConcat(sequenceEdges$, spatialEdges$).pipe(
+                                        map(
+                                            (edgeStatus: NavigationEdgeStatus):
+                                                [NavigationEdgeStatus, Sequence] => {
+                                                return [edgeStatus, sequence];
+                                            }));
+                                }));
                 }))
             .subscribe(
                 ([edgeStatus, sequence]: [NavigationEdgeStatus, Sequence]): void => {

src/component/direction/DirectionDOMRenderer.ts

@@ -32,11 +32,13 @@ export class DirectionDOMRenderer {
     private _distinguishSequence: boolean;
 
     private _needsRender: boolean;
+    private _edgesCached: boolean;
 
     private _stepEdges: NavigationEdge[];
     private _turnEdges: NavigationEdge[];
     private _sphericalEdges: NavigationEdge[];
     private _sequenceEdgeKeys: string[];
+    private _sequenceAzimuthOffset: number;
 
     private _stepDirections: NavigationDirection[];
     private _turnDirections: NavigationDirection[];
@@ -57,11 +59,13 @@ export class DirectionDOMRenderer {
         this._distinguishSequence = false;
 
         this._needsRender = false;
+        this._edgesCached = false;
 
         this._stepEdges = [];
         this._turnEdges = [];
         this._sphericalEdges = [];
         this._sequenceEdgeKeys = [];
+        this._sequenceAzimuthOffset = 0;
 
         this._stepDirections = [
             NavigationDirection.StepForward,
@@ -133,6 +137,11 @@ export class DirectionDOMRenderer {
      */
     public setImage(image: Image): void {
         this._image = image;
+        this._sequenceAzimuthOffset = image != null &&
+            isSpherical(image.cameraType) &&
+            !Number.isFinite(image.computedCompassAngle) &&
+            Number.isFinite(image.compassAngle) ?
+            this._spatial.degToRad(90 - image.compassAngle) : 0;
         this._clearEdges();
 
         this._setNeedsRender();
@@ -200,13 +209,15 @@ export class DirectionDOMRenderer {
     }
 
     private _clearEdges(): void {
+        this._edgesCached = false;
         this._stepEdges = [];
         this._turnEdges = [];
         this._sphericalEdges = [];
         this._sequenceEdgeKeys = [];
     }
 
     private _setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void {
+        this._edgesCached = edgeStatus.cached;
         this._stepEdges = [];
         this._turnEdges = [];
         this._sphericalEdges = [];
@@ -237,13 +248,12 @@ export class DirectionDOMRenderer {
 
             for (let edge of edges) {
                 let edgeKey: string = edge.target;
-
-                for (let sequenceKey of sequence.imageIds) {
-                    if (sequenceKey === edgeKey) {
-                        this._sequenceEdgeKeys.push(edgeKey);
-                        break;
-                    }
+                const edgeIndex: number = sequence.imageIds.indexOf(edgeKey);
+                if (edgeIndex < 0) {
+                    continue;
                 }
+
+                this._sequenceEdgeKeys.push(edgeKey);
             }
         }
     }
@@ -256,25 +266,34 @@ export class DirectionDOMRenderer {
                 this._createVNodeByKey(
                     navigator,
                     sphericalEdge.target,
-                    sphericalEdge.data.worldMotionAzimuth,
+                    this._getSphericalEdgeAzimuth(sphericalEdge),
                     rotation,
                     this._calculator.outerRadius,
-                    "mapillary-direction-arrow-spherical"));
+                    "mapillary-direction-arrow-spherical",
+                    sphericalEdge.data.direction));
         }
 
         for (let stepEdge of this._stepEdges) {
             arrows.push(
                 this._createSphericalToPerspectiveArrow(
                     navigator,
                     stepEdge.target,
-                    stepEdge.data.worldMotionAzimuth,
+                    this._getSphericalEdgeAzimuth(stepEdge),
                     rotation,
                     stepEdge.data.direction));
         }
 
         return arrows;
     }
 
+    private _getSphericalEdgeAzimuth(edge: NavigationEdge): number {
+        const sequenceEdge = this._sequenceEdgeKeys.indexOf(edge.target) > -1;
+        // Unmerged equirectangular captures are world-aligned at their east
+        // axis even when their compass field describes vehicle travel.
+        return edge.data.worldMotionAzimuth +
+            (sequenceEdge ? this._sequenceAzimuthOffset : 0);
+    }
+
     private _createSphericalToPerspectiveArrow(
         navigator: Navigator,
         key: string,
@@ -307,7 +326,8 @@ export class DirectionDOMRenderer {
                 azimuth,
                 rotation,
                 this._calculator.outerRadius,
-                "mapillary-direction-arrow-step");
+                "mapillary-direction-arrow-step",
+                direction);
         }
 
         return this._createVNodeInactive(key, azimuth, rotation);
@@ -325,6 +345,7 @@ export class DirectionDOMRenderer {
                     rotation,
                     this._calculator.innerRadius,
                     "mapillary-direction-arrow-spherical",
+                    sphericalEdge.data.direction,
                     true));
         }
 
@@ -372,11 +393,12 @@ export class DirectionDOMRenderer {
         rotation: EulerRotation,
         offset: number,
         className: string,
+        direction: NavigationDirection,
         shiftVertically?: boolean): vd.VNode {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
-                navigator.moveTo$(key)
+                navigator.moveTo$(key, direction)
                     .subscribe(
                         undefined,
                         (error: Error): void => {
@@ -406,7 +428,9 @@ export class DirectionDOMRenderer {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
-                navigator.moveDir$(direction)
+                (this._edgesCached ?
+                    navigator.moveDir$(direction) :
+                    navigator.moveTo$(key, direction))
                     .subscribe(
                         undefined,
                         (error: Error): void => {
@@ -434,7 +458,9 @@ export class DirectionDOMRenderer {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
-                navigator.moveDir$(direction)
+                (this._edgesCached ?
+                    navigator.moveDir$(direction) :
+                    navigator.moveTo$(key, direction))
                     .subscribe(
                         undefined,
                         (error: Error): void => {

src/component/image/ImageGLRenderer.ts

@@ -4,6 +4,7 @@ import { Subscription } from "rxjs";
 import { IAnimationState } from "../../state/interfaces/IAnimationState";
 import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Image } from "../../graph/Image";
+import { Camera } from "../../geo/Camera";
 import { Transform } from "../../geo/Transform";
 import { TextureProvider } from "../../tile/TextureProvider";
 import { MeshFactory } from "../util/MeshFactory";
@@ -27,6 +28,10 @@ export class ImageGLRenderer {
     private _frameId: number;
     private _needsRender: boolean;
 
+    private _motionless: boolean;
+    private _previousCamera: Camera;
+    private _previousPerspective: THREE.PerspectiveCamera;
+
     constructor() {
         this._factory = new MeshFactory();
         this._scene = new MeshScene();
@@ -41,6 +46,10 @@ export class ImageGLRenderer {
 
         this._frameId = 0;
         this._needsRender = false;
+
+        this._motionless = false;
+        this._previousCamera = null;
+        this._previousPerspective = null;
     }
 
     public get frameId(): number {
@@ -177,7 +186,9 @@ export class ImageGLRenderer {
 
         renderer.render(this._scene.scenePeriphery, perspectiveCamera);
         renderer.render(this._scene.scene, perspectiveCamera);
-        renderer.render(this._scene.sceneOld, perspectiveCamera);
+        renderer.render(
+            this._scene.sceneOld,
+            this._getPreviousPerspective(perspectiveCamera));
 
         for (const plane of planes) {
             (<ProjectorShaderMaterial>plane.mesh.material).uniforms.opacity.value = this._alpha;
@@ -197,9 +208,33 @@ export class ImageGLRenderer {
             disposeProvider();
         }
 
+        this._motionless = false;
+        this._previousCamera = null;
+        this._previousPerspective = null;
         this._needsRender = true;
     }
 
+    private _getPreviousPerspective(
+        perspectiveCamera: THREE.PerspectiveCamera)
+        : THREE.PerspectiveCamera {
+        if (!this._motionless || this._previousCamera == null) {
+            return perspectiveCamera;
+        }
+        if (this._previousPerspective == null) {
+            this._previousPerspective = perspectiveCamera.clone();
+            this._previousPerspective.position.copy(
+                this._previousCamera.position);
+            this._previousPerspective.up.copy(this._previousCamera.up);
+            this._previousPerspective.matrixAutoUpdate = true;
+            this._previousPerspective.lookAt(this._previousCamera.lookat);
+            this._previousPerspective.matrixAutoUpdate = false;
+            this._previousPerspective.updateMatrix();
+            this._previousPerspective.updateMatrixWorld(false);
+        }
+
+        return this._previousPerspective;
+    }
+
     private _setShader(shader: GLShader, planes: MeshSceneItem[]): void {
         for (const plane of planes) {
             const material = <ProjectorShaderMaterial>plane.mesh.material;
@@ -257,12 +292,16 @@ export class ImageGLRenderer {
         }
 
         if (previousKey != null) {
-            if (previousKey !== this._currentKey && previousKey !== this._previousKey) {
+            const freezePrevious = state.motionless && state.alpha < 1;
+            if (freezePrevious ||
+                (previousKey !== this._currentKey &&
+                    previousKey !== this._previousKey)) {
                 const previousMesh =
                     this._factory.createMesh(
                         state.previousImage,
                         state.previousTransform,
-                        shader);
+                        shader,
+                        !freezePrevious);
 
                 const previousPlane: MeshSceneItem = {
                     mesh: previousMesh,
@@ -275,6 +314,10 @@ export class ImageGLRenderer {
             this._previousKey = previousKey;
         }
 
+        this._motionless = state.motionless && state.alpha < 1;
+        this._previousCamera = this._motionless ?
+            state.previousCamera.clone() : null;
+        this._previousPerspective = null;
         this._currentKey = currentKey;
         const currentMesh =
             this._factory.createMesh(