GitHub - chung-leong/pb2zig: Pixel Bender to Zig code translator

pb2zig

A source-to-source translater that takes a Pixel Bender kernel (PBK) and translates it into the Zig language. That code can then be compiled using the Zig compiler into WASM, making the code available for use in a web environment.

The base project, pb2zig, is a library that performs the translation. It comes with a CLI program for turning .pbk files into .zig.

Meanwhile, rollup-plugin-pb2zig is a Rollup plugin that fully automates the compilation process so that all you have to do is write an import statement in your JavaScript file to make use of a PB kernel in your React or Svelt project.

What is Pixel Bender?

Pixel Bender was a technology developed by Adobe more than a decade ago for use in their range of products, from Photoshop to Flash. Adobe's documentation describes it as follows:

Adobe Pixel Bender is a programming language that is used to create or manipulate image content. Using Pixel Bender you create a kernel, also known as a shader. The shader defines a single function that executes on each of the pixels of an image individually. The result of each call to the function is the output color at that pixel coordinate in the image. Input images and parameter values can be specified to customize the operation. In a single execution of a shader, input and parameter values are constant. The only thing that varies is the coordinate of the pixel whose color is the result of the function call.

Check out the Pixel Bender specification for a complete low-down on this domain-specific language.

The Adobe Pixel Bender Toolkit cames with a nice interactive tool that helps you develop PB kernels:

GPU acceleration meant that even complicated kernels could execute in the blink of an eye. This product is sadly no longer available for download from Adobe's website. If you look hard enough though, you can still find it somewhere on the Internet. And yes, the Windows version does run properly under Wine.

Basic example

The following is a simple example of a PB kernel:

<languageVersion : 1.0;>

kernel adjust
<
    namespace : "example";
    vendor : "example";
    version : 1;
>
{
    input image4 src;
    output pixel4 dst;

    parameter float3 multipliers
    <
       minValue:     float3(0.0, 0.0, 0.0);
       maxValue:     float3(5.0, 5.0, 5.0);
       defaultValue: float3(1.5, 1.0, 1.0);
       description:  "multiplier for RGB channels";
    >;

    void
    evaluatePixel()
    {
        dst = sampleNearest(src, outCoord());
        dst.rgb *= multipliers;
    }
}

The kernel accepts one parameter, multipliers, is a vector of three floating point numbers. The evaluatePixel() function samples the input image at the same coordinates as the output pixel. It then multiplies the RGB channels by multipliers, leaving alone the alpha channel. The default value of multipliers would make an image more reddish.

Pixel Bender Highlights

Here are some examples of what can be done using Pixel Bender. Click on the "Live Demo" links to see them in action in your browser and see how changing their parameters affects the output. The demo web-apps should work on any non-ancient mobile phone.

chihuly

by Justin Everett-Church

Chihuly themed transition

Source image	Result

Live Demo | Source

circle-pattern

by Petri Leskinen

CirclePattern

Source image	Result

Live Demo | Source

complex-rational

by pixelero

complex mapping f(z)= (az2+b)/(cz2+d)

Source image	Result

Live Demo | Source

crystallize

by Petri Leskinen

Crystallize -filter

Source image	Result

Live Demo | Live Video Demo | Source

droste

by Tom Beddard

The Droste effect.

Source image	Result

Live Demo | Source

hex-cells

by Petri Leskinen

Hexagonal Tiling

Source image	Result

Live Demo | Source

pencil

by Alan Ross

Pencil

Source image	Result

Live Demo | Live Video Demo | Source

posterize

by Posterizer

Posterizes an image using 2 to 8 specified colors

Source image	Result

Live Demo | Source

sepia

by Adobe Systems

A variable sepia filter

Source image	Result

Live Demo | Source

wave

by nicoptere

Wave

Source image	Result

Live Demo | Source

asciimii

by Richard Zurad

Filter to mimic the TEXTp effect from YouTube's 2010 April Fools joke

Source images	Result

Live Demo | Live Video Demo | Source

bumpmap

by Elias Stehle

Bumpmap Shader - Stunning effects on texture-like inputs

Source images	Result

Live Demo | Source

metallic

by Petri Leskinen

Metallic -effect

Source images	Result

Live Demo | Source

mandelbulb-quick

by Tom Beddard

Mandelbulb Fractal Ray Tracer - the quick version

Result

Live Demo | Source

newton-raphson

by Om Labs

Newton Raphson Fractals

Result

Live Demo | Source

raytracer

by Newgrounds

Pixel Blender Raytracing

Result

Live Demo | Source

Additional examples can be found at the following pages: