Visualizations in Helium consists of the following files:
-A .json file which contains the definition
-Additional files which are connected through the .json file
The .json file can look like this:
{
"Id": "VisItem",
"Title": "Analyzer",
"ShaderFile": "./shaders/analyser.frag",
"FinalShaderFile": "./core/final.frag",
"AttachedTextures": [""]
}Id is generally set to "VisItem" if the visualization is a single file.
Title is the title of the visualization as shown in menues.
ShaderFile points to a specific shader file which contains the visual logic of what to be rendered.
FinalShaderFile points to another sharer file which contains the final output logic.
AttachedTextures is an array of custom textures that the shader can use.
The shader file
The file that ShaderFile points to is a file with code written in the language GLSL (OpenGL Shader Language), a C-like language used specific for GPU programming.
More information about GLDL can be found here:
https://en.wikipedia.org/wiki/OpenGL_Shading_Language
The contents of the shader files used by Helium is very similar to shaders which can be found on Shadertoy, https://www.shadertoy.com/
There are several guides available on the Internet of how shaders can be created on Shadertoy and also a lot (several thousands) examples available for learning and inspiration.
Migrating shaders from Shadertoy to Helium
To migrate a shader from Shadertoy some things generally needs to be fixes:
If we use the following shader as an example, it's quite easy to spot them:
https://www.shadertoy.com/view/Wl3fzM
This shader is converted to Helium's format and available from %APPDATA%\Imploded Software\Helium 17\Shaders\shaders\apollian.frag
The first thing that needs to be added are two things that should be added at the top:
#version 450 core out vec4 out_color;
The first line defines which version of GLSL to use.
The second line defines the result from the shader, the color that should be shown for a specific pixel.
The next change we need to do is the following:
void mainImage(out vec4 fragColor, in vec2 fragCoord)
This line should be translated to:
void main()
After that we need to do a smaller change in the following line:
vec2 q = fragCoord/RESOLUTION.xy;
This needs to be changed to:
vec2 q = gl_FragCoord.xy/RESOLUTION.xy;
As you can see fragCoord was changed gl_FragCoord.xy. This change is needed because gl_FragCoord.xy is the native GLSL syntax to get the current position of the pixel that's being rendered. fragCoord is Shadertoy's format of the same value.
The last change that needs to be done is to change the following line:
fragColor = vec4(col, 1.0);
This line should be changed to:
out_color = vec4(col, 1.0);
In the beginning of the file we defined out_color which is the resulting color. Shadertoys name for the same variable is fragColor and therefore needs to be changed.
When the above changes are made, the shader from Shadertoy can be used in Helium.
Advanced topics
It's possible to change which specific shader that should be used to render the final buffer to screen.
This is done from the .json file and the default shader which just outputs the resulting buffer to screen without any post-processing is named final.frag and is located in th ./core/ folder.
Some shaders have specific requirements such as adding depth blur. This can be done by changing the final shader to another file.
Shader variables
Helium supports the most common variables as Shadertoy does such as:
-iTime: The elapsed time
-iResolution: The resolution of the visualization window
Helium supports the following texture variables:
-fft_texture: a texture containing values to get the current FFT values. This texture is 4096 pixels wide and 1 pixel high.
-wave_texture: a texture containing values to render a waveform. This texture is 4096 pixels wide and 1 pixel high.
-album_texture: a texture containing the album image of the file currently being played.
Helium also have support for four custom textures, texture_0, texture_1, texture_2 and texture_3.
These textures are defined in the .json file in the AttachedTextures variable.