Emil Lehtola
Tools & Engine Programmer
Shader Graph Node Editor
with real time shader compile using ImNodes & DX11
Premise
I wanted to create a tool that would enable our procedural artists to create cool shaders inside Arinn Engines Editor. This would reduce the amount of external tools needed aswell as bring the Editor to a more complete state.
Pipeline Implementation
The ​shader graph generates a string that is written in HLSL. It takes that string and turns it into a DX11 shader that is then stored in a map under a key value. I used a custom built editor to assign the shader to my models that is later rendered into either a Deferred or Forward renderpass depending on if the shader is transparent or opaque.
How it Works
The shader editor consists of three main components.
-
The Node Graph
-
The Parser
-
The Builder
The Node Graph:
The node graph is a visual representation of collection of nodes that are linked together to define how the code is run. It reads the data by starting of from a defined start or a root node and then keeps the flow going by reading from its connections.
​
I used this technique for two reasons. The first reason was to make the tool as intuative and easy to understand for none programmers.
It was important to me to make it as easy to understand as possible without having to explain in detail on how the tool worked. The second reason why I chose the graph was to be able to define what data types would be able to connect to eachother (float to float etc.).
​
The Parser:
Parsing is the process of breaking down data into interpretable information using predefined rules. The parser I wrote for the shader tool checks the variables received from the shader graph and converts them into a list of strings that are HLSL versions of the variables.
​
In my opinion, this was the hardest component to implement since it required defining how to read variables and organizing them into a structured list. To ensure the shader code generated by the shader editor is as optimized as possible, I also made variables reusable. This means that if a variable is referenced multiple times, it will call upon the existing instance instead of creating a new one, reducing redundancy and improving overall performance.
The Builder:
The builder is what I call the component that builds the HLSL string and compiles it to a pixel shader. It takes the list of variables from the parser and combines it with a premade shader function to define the shader. The builder then takes the string and uses DX11 to create a ID3DBlob that is then converted to a pixel shader.
Summary:
By turning code from a node graph into a string using a parsing method, I generate variables that is later put into a premade HLSL string structure. The string is used to generate a blobshader that is turned into the pixel shader.
​
Results:
The tool was a great success and used in game projects at TGA as an external tool for our custom engine Arinn Engine. I worked with talented people who tested the tool and here is a little gallery of some of the things we created, enjoy!
Gallery
Some shaders by me!
