Jay Taoko

2 posts

Pixel Compositor

In the previous post, I presented the pixel composition feature in Pico Pixel. In this post, I introduce the pixel compositor interface and how it is managed.

At the core, a pixel composition is a set of pixel shaders running sequentially over a quad polygon. Execution of a single pixel shader produces an output that can be used as a source texture in the subsequent pixel shaders execution. The output of the last pixel shader is displayed as a texture in Pico Pixel.

The pixel compositor user interface shows pixel shaders as a layers stacked one upon another. Each layers can be moved up or down to re-arrange the stack. Pixel shaders are executed from bottom to top in the stack. The top-most pixel shader in the stack produces the final image.

Pixel Compositor

Although the pixel compositor user interface is still a work in progress, you can see the stack of pixel shaders in the panel on the right side. The pixel compositor interface may be hidden so that the output image uses the entire window space.

Each shader layer has 4 inputs. An input may be a texture file (2D, 3D and Cubemap textures are supported), the keyboard texture map or the output of another pixel shader layer.

In the next post, more info on how to get your shaders in the pixel compositor.


Pico Pixel uses shaders to display textures. Two triangles and a texture is all that is needed for Pico Pixel to display an image. And the shaders it uses are very simple.
There is a request on PixelAndPolygon twitter feed to give the user control over the rendering shaders in Pico Pixel. I was optimistic about the feasibility of the feature at the time.

However, the request has remained unfulfilled.

For all that time since the request was made, I have been thinking and working on a new feature for Pico Pixel.
ShaderToy Bricks

If you don't know what Shadertoy is, go have a look.

Shaders on modern GPUs can be very elaborate. Over the last few years, Shadertoy has formalized and made popular a new way of using shaders for fun, science and education. The image you see above is from the game Bricks. It is the first multi-pass game made by Iq, a founder at Shadertoy. It is made of two shaders and it runs in Pico Pixel in real-time, with mouse and keyboard interaction.

Pixel Compositor is the new feature that allows you to use custom shaders in Pico Pixel. As before, the rendering is done with two shaded triangles. The main difference is the complexity of the shaders, which you will control. In other words: bring your own shaders to Pico Pixel!

The feature is not a desktop version of Shadertoy. While I was designing it, I thought to give you the best control over the rendering of images. The interface defined by Shadertoy was a great start.

I leave the details of how the feature works for the next posts.