It’s always best to start at the beginning. Glinda, Good Witch of the North

The Smudge API is still changing pretty often. Code on this post is out of date.

Version 0.1 of Smudge is done. It is very minimal still—just a couple very basic features—but is enough to start making some sketches and test the core idea. Talia used this version of the library to make a pretty nice brick texture and I made a sketch that looks something like paint splatters.

Procedurally generated bricks.
Javascript paint splatters.

Materials

The most essential aspect of the library is the ability to define a full PBR material with base color, metallic, smoothness, and height channels. The Material class is used to do this. In the future, this class will likely also contain additional information, such as how each channel should be composited during drawing.

// describing a material with PBR channels
let exampleMaterial = new Material(1.0, 0.0, 0.0, 1.0, 0.5, 0.5, 0.25);

// or
let exampleMaterial = new Material();
exampleMaterial.red = 1.0;
exampleMaterial.green = 0.0;
exampleMaterial.blue = 0.0;
exampleMaterial.transparency = 1.0;
exampleMaterial.height = 0.5;
exampleMaterial.metallic = 0.5;
exampleMaterial.smoothness = 0.25;

Drawing Rects

For a material to be useful, you need to be able to draw with it. The rect function allows you to draw a simple rectangle. It takes parameters for the location and size of the rectangle, and the material to draw with.

// drawing a rectangle
pbr.rect(10, 10, 100, 25, exampleMaterial);

Under the Hood

When the Smudge library is initialized, it creates a number of offscreen drawing buffers to store the base color, metallic + smoothness, and height information. These buffers are larger than the exported textures, allowing for anti-aliasing oversampling. The buffers are also high precision—they use 16-bit half-floats—allowing for high dynamic range drawing. The pbr.rect() function draws a rectangle into each of these buffers using the data in the material parameter.

Exporting

The library also provides methods for exporting the data channels as textures that can be used with the Unity game engine. Currently it exports textures for albedo, metallic+smoothness, and height.

Albedo
Metallic + Smoothness
Height

Examples

Even with only the ability to draw rectangles, the library already shows promise as a powerful tool for creating procedurally generated textures that work with a PBR rendering pipeline.

An embossed checkerboard mapped onto a 3D cube.