Using the player

The Geppetto Player is a Typescript library you can use in your web project to embed animations on your website.

Install Player

You can install the library using the geppetto-player npm package.

npm

npm install geppetto-player

Yarn

yarn add geppetto-player

Setup WebGL

First you need to setup a canvas environment. You can use the setupWebGL method to help you with that.

Typescript

import { setupWebGL } from "geppetto-player";

const canvas = document.getElementById("theatre") as HTMLCanvasElement;
const player = setupWebGL(canvas);

JavaScript

import { setupWebGL } from "geppetto-player";

const canvas = document.getElementById("theatre");
const player = setupWebGL(canvas);

This will initialise the WebGL context of the <canvas /> element, and return a player to setup Geppetto animations.

With the player you can now add animations to the player. You can setup and use multiple animations in a single player.

Adding an animation

To add the animation, you need to convert the animation .json file created with the studio application to a format optimized for playback.

Typescript

import { prepareAnimation, ImageDefinition } from "geppetto-player";
import animationData from "my-animation-file.json";

const preparedAnimation = prepareAnimation(
  animationData as unknown as ImageDefinition
);

JavaScript

import { prepareAnimation, ImageDefinition } from "geppetto-player";
import animationData from "my-animation-file.json";

const preparedAnimation = prepareAnimation(animationData);

You also need to provide your texture using an Image element in javascript.

You can load your texture with the example code provided here:

Typescript

const loadTexture = async (url: string): Promise<HTMLImageElement> =>
  new Promise((resolve) => {
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = url;
    image.onload = () => resolve(image);
  });

const animationTexture = await loadTexture("./url-of-texture.png");

JavaScript

const loadTexture = async (url) =>
  new Promise((resolve) => {
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = url;
    image.onload = () => resolve(image);
  });

const animationTexture = await loadTexture("./url-of-texture.png");

You can now add your animation to the player, receiving an AnimationControl object to control your animation.

const animationControl = player.addAnimation(
  preparedAnimation,
  animationTexture,
  0
);

Setting up a render loop

In order to make the animation work, you should create a render loop that renders the animation for each frame. The reason we let you setup this loop, is that you will have more control over it.

For the animation above, this loop would be simple:

const renderFrame = () => {
  player.render(); // Clear the canvas
  animationControl.render(); // Render a frame of my first animation
  // ... for multiple animations, do a render() call for each animationControl

  window.requestAnimationFrame(renderFrame);
};

window.requestAnimationFrame(renderFrame);

Controlling an animation

With the animation now visible, you can start animation tracks, listen to events, or do real-time control manipulations.

animationControl.startTrack("MyAnimation");
animationControl.setControlValue("MyControl", 0.65);