Render AE Camera Perspective in Lottie Using Oasis Engine

Background

When designers create Lottie animations in After Effects (AE) and need a perspective transformation, they use the AE "Camera" feature. The camera moves along a trajectory, producing a 3‑D‑like effect. Lottie‑web and Lottie‑pixi cannot render this, so the Oasis engine was used to correctly render the camera motion.

Concept

The camera follows a path (shown by a red arrow) and captures each frame with a perspective projection, i.e., objects appear larger when closer and smaller when farther. The view frustum is defined by near/far clipping planes and the field of view (FOV), which determines what is rendered.

Implementation

Exporting the AE camera with the Bodymovin plugin yields a JSON that contains basic transform data but lacks camera‑specific properties such as FOV and clipping planes. These missing values must be added manually or by extending Bodymovin.

In the Oasis engine (an ECS architecture), the Lottie animation is an Entity and the camera is another Entity . A custom CameraScript component is attached to the camera to set its position and target point.

import { Script } from 'oasis-engine';

class CameraScript extends Script {
  onStart() {
    // read camera data from Lottie JSON and set projection, FOV, clipping planes, etc.
  }

  onUpdate(deltaTime: number) {
    // update camera position and look‑at target each frame
  }
}

The JSON fields "p" describe the camera position using Bézier curves, while "a" describes the target point. To apply them, the engine calls:

camera.transform.setPosition(x, y, z);

and

camera.transform.lookAt(new Vector3(x, y, z));

Because Lottie’s coordinate origin is the canvas top‑left and Oasis uses the canvas center, a conversion function is required:

function convertCoords(vector3: Vector3, w = 750, h = 1624, pixelsPerUnit = 128) {
  const result = vector3.clone();
  result.x = (result.x - w / 2) / pixelsPerUnit;
  result.y = -(result.y - h / 2) / pixelsPerUnit;
  result.z /= pixelsPerUnit;
  return result;
}

Clipping planes must be set so that all elements placed along the Z‑axis stay within view:

0 < nearClipPlane < |closestLayer - cameraPos|
farClipPlane > |farthestLayer - cameraPos|

The animation speed can be synchronized with the camera motion by reading the Lottie animation’s playback speed in onUpdate and adjusting the camera accordingly.

When combining many images into a sprite sheet, the size may exceed 2048×2048, requiring splitting or base64 encoding to avoid crashes.

Reference

Oasis Engine: https://github.com/oasis-engine/engine