Shader Editor

From C4 Engine Wiki

(Redirected from Using the Shader Editor)
Jump to: navigation, search

There are two ways to create materials in the C4 Engine. The first method is to simply configure a set of predefined settings in the Material Manager. This is the easiest and fastest way to create a new material, and most ordinary materials can be made using only those settings. A more advanced method is to use the Shader Editor to define the exact calculations used by the engine to render a material. The Shader Editor provides you with the power to create a limitless variety of materials within the context of a graphical interface.


Contents

Opening the Shader Editor

Figure 1. The Shader Editor window.
Figure 1. The Shader Editor window.
The image to the right shows the Shader Editor. The Shader Editor is opened by selecting a material in the Material Manager and clicking the Edit Shader button. If the selected material already had conventional attributes assigned to it through the settings in the Material Manager, then the Shader Editor will initially show a translation of those attributes into the shader graphs used to render the ambient and light passes. If the selected material was empty (because no settings had been specified for it yet), then the Shader Editor will initially show default graphs with a minimal number of nodes.


Shader Graphs

A shader is represented in the Shader Editor by what is known as a data flow graph. The nodes in this graph are called processes, and the edges in this graph are called routes. A shader is a special type of graph called a directed acyclic graph, or DAG, meaning that data flows in a specific direction from one process to another and there are no loops.

There are two separate graphs shown in the Shader Editor, one used in the ambient pass and one used in all light passes. You can switch between them by clicking the tabs at the top of the editor or by using the Ctrl-1 and Ctrl-2 shortcuts (Cmd-1 and Cmd-2 on the Mac).

Each box in the shader graph represents a single process. A process can be a simple mathematical operation, a constant input value such as a color, an interpolated value such as the direction to the light source, or a more complex operation defined by the engine such as a parallax offset calculation.

A route is a directed edge shown as a curve with an arrowhead at one end, and it represents the flow of data from one process to another. Routes begin at a process and end at a port. Every process has between zero and four ports, and each can be occupied by only one incoming route at a time. Ports with a plain background are required, and ports with a striped background are optional. All required ports must have an incoming route attached to them in order for the shader to be valid.


Editing a Shader

The tabbed lists on the left side of the Shader Editor show the processes which are available for use in a shader. They are divided into four categories which are described in more detail below: basic, math, complex, and interpolants. A new process is added to a shader by selecting it in the list and then clicking in the viewport. The editor won't let you place two processes on top of each other, and the cursor will change to indicate where it's possible to place a new process.

Routes are added to a shader by using the Draw Fiber tool at the bottom of the editor window. When that tool is selected, clicking in one process and dragging to a port on another process will cause a new route to be created beginning at the first process and ending at the second process's input port. If a port is already occupied by another route, then the editor will not let you connect a new route to that port. The existing route must first be deleted. Also, you cannot connect a route from one process to a port belonging to any other process preceding that process in the graph because it would create a cycle.

The physical position of a process in the viewport is irrelevant. The data flow structure of a shader is determined entirely by the route connections. Processes may be placed in any convenient location.


Processes

A process takes between zero and four inputs and produces a single output. The output may be sent to any number of input ports for other processes.

For many types of processes, the process box shown in the Shader Editor displays additional information. For example, the Texture Map process shows a small image of the texture map, and the Constant Vector process shows the four constant values that it outputs. Most mathematical operations display a mathematical expression showing exactly how their input values are used to calculate an output value.

Double-clicking on a process, or selecting a process and typing Ctrl-I, opens the Process Info window for that process. In the Process Info window, every process has a comment field that let's you specify some text that is displayed at the bottom of the process box in the Shader Editor. Some processes also have extra settings that appear in the Process Info window.

Each type of process available for use in a shader is described individually on the following pages (corresponding to the groups displayed in the Shader Editor):


Routes

The routes in a shader graph carry data from one process to another. Each route can carry between one and four floating-point values—the actual number is determined by the output size of the route's head node.

A swizzle and negation may be applied to a route. These can be set by double-clicking on a route or by selecting a route and typing Ctrl-I (Cmd-I on the Mac). By default, the swizzle for a route is xyzw, meaning that there is no change to the order of the components. If any other swizzle is specified, or the values are negated, then that information is displayed in a small box at the center of the path representing the route. The swizzle may be specified using any letters from the sets xyzw, rgba, or stpq. Specifying only a single letter is shorthand for the same letter repeated four times. For example, the swizzle z is equivalent to the swizzle zzzz.

If a route carries fewer than four components, then each component specified in its swizzle is clamped to the last available component. For example, if a route carries only three components, then any w, a, or q in the swizzle ultimately interpreted as the third component of the data carried by the route. The swizzle wxyz would really mean zxyz. This is particularly important in the case that two routes of different sizes are used as inputs to a binary operation. The operation is performed using the number of components for larger of the two routes, so the missing components of the smaller route are taken from the components specified by the clamped swizzle.


Shader Editor Tools

There are six tool buttons at the bottom of the Shader Editor window, and they have the following uses. In addition to clicking on the tool button, each of these tools can also be selected by pressing the shortcut number key as shown in the table. (The shortcuts were chosen to be the same as the corresponding tools in the World Editor.)

Icon

Shortcut

Function

Image:tool_select.png

1

Select. Selects a process or route in a shader. Clicking and dragging will create a box that selects all of the processes inside it.

Image:tool_move.png

2

Move. Selects and moves processes around in a shader. When processes are moved, they are automatically prevented from moving on top of other processes. Clicking outside of a process and dragging will create a box that selects all of the processes inside it.

Image:tool_scroll.png

6

Scroll. Scrolls the shader viewport. Holding the Alt key (Option on the Mac) with any other tool temporarily selects the scroll tool.

Image:tool_zoom.png

7

Zoom. Changes the scale of the shader viewport. Using the mouse wheel with any other tool also zooms.

Image:tool_fiber.png

9

Draw Route. Connects two processes with a route by clicking in one process and dragging to a port belonging to the other.

Image:tool_section.png


Draw Section. Draws a rectangular box with a title bar behind all processes in the graph. This can be used to visually organize groups of processes in a shader.


Output Processes

Each shader graph contains a set of output processes that represent the final values produced by the shader. These are colored green in the shader editor, they cannot be deleted, and they can have no output routes. Both the ambient shader and the light shader contain an output process called “Lighting Output”, and this is the only output process that has a required input port. All other output processes have only optional input ports and are ignored if they are not used.

Ambient Pass

The ambient shader has 8 output processes, described in the following table.

Process

Description

Lighting Output

Image:sh_ambientoutput.png

Inputs: RGB color RGB (required), Normal N (optional)

Output: None

This is the primary output process for the ambient shader. The color sent to this output process is combined with the ambient lighting environment to produce the final ambient light reflection for a material. The normal vector N is currently unused, but will be important in future ambient lighting models.

Alpha Output

Image:sh_alphaoutput.png

Inputs: Scalar A (optional)

Output: None

If a material is transparent, then the alpha value sent to this output process controls the transparency. This is currently useful only for objects rendered in the effect pass. If the Glow Output process is used, then the Alpha Output process is ignored.

Alpha Test Output

Image:sh_alphatestoutput.png

Inputs: Scalar A (optional)

Output: None

If a material uses the alpha test, then the value sent to this output process is the value which is tested. The material must have the alpha test flag set in the Material Manager for this output process to be used.

Emission Output

Image:sh_emissionoutput.png

Inputs: RGB color RGB (optional)

Output: None

The color sent to this output process is added to the final ambient color as an emission term.

Glow Output

Image:sh_glowoutput.png

Inputs: Scalar A (optional)

Output: None

If a material uses emission glow, then the value sent to this output process determines the glow intensity. The material must have the emission glow flag set in the Material Manager for this output process to be used. If the alpha test flag is set, then the Glow Output process is ignored.

Reflection Output

Image:sh_reflectionoutput.png

Inputs: RGB color RGB (optional), Tangent-space normal vector N (optional)

Output: None

If this output process has an input, then a sample from the reflection buffer is multiplied by the input color and added to the final ambient color. A tangent-space normal vector may be sent to the N input port in order to create a bumpy appearance for the reflection. Normal incidence reflectivity and bump offset scale settings can be configured in the Process Info window.

Refraction Output

Image:sh_refractionoutput.png

Inputs: RGB color RGB (optional), Tangent-space normal vector N (optional)

Output: None

If this output process has an input, then a sample from the refraction buffer is multiplied by the input color and added to the final ambient color. A tangent-space normal vector may be sent to the N input port in order to create a bumpy appearance for the refraction. The bump offset scale setting can be configured in the Process Info window.

Environment Output

Image:sh_environmentoutput.png

Inputs: RGB color RGB (optional), Tangent-space normal vector N (optional)

Output: None

If this output process has an input, then a sample from the environment map is multiplied by the input color and added to the final ambient color. A tangent-space normal vector may be sent to the N input port in order to create a bumpy appearance for the environment map. An override environment map can be specified in the Process Info window.

Impostor Depth Output

Image:sh_impostordepthoutput.png

Inputs: RGBA color SHAD (optional)

Output: None

In an impostor shader, the output of an Impostor Texture process sampling the impostor's shadow map should be sent to the SHAD port of this process.


Light Pass

The light shader has 3 output processes, described in the following table.

Process

Description

Lighting Output

Image:sh_lightingoutput.png

Inputs: RGB color RGB (required), Impostor depth Z (optional)

Output: None

This is the primary output process for the light shader. The color sent to this output process is combined with the color from a light source to produce the final light reflection for a material.

In an impostor shader, the alpha channel of the output of the Impostor Normal process should be sent to the Z input port to provide the impostor depth.

Alpha Test Output

Image:sh_alphatestoutput.png

Inputs: Scalar A (optional)

Output: None

If a material uses the alpha test, then the value sent to this output process is the value which is tested. The material must have the alpha test flag set in the Material Manager for this output process to be used. If the specular bloom flag is set, then the Alpha Test Output process is ignored.

Bloom Output

Image:sh_bloomoutput.png

Inputs: Scalar A (optional)

Output: None

If a material uses specular bloom, then the value sent to this output process determines the bloom intensity. The material must have the specular bloom flag set in the Material Manager for this output process to be used.


See Also

Personal tools