{"id":450,"date":"2021-07-03T18:01:05","date_gmt":"2021-07-03T18:01:05","guid":{"rendered":"https:\/\/bronsonzgeb.com\/?p=450"},"modified":"2021-07-03T18:01:06","modified_gmt":"2021-07-03T18:01:06","slug":"a-simple-gpu-based-drawing-app-in-unity","status":"publish","type":"post","link":"https:\/\/bronsonzgeb.com\/index.php\/2021\/07\/03\/a-simple-gpu-based-drawing-app-in-unity\/","title":{"rendered":"A Simple GPU-based Drawing App in Unity"},"content":{"rendered":"\n
This week I’m escaping the complicated world of voxels for a bit to do something lighter. We’re building a simple GPU-based drawing app. What does that mean? A drawing app that runs entirely on the GPU using compute shaders. It’ll be just like Photoshop, except without all those complicated features like layers, undo, or a colour picker. Let’s go over the plan.<\/p>\n\n\n\n
What’s the plan?<\/h2>\n\n\n\n
Our canvas will be a render texture that’s stretched across the screen. We’ll dispatch a compute shader kernel every frame, with a reference to our canvas and the current mouse position, among other things. We’ll dispatch one thread per pixel. So, each thread will compare its pixel position to the mouse position, taking into account the brush size. If it falls within the brush’s position and size, we’ll colour that pixel. So we’ll have a wonderfully parallel drawing app.<\/p>\n\n\n\n
Once we complete the first part, we’ll tackle simple brush position interpolation. The issue is the mouse can move a lot from one frame to the next. If we don’t interpolate the position, we’ll end up with several disconnected round brush strokes.<\/p>\n\n\n\n
Finally, I’ll demonstrate how we can add some GUI to control variables like the brush size. Let’s start.<\/p>\n\n\n\n
Set up<\/h2>\n\n\n\n
Create a new compute shader. I called mine Draw.compute<\/code> because I didn’t think too hard about a name. We’ll need two kernels, one to initialize the background and one to update every frame. We also need an RWTexture<float4><\/code> to act as our canvas. In case you forgot, that’s a writeable texture where each pixel is a float4<\/code>.<\/p>\n\n\n\n
With the compute shader bones out of the way, let’s set up the C# script. Create a MonoBehaviour<\/code> called DrawManager.cs<\/code> to manage our compute shader. We’ll create a RenderTexture<\/code> and assign it to canvas. We’ll also dispatch InitBackground<\/code> on Start<\/code> and Update<\/code> on Update<\/code>. We’ll also use OnRenderImage<\/code> to display the canvas. The component has to be attached to a camera in the scene. The callback receives the camera’s frame buffer, and we’ll draw our canvas on top of it.<\/p>\n\n\n\n
With the boilerplate out of the way, we can start working.<\/p>\n\n\n\n
Drawing<\/h2>\n\n\n\n
Let’s jump to the fun part and implement drawing right away. All we need to make this interactive is the current mouse position in the Update<\/code> kernel. Add float4 _MousePosition<\/code> and bool _MouseDown<\/code> to the compute shader. We’ll use _MouseDown<\/code> to prevent drawing when the mouse button is up. The Update<\/code> kernel runs once per pixel, so the function must check if the current thread is close enough to the mouse position to be coloured. On that note, let’s add float _BrushSize<\/code> to the compute shader as well.<\/p>\n\n\n\n
This block of code is everything newly added to the compute shader. As promised, in Update, we check the distance from the thread’s pixel to the mouse position and draw if necessary. Now you can draw pretty pictures like this.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Right now, if you draw slightly fast in the app, you’ll notice an issue. We have a series of dots rather than a single continuous stroke.<\/p>\n\n\n\n<\/figure>\n\n\n\n
To fix that, we need the previous mouse position as well. Then, we’ll interpolate between the two points, drawing several points along the way. Let’s extract our brush into a function at the same time. I call the function HardBrush<\/code>. In the future, we could follow the same template to create a soft brush, textured brush, patterned brush, etc. So in the previous version, we would check our position against a single mouse position. Now, we’re going to slowly sweep from the last position mouse to the new mouse position, checking our position against each point in the sweep.<\/p>\n\n\n\n
float4 HardBrush(float2 pixelPos, float4 currentColor, float4 brushColor, \n float brushSize, float2 previousMousePosition,\n float2 mousePosition, float strokeSmoothingInterval)\n{\n for (float i = 0; i < 1.0; i += strokeSmoothingInterval)\n {\n const float2 mousePos = lerp(previousMousePosition, mousePosition, i);\n if (length(pixelPos - mousePos) < brushSize)\n return brushColor;\n }\n\n return currentColor;\n}<\/code><\/pre>\n\n\n\n
So the HardBrush<\/code> function is the same as it was, but now with an added for<\/code> loop. Let’s hook it up to the Update<\/code> function.<\/p>\n\n\n\n
You’ll notice there are new variables as well; they’re from the C# side. Later, I’ll share the entire C# side, but all of these variables are directly from the inspector.<\/p>\n\n\n\n
To finish, we’ll add a slider to control the brush size to demonstrate how to add GUI to our drawing app.<\/p>\n\n\n\n
Tools GUI<\/h2>\n\n\n\n
First, add and position a slider in your scene. I’ll leave that part up to you. Next, create a new script to add to the slider called BrushSizeSlider.cs<\/code>. We’ll use this script to keep track of whether the slider is currently in use. That way, we can stop drawing when manipulating the slider. Here’s the script.<\/p>\n\n\n\n
using UnityEngine;\nusing UnityEngine.EventSystems;\nusing UnityEngine.UI;\n\npublic class BrushSizeSlider : MonoBehaviour, IPointerUpHandler, IPointerDownHandler\n{\n public bool isInUse;\n public Slider slider;\n \n public void OnPointerUp(PointerEventData eventData)\n {\n isInUse = false;\n }\n\n public void OnPointerDown(PointerEventData eventData)\n {\n isInUse = true;\n }\n}<\/code><\/pre>\n\n\n\n
So we set a flag when the slider is in use. Add a reference to the BrushSizeSlider<\/code> in DrawManager.cs<\/code> and check it on Update<\/code>. If it’s in use, don’t dispatch the Update kernel. Also, set the min and max values on the slider to something reasonable, like 1 to 20. Finally, set the _BrushSize<\/code> in the compute shader to the slider’s value. Now we have a simple GUI to control the brush size.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Before wrapping up, here’s the entire DrawManager.cs<\/code> file for reference.<\/p>\n\n\n\n
So there’s our simple drawing app. I hooked up some variables behind the scenes. I also added some bounds checks to make sure we don’t try to draw outside the canvas. I also added an early exit on the compute shader side, so I’ll share that entire file for reference. By the way, the Github project is linked at the end, it’s easier to read the code there if you can.<\/p>\n\n\n\n
The entire compute shader is under 40 lines of code, which is pretty cool if you consider that it’s the bulk of the functionality. The whole project is around 100 lines of code, which is also impressively small, I think.<\/p>\n\n\n\n
![\"\"](\"https:\/\/bronsonzgeb.com\/wp-content\/uploads\/2021\/07\/2021-07-02-13_21_18-Clipboard-1024x746.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/bronsonzgeb.com\/wp-content\/uploads\/2021\/07\/DottedStroke-1024x739.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/bronsonzgeb.com\/wp-content\/uploads\/2021\/07\/BrushSizes-1024x698.png\")
<\/figure>\n\n\n\n