June 24, 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
Description:
Exploration into calculating signed distance fields and using them with Unity’s Shader Graph.
Title:
Rectangle SDFs and Procedural Bricks! Video Production Stream | Unity Game Dev Livestream
By:
Ned Makes Games 2
Description:
The full stream which most of the previous tutorial is pulled from. Useful for any more in depth questions of previous tutorial.
Overview
When I visited this tutorial yesterday I ran into an issue with Unity 2021.1.3 that working with subgraphs was extremely bugged and error prone. I had seen online that later versions potentially fixed the issue, so I download the latest version, 2021.1.12, and this did indeed fix the issue for me, making this tutorial much easier to follow along with.
This tutorial was mostly just looking at the subgraphs and shader graphs they built and following along to build them out myself. This was at least a decent learning experience at getting familiar with the work flow of setting up subgraphs for your shader graphs, as well as just using a lot of the math nodes.
Helper Scripts to Show Off Shader
Along with building the shader, they made two simple scripts to make the shader a bit interactive and more flexible.
SetPoints
This class was responsible for letting the user move the two points dictating the general length of the rectangle shape by just clicking and dragging. This however did not work immediately, as they were using a helper class named MousePointer I did not use.
I was able to get a similar result by replacing their process of getting the point:
var p = MousePointer.GetWorldPosition(Camera.main);
with my replacement:
var p = Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, distanceToPlane));
distanceToPlane was a value the user could put in that is the distance from the camera to the flat plane the camera is facing to test the shader. As long as the exact same distance is put there for the z-value of ScreenToWorldPoint, the points moving correlate exactly with where the user is dragging them.
RectangleThicknessByScrollWheel
This class lets the user control the thickness, or width, of the rectangle with the scroll wheel. This class directly worked as shown.
General Notes with Scripts Interacting with ShaderGraph Properties
Integrating the scripts with the Shader Graph properties was actually pretty easy. It worked similarly to working with the Animator in Unity. You just use methods like SetFloat() and give it two parameters where one is the exact string name of the property you want to set, and the second is the value you are passing in to said property. It is worth noting this was just accessed through the Material, there was no strange Shader Graph object that needed to exist or anything like that.
An example of my implementation of the tutorial can be seen below.
Unity Shader Graph: SDF Rainbow Pulse from Tutorial by NedMakesGames from Steve Lilley on Vimeo.
via Blogger http://stevelilleyschool.blogspot.com/2021/06/unity-shader-graph-signed-distance_24.html