Introduction to Shader Editing

From C4 Engine Wiki

Before we start, you should be familiar with the C4 material manager. Then, you should read the official article about the Shader Editor to learn how to edit a shader.

When you want to create a new material, you should consider if you need to edit the shader graphs or not. In many cases a standard material configuration could be enough without the editing. Be aware that once a material is converted into a set of shader graphs, the standard material attributes cannot be recovered. The last chance to keep the standard attributes is clicking in the 'Cancel' button in the shader editor the first time it's opened. To avoid an accidental loss of a material in standard form, remember that you can duplicate or export it.

With the shader editor, we can make new materials from scratch, but this is an advanced operation. A quick way to see how the shader editor works is creating different materials and then taking a look at them in the shader editor. Then you can add complexity to the materials and follow how the shader changes. Once the shader editor is well understood, you decide if you want to create a standard material configuration and edit the shader, or start from scratch.

Things to consider:

• Shader operations affect all vertices. The shader system looks at each vertex, gets its information, does the operations, and shows the new look for that vertex. Read the first paragraph of the interpolant processes. Though, for a correct technical approximation, at the end, all shading happens per pixel rather than per vertex.
• You cannot modify the vertex information. This means that you cannot modify, for example, any vertex position through the shader editor.
• You cannot make loops with the routes. Though the shader editor representation is similar to other user-friendly graphs (for example, the C4 scripting system) which does allow such loops (to connect the output to an input of the same process or any previous process in the same line), this shader system doesn't allow such connections (Shader Editor: Shader graphs).

You can download the files for this tutorial here and extract the files into C4 main directory. The path for the files is Data/Tutorial/intro2shaders/.

A First Look at Processes

The processes are the raw material for shader creation. Each process does an action. Basically, there are two types: Those which retrieve information and those which modify information.

If we analyze the process functionality, we can create a global functional scheme like this one:

This particular order doesn't mean that the processes should be in the same order. This scheme shows the information flow. So, in the 'Input information' box, there are those processes that retrieve and expose information to use in the shader (basic processes but not the merge 2D, 3D, and 4D processes, and interpolant processes). Notice that we can connect the shader with scripts through these three processes: Constant scalar, constant vector, and constant color, but it's optional. In the information processing box, there are those processes which allow us to make different operations with the input information (Merge 2D, 3D, and 4D processes at the end of the basic processes, math processes, and [[Complex Shader Processes|complex processes]). At the end, in the output information box, we have the output processes; they represent each material property.

As you can see in the above scheme, the output phase is divided into two parts: ambient pass and light pass. This means that you can make the object zone with light looks different that the shader zone without light, but you have to take into account that the ambient pass is added to the light pass.

0.5 + 0.5 = White?

The first thing that anyone can notice is that there are a lot of math processes. A good trick is trying to understand each material property (color, transparency, etc) as a value between 0 and 1, where 0 is a total lack and 1 is a total appearance of the property:

But where is the information processing there? Well, we can consider the connection between both processes through the route the simplest information processing.

And why the sphere is gray? Because it's showing the ambient light of the world, in this case, the infinite zone. Remember that the infinite zone node can only be seen in the scene graph viewport (Right-click in any viewport -> Scene graph -> double-click in the infinite zone node or Get info command -> Ambient light color).

A simple addition applied to the emission output.

A vector addition vs color addition applied to the emission output:

Note how the vector addition and color addition samples produce the same results. In fact, a constant color process is a constant vector process with four components: rgba (red, green, blue, and alpha), but in practice, it's easier to define a yellow color just picking it through the color bars, instead of defining the color through float values.

Another sample where you can see the relationship between colors and maths:

Note: In this sample the interpolant process texcoord is used because it's required by the texture map process.

For this sample we use a black and white texture, so it will be easier to understand the example. Each pixel of any image has a color, and we have seen that a color can be translated into a value. In the black and white texture used, the white pixels have a value of 1 and the black pixels have a value of 0. As you can see we have applied the invert process (1 − A). This process subtracts the input value from 1. If the value of the white pixels is 1, then 1 − 1 = 0, so now the new value for the white pixels is 0. And the same happens with the black pixels, 1 − 0 = 1, so now the value of the blacks pixels is 1:

This is the same result that you can achieve when you use the tool 'Invert' in any graphic application like Photoshop. The next sample shows the invert operation over a color texture map and applied to the emission output:

Actually, the operation performed is: (1 − r, 1 − g, 1 − b). In fact, the white color is (r,g,b) = (1, 1, 1). Notice that you can extract any of these components and make independent operations with each one of them. Read Shader Editor: Routes.

A Simple but Cool Effect: Ghost Effect

In this part we are going to see how to achieve the ghost or x-ray classic effect. It will help us to understand the interpolant process Tangent View Direction. But before, we are going to use another output process: the alpha output.

For this sample, we need to make a small change on the object properties. We have to tell the object that it needs to render in the effect pass (with the geometry selected->Ctrl-I shortcut or 'Menu node->Get Info..' or 'Right click mouse->Get Info..' ->Geometry pane).

More info about transparency alpha.

As you can see, the alpha output just accepts the alpha component of the constant color process. That's what the 'A' letter in its input means.

Now lets complicate a little bit the transparency sample: The tangent view direction process.

We have seen before an interpolant process: Texcoord. This process is required by texture maps and retrieves information about texture coordinates at each vertex. The tangent view direction process retrieves information too. In the next image we can see how it works:

For the correct result we need to extract the z information from the Tangent View Direction output 3D vector. Remember, double-click on the route and type 'z' (Shader Editor: Routes).

Talking about vertex normals, we can see them in the C4 model viewer (Data/Tutorial/model/Ball.mdl):

Just for clarification, the normals 'in the air' are the normals from the back-vertices.

Back to the Tangent View Direction process, the effect it produces is pretty interesting, but what we need is the inverted result. The ghost or x-ray effect makes the surfaces that are in parallel to the plane of view (the camera) more transparent and the surfaces that are in perpendicular less transparent. We have already seen before how to invert something:

To finish, with small additions, the ghost effect:

For more info about this effect you can see Building a Fresnel shader.

Note about the use of Alpha+Glow outputs: C4 doesn't mix alpha blending and glow. In that case, the glow has priority and is used as the transparency value, and the alpha output is ignored. Try to disconnect the route that feeds the alpha output and notice how the result doesn't change. You should take this into account if you want to use the glow output.

A little bit more advanced version to make an hologram:

Now you're ready for the Shader library. Have fun!