Shader Box

Shader Box is a tool that allows you to create modern HLSL shaders for the DirectX api, and is currently still a prototype. It supports the shader stages: Vertex, Hull, Domain, Geometry and Pixel.

The UI is written in WPF with C#, and the engine which powers the rendering of the 3D viewport is custom written in C++. The application makes use of the Model-View-ViewModel (MVVM) pattern. The parsing and lexing of HLSL code is done by an external C# library namely HLSL Tools.

A Visual Studio 2015 / 2017 extension that provides enhanced support for editing High Level Shading Language (HLSL) files.

HLSL Tools

The text editor that currently is being used is AvalonEdit.

AvalonEdit is an extensible Open-Source text editor with support for syntax highlighting and folding.


Several packages for styling and extra UI controls are being used: Extended WPF Toolkit, Modern UI for WPF (MUI), ModernUI.Xceed.Toolkit and Infragistics Themes For Microsoft Controls

The source code can be found at GitHub and you can read its documentation here.


  • Forward rendering
  • Post Processing
  • Vertex, Hull, Domain, Geometry and Pixel stages
  • Toplogies: Triangle List, Triangle List with Adjacency, Patch List with 3 control points
  • Cull modes: back, front and none
  • Fill modes: solid and wireframe
  • Include directives
  • Wavefront .obj models
  • Textures
  • Properties panel for tweaking shader parameters
  • Undo/Redo support
  • snorm and unorm support


When creating a new shader you can choose which type of shader you want to make, the passes it will need, the topology and set up the rasterizer. Afterwards Shader Box will initialize a new shader project with for each choosen pass a file. The user can always add extra header files which can be used locally so only the project can access it, or set it as a shared header so all the projects can include it. There is one built-in shared header which includes the samplerstates which the engine supports, two cbuffers one for the camera information which changes every frame and one for the per object information (currently only one object per scene). And a reserved slot for a texture, for when creating a post processing shader.

After writing your shader you can click compile or build. Compile will only compile the active shader pass and output the found errors, while build will compile the entire project to precompiled shader files and create a properties panel, for controlling the parameters. The look of the properties panel can be controlled by metadata, using the same syntax as in FX Composer. Finding all this information is done by calling the SyntaxFactory.ParseSyntaxTree(...) method of HLSL Tools on each pass seperatly while passing the shader content. Next Shader Box will go over each SyntaxTree and extract the necessary data for creating the properties, for each found cbuffer a byte array is created which stores the settings which needs to be passed to the GPU. Every variable gets a offset to where it value needs to be stored in the array, in conformance with the HLSL packing needs. Every time the user updates a variable this byte array, which is defined in C# goes thorugh a C++/CLI project to the C++ engine.


Working out an UI design document. Describing the future UI layout, taking into account al the planned and backlogged feautures and extensibility.

Adding Audio support, so you can feed an array filled up with data coming from a Fast Fourier Transform or Beat Detection algorithm to the shader.

Other still important missing features are:

  • Animation support
  • File formats which support animations
  • Deferred rendering
  • Supporting arrays
  • Supporting the row_major and column_major keywords
  • Feature to make scenes which contains multiple shader projects
  • Support for more topologies
  • Parsing of initial values for parameters
  • Blend states
  • And many more...