G. LSL SHADERS

There are two mechanisms in Jovimetrix that allow the creation of GLSL shaders to support image creation or manipulation at ComfyUI runtime.

The main GLSL (JOV) 🍩 node allows for the manipulating of shaders in the UI of ComfyUI. Once the shader is established, it can be left as is within the network and will produce the same content output as if it was a Dynamic GLSL node.

The secondary way is via the Dynamic GLSL system. This will search a filepath for shader files and pre-load them as nodes for ComfyUI. They will register as normal nodes and work in any API calls.

The benefit of the dynamic nodes are the reduced footprint of the node itself. Since the Dynamic nodes load their scripts statically, the node only contains the inputs and widgets for that specific script.

example of GLSL (JOV) 🍩 footprint vs Dynamic Node footprint

CORE

All shaders have two parts: the vertex shader (.vert) and the fragment shader (.frag).

The default location for the included shaders is:

<ComfyUI>/custom_nodes/Jovimetrix/res/glsl

The basic shaders for each of these programs is included in the default location and are named:

_.frag and _.vert

There are several other shaders included and when they are used in ComfyUI they come denoted with a 🧙🏽 wizard icon at the end of their name.

These shader examples can be used to help jump-start custom shader work.

VERTEX SHADER

#version 330 core

precision highp float;

void main()
{
    vec2 verts[3] = vec2[](vec2(-1, -1), vec2(3, -1), vec2(-1, 3));
    gl_Position = vec4(verts[gl_VertexID], 0, 1);
}

The default vertex shader is simply a quad with the UV mapped from 0..1.

FRAGMENT SHADER

#version 440

precision highp float;

// system globals
uniform vec3    iResolution;
uniform float   iTime;
uniform float   iFrameRate;
uniform int     iFrame;

// old deprecated functions
#define texture2D texture

// useful constants
#define M_EPSILON 1.0e-10
#define M_PI 3.1415926535897932384626433832795
#define M_TAU (2.0 * M_PI)

All shaders will have a header file, with pre-set variables for shader program usage, injected at the top. These are "mostly" mirrored from Shadertoy variables, with a few changes:

NAME	TYPE	USAGE
iResolution	vec3	Dimensions of the GL canvas
iTime	float	current time in shader's lifetime
iFrameRate	float	the desired FPS
iFrame	int	the current frame based on the iTime and iFrameRate

There are also a few functions defined to keep compatibility for an easier 1:1 transition:

SHORTHAND	GLSL FUNCTION
texture	texture2D

ENTRY POINT

The fragment shader's entry point is defined as:

void mainImage(out vec4 fragColor, vec2 fragCoord)

such that setting fragColor will output the final RGBA value for the pixel.

SHADER META

Shaders are 100% fully GLSL compatible; however, there can be additional information (meta data) added to the shaders via comments. This expands the usefulness of the shaders since they can be pre-parsed and turned into nodes made at runtime (Dynamic Nodes).

// name: GRAYSCALE
// desc: Convert input to grayscale
// category: COLOR

The meta data breakdown of this shader header:

KEY	USAGE	EXPLANATION
name	GRAYSCALE	title of the node with an added 🧙🏽 for internal and 🧙🏽‍♀️ for custom nodes
desc	Convert input to grayscale	text that shows up for preview nodes and the Jovimetrix help panel
category	COLOR	ComfyUI menu placement. Added to the end of JOVIMETRIX 🔺🟩🔵/GLSL

UNIFORM fields also have metadata about usage(clipping for number fields) and their tooltips:

// default grayscale using NTSC conversion weights
uniform sampler2D image; | MASK, RGB or RGBA
uniform vec3 convert; // 0.299, 0.587, 0.114; 0; 1; 0.01 | Scalar for each channel

<default value> ; <minimum> ; <maximum>; <step> | <tooltip>

For the convert uniform this means a vector3 field with a default value of <0.299, 0.587, 0.114> clipped in the range 0..1 with a 0.01 step when the user interacts with the mouse and the tooltip will read: Scalar for each channel

If you need to omit fields, like a minimum, just place the token separator (;) by itself, for example:

uniform float num; // 0.5; ; 10

This would clip the upper-bound to 10 and allow the number to go to -system maximum.