sales@scenomics.com +1 650 396 9674

Create Basic Shader

In this exercise you'll learn to create a document that contains a vertex and fragment shader. Then you'll learn how to make basic modifications to the fragment shader, how to rebuild the document, and how to create a texture and display it on screen. This exercise assumes your GPU supports GLSL version 400 or higher.

Start The Shader Application

  1. Start the Shader app. (Start » Programs » Scenomics » Shader) or (Windows® key and then type 'Shader' to find the app icon.)

    The application displays a splash screen and then the application desktop appears. The main menu is composed of three items that contain commands relevant to the current context (which is an empty document). The interface changes when you create a new file or load a file from disk.

    This is a picture of the desktop.

Create New Document

  1. Select File » New » Shader from the main menu.

    The software displays a wizard that allows you to specify the parameters of your new shader. The Profile shown below is 460 core, but you will see the highest GLSL version available on your machine. Note that while your GLSL profile might be named something different depending on how your OpenGL driver is implemented, the name should still be similar to 400 core.

    This is a picture of the new project dialog.
  2. Type User Basic Exercise in the field named Name.
  3. Set Profile to the highest value available such as 460 core.
  4. Hit ENTER or click OK when you are finished.

    The application creates a new shader document and the main menu options change. You can see the hierarchy on the left, the rendered shader with geometry in the middle, and the property sheet on the right. Shader compiler error messages are shown in the output window below. The shader sets the fragment color to red and does no other work.

    This is a picture of the workspace.

    If the shader compiled successfully, you should see a red square in the center of the worksheet.

  5. Select File » Save from the main menu.

Examine The New Document

  1. Select Desktop » Clear Output from the main menu.
  2. Examine the main menu and select Graph » State » Expand All Tree Items. ( Or hit ALT + X ).

    This expands the graph so that you can see all the nodes. As you can see, this shader is a composite data structure made from a set of atomic types.

    NOTE: You can hover over each node icon, in the image below, for a description of the node and its function.

    That covers the basic information about the graph.

  3. In the running Shader app, move the mouse over the <Program> node named Program.

    Notice that you can see the GLSL version, profile, and source code locations. Many nodes, but not all of them, display useful information if you hover over them.

    This is a picture of the Program node info tip.

Copy The Fragment Shader Path

  1. Examine the hierarchy and right click over the <Program> node named Program. This is a picture of the Program node info tip.
  2. Choose Copy Source Path » Fragment Shader from the listed options.

    This copies the absolute path to the fragment shader source code to the Windows® clipboard. For example, a file path like the following: D:\Release6\Content\Library\Shader\User Basic Exercise\460\user_basic_exercise_fragment_shader.glsl is copied to the clipboard.

Modify Fragment Shader

  1. Start a text editor of your choice and select the option to open a file from disk.
  2. Select CTRL + V to paste the fragment shader file path (into the place in the dialog where you specify the file to open) and open the file.

    This is the fragment shader. Note that your #version 460 declaration might be different, depending on the highest GLSL version on your machine. You can still follow this exercise even if the shader code is different. Just follow the steps below and make the same changes in the same locations.

    // #version 460
    // The version number is automatically injected by the application.
    // It is included above for reference purposes only.
    #include <SPA_Version.glsl>
    #include "user_basic_exercise_attributes.glsl"
    
    in Data { vertexData attributes; } DataIn;
    out vec4 fragColor;
    
    void main(void)
    {
       fragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
    
  3. Find the following line, where a color value is assigned to the output fragment color:

    fragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    
  4. Change the code to the following:

    fragColor = vec4( 0.5, 0.5, 0.5, 1.0 );
    
  5. Save the changes to the fragment shader.

    Leave the fragment shader open in the text editor.

Examine The Document

  1. Return to the running Shader application. The color has changed from red to gray, which shows us the shader pipeline is active and that we are ready to make more changes. This is a picture of the desktop.

Declare A Uniform

  1. Return to the text editor and examine the fragment shader.
  2. Add the following code immediately above out vec4 fragColor

    uniform vec4 tint_color;
    
  3. Your fragment shader code looks like this:

    // #version 460
    // The version number is automatically injected by the application.
    // It is included above for reference purposes only.
    #include <SPA_Version.glsl>
    #include "user_basic_exercise_attributes.glsl"
    
    in Data { vertexData attributes; } DataIn;
    
    uniform vec4 tint_color;
    
    out vec4 fragColor;
    
    void main(void)
    {
       fragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
    }
    
  4. Modify the assignment to the fragment color:

    fragColor = tint_color;
    
  5. Save the changes to the fragment shader.

    Leave the fragment shader open in the text editor.

Rebuild The Document

  1. Return to the running Shader application.

    Your shader is going to turn black when you return to the application. Depending on the behavior of your graphics driver you may see other colors as well. This is because we have not yet set a value for uniform vec4 tint_color. We're going to rebuild the document, which will add the uniforms we declared to the document so we can set their values.

  2. Select Graph » Build All from the main menu.

    The application rebuilds the document and displays build information in the output window.

    --- <Building Project 'D:\Release6\Content\Library\Shader\User Standard Pipeline\User Standard Pipeline.box'> ---
    
    Rebuilding Shader Resource Documents...
    
    Rebuild succeeded: D:\release6\content\library\shader\user basic exercise\460\user_basic_exercise_vertex_shader.glsl
    Rebuild succeeded: D:\release6\content\library\shader\user basic exercise\460\user_basic_exercise_fragment_shader.glsl
    
    Updating document contents...
    
    Adding to <UniformPaletteNode> 'Uniforms' <ColorNode> 'uniform vec4 tint_color'
    
    Build completed.
    

Examine The Document

  1. Select Graph » State » Expand All Tree Items from the main menu.

    The graph looks like this. There is a new <ColorNode> named uniform vec4 tint_color that matches the declarations in the shader source code. In the image below, the new node is highlighted red for illustrative purposes (but it isn't highlighted in the document).

    This is a picture of the graph.

Edit The <ColorNode>

  1. Examine the hierarchy.
  2. Right click the <ColorNode> named uniform vec4 tint_color and select Edit... from the listed options.

    This displays the color property editor.

    This is a picture of the color property editor.
  3. Left click the 'white' colored bar to the right of the Fill Value property.

    This displays the Windows® color picker dialog.

  4. Choose a color you like (except black or white) and click OK to dismiss the color picker.
  5. Click OK to dismiss the color editor.

    The worksheet looks like this, although you might have chosen a different color:

    This is a picture of the worksheet.

    This is generally how you set uniform values. You declare them in the shader and then rebuild the document to create nodes representing what you declared. You can then configure the values of the new nodes to suit your purpose. Many uniform values are set by the user, as we just did, but later you'll learn about using data capture objects to capture values from the document and use them as uniform values. The other way to create uniforms, uniform buffers, is discussed in a subsequent exercise.

Declare A Texture Sampler

  1. Return to the text editor and examine the fragment shader.
  2. Add the following code immediately after uniform vec4 tint_color

    uniform sampler2D diffuse_texture;
    

    Your fragment shader code looks like this:

    // #version 460
    // The version number is automatically injected by the application.
    // It is included above for reference purposes only.
    #include <SPA_Version.glsl>
    #include "user_basic_exercise_attributes.glsl"
    
    in Data { vertexData attributes; } DataIn;
    
    uniform vec4 tint_color;
    uniform sampler2D diffuse_texture;
    
    out vec4 fragColor;
    
    void main(void)
    {
       fragColor = tint_color;
    }
    
  3. Insert the texture sampling code immediately above the assignment to the fragColor:

    vec4 diffuse_color = texture( diffuse_texture, DataIn.attributes.texcoord );
    

    Your fragment shader void main(void) looks like this:

    vec4 diffuse_color = texture( diffuse_texture, DataIn.attributes.texcoord );
    fragColor = tint_color;
    

    This code samples a texture using the texture coordinates computed by the vertex shader.

  4. Modify the assignment to the fragment color to multiply diffuse_color by tint_color:

    fragColor = diffuse_color * tint_color;
    

    Your fragment shader code looks like this:

    // #version 460
    // The version number is automatically injected by the application.
    // It is included above for reference purposes only.
    #include <SPA_Version.glsl>
    #include "user_basic_exercise_attributes.glsl"
    
    in Data { vertexData attributes; } DataIn;
    
    uniform vec4 tint_color;
    uniform sampler2D diffuse_texture;
    
    out vec4 fragColor;
    
    void main(void)
    {
       vec4 diffuse_color = texture( diffuse_texture, DataIn.attributes.texcoord );
       fragColor = diffuse_color * tint_color;
    }
    
  5. Save the changes to the fragment shader.

    Leave the fragment shader open in the text editor.

Rebuild The Document

  1. Return to the running Shader application.

    Your shader is going to turn black when you return to the application. Depending on the behavior of your graphics driver you may see other colors as well. This is because we have not yet set a value for uniform sampler2D diffuse_texture. We're going to rebuild the document, which will create the uniforms we declared so we can set their values.

  2. Select Graph » Build All from the main menu.

    The application rebuilds the document and displays build information in the output window.

    --- <Building Project 'D:\Release6\Content\Library\Shader\User Standard Pipeline\User Standard Pipeline.box'> ---
    
    Rebuilding Shader Resource Documents...
    
    Rebuild succeeded: D:\release6\content\library\shader\user basic exercise\460\user_basic_exercise_vertex_shader.glsl
    Rebuild succeeded: D:\release6\content\library\shader\user basic exercise\460\user_basic_exercise_fragment_shader.glsl
    
    Updating document contents...
    
    Adding to <SamplerPaletteNode> 'Samplers' <SamplerNode> 'uniform sampler2D diffuse_texture'
    
    Build completed.
    

Load A Texture From Disk

  1. Select Graph » State » Expand All Tree Items from the main menu.

    The graph looks like this. There is a new <SamplerNode> named uniform vec4 diffuse_texture that matches the declarations in the shader source code. In the image below, the new node is highlighted red for illustrative purposes (but it isn't highlighted in the document). Notice also that the node has a red underline. If you mouse over the node, you can see a tip with the error message.

    This is a picture of the graph.
  2. Right click over the <SamplerNode> named uniform sampler2D diffuse_texture and select Load Texture From Disk... from the listed options.

    This displays the file open dialog, which allows you to choose a 2D texture from the hard disk.

    This is a picture of the file open dialog.
  3. Type ipf_8888_argb.png and click Open or hit ENTER when you are finished.

Examine The Results

  1. Select Graph » State » Expand All Tree Items from the main menu.

    The software adds a <Texture> node to the document and connects the <SamplerNode> to the new texture.

    This is a picture of the graph.

    You can see the texture modified by the tint color. If you change the tint color uniform, then the results on screen will change.

    This is a picture of the desktop.
  2. Select File » Save from the main menu.

Explore Directory Structure

  1. Select Tools » Deselect All from the main menu.
  2. Select File » Open Containing Folder from the main menu.

    The software opens the directory containing your new shader document. Each of these folders contains the shader code for the correspoding GLSL version. In this example, we created a GLSL shader for the highest version on your machine. For example, the shader code we want to find is in the 460 folder or similar. You might not need all of these variations, and you can delete variations that you don't need. It's very useful to start off with working vertex and fragment shaders for all GLSL versions from 100 to 460.

    This is a picture of the directory that contains your new shader document.

    New documents that manage shader source code elements and document dependencies are added to this directory by the application from time-to-time.

  3. Double click the folder named 460. This is a picture of the directory that contains your new shader source code.
    File Description
    USER_BASIC_EXERCISE_ATTRIBUTES.GLSLA struct containing the vertex attributes layout for this document. This is an ASCII file that can be opened in any text editor.
    USER_BASIC_EXERCISE_FRAGMENT_SHADER.BOX.BLDThe fragment shader build file. A .BLD document contains nodes that represent GLSL items such as shader buffers and uniforms. This document is not created or managed by the user, but it can be opened with the Shader app and inspected.
    USER_BASIC_EXERCISE_FRAGMENT_SHADER.GLSLContains the fragment shader source code. This is an ASCII file that can be opened in any text editor.
    USER_BASIC_EXERCISE_VERTEX_SHADER.BOX.BLDThe vertex shader build file. A .BLD document contains nodes that represent GLSL items such as shader buffers and uniforms. This document is not created or managed by the user, but it can be opened with the Shader app and inspected.
    USER_BASIC_EXERCISE_VERTEX_SHADER.GLSLContains the vertex shader source code. This is an ASCII file that can be opened in any text editor.
  4. Close the Windows® Explorer window.

    This exercise is complete. Return to tutorials.