Custom Shading Model

This model allows the user to create and customize their own Shading Model. The specifications are given via configuration files in the Attributes:

• Vertex Shader

• Fragment Shader

• Uniforms

All these Attributes are described in greater detail below.

Attributes

Material

Material

This Attribute provides the Name of the Custom Material as well as the Shading model type. It also sets the Alpha value if it is toggled on.

The Alpha channel is additional to the RGB channels and adds a kind of transparency to the object by mixing the background and foreground colors. For example, if the Alpha value is set to 0.5, then this would result in a 50% mix of the object and its background, providing a semi-translucent quality.

Shaders

There are two types of shaders that can be used for this model: Vertex Shader and Fragment Shader.

Find below a detailed explanation of how to configure these shaders.

Shaders Configuration

Across the configuration of both, two uniform variables can be used:

• incTime: Float that keeps the time from the start of the application.

• incResolution: Vector2 containing the Screen resolution.

Vertex Shader

Vertex Shaders influence the rendering of the vertices of Objects.

The Vertex Shader is configured via an Asset with .vert extension. This Asset consists of code and can be edited in Incari with the Code Editor.

This is the code that is generated by default when creating a .vert Asset in the Asset Manager:

My Vertex Shader.vert

void mainPosition(in mat4 projectionMatrix, in mat4 modelMatrix, in vec3 viewPosition, in vec4 worldPosition)
{
    gl_Position = projectionMatrix * vec4(viewPosition, 1.0);
}

A vertex shader requires a main function named mainPosition, which is called once per vertex each time the Scene is rendered. This function receives as inputs:

• projectionMatrix: $4x4$ matrix that represents the perspective of the Camera.
• modelMatrix: $4x4$ matrix that represents where the vertex is.
• viewPosition: Vector3 that contains the relative position of the vertex.

• worldPosition: Vector4 that contains the absolute position of the vertex.

It is always necessary to calculate:

• gl_Position: Vector4 that contains the position of the vertex in clip space.

Fragment Shader

Fragment Shaders influence the rendering of each pixel of Objects.

The Fragment Shader is configured via an Asset with .frag extension. This Asset consists of code and can be edited in Incari with the Code Editor.

This is the code that is generated by default when creating a .frag Asset in the Asset Manager:

My Fragment Shader.frag

‌void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
 vec2 uv = (fragCoord * incResolution) / incResolution.xy;
 vec3 col = 0.5 + 0.5 * cos(incTime + uv.xyx + vec3(0, 2, 4));
 fragColor = vec4(col, 1.0);
}

A fragment shader requires a main function named mainImage, which is called once per pixel each time the Scene is rendered. The argument for this function is:

• fragCoord: Vector2 that contains the 2-dimensional coordinates of the pixel.

And the output is:

• fragColor: Vector4 that stores the color that the pixel will be set to.

The uv coordinates can be obtained by using:

vec2 uv = (fragCoord * incResolution) / incResolution.xy;

It is also possible to use shaders from ShaderToy. To do so, simply locate a shader which uses the GLSL_ES standards.

Once there, copy the code on the right-hand side of the page.

Example Shader from shadertoy.com.

Then paste that into a .frag file in Incari. It is imperative that one add #define USE_RESOLUTION_RANGE to the very beginning of the file (before all the code that has been pasted).

Fragment Shader Example.

This makes a shader from shadertoy.com useable in Incari. Now one just needs to add the file to a Custom Shading Model in the Fragment Shader section.

Uniforms

Incari makes it possible for the user to set values in Fragment and Vertex Shader files. This can also be done on runtime by using the Set Material Property Node.

Here, the user can set the values for several variables. These variables correspond to those present in the files given in the shaders. Please note that shaders should be conform to the GLSL_ES standards.

There are five types of variables:

• Channels
• Integers
• Floats
• Vectors
• Booleans

Please note that for the Uniforms to have any effect, the names in the files must match the Attribute names seen here in the Custom Shading Model.

Custom Shading Model Example.

Channels

These Attributes can take any file that is an image or texture map. With these, it is possible to add other textures and/or visual components to the already existing Custom Material. It is possible to set up to four of these currently in Incari.

For example, the user could switch between two texture maps. After setting textures for iChannel1 and iChannel2, the code for the Fragment Shader could use these in an if/else statement:

if( iBool0 ) {
fragColor = texture( iChannel1 , uv );
}
else
{
fragColor = texture( iChannel2 , uv );
}

Integers

These Attributes set the values for Ints. This can be used to set the x, y, z , and/or w values for a Vector4 in the code for the Fragment Shader, for example. It is possible to set up to four of these currently in Incari.

Floats

These Attributes set the values for Floats. This can be used to multiply the time variable present in the code for the Fragment Shader by some Float during runtime, for example. It is possible to set up to four of these currently in Incari.

Vectors

These Attributes set the values for Vector4s. This can be used to set certain RGB values, for example. The first value corresponds to the red value, the second for green, the third for blue, and the fourth for the alpha overchannel. It is possible to set up to four of these currently in Incari.

Booleans

These Attributes set the true or false values for Bools. This can be used to execute a certain condition in the code for the Fragment Shader, for example. It is possible to set up to four of these currently in Incari.

Property Names

It is possible to hover over each Attribute and access their property names to be used in code or Nodes. A complete list of these names is as follows:

• iChannel0

• iChannel1

• iChannel2

• iChannel3

• iInt0

• iInt1

• iInt2

• iInt3

• iFloat0

• iFloat1

• iFloat2

• iFloat3

• iVec40

• iVec41

• iVec42

• iVec43

• iBool0

• iBool1

• iBool2

• iBool3

External Links

• Vertex Shader on OpenGL Wiki.
• Vertex Shader on GPU Shader Tutorial.
• Fragment Shader on OpenGL Wiki.
• Fragment Shader on GPU Shader Tutorial.
• Shaders in Learn OpenGL.