Using shaders
What is a shader?
A shader is a type of computer program specifically designed to run on a graphics processing unit (GPU). The term ‘shader’ comes from ‘shade,’ as one of the earliest uses of shaders was to simulate shadows and reflections in 3D graphics. However, today, shaders are used for a wide variety of graphic processing tasks, from applying textures and colors to generating complex special effects.
Shaders operate at a very low level, meaning they have direct and precise control over the individual pixels that make up an image or video. They can manipulate image data very quickly with minimal resources, making them particularly useful for real-time graphics applications, such as video games, virtual reality, and video mapping.
The different types of shaders
There are different types of shaders, including vertex shaders, which manipulate 3D data points (vertices), geometry shaders, which generate new shapes from these points, and fragment shaders (also called pixel shaders), which determine the final color of each pixel on the screen. Shaders are typically written in specialized programming languages, such as GLSL (OpenGL Shading Language) or HLSL (High-Level Shading Language) for DirectX.
Sombreadores de pixéis ou sombreadores de fragmentos
The fragment shader or pixel shader is a shader designed to compute the color of each pixel individually. It takes as input the data of each pixel in the image (position, texture coordinates, color) and returns its color.
These shaders are what you’ll be most interested in using with HeavyM. They are usually .FRAG files or .FS files in the case of ISF format. The ISF format provides a standard for GLSL fragment shaders, making them easier to interpret by interactive applications.
Sombreadores de vértices
Vertex shaders are used to transform vertices into pixels.
They are .VS files that sometimes accompany the pixel shader, sharing the same name and needing to be located in the same folder.
HeavyM Shape Effect Shaders
When you click on the red icons on the right side of the HeavyM interface, you gain access to categories of effects that automatically adapt to the drawn shapes. These effects are linked to the groups in the layers panel on the left. All shapes within a group share the same appearance. To apply different effects to different shapes, you need to create additional groups and add shapes to them.

It is currently not possible to add or modify the code of existing effect shaders in this category.
Image Generation Shaders
You can add image generation shaders as sources in the panel accessible via the white icon located in the vertical toolbar on the right. These shaders require the creation of a player to be displayed. Then, link the source to the player by clicking on the target-shaped icon. Image generation shaders do not have a default duration because they are programs that run in a loop. However, you can adjust the display duration of the source.
It is currently not possible to add or modify the code of existing effect shaders in this category.
Image Generation Shaders
You can add image generation shaders as sources in the panel accessible via the white icon located in the vertical toolbar on the right. These shaders require the creation of a player to be displayed. Then, link the source to the player by clicking on the target-shaped icon. Image generation shaders do not have a default duration because they are programs that run in a loop. However, you can adjust the display duration of the source.

Processing Shaders on Players
You have the option to apply image processing effects to the player. To do this, select the player and add effects in the Properties panel at the bottom left using the + button. The effects are added sequentially. Each player is independent, so the source and processing effects will differ between players, even if the players are in the same group.

Importing or Creating Shaders
Where to Find Shaders?
You don’t need to know how to program to use shaders with HeavyM. In addition to the library already included in the software, there are platforms where you can find new shaders without having to create them yourself. The community of shader creators is growing rapidly, and you can often use the works they share for non-commercial projects.
To find .FS shaders: https://www.interactiveshaderformat.com/
To find .FRAG shaders: http://glslsandbox.com/ e https://www.shadertoy.com/
Note: .FRAG files are not recognized in HeavyM. They need to be converted to .ISF, and we provide a method for this below.
Make sure to check the usage rights in the license, usually specified at the beginning of the shader’s code. If there are no specific indications, copyright applies by default, so we strongly recommend discussing with the author if you intend to use the shader for commercial purposes.
Importing Shaders
As mentioned, there are two main categories of shaders in HeavyM: generation shaders and processing shaders. HeavyM allows you to easily combine shaders from these two categories. HeavyM offers default shaders in the Library tabs of each shader selection window. All these shaders are .FS and therefore adhere to the ISF standard. To import your own shaders into the My Shaders tab, they must comply with this standard. This way, the parameters of your shaders can be easily modified within HeavyM’s interface.
Want to import other shader formats into HeavyM? It’s very simple to convert shaders using these tools:
- https://magicmusicvisuals.com/utils/shadertoy_to_isf.php – Beta
- ISF Editor software (Mac only) using the “Import from GLSL Sandbox” and “Import from Shadertoy” functions
Developing Your Own Shaders
To create your own shaders, we recommend using the ISF format directly to ensure compatibility with as many applications as possible. The purpose of this article is not to teach GLSL coding, the language used by the ISF format. For that, we recommend reading the very comprehensive sites:
- https://thebookofshaders.com/ para GLSL
- https://docs.isf.video/ para ISF
However, to start, feel free to visit the ISF site and modify existing shaders. This interactive site allows you to see the changes made to the shader in real time. It’s also possible to start from a basic template.
The main drawback of creating and modifying shaders is that there’s no error feedback. When there’s a design issue, the shader may not execute or display anything, making it difficult to identify the source of the error. Therefore, it’s crucial to be meticulous in your coding.
To continue
Managing sound and music reactivity
This guide was written by HeavyM, a company specializing in video mapping since 2013.
For any questions, comments, advice, etc., please use this contact form: https://help.heavym.net/hc/requests/new. Response guaranteed within 24 hours.