{"id":133,"date":"2021-02-27T15:28:46","date_gmt":"2021-02-27T15:28:46","guid":{"rendered":"https:\/\/bronsonzgeb.com\/?p=133"},"modified":"2021-03-08T19:14:16","modified_gmt":"2021-03-08T19:14:16","slug":"particle-metaballs-in-unity-using-urp-and-shader-graph-part-1","status":"publish","type":"post","link":"https:\/\/bronsonzgeb.com\/index.php\/2021\/02\/27\/particle-metaballs-in-unity-using-urp-and-shader-graph-part-1\/","title":{"rendered":"Particle Metaballs in Unity using URP and Shader Graph Part 1"},"content":{"rendered":"\n

This series will explain how to draw Metaballs in Unity using the Universal Render Pipeline (URP) and Shader Graph. But that’s not all! It’ll also explain how to use a Particle System to control the size and position of our Metaballs. I wanted to fit everything into a single article, but unfortunately, it was too much. By the end of part 1 we’ll be able to sphere-trace an object using a custom Shader Graph node. Click here<\/a> to jump ahead to part 2.<\/p>\n\n\n\n

What are Metaballs?<\/h2>\n\n\n\n

Many people have already explained Metaballs at great length, so rather than give a full technical explanation, I’ll jump right into why they’re interesting to me. However, if an in-depth technical overview interests you, then I’ll share some resources later in this post.<\/p>\n\n\n\n

What’s cool about Metaballs (also known as Blobbies) is they’re blobs that merge when they’re close to each other and split apart once they’re separated. Imagine two droplets of water pooling together to form a single entity and you’ll get the idea. What’s tricky about them is they’re an implicit surface, which is to say, they aren’t meshes. Instead, we use math functions to represent them and raymarching to unveil them. How this works is we use a mesh to define a mask, then in a shader, we trace a ray from each pixel in the mask until we find a surface.<\/p>\n\n\n\n

So with that explanation out of the way, let’s break down the different steps: <\/p>\n\n\n\n

  1. We need a Shader Graph that can display a Metaball.<\/li>
  2. We need to feed our shader with data from the Particle System.<\/li>
  3. We need to shade our Metaball using our lighting and PBR.<\/li><\/ol>\n\n\n\n

    In this first part of the series we’ll cover just the first step. So let’s get started!<\/p>\n\n\n\n

    Metaball Shader Graph<\/h2>\n\n\n\n

    So first thing’s first, let’s create a Shader Graph to display a single Metaball. Doing so will validate our Sphere-Tracing code and Metaball inside of Shader Graph. We’ll do this using a Custom Function Node.<\/p>\n\n\n\n

    Shader Graph Custom Function Nodes<\/h3>\n\n\n\n

    Shader Graph supports custom function nodes. These nodes allow you to specify the inputs and outputs and write any arbitrary shader code. In my first implementation, I wrote the entire shader inside a single custom function and plugged that into the shader output. You might be asking, “In that case, what’s the point of using Shader Graph?” which is a valid question. However, I’ve learned that Shader Graph’s power is the ability to break up my custom nodes and allow users to recompose them in a way that suits them. For me, the flexibility to combine custom low-level shader code with pre-existing high-level nodes singlehandedly proved Shader Graph’s value as a single solution to all my future shader development<\/em><\/strong>. So from now on, it’s Shader Graph 4 life.<\/p>\n\n\n\n

    Custom function nodes can take straight text input, or they can read from a file. In our case, we’re just going to create a Metaball.hlsl<\/em> file and go from there. At this time, we want to validate our work. That is, is the sphere-tracer working? Can we see a Metaball? So, the only input we need is the mesh’s world space position, and our sole output will be an alpha value. The alpha value will either be 0 if we didn’t find a surface or 1 otherwise. <\/p>\n\n\n\n

    void SphereTraceMetaballs_float(float3 WorldPosition, out float Alpha)\n{\n    #if defined(SHADERGRAPH_PREVIEW)\n    Alpha = 1;\n    #else\n    Alpha = 1;\n    #endif\n}<\/code><\/pre>\n\n\n\n
    Sidenote<\/strong><\/em>: I always add #if defined(SHADERGRAPH_PREVIEW)<\/em><\/strong> block right away because I often take advantage of functions built-in to URP. Those functions appear to be inaccessible from inside the Shader Graph Preview and so using them throws errors. That said, if somebody knows how to include them, I’d love to know.<\/p>\n\n\n\n
    I’ll breakdown the structure of this custom function. SphereTraceMetaballs<\/em><\/strong> is the name, and we use _float <\/em><\/strong>to specify the precision. Shader Graph allows users to switch precision, so it’s good practice to include another version called SphereTraceMetaballs_half<\/em><\/strong> that uses halfs (halves?)<\/em> instead of floats, but I don’t worry about that until the end. The first argument WorldPosition<\/em><\/strong> is our input, and any arguments prefixed by out<\/em><\/strong> are our outputs, so out float Alpha<\/em><\/strong>. Now in Shader Graph, you can create a Custom Function node, point it to the Metaball.hlsl<\/em> file and fill out the inputs, outputs and function name. It should look like this:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    SphereTraceMetaballs function<\/h3>\n\n\n\n
    I’m not going to go over the Sphere-Tracer code. Why? Because later in the article, I’m going to share with you where I read about it and found the code that I ported to hlsl. Here’s the code:<\/p>\n\n\n\n
    void SphereTraceMetaballs_float(float3 WorldPosition, out float Alpha)\n{\n    #if defined(SHADERGRAPH_PREVIEW)\n    Alpha = 0;\n    #else\n    float maxDistance = 100;\n    float threshold = 0.00001;\n    float t = 0;\n    int numSteps = 0;\n\n    float outAlpha = 0;\n\n    float3 viewPosition = GetCurrentViewPosition();\n    half3 viewDir = SafeNormalize(WorldPosition - viewPosition);\n    while (t < maxDistance)\n    {\n        float minDistance = 1000000;\n        float3 from = viewPosition + t * viewDir;\n        float d = GetDistanceSphere(from, float3(0, 0, 0), 0.3);\n        if (d < minDistance)\n        {\n            minDistance = d;\n        }\n\n        if (minDistance <= threshold * t)\n        {\n            outAlpha = 1;\n            break;\n        }\n\n        t += minDistance;\n        ++numSteps;\n    }\n    \n    Alpha = outAlpha;\n    #endif\n}<\/code><\/pre>\n\n\n\n
    All that’s missing from this code is the GetDistanceSphere<\/em><\/strong> function that we’re about to write. By the way, I know that spheres aren’t the same as Metaballs. We’ll get to that. The other functions GetCurrentViewPosition<\/em><\/strong> and SafeNormalize<\/em><\/strong>, come from URP’s built-in shaders. How did I know about them? I didn’t. I dug through URPs shaders and found them. Being able to explore URPs code is invaluable. Later, when we start adding PBR support to the Metaballs, I’ll show you how I mine for diamonds in the URP code so that you can do it as well. The gist of the SphereTraceMetaballs <\/em><\/strong>function is: check each pixel to see if it contains a sphere’s surface.<\/p>\n\n\n\n
    GetDistanceSphere function<\/h3>\n\n\n\n
    When I first wrote this shader, I didn’t start with a metaball function. I wanted to validate that the Sphere-Tracer was working before worrying about how Metaballs work. I’m telling you so you know that you could replace the GetDistanceSphere<\/em><\/strong> function with any SDF function. To test, I started with a simple SDF Sphere:<\/p>\n\n\n\n
    float GetDistanceSphere(float3 p, float3 center, float radius)\n{\n    return length(p - center) - radius;\n}<\/code><\/pre>\n\n\n\n
    This function will return the distance from the point p<\/strong> and the surface of a sphere with a given center<\/strong> and radius<\/strong>. A Metaball is different because it also has a density. The calculation is a bit more complicated, but they still ultimately return a distance from a point. Like with the Sphere-Tracer, I’ll share the explanation and source from where I learned about them, rather than re-explaining it.<\/p>\n\n\n\n
    Putting it together<\/h2>\n\n\n\n
    Let’s take a break and put together what we currently have: <\/p>\n\n\n\n