• Custom Shader Development
  • Developer Articles / Advanced

    Custom Shader Development


    In addition to the materials shipped with the product, EON Professional also supports the use of custom shaders. This allows the content developer with sufficient technical knowledge of shader programming to develop their own shader materials and use them anywhere in the scene where a material is expected. This is a very powerful tool, and can be employed to create unique style for your production or solve tricky rendering challenges which otherwise would be impossible to do with built-in standard materials. Also, custom shaders can be used as a method to increase rendering performance, since you can trim the shader to exactly suit the need of the application, and nothing more. This article will show you how you can create a simple custom shader and display it in EON Professional.


    • EON Professional 9.17 or later
    • Basic programming concepts
    • Basic math concepts


    Vertex shader
    What you can do with the vertex shader:
    • Transform incoming vertex into clip space (minimum requirement)
    • Do transformations of other vertex attributes:
      • Normals
      • Texture coordinates
      • Bone and skinning
    • Apply math operations to the vertex data, to animate or distort the mesh
    • On newer GPUs, you can also do texture lookup
    Fragment/pixel shader
    What you can do with a fragment/pixel shader:
    • Set color of the pixel (minimum requirement)
    • Additionally, you can also:
      • Discard a fragment (so you can create holes in the rendered surface)
      • Lookup multiple textures and combine them arbitrarily
      • Do math calculations
    Shader language
    A shader must be programmed in a specific language, since it’s like a mini software program. There are several languages in use, and their are tightly coupled with the rendering API (OpenGL or Direct3D) and platform (Windows desktop or mobile). Here is how you should choose which language to use:
    • Android, iOS: GLSL ES
    • Windows desktop OpenGL mode: GLSL
    • Windows desktop Direct3D mode1: HLSL
    • Windows Universal Platform2: HLSL


    Data that are coming from the mesh, such as vertex position, normal, texture coordinates etc. are called attributes. They are fed into the vertex shader.


    These are parameters for the shader and they are exposed as fields on EON shader node, so they can be set and then transferred to the shader during rendering.

    Varying data

    To transfer data between vertex and fragment shader, you will use the varying data. The GPU will interpolate the value set between two vertices for you, and then feed in the interpolated value to the fragment shader. Here is an example of how the different parts looks like in a typical shader:

    In/out (GLES 3.0)

    In GLES 3.0 attribute and varying has been replaced by in and out. As a rule of thumb, everything that is going into the shader should have the in keyword instead and things that are going out of the shader should have the out keyword instead. Uniforms stay the same however. So, in the example below, “attribute” has been changed to “in” since that is data coming into the shader, while “varying” has changed to “out” since that is data going to the fragment shader. The fragment shader must then have a “in vec3 viewDirection;” as well since it is data coming into the fragment shader. There are also a few other changes in GLES 3.0 compared to previous versions, which you can read more about here: http://www.shaderific.com/blog/2014/3/13/tutorial-how-to-update-a-shader-for-opengl-es-30   

    How to create a custom shader

    The following tutorial shows you how to add a simple custom shader in GLSL language. Note: if you want to run this on mobile platforms, you need to turn it into GLSL ES which usually entails at least adding the a precision specifier at the beginning of each shader (precision mediump float):
    1. Insert a GLSLMaterial into the simulation tree.
    2. Open a text editor of your choice and put in the following text in a filed named vertexshader.glsl: uniform mat4 worldViewProjection; attribute vec4 position; attribute vec4 uv0; varying vec2 diffuseUVs; void main(void) { gl_Position = worldViewProjection * position; diffuseUVs = uv0.xy; }
    3. Create another file with the following content and name it fragmentshader.glsl: uniform sampler2D Layer1; uniform sampler2D Layer2; uniform float BlendRatio; varying vec2 diffuseUVs; void main(void) { // sample texture color from Layer 1 vec4 color1 = texture( Layer1, diffuseUVs); // sample texture color layer 2 vec4 color2 = texture( Layer2, diffuseUVs); // combine (blend) the colors together, with the blend ratio vec4 blendedColor = color1 * BlendRatio + color2 * (1-BlendRatio); // return the final computed color gl_FragColor = blendedColor; }
    4. Set the VertexShader and FragmentShader fields on the GLSLMaterial node to point to the vertextshader.glsl respective fragmentshader.glsl file.
    5. Press the UpdateFields on the GLSLMaterial node to parse the shaders and populate the node with fields defined in the shaders (Layer1, Layer2 and BlendRatio should appear as new fields after this).
    6. Assign the material node to an object with UVs.
    7. Assign a different texture to Layer1 and Layer2 respectively.
    8. Set BlendRatio to 0.5.
    9. Start the simulation, and you should see the object being shaded with a blend of the two textures you have chosen in step 7.
    10. Try to change the value in BlendRatio between 0-1, and you could decide how much to show from each texture, in real-time in the 3D window.

    More details on the shaders used

    The vertex shader contains the minimal set of code needed to transform the vertices of the model from model space to the 3D window (projection space). It also transfers the UVs from uv channel 0 to the fragment shader, but putting them into the varying data output fields. These will be automatically interpolated as stated above. The fragment shader declares several uniforms at the beginning. These will be exposed as fields on the node. Next, it declares that it wants to receive the varying output being sent over by the vertex shader (diffuseUVs). We use these (interpolated) UVs to lookup two textures, and then mix the values together with the specified ratio. At last, we output the color to the screen, by setting it on the variable gl_FragColor.

    Common Issues

    The material is bright pink
    This means that one or both of the shaders did not compile due to syntax errors. These errors can often be found by looking at the EON Studio log or the mobile log when the simulation starts, or by using the Reference Compiler (see below).
    The material looks fine on PC but has visual artifacts on mobile
    If the shader compiles on both platforms but the material looks flickery or have vertexes move in unexpected ways this can often be caused by precision problems. Try changing “precision mediump float” to “precision highp float” in your shader code.

    Using the Reference Compiler

    It is possible to validate the syntax of your shaders even before opening EON Studio by using the GLES Reference Compiler: Glslang. This can be used to make the shader development process faster, as well as find issues that might not be apparent on a desktop PC but shows up on mobile.
    Installation instructions
    • Visit the website https://www.khronos.org/opengles/sdk/tools/Reference-Compiler/ to download the binaries as well as get general information about usage.
    • Glslang is a simple .exe file called glslangValidator.exe, that should be invoked from a command line.
    • (Optional) For ease of use you can add the directory of the glslangValidator.exe to the system path by pressing Windows + Pause, selecting Advanced system settings -> Environment Variables… and then adding the directory of the GlslangValidator to the PATH variable. Then it is possible to invoke the validator from anywhere by simply writing glslangvalidator in a command prompt followed by the desired options.
    Usage examples
    This example assumes the following: The glslangValidator is located at C:\GlslangValidator\glslangValidator.exe. The shaders are located at C:\EON\shaders and are called fragmentshader.frag and vertexshader.vert.
    • Open a command window at the shaders directory
      • Press the Windows key, type cmd and press enter
      • Write cd C:\EON\shaders and press enter
      • Shift + Rightclick in the shaders directory and select Open Command Window Here
    • Just writing C:\GlslangValidator\glslangValidator.exe and pressing enter will give you a help text on how to use the tool.
    • Writing C:\GlslangValidator\glslangValidator.exe vertexshader.vert will try to compile the vertex shader and show you any errors if there are any, or nothing if it succeeds. The fragment shader can be compiled in the same way.
    • Sometimes both fragment shader and vertex shader will compile without any issue but it still won’t work. Then it might be a problem with linking the two shaders together. To also test the linking step between two shaders you can write C:\GlslangValidator\glslangValidator.exe -l vertexshader.vert fragmentshader.frag
    Note: In EON the most common shader suffix is simply .glsl for both fragment and vertex shaders, but the glslangValidator wants the shaders to have .frag or .vert suffixes. While changing the suffix back and forth is typically no problem, EON Studio can also handle both types of suffixes if you don’t want to do that.  

    What’s next

    If you want to learn more about how to create your custom shaders, please consult the following guides and reference materials.
    1 Even though internally EON uses HLSL shaders for these platforms, it is currently not possible to create custom shaders using this language.
    Copyright 2017 EON Reality Inc. | All Rights Reserved

    Log in with your credentials


    Forgot your details?

    Create Account

    Skip to toolbar