Library for playing Geppetto animations. For the Desktop application to create the animations, see the Geppetto website
yarn add geppetto-player
This example is based on a build using Parcel2. For Webpack, change the way the url of the texture asset is referenced.
import { setupWebGL, prepareAnimation } from "geppetto-player";
import backgroundImage from "url:./assets/landscape.png";
import backgroundAnimationData from "./assets/landscape.json";
const canvas = document.getElementById("theatre") as HTMLCanvasElement;
const player = setupWebGL(canvas);
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 start = async () => {
const bgTexture = await loadTexture(backgroundImage);
const preppedBgAnim = prepareAnimation(backgroundAnimationData);
const bgAnimationControl = player.addAnimation(preppedBgAnim, bgTexture, 0, {
zoom: 2.0,
});
const box = canvas.getBoundingClientRect();
canvas.width = box.width * window.devicePixelRatio;
canvas.height = box.height * window.devicePixelRatio;
// Start some animation tracks
bgAnimationControl.startTrack("Waterwheel");
bgAnimationControl.startTrack("Waterwheel2");
bgAnimationControl.startTrack("Smoke");
// Render each frame
const renderFrame = () => {
player.render(); // Clears the canvas
bgAnimationControl.render(); // Render active frame of the animation
window.requestAnimationFrame(renderFrame);
};
window.requestAnimationFrame(renderFrame);
};
start();
It is to give you more control. You can specify the resolution to render, or render multiply Geppetto animations in the same WebGL Canvas. You could even create framebuffers, render into them and apply a shader aftereffect on it if you desire. (all these things I consider outside of the scope of this player library :-))
Check out: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining
MIT (c) Matthijs Groen
Generated using TypeDoc