The Simplest Pixel Shader

December 14 2022

I am currently working on a computer game as a side project. I need to add a "Fog of War" effect that obscures the playing field except around the player's soldiers. My technique is to create an intermediate bitmap that begins as solid gray, then as I draw each soldier I will also clear a corresponding circle in the fog bitmap. The final step in rendering the scene will be to draw the fog over the entire rendered scene, which will obscure everything except where the fog has been cleared. I had this almost working, except the cleared circles had hard edges. They would look much better if I could use a gradient fade as the fill. This almost worked, except where two circles overlapped: It was obvious which circle was drawn last because the gradient fade overwrote the pixels that had already been cleared. What I needed was a fill that ignored the RGB color and set the Alpha to the minimum of the original fog and the gradient fade fill. I searched for any predefined operation or effect that would do this, without success. If I wanted my Fog of War, I would need to dive into the world of pixel shaders and write my own.

This was going to involve a lot of experimentation, and my game project had already grown to the point where it was a bit unwieldy for a lot of hacking and throw-away code. Thus PxlShader was born.

The goal of this project is to create a Direct2D pixel shader with the fewest lines of code possible, no unnecessary dependencies, and NO FRAMEWORKS.

PxlShader evolved in distinct steps:

1. Window Shell A bare-bones Windows app to be used for experimenting. This project is intended to start simple and stay as simple as possible.
2. DirectX A bare-bones Windows app using Direct2D.
3. Draw Something! Draw a bouncing ball.
4. My First Pixel Shader A bare-bones pixel shader using ID2D1Effect. Wrapping the shader inside a custom effect allows me to sidestep a lot of the complexity that plagues most of the DirectX example projects I have investigated.
5. Constants Figure out how to communicate parameters from the app (CPU) to the shader (GPU).
6. Shader Math Play around with the shader code.
7. Multiple Sources Figure out how to merge multiple source bitmaps into a single output image.

I am pleased that the final version of PxlShader is less than 800 lines.