GLSL Node Editor

GLSL node editor is a web-based editor for WebGL fragment shaders. It uses visual programming to model a work of shader, but you can always write your own node with the code you want.

Shader Editor

Creates shaders using nodes

How to run

Make sure you have python installed
Clone the repo with
git clone https://github.com/arthur100500/glsl-node-editor.git
Install dependecies with
pip install requirements.txt
If it is your first run, initialize the database
python3 src/app.py init
Run app with
python3 src/app.py

How to use

How to create a new shader

Register an account, clicking on the button Sign in
Click on Projects button, click + Create new project
You can change a name and description of your project just with clicking and editing its data

How to use Shader Editor

To move around, use mouse, scroll to zoom in/out
To place a node, right click and choose one from the list that drops
To move a specific, drag its header
To connect nodes, click on one anchor and click on the other, starting from input to output
- Alternatively, you can just click once, drag and drop onto the other node output
To see the output and see if shader is correct, press the Compile button
To save the project, press the Save Project button, changes you have made will not change automatically
To download the shader text, press the Save as Shader button

Program correctness

As all inputs are typed, you are unlikely to have an issue if:
- All nodes inputs are connected
Programs should have an output, a colorOutput node

Node Editor

Creates nodes using GLSL code

How to create a new node

Register an account, clicking on the button Sign in
Click on Nodes button, click + Create new node

How to edit nodes name

Name of the node is defined by its name. _ symbols will be replaced by space

How to add custom uniforms

You can add custom uniforms to your node. Just write them above the function like this

// Uniforms you want to add
uniform vec3 colorBase;
uniform float transparency;
uniform int index;

// Your function
vec4 your_function(){
    if (index > 1) 
        return vec4(1.0);
    return vec4(colorBase, transparency);
}

Built-in nodes

Inputs:

texCoord, texCoordX and texCoordY - position of pixel on screen from (0, 0) to (1, 1)
time - float time in secods, 1s = 1.0
mousePos - position of mouse cursor on screen, from (0, 0) to (1, 1)

Outputs:

outputColor - vec4, color of pixel, from (0, 0, 0, 0) to (1, 1, 1, 1), in RGBA format

Math:

sin - sin(value)
pow - value to the power of power
rand - random number for each position on screen
noise - perlin noise
avg - avarage between 4 floats
multiplyff - float * float
multiplyfv2 float * vec2
multiplyfv4 float * vec4
plus - float + float
plusv2 - vec2 + vec2
plusv4 - vec4 + vec4
minus - float - float

Conversions:

vec2x - the first component of vec2
vec2y - the second component of vec2
vec4r - the first component of vec2, red channel of a color
vec4g - the second component of vec2, green channel of a color
vec4b - the third component of vec2, blue channel of a color
vec4a - the fourth component of vec2, alpha channel of a color
fromFloatV2 - vec2 from 2 floats, (x, y)
fromFloatV4 - vec4 from 4 floats, (r, g, b, a)

Constants:

int - integer constant
float - float constant
vec2 - vec2 constant for position
vec4 - vec4 constant for color

Logic:

multiplex - chooses between two floats, if the bool is true picks first, else second
isBigger - a > b

Textures:

textureN - gets a color from a texture with the position given

Custom:

Nodes you added

arthur100500 / glsl-node-editor Goto Github PK

glsl-node-editor's Introduction