Menu Close


Description :

HLSL live player. Compile and play your HLSL shader automatically.

Features :

  • Easy to use, drag-drop your HLSL file to ShaderPiPFX and it’s ready to autoplay.
  • Error message, display syntax warnings and compile errors.
  • Compile HLSL to CSO with PDB and extras (needs change in the sourcecode FXApp::CompileShader).
  • DirectX 12 with HLSL Shader Model 6.4.

Open Source Project and download :

Blog :

I spent some good time developing shaders for the diverse camera filters in PhotoModeFX . While working with this shaders I noticied that while Unreal Engine 4 uses HLSL most of the shader documentation and samples online are GLSL.

GLSL and HLSL are very similar languages but there are still some differences that sometimes make porting the code not to be as easy as expected.

At the time I didn’t find any tool that allows me to code in HLSL and immediatly see the results. Since I was tinkering with UE4 C++ before, I tried to create the tool that I wanted, something that allowed me to code HLSL in any text editor and when saved the HLSL file the tool would auto compile the shader and display in real time, different from the demoscene shader live compos or the amazing ShaderToy where the editor is also the player, I wanted to leave the editor part to whatever software the dev choose and focus only on the shader compiler and player, I choose to create something like a TV Picture-In-Picture (that’s why the PiP in the name), an always-on-top borderless window that don’t occupy to much screen space with some easy-to-use controls to maximize or drag the window when necessary.

I started the project with DirectX11 and for some inexperienced dumb idea I selected the C++ Unicode Template, means that I spent more time fighting strings in Unicode and Win API than actually developing the project… Almost a week later, with an already working DX11 prototype, I learned that DirectX12 have an improved and easier to use HLSL compiler (via API instead of .EXE calls) and ShaderModel updates, so I throw everything away and started again from scratch this time in DX12. To my surprise the changes between DX11 and DX12 are massive, I had to learn and code a ton about pipeline, rootsignature, descriptors, etcs, it took me almost two weeks to get the prototype working in DX12. And of course, I’m still dumb and inexperienced, so I selected the C++ Unicode Template again and 70% of the dev time was wasted fighting unicode strings again.

I also utilized this project to learn more about DearImGui , it’s my second time using it and I really like the results, sometimes it isn’t documented or clear and every search online results in “is right there on the source code, just read”, so I read a lot of DearImGui source code to figure out how to make it work even if the DearImGui is already DX12 compatible doesn’t mean it plug-and-play into the DX12 pipeline easily. To be honest, it wasn’t necessary for this project since it uses only 1 textbox for the HLSL path and filename but since is a learning (C++, DirectX, Shaders) project why not learn even more stuff (+DearImGUI).

At the end I really enjoyed develop ShaderPiPFX , as soon the tool got ready and I shared the source at GitHub, I started to read and follow the incredible Book Of Shaders doing each lesson in HLSL, live playing the shaders, the productivity and learning experience was great with this tool at hand. Almost a week later I created or ported (from ShaderToy GLSL ) more than 130 HLSL shaders.

Funny thing, is that just as I was ready to publish the source code, I learned that both SHADERed and Bonzomatic accept HLSL too… I almost renamed the tool to YAHP, Yet Another HLSL Player, but the name ShaderPiP always makes me smile so I sticked with it.


Comments are welcome.

%d bloggers like this: