Be the Creator of your world


PixelsWorld documentation version: v2.3.1
Author ZzStarSound

Welcome to the PixelsWorld!

We have compressed all the essence of PixelsWorld in this one section. If you complete this section, you will be the Creator of your own world!

To be simple

PixelsWorld renders image basing on your code

  • You can use presets that written by other people.
  • By learning the simple GLSL code, create plugins by yourself.

What it feels like to develop effects with PixelsWorld?

PixelsWorld is just like Microsoft Excel. You write function, it will handle the data in the form for you.

If we treat the data in form as input pixels, the calculated form as output pixels, Codes in PixelsWorld is the function in Microsoft Excel

E.g. Make picture brighter

To make a picture brighter, the simplest approach is just add the R,G,B by a number. If in Excel, we need to do something like this:

Calculate the form

Then we have made all pixels data "brighter" !

Here is what we need to write in PixelsWorld:



It means: Get the input pixels (getColor) in current location (uv), and add the 4D vector RGBA by (0.2,0.2,0.2,0.2) (+vec4(0.2)). Finally, send (=) the result to the output pixel(outColor).

But if we only write this single line, PixelsWorld cannot work fine. We need to add this line inside a "shell" to make it work. The complete version is this:


void main(){

How to input codes

How to input codes

Input picture (Right click to save)

Input picture

(Source artist)



Add more controls!

Mostly we don't just add 0.2 to the picture. We want it to be more controllable. So we can replace the 0.2 to slider[0]. In this way, we can change the value in Parameters panel to change the brightness of your picture.


void main(){


But you can find that, if the value is negative, the picture will be transparent, we don't want this happened. Namely we need to avoid modifying the Alpha channel of the picture.


void main(){
    vec4 inColor = getColor(uv);
    inColor.rgb = inColor.rgb + vec3(slider[0]);
    outColor = inColor;

It means: Save the input pixel into a temporary variable inColor, Add the value of slider[0] to the RGB of inColor, then send the inColor to the outColor.

Advanced brightness

Add label to the parameter

Add lable to the parameter

Save to preset

Finally, we can save the code as a preset for next using. Go to the [contents/Editor/] to learn more details.


You have already mastered the most part of PixelsWorld!

In addition to writing codes by yourself, you can go to the shadertoy, find some interesting code and run it in PixelsWorld. See this to learn how to use code from shadertoy.

results matching ""

    No results matching ""