Overview

If you've ever used Unity's Shader Graph or Unreal's Material Graph, you're already familiar with the general idea of the Image Pipeline. In essence, when importing an image from KKL, it will run through a pipeline or series of steps that manipulate it before finally being saved to disk as an image file. By default, the pipeline is extremely simple (load an image from a KKL code -> save it to disk), but you can program your own custom pipelines using the Pipeline Editor.
Accessing Pipelines
Pipelines are a feature limited to the Pose Matrix. Pipelines can be linked to either an entire row (i.e. a clothing stage) or an individual cell (i.e. a pose in a stage). Only one pipeline can be set for a pose. If one exists for both a cell and its row, the pipeline on the cell will be used. To create a pipeline, either click the dedicated "Edit Pipeline" button in the Pose Matrix screen, fill in a name and click create, or select the row or cell you wish to assign the pipeline to and use the Edit button in the edit form.
The Edit Pipeline button
Pipeline Assigment Field for a pose or stage
Basics
A pipeline consists of a series of nodes connected to each other via their inputs and outputs. All pipelines contain a Result node, which is the node that produces the final image. Let's take an example pipeline and break it down:
Here we have 4 nodes:
- A Cell node pulls an image from KKL using the code of the current cell in the pose matrix. It feeds this image into the "base" input of a Blend node, and a "key" into a Cell Reference node.
- A Cell Reference node is a reference to another cell in the Pose Matrix and imports that cell's KKL code. This node is pulling a version of the pose with no T-shirt. The imported image is fed into the "blend" input of the Blend node.
- The blend node takes the two imported images, one with a shirt and one without, and blends them together. The strength is at 50%, so the resulting image is a 50-50 blend of the two input images to produce a transparent T-shirt. This is passed to the Result node.
- The Result node is the end of the pipeline. Whatever is passed into this is what will be saved for the cell's pose.
Working with the UI
- The toolbar at the top of the editor allows you to add or remove nodes from your graph.
- To move nodes around, grab and drag them by their title. To connect nodes together, click on an output circle of one node and drag a wire onto the input port of another node. You can connect a single output to multiple inputs.
- Double-click a node's title to display that node in the full-size preview pane on the right.
- The Delete key will delete the currently selected node, just as the Delete button in the toolbar.
This UI is not robust as professional shader editors, so you may have to reposition nodes a lot to make it clear what is connected to what.
Node Types
What follows is a description of each node type available and how it works.
Apply Mask
Draws only the pixels of the source image that are part of the mask.Inputs
- Source: A source image
- Mask: Mask to apply
Outputs
- Out: The resulting image
Properties
- Use Alpha: If true, uses alpha values for the mask. If false, uses the max of the RGB channels.
- Clamp: See the Clamp property for Blend nodes
- Offset: See the Offset property for Blend nodes
Brightness/Contrast
Adjusts an image's brightness and/or contrast.Inputs
- In: The image to adjust
Outputs
- Out: The resulting image
Properties
- Brightness: Amount to change the brightness.
- Contrast: Amount to change the contrast.
Cell
A pipeline is run for each cell in the Pose Matrix. The Cell node is for obtaining a reference to the image produced by that cell's code. If your pipeline is linked to an entire stage, it will run once for each pose in that stage, so if you have three columns: calm, happy, and sad, the pipeline will run 3 times. The Cell node will provide the calm pose for the first run, the happy pose for the second, and the sad pose for the third.Inputs
- None
Outputs
- Image: The image for the cell as it would be produced from the Import button in the Pose Matrix if no pipeline were attached. In other words, the unprocessed image from KKL.
- Key: The key (pose name) of the cell the pipeline is running on. For example, if the happy pose is being processed, this will output "happy." This output is used with Cell Reference nodes to link them to the correct pose in a stage.
Properties
- None
Cell Reference
Whereas a Cell node refers to the Pose Matrix cell currently being processed, a Cell Reference node refers to a node elsewhere in the matrix (including another sheet).Inputs
- Key: If this is not provided, the Cell Reference will always refer to the one that was selected in the Source. For pipelines that run on an entire range of poses, this is not typically ideal, because if your stage has calm, happy, and sad poses, and you set the Cell Reference to stage 5's Calm pose, then when processing the Happy and Sad poses, this would still pull in the Calm pose. When the cell's key is provided, however, the reference will update itself to the corresponding pose for its stage. So when processing the Happy pose, it would use stage 5's Happy pose.
- Row: An override to which row in the sheet to read from. Useful for combining with pipeline parameters for altering which pose to draw from.
Outputs
- Image: The cell's image imported from KKL.
Properties
- Source: Which cell to import. Clicking the ... will bring up the pose matrix where you can select the cell you wish to reference. As described in the Key input, when a Key is provided it will refer to the corresponding pose for the selected row, so it does not matter which pose in that row you select.
Blend
SummaryInputs
- Base Image: The image you wish to apply blending to
- Blend Image: The image you with to blend into the base image
Outputs
- Image: The blended image
Properties
-
Mode: What type of blending to perform:
- Normal: Each pixel's RGBA values are averaged together. This is commonly used to produce transparency effects as it will not affect pixels that are identical between the two images.
- Multiply: The base pixel's RGBA are multiplied by the corresponding values in the blend image. This can be useful for tinting by using a grayscale base image and a colored blend image.
- Screen: Similar to the Screen blend found in most imaging applications.
- Additive: Adds pixels from the images together, lightening the image.
- Difference: Takes the absolute value of the difference between pixels, darkening the image.
- Lighten: Keeps the lighter pixel among the base and blend images.
- Darken: Keeps the darker pixel among the base and blend images.
- Extract: Throws away (adds full transparency to) any pixels that are identical between the base and blend, keeping the pixels of the blend image where different. This is useful for creating an image mask. For instance, taking two identical poses where the base is nude and the blend has a shirt, this will produce an image containing only the shirt. Functionally similar to an XOR operation.
- Overlay: Draws the blend image on top of the base image.
- EqualTo: Performs a pixel-wise AND of the images, discarding any pixels that do not match between the two images. The blend amount controls how close a pixel must be to be considered a match.
- Strength: A value from 0-100% for how much to blend the images. 0% means to use the base image while 100% means to use the blend image.
-
Clamp: When the blend image does not have the same dimensions as the base image, this determines what to do with pixels that are out of bounds on the blend image.
- Clamp: Any pixels out of bounds will be treated as transparent.
- Repeat: If the blend image is 10 pixels wide, then X: 11 will use the pixel 1 on the blend image. Creates a tiling effect.
- Mirror: Similar to Repeat, except every other tile is flipped. For instance, X: 2 and X: 22 will use X: 2, but X: 12 and X: 32 will use X: 10 - 2 = 8.
- Offset: When the blend image does not have the same dimensions as the base image, this determines how much to offset the blend image when applying it to the base.
Branch
Selects between True and False inputs based on a Predicate.Inputs
- Predicate: Determines which input to return. Pass Text/Parameter "true", "t", or "1" to return True, false otherwise.
- True: Image to return when true.
- False: Image to return when false.
Outputs
- Out: Output value.
Properties
- None
Channel Mixer
Controls how much of the RGB channels to include in the output. For example, to extract only the blue from an image.Inputs
- Image: The image to manipulate.
Outputs
- Image: The resulting image.
Properties
- R: How much of the red channel to include.
- G: How much of the green channel to include.
- B: How much of the blue channel to include.
Color
Emits a color valueInputs
- None
Outputs
- Color: The chosen color
Properties
- Value: The color to send to the output
Color Mask
Creates a mask from values in input In enqual to input Mask Color.Inputs
- In: An image
- Mask Color: A color to compare the pixels in the In image to for determining if they should be included in the mask
- Range: Select colors within this range from input Mask Color
- Fuzziness: Creates a softer selection mask
Outputs
- Out: The resulting mask
Properties
Cookie Cutter
Compares two images and either keep the similar pixels or discards themInputs
- Source: A source image
- Compare: Image to compare the source to
- Range: Controls how close pixels must be to be considered similar.
Outputs
- Value: The resulting image
Properties
- Keep: Which pixels to keep: either same (similar) pixels or the inverse.
- Clamp: See the Clamp property for Blend nodes
- Offset: See the Offset property for Blend nodes
Decimal
Emits a constant floating point valueInputs
- None
Outputs
- Value: The chosen number
Properties
- Value: The number to send to the output
Desaturate
Desaturates (removes the color) from an image.Inputs
- Source:The image to desaturate
Outputs
- Image: The desaturated image
Properties
- Amount: How much to desaturate the input by, where 0% is not at all and 100% is fully desaturated.
Image
Obtains an image from a file path (as opposed to a KKL code).Inputs
- None
Outputs
- Image: The image
Properties
- Source: The file path to the image.
Integer
Emits a constant integer between 0-255Inputs
- None
Outputs
- Value: The chosen number
Properties
- Value: The number from 0 to 255 to send to the output
Invert Colors
Inverts the colors of the input on a per channel basis.Inputs
- Image: The image to invert
Outputs
- Image: The resultant image.
Properties
- Red: Whether to invert the red channel.
- Green: Whether to invert the green channel.
- Blue: Whether to invert the blue channel.
- Alpha: Whether to invert the alpha channel.
Note
For internal comments and annotation.Inputs
- None
Outputs
- None
Properties
- Note: A comment
Parameter
Outputs a parameter from the parameter list for the current cell or stage being processed.Inputs
- None
Outputs
- Out: The text at that parameter index
Properties
- #: The index of the parameter to output.
Pipeline
Runs an image through another pipelineInputs
- In: An input image which will be used as the image for the Cell node of the sub-pipeline.
- Key: An override to what the Cell node of the sub-pipeline outputs for its "key" output.
Outputs
- Out: The result of the processing the sub-pipeline
Properties
- Pipeline: The name of the pipeline to execute. This must be another pipeline on this character's pose matrix and cannot create a cycle between pipelines.
Replace Color
Replaces colors that fall within a range with another color.Inputs
- In: An image
- From Color: The color to check for replacement
- To Color: The color to replace
- Range: Select colors within this range from input From Color
- Fuzziness: Creates a softer selection mask
Outputs
- Out: The resulting mask
Properties
Result
Node whose only purpose is to indicate the final result of the pipeline. You cannot delete this node nor add more than one.Inputs
- Image: The image to generate.
Outputs
- None. The passed in image is implied to be the pipeline's output.
Properties
- None
Slider
Emits a constant value between 0-1Inputs
- None
Outputs
- Value: The chosen number
Properties
- Value: The number from 0 to 1 to send to the output
Splitter
Splits the RGBA channels of an image into their numeric values which can be provided to an numeric input such as the Amount input of a Blend node.Inputs
- Image: The image to split.
Outputs
- R: The red value from 0-1
- G: The green value from 0-1
- B: The blue value from 0-1
- A: The alpha value from 0-1
Properties
Swizzle
Creates a color by flipping around channels of other colorsInputs
- Image: The image to modify
Outputs
- Image: The resultant image.
Properties
- Red: Whether to invert the red channel.
- Green: Whether to invert the green channel.
- Blue: Whether to invert the blue channel.
- Alpha: Whether to invert the alpha channel.
Text
Emits a constant text string.Inputs
- None
Outputs
- Value: The chosen string of text
Properties
- Value: The text to send to the output
Threshold
Converts pixels to grayscale, then compares them to a threshold value. If the value is beneath the threshold, the pixel is turned off. Otherwise it's turned on.Inputs
- Src: The image to modify
- Threshold: A value from 0-1.
Outputs
- Out: The resultant image.
Properties
- Use Alpha: If enabled, then pixels above the threshold are turned transparent instead of white.