{"id":477,"date":"2021-08-01T04:12:43","date_gmt":"2021-08-01T04:12:43","guid":{"rendered":"https:\/\/bronsonzgeb.com\/?p=477"},"modified":"2021-08-14T17:14:41","modified_gmt":"2021-08-14T17:14:41","slug":"pixelate-filter-in-hdrp-using-compute-shaders","status":"publish","type":"post","link":"https:\/\/bronsonzgeb.com\/index.php\/2021\/08\/01\/pixelate-filter-in-hdrp-using-compute-shaders\/","title":{"rendered":"Pixelate Filter in HDRP using Compute Shaders"},"content":{"rendered":"\n

In this article, we’ll complete the trifecta and port our Pixelate image filter to HDRP. If you haven’t yet, I recommend reading the first post<\/a> first to understand the full context. This post will focus on the changes required to make the compute shader filter work in HDRP, but we won’t focus on the compute shader itself.<\/p>\n\n\n\n

CustomPostProcessVolumeComponent<\/h3>\n\n\n\n

For this HDRP version, we’ll use a Custom Post-Process Volume Component. This is HDRP’s system for extending the renderer with more post-processing. HDRP also supports custom rendering passes, but that’s intended to add new ways to render objects rather than fullscreen effects.<\/p>\n\n\n\n

The CustomPostProcessVolumeComponent<\/code> has a Render<\/code> method that we can override. The Render<\/code> method receives a CommandBuffer<\/code>, an HDCamera<\/code>, and two render texture handles for the source and destination. So, we’ll set up the Pixelate Compute Shader variables and dispatch the shader. By the way, if you’ve been following along with the series, it’s important to mention that I’ve modified the Pixelate Compute Shader in this version. For one, I’ve added another RWTexture<\/code> to hold the source texture. As a result, we can read from the source and write to the destination. This way saves us from having to blit from the source to the destination before dispatching the filter.<\/p>\n\n\n\n

Additionally, there are some HDRP macros to declare RWTextures and index into them as well. Without these macros, the shader won’t run in DirectX. So here’s the modified Pixelate.compute<\/code> file; notice the use of the RW_TEXTURE2D_X<\/code> and the COORD_TEXTURE2D_X<\/code> macros.<\/p>\n\n\n\n

#include \"Packages\/com.unity.render-pipelines.core\/ShaderLibrary\/Common.hlsl\"\n#include \"Packages\/com.unity.render-pipelines.high-definition\/Runtime\/ShaderLibrary\/ShaderVariables.hlsl\"\n\n#pragma kernel Pixelate\n\nRW_TEXTURE2D_X<\/strong>(float4, _ImageFilterSource);\nRW_TEXTURE2D_X<\/strong>(float4, _ImageFilterResult);\n\nint _BlockSize;\nuint _ResultWidth;\nuint _ResultHeight;\n\n[numthreads(8,8,1)]\nvoid Pixelate (uint3 id : SV_DispatchThreadID)\n{\n    if (id.x >= _ResultWidth || id.y >= _ResultHeight)\n        return;\n\n    const uint2 startPos = id.xy * _BlockSize;\n    \n    if (startPos.x >= _ResultWidth || startPos.y >= _ResultHeight)\n        return;\n    \n    const int blockWidth = min(_BlockSize, _ResultWidth - startPos.x);\n    const int blockHeight = min(_BlockSize, _ResultHeight - startPos.y);\n    const int numPixels = blockHeight * blockWidth;\n    \n    float4 colour = float4(0, 0, 0, 0);\n    for (int x = 0; x < blockWidth; ++x)\n    {\n        for (int y = 0; y < blockHeight; ++y)\n        {\n            const uint2 pixelPos = uint2(startPos.x + x, startPos.y + y);\n            colour += _ImageFilterSource[COORD_TEXTURE2D_X<\/strong>(pixelPos)];\n        }\n    }\n    colour \/= numPixels;\n\n    for (int i = 0; i < blockWidth; ++i)\n    {\n        for (int j = 0; j < blockHeight; ++j)\n        {\n            const uint2 pixelPos = uint2(startPos.x + i, startPos.y + j);\n            _ImageFilterResult[COORD_TEXTURE2D_X<\/strong>(pixelPos)] = colour;\n        }\n    }\n}<\/code><\/pre>\n\n\n\n
With that context, here’s the Render<\/code> method from the CustomPostProcessVolumeComponent<\/code>.<\/p>\n\n\n\n
public override void Render(CommandBuffer cmd, HDCamera camera, RTHandle source, RTHandle destination)\n{\n    var mainKernel = FilterComputeShader.FindKernel(\"Pixelate\");\n    FilterComputeShader.GetKernelThreadGroupSizes(mainKernel, out uint xGroupSize, out uint yGroupSize, out _);\n    cmd.SetComputeTextureParam(FilterComputeShader, mainKernel, \"_ImageFilterSource\", source.nameID);\n    cmd.SetComputeTextureParam(FilterComputeShader, mainKernel, \"_ImageFilterResult\", destination.nameID);\n    cmd.SetComputeIntParam(FilterComputeShader, \"_BlockSize\", BlockSize.value);\n    cmd.SetComputeIntParam(FilterComputeShader, \"_ResultWidth\", destination.rt.width);\n    cmd.SetComputeIntParam(FilterComputeShader, \"_ResultHeight\", destination.rt.height);\n    cmd.DispatchCompute(FilterComputeShader, mainKernel,\n        Mathf.CeilToInt(destination.rt.width \/ (float) BlockSize.value \/ xGroupSize),\n        Mathf.CeilToInt(destination.rt.height \/ (float) BlockSize.value \/ yGroupSize),\n        1);\n}<\/code><\/pre>\n\n\n\n
As you can see, we sequence the CommandBuffer<\/code> with a series of commands to set all the Compute Shader variables and dispatch the shader. There’s no other boilerplate necessary this time. However, there are a few adjustable parameters that we should expose in the inspector, so we’ll cover that next.<\/p>\n\n\n\n
Setting Parameters<\/h3>\n\n\n\n
A CustomPostProcessVolumeComponent<\/code> can have public parameters that appear in the inspector. However, we must wrap them in a VolumeParameter<\/code> class; otherwise, they won’t show up. The reason we wrap the parameters is so that the system can handle enabling and disabling effect overrides. Additionally, it forces us to set a reasonable default value. We’ll add an int<\/code> to control the pixel block size, a bool<\/code> to toggle the effect in the scene view, and a ComputeShader<\/code> field. There are built-in classes for IntParameter<\/code> and BoolParameter<\/code>, so that’s easy. By the way, CustomPostProcessVolumeComponent<\/code> has an overrideable property to control whether it’s visible in the scene view. So let’s connect that as well.<\/p>\n\n\n\n
public ClampedIntParameter BlockSize = new ClampedIntParameter(5, 2, 20);\npublic BoolParameter ShowInSceneView = new BoolParameter(false);\n\npublic override bool visibleInSceneView => ShowInSceneView.value;<\/code><\/pre>\n\n\n\n
Custom Parameters<\/h3>\n\n\n\n
To supply a ComputeShader<\/code>, we need a new class that inherits from VolumeParameter<\/code>. Let’s create the class and write a constructor.<\/p>\n\n\n\n
using UnityEngine;\nusing UnityEngine.Rendering;\n\n[System.Serializable]\npublic class ComputeShaderParameter : VolumeParameter<ComputeShader>\n{\n    public ComputeShaderParameter(ComputeShader value, bool overrideState = false)\n        : base(value, overrideState)\n    {\n    }\n}<\/code><\/pre>\n\n\n\n
Now jump back to the post-process volume and add another parameter. We also want to disable the effect if there’s no supplied compute shader. To do this, we can add an IsActive<\/code> method which comes from inheriting IPostProcessComponent<\/code>.<\/p>\n\n\n\n
public ComputeShaderParameter FilterComputeShaderParameter = new ComputeShaderParameter(null);\n\npublic bool IsActive() => FilterComputeShaderParameter.value != null;<\/code><\/pre>\n\n\n\n
Finally, we must specify the injection point, that is, the point in the render pipeline when this effect will run. To do this, we override the property called injectionPoint<\/code>. In our case, we want to run last, so we’ll use AfterPostProcess<\/code>.<\/p>\n\n\n\n
public override CustomPostProcessInjectionPoint injectionPoint => CustomPostProcessInjectionPoint.AfterPostProcess;<\/code><\/pre>\n\n\n\n
This completes the image filter code. However, even if you create a Volume<\/code> in your scene and add the effect, you won’t see it. That’s because we have to add it to the Project Settings as well. Open Edit > Project Settings, select the tab HDRP Default Settings, then scroll down to Custom Post Process Orders. Here we can add our effect to the desired injection point, After Post Process. Now, you can add the effect to a volume in your scene and bask in the high def fuzzy pixel glory. Try automating the BlockSize<\/code> to make amazing pixel wipe effects.<\/p>\n\n\n\n
Here’s the entire image filter code.<\/p>\n\n\n\n
using UnityEngine;\nusing UnityEngine.Rendering;\nusing UnityEngine.Rendering.HighDefinition;\nusing System;\n\n[Serializable, VolumeComponentMenu(\"Post-processing\/Custom\/PixelateImageFilter\")]\npublic sealed class PixelateImageFilter : CustomPostProcessVolumeComponent, IPostProcessComponent\n{\n    public ClampedIntParameter BlockSize = new ClampedIntParameter(5, 2, 20);\n    public BoolParameter ShowInSceneView = new BoolParameter(false);\n    public ComputeShaderParameter FilterComputeShaderParameter = new ComputeShaderParameter(null);\n    \n    public bool IsActive() => FilterComputeShaderParameter.value != null;\n\n    public override bool visibleInSceneView => ShowInSceneView.value;\n\n    public override CustomPostProcessInjectionPoint injectionPoint => CustomPostProcessInjectionPoint.AfterPostProcess;\n\n    public override void Render(CommandBuffer cmd, HDCamera camera, RTHandle source, RTHandle destination)\n    {\n        var filterComputeShader = FilterComputeShaderParameter.value;\n        var mainKernel = filterComputeShader.FindKernel(\"Pixelate\");\n        filterComputeShader.GetKernelThreadGroupSizes(mainKernel, out uint xGroupSize, out uint yGroupSize, out _);\n        cmd.SetComputeTextureParam(filterComputeShader, mainKernel, \"_ImageFilterSource\", source.nameID);\n        cmd.SetComputeTextureParam(filterComputeShader, mainKernel, \"_ImageFilterResult\", destination.nameID);\n        cmd.SetComputeIntParam(filterComputeShader, \"_BlockSize\", BlockSize.value);\n        cmd.SetComputeIntParam(filterComputeShader, \"_ResultWidth\", destination.rt.width);\n        cmd.SetComputeIntParam(filterComputeShader, \"_ResultHeight\", destination.rt.height);\n        cmd.DispatchCompute(filterComputeShader, mainKernel,\n            Mathf.CeilToInt(destination.rt.width \/ (float) BlockSize.value \/ xGroupSize),\n            Mathf.CeilToInt(destination.rt.height \/ (float) BlockSize.value \/ yGroupSize),\n            1);\n    }\n}<\/code><\/pre>\n\n\n\n
So we’ve finally completed the trifecta. We can now write Compute Shader post-processing effects across all through rendering pipelines. Unfortunately, we had to use HDRP macros in this version, so the shader is no longer entirely cross-compatible. If you find yourself in a position where you need that compatibility, I suggest implementing your own macros to branch according to the renderer you’re using.<\/p>\n\n\n\n
Check out the project <\/strong>here<\/strong><\/a> on GitHub. If you like my work, consider <\/strong>joining my mailing list<\/strong><\/a>, and I’ll email you whenever a new post is released.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, we’ll complete the trifecta and port our Pixelate image filter to HDRP. If you haven’t yet, I recommend reading the first post first to understand the full context. This post will focus on the changes required to make the compute shader filter work in HDRP, but we won’t focus on the compute shader itself. […]<\/p>\n","protected":false},"author":1,"featured_media":485,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,17,1],"tags":[26,8,47,48,5],"class_list":["post-477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-compute-shaders","category-graphics","category-unity-programming","tag-compute-shaders","tag-game-development","tag-hdrp","tag-high-definition-render-pipeline","tag-unity"],"_links":{"self":[{"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/posts\/477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/comments?post=477"}],"version-history":[{"count":9,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/posts\/477\/revisions"}],"predecessor-version":[{"id":500,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/posts\/477\/revisions\/500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/media\/485"}],"wp:attachment":[{"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/media?parent=477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/categories?post=477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bronsonzgeb.com\/index.php\/wp-json\/wp\/v2\/tags?post=477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}