npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

geppetto-player

v1.3.3

Published

WebGL Player for Geppetto files

Downloads

6

Readme

Geppetto player 🌱

npm type definitions License Version

API documentation

Library for playing Geppetto animations. For the Desktop application to create the animations, see the Geppetto website

Features

  • Setup of webGL Canvas for playing Geppetto files
  • Loading and rendering of Geppetto files
  • Listening to events from animation tracks
  • Using controls from images
  • Starting/stopping looping of animation tracks

Install

yarn add geppetto-player

Minimal setup

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();

Why do I need to setup this render loop myself?

It is to give you more control. You can specify the resolution to render, or render multiple 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 :-))

Using the library in a babel built site (Webpack, CRA)

Check out: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

License

MIT (c) Matthijs Groen