Unity Shader Graph - Signed Distance Fields and Subgraph Errors

June 23, 2021

Shader Graph

Unity

Title: Drawing Boxes and Rectangles in URP Shader Graph with 2D SDFs! 2021.1 | Unity Game Dev Tutorial
By: Ned Makes Games
Youtube - Tutorial
Description: Exploration into calculating signed distance fields and using them with Unity's Shader Graph.

Overview

This shader tutorial quickly explores calculating signed distance fields and using that for interesting effects. These effects were built in HLSL in the tutorial video originally, but they also show how these can be implemented with Unity's Shader Graph system. I wanted to use the Shader Graph approach, but unfortunately I found that Unity's Shader Graph Subgraphs have some major issues.

Signed Distance Fields (SDFs)

Signed Distance Fields (SDFs): calculate the distance from any arbitrary point to a specific shape

Principles of Calculating

To start, they look at an example using a rectangle whose center is at the origin (0, 0).

First, they find the distance from the point, p, to the center of the rectangle, which is just the length of the Vector2 p because the center is at the origin.

Then, using the symmetry of the rectangle, the absolute value of point, p, and the half dimensions of the rectangle are used to determine the distance of the point to any corner of the rectangle.

To get the positive results, they find the vector between the absolute value of point, p, and the corner of the rectangle and find the length of this vector after converting any negative components to 0.

Since the core of an SDF is that it is signed, meaning that a point inside the shape returns a negative value and a point outside the shape returns a positive value, they expand it to deal with negative distances. The vector, d, which is that from the absolute value of point, p, to the corner of the rectangle is only inside of the shape when both components of d are negative.

Assuming both components of d are negative, the result from the previous step already results in 0, so they can add a secondary component to this that returns a negative result in this case. By using min(max(d.x, d.y), 0) they can find this distance because a point within the rectangle must be closer to one wall or the other, or they are identical values. This is why there also is no rounded effect within the rectangle.

Moving the rectangle's center from the origin just requires an additional offset argument.

Then, rotation requires another argument, and requires rotational matrix math (something I covered in my investigation to changing vector spaces).

Unity Problem with Subgraphs

While following along to mimic their Shader Graphs, I came across a Unity issue working in Sub Graphs especially. When creating properties and moving those property nodes around, Unity consistently runs in ArgumentNullException errors which completely shut the graph down and prevent any further progress until it is closed and reopened. Apparently Unity versions 2021.2 and up may work better with this, so I will have to look into more Unity versions in the future.

Comments

Post a Comment

Popular posts from this blog

Online Multiplayer Networking Solution Tutorial Using Unity and Mirror - Tutorial by: Jason Weimann

February 2, 2021 Networking Online Multiplayer Unity & Mirror Title: Let's build a 4-Player Networked Game LIVE - Online Shooter (with Mirror & Unity) By: Jason Weimann Youtube - Tutorial Description: Intro to using Mirror for networking online multiplayer play in Unity development. Introduction This tutorial has Jason Weimann implementing online network play into a basic Unity twin-stick shooting game. They use Mirror, which is a Unity asset used for simplifying the online network synchronization process. This is a live implementation where they work through many errors transferring a game from simply working locally to working with a host/client relationship. Mirror Mirror - Home Page Mirror is "a high level Networking API for Unity, supporting different low level Transports" (from Mirror themselves). It is a clean solution for implementing a quick and simple online networking option for Unity projects. The core components breakd
Read more

Exporting FBX from Houdini with Color

April 17, 2019 Exporting From Houdini FBX and Color Information Exporting the Model Using my balloon Houdini example from class, I was able to export the geometry using the Educational version (the Apprentice version does not allow exporting FBX, but you could export an OBJ for my purposes possibly). This was very straight forward, as you can just use File -> Export -> FBX in Houdini. Since I was doing this for a class to use in a Snapchat filter (using LensStudio), I wanted to reduce the poly count a lot. I opened the FBX in Maya and used a basic Reduce to reduce the poly count a lot before exporting that for use in LensStudio. While this was good enough to export the geometry, I could not get any of the color information to come with it. I originally exported out an OBJ and had the same issue, so I exported FBX in hopes it would keep the color information somehow, but this was not the case. Exporting the Color Information My first thought to get the color
Read more

Houdini Assignment - Fuse and Group

Image
April 8, 2019 Houdini Assignment Fuse and Group I worked on a Houdini class assignment to make a basic model and decided to try and create the bulb on the back of a Bulbasaur, a Pokemon that is half plant and half dinosaur. I figured I could use a lot of the basics we learned in class to get me pretty far, while also needing to cover a few new things to get it exactly how I wanted it. In class, we created a basic hot air balloon. This consisted of tracing a curve over a background reference image of a hot air balloon, creating a section of the balloon from this original curve, then replicating that section as many times as needed to fully encompass the full balloon. These were a lot of principles I used for creating my bulb. The biggest hurdle I needed to overcome was that that top of each of my sections would all need to connect at a single point, so I would need some additional nodes after simply creating a "left" and "right" variation of my addit
Read more