mapbox / mapbox/mapbox-gl-js

Converting Blender camera settings to Mapbox

Open
#11,967 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged docs :scroll:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version: 2.7.0

Currently working on a project where I need to convert three different camera settings found in Blender (position, rotation, fov (field of view)) into camera settings in mapbox.

We are attempting to take a photomatch that we calculated in Blender and transfer it into the 3D environment of Mapbox.

Example:

Screen Shot 2022-06-07 at 18 00 49

I'm currently attempting to use the freeCameraOptions available to change these three settings and dont know how I should go about converting any of the three camera settings correctly. The following is pseudocode describing how I am thinking about changing the necessary settings.

/*
 * Function to convert an euler angle in the form of (_x, _y, _z)
 * into a quaternion legible for Mapbox to read as a rotation
 *
 * yaw = y-axis = up-down
 * roll = z-axis = forward-backward
 * pitch = x-axis = left-right
*/
export const eulerToQuaternion = (euler) => {
  const {_x, _y, _z} = euler;

  const qx = Math.sin(_z / 2) * Math.cos(_x / 2) * Math.cos(_y / 2) - Math.cos(_z / 2) * Math.sin(_x / 2) * Math.sin(_y / 2);
  const qy = Math.cos(_z / 2) * Math.sin(_x / 2) * Math.cos(_y / 2) + Math.sin(_z / 2) * Math.cos(_x / 2) * Math.sin(_y / 2);
  const qz = Math.cos(_z / 2) * Math.cos(_x / 2) * Math.sin(_y / 2) - Math.sin(_z / 2) * Math.sin(_x / 2) * Math.cos(_y / 2);
  const qw = Math.cos(_z / 2) * Math.cos(_x / 2) * Math.cos(_y / 2) + Math.sin(_z / 2) * Math.sin(_x / 2) * Math.sin(_y / 2);

  return [qx, qy, qz, qw];
}

const camera = map.getFreeCameraOptions();

// Pseudo code to represent converting cartesian coords to 3D mercator
const convertedCoords = cartesianTo3D(blenderCamera.position)

// Blender camera position is expressed in 3D Cartesian coordinates (xyz), altitude is 0?
camera.position = mapboxgl.MercatorCoordinate.fromLngLat(convertedCoords, 0);

// The rotation angle we receive from Blender is in euler form (see function above)
camera.orientation = eulerToQuaternion(rotation)

map.transform._fov = blenderCamera.fov

map.setFreeCameraOptions(camera)

Any insight to the above would be immensely helpful! Struggling right now to find the appropriate resources.

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.

Research direction

Start with the freeCameraOptions, MercatorCoordinate.fromLngLat, setFreeCameraOptions, and map.transform._fov references in the issue, then compare them with Blender's position, rotation, and field-of-view settings. Determine whether the conversion guidance belongs in the Mapbox GL JS documentation and define completion as clear, validated guidance for transferring these three settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.