glbrush.js design

The main interface of glbrush.js is called Picture and can be found from picture.js. It's similar to a picture in PhotoShop or GIMP: a bunch of layers laid out on top of each other. It also supports switching between editing sessions, each of which has its own undo history. The layers are composited using a CanvasCompositor or GLCompositor, depending on whether the library is operating in software or WebGL mode.

Each layer is stored in a PictureBuffer, found from picture_buffer.js. The bitmap image representing a PictureBuffer can be stored in either a canvas element, which makes it a CanvasBuffer, or in a WebGL texture, which makes it a GLBuffer.

Each PictureBuffer consists of a linear stack of PictureEvents. These are basically all kinds of operations done on the Picture that can be undone. Each PictureBuffer starts with a BufferAddEvent, can contain an unbounded number of BrushEvents, GradientEvents etc. and also one or more BufferRemoveEvents. Buffers can be merged to other buffers with a BufferMergeEvent. Most of glbrush.js's magic, such as undoing different types of draw operations, happens in PictureBuffer.

One of the basic design principles of glbrush.js is that draw operations such as brush strokes or gradients are really fast to rasterize with WebGL. Think < 1ms per event on a computer with a midrange GPU. This enables supporting reasonably fast unlimited, out-of-sequence undo while storing only a limited amount of previous buffer states, called CanvasUndoState or GLUndoState. There are still slow corner cases, but the aim is that all common operations feel fast to the user.

Low-level rasterization stuff is handled in Rasterize.js, which has four different backends for monochrome alpha-blending: software Rasterizer, GLDoubleBufferedRasterizer for browsers/GPUs with no floating-point texture support, and GLFloatRasterizer and GLTexDataFloatRasterizer for browsers/GPUs with varying levels of floating point texture support. The rasterizers can currently draw solid or soft circles and linear gradients.

See example.html for a more practical example on how glbrush.js can be used.