In this exercise you'll learn to use the Outline app and the Module app to create a shader module that
implements additive blending. The following table shows the skills required to complete this exercise.
- Right click over the the <Program> node named Visual and select Copy Source Path
> Fragment Shader from the listed options.
The software displays a dialog that allows you to select the source file you wish to open.
This includes any files #included by the shader. (While GLSL itself doesn't automatically
support preprocessing shader source code, Simdify design applications DO allow you to
use #include to create modular shaders.)
- Left click fragment_shader.glsl and click OK or hit ENTER when you are finished.
The application displays a dialog box that informs you the path has been copied
to the clipboard.
- Start a text editor such as Notepad, Notepad++, or Microsoft Visual Studio.
- Select the menu option to open a file from disk.
- Use CTRL + V to paste the path from the clipboard into the field
that allows you to specify the path and filename.
You'll see path such as: C:\Users\Installer Test 0\Documents\Scenomics\Library\Module\FBO Image Processing Tiles\Additive-Blend-Module\430\fragment_shader.glsl
- Open the fragment shader.
All shaders are separated into two sections. Declarations are stored at global scope. The fragment
shader itself is stored inside void main(void). Later, when we add
nodes to the document to build our shader module, we're only going to be concerned with things declared at global scope.
The body of all shaders
is effectively invisible to Simdify design applications such as Module.
// #version 430
// The version number is automatically injected by the application.
// It is included above for reference purposes only.
#include <SPA_Version.glsl>
#include <SPA_Constants.glsl>
#include <Modules/SPA_EditStateFragmentColorOverride.glsl>
#include "vertex_attributes.glsl"
in Data { vertexData attributes; } DataIn;
out vec4 fragColor;
void main(void)
{
fragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
SPA_EditStateFragmentColorOverride( fragColor );
}
Although you can't see it in your shader code, the OpenGL
shader compiler on your machine also "inserts" built-in
variables so they are visible to your shader.
- Find the following line:
fragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
This line assigns red to the fragment shader output.
- Replace it with the following:
Copy Text To Clipboard
fragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
This line assigns green to the fragment shader output.
- Save the changes to the fragment shader source code and return to the running Module application.
- Return to the text editor that contains the fragment shader source code.
- Replace the entire fragment shader with the following:
Copy Text To Clipboard
// #version 430
// The version number is automatically injected by the application.
// It is included above for reference purposes only.
#include <SPA_Version.glsl>
#include <SPA_Constants.glsl>
#include <Modules/SPA_EditStateFragmentColorOverride.glsl>
#include "vertex_attributes.glsl"
in Data { vertexData attributes; } DataIn;
layout( binding = 0 ) uniform sampler2D lhs;
layout( binding = 1 ) uniform sampler2D rhs;
uniform float blend_opacity;
out vec4 fragColor;
vec4 add_images( vec4 base, vec4 blend, float opacity )
{
return ( base * opacity ) + blend * ( 1.0 - opacity );
}
void main(void)
{
vec4 lhs_sample = texture( lhs, DataIn.attributes.texcoord );
vec4 rhs_sample = texture( rhs, DataIn.attributes.texcoord );
vec4 res = add_images( lhs_sample, rhs_sample, blend_opacity ); // Performs additive blending using a standard algorithm.
fragColor = res;
SPA_EditStateFragmentColorOverride( fragColor );
}
- Examine the following code in the fragment shader declarations.
layout( binding = 0 ) uniform sampler2D lhs;
layout( binding = 1 ) uniform sampler2D rhs;
uniform float blend_opacity;
In the next section, we'll create nodes that represent these declarations.
- Save the changes to the fragment shader source code and return to the running Module application.
- Examine the worksheet.
The new shader code is running, but we haven't provided the textures and uniforms needed to generate a result.
You might see white or black depending on your GPU.
- Right click over the the <ProgramBindNode> node named Bind Visual and select Create Source Code Item from the
listed options.
The software presents a dialog that shows you items that have been declared in your shader.
- Left click layout( binding = 0 ) uniform sampler2D lhs.
- Hold down CTRL and left click layout( binding = 0 ) uniform sampler2D rhs and uniform float blend_opacity.
- Click OK or hit ENTER when you are finished.
The software adds the items to the hierarchy. You'll notice some of the new items
have red lines underneath them. This means that there is an error.
Move your mouse over the <SamplerNode> named layout( binding = 0 ) uniform sampler2D lhs.
You'll see a tooltip appear that displays information the error.
To make a long story short, both of the <SamplerNode> objects expect a <Texture>.
- Right click over the <SamplerNode> named layout( binding = 0 ) uniform sampler2D lhs
and select Load Texture From Disk from the listed options.
Enter the folder named IPF_8888_ARGB.
Copy Text To Clipboard
IPF_8888_ARGB
- Select IPF_8888_ARGB.png from the listed options.
Copy Text To Clipboard
IPF_8888_ARGB.png
- Click Open or hit ENTER when you are finished.
The software adds a <Texture> node to the document and connects the <SamplerNode> to the new <Texture> node.
Note that the box in the middle of the worksheet may change color. It may become black. This is because we've provided only a single
texture and the shader requires two textures.
- Select Graph > State > Expand All Tree Items from the main menu.
You can see the new <Texture> node named IPF_8888_ARGB.
The software presents a dialog that allows you to set the name of the new folder.
