mapbox / mapbox/mapbox-gl-js

Add API to interpolate between two free camera positions

Open
#10,189 0 comments 3 reactions 1 assignee View on GitHub

@mourner is already working on this.

Since Dec 11, 2020.

feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Currently there's no easy way to interpolate smoothly between two free-form camera positions. Existing examples interpolate lng/lat/latitude separately (which will have issues on bigger distances due non-linear latitude to y relation) and/or use lookAt method to sidestep interpolating rotation, which is not an applicable strategy in many cases.

In an example I played with for smooth animation along path, I had to interpolate manually using glMatrix spherical quaternion interpolation:

// interpolate position
camera.position.x = sourceCamera.position.x + (targetCamera.position.x - sourceCamera.position.x) * t;
camera.position.y = sourceCamera.position.y + (targetCamera.position.y - sourceCamera.position.y) * t;
camera.position.z = sourceCamera.position.z + (targetCamera.position.z - sourceCamera.position.z) * t;

// interpolate orientation
glMatrix.quat.slerp(camera.orientation, sourceCamera.orientation, targetCamera.orientation, t);

We should have an easy API for this, e.g.:

const camera = mapboxgl.FreeCameraOptions.interpolate(sourceCamera, targetCamera, t);

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.