Basic Plugin

< All Topics

Basic Plugin


Now that we’ve created our first plugin, we can start experimenting with what really makes FFGL plugins come alive. Our first plugin only creates the exact same frame every time. We can add some controls or Parameters, as they are called in the world of FFGL, to make the plugin interactive.



Next, we will introduce built-in FFGL variables like time as another way to make the plugin render a more interesting frame each time.


FFGL Variables


Variables like time are built-in FFGL uniforms that the SDK’s Plugin class will update in the shader when the UpdateAudioAndTime method is called in ProcessOpenGL. This variable and other built-in variable of the FFGL SDK allow for plugins to make changes to the frame being rendered without any input from the user.


In this plugin, time is used to vary the midpoint of the gradient.


Below is a list of all built-in FFGL variables:


  • time
  • deltaTime
  • frame
  • resolution
  • bpm
  • phase




In addition to the built-in FFGL variables, plugins use Parameters to allow the user to specify how a frame is created. Refer to the FFGL Parameter Guide for a more detailed list of the parameters available in the FFGL SDK.


The most basic parameter type is the standard parameter (FF_TYPE_STANDARD) which is a floating point number between 0.0 and 1.0. Color parameters are formed by putting 3 (RGB / HSL) or 4 (RGBA / HSLA) standard parameters together.


The only big changes we need to make to adapt our basic gradient plugin is to add two color parameters Color1 and Color2 in our constructor and then change our fragment shader to render a frame using the values of these parameters.


//Input properties
AddParam( Param::Create( “Color1”, FF_TYPE_RED, 1.0f ) );
AddParam( Param::Create( “Color1_green”, FF_TYPE_GREEN, 0.0f ) );
AddParam( Param::Create( “Color1_blue”, FF_TYPE_BLUE, 0.0f ) );
AddParam( Param::Create( “Color2”, FF_TYPE_RED, 0.0f ) );
AddParam( Param::Create( “Color2_green”, FF_TYPE_GREEN, 0.0f ) );
AddParam( Param::Create( “Color2_blue”, FF_TYPE_BLUE, 1.0f ) );

Fragment Shader


static const char fragmentShader[] = R”(
#version 410 core
in vec2 uv;
void main()
//Position (x coordinate) varying pixel color
vec3 col = mix(Color1,Color2,0.25*sin(time)+uv.x);
//Output to screen
fragColor = vec4(col,1.0);

Previous: First Plugin
Next: Advanced Plugin