Geppetto

Even though most users don't know or care about interactive web browser graphics, they are an important part of the standard we've come to expect from websites today.

WebGL is a JavaScript API used for rendering interactive 2D and 3D graphics without the use of plug-ins. In short, it's something integrated into most web browsers today.

Creating these WebGL graphics can be done with extensive web coding knowledge, or with the help of a very interesting app called Geppetto.

Before anything else, Geppetto is a free, open-source animation tool that allows you to create and embed WebGL animations into a website.

The main aspects of Geppetto is the actual desktop app (that allows you to define animated images), and a JavaScript library (required to play them).  This particular JavaScript library is called Geppetto player.

It's worth noting that Geppetto is created using Create React App and Electron.

Working with Geppetto should be a fairly easy endeavor for most users familiar with animation software and WebGL.

First, you need to load a texture file as a .PNG. The app allows you to create all the required layers from the texture, and mash them together in an image. Then, you can create variations to your layer tree to actually create the motion. The more layers and more variations you add, the more complex the overall animation will become.

You can also create timelines to define multiple animations. These animations (as .JSON files) can then be loaded using the aforementioned Geppetto player and, ultimately, embedded in a website or even a web-based app.

The app's official website offers a basic example of what you can do with Geppetto. Thankfully, the app has a pretty extensive Documentation section that thoroughly explains how to create layers from the texture, how to stack or place them, how to add mutations/variations to these layers, how to create controls as well as animations.

If you're currently learning WebGL or you simply want a more streamlined solution for creating WebGL animations, then Geppetto is definitely the way to go. It's easy to use once you properly understand its tools and, best of all, it's free.