William Chyr | Edge-Detection Shader Artifacts Fixed!

Back in May of last year, I wrote this devlog post about a particular issue I was having with my edge-detection shader. Specifically, it was generating these tiny black dots that appeared along the seam where two objects touched.

From what I could tell, it was due to the normals of the faces. It seemed like there was a floating point error and even though you can have two boxes lined up against one another, there was still a tiny gap that was invisible to the naked eye, but which the shader could pick up. At least this is what I determined.

My friend Devon, who was the graphics programmer on Octodad helped me tweak the shader a bit, and he did make improvements, but the artifact wasn’t completely removed.

Finally, during GDC last week, I stopped by the Unity booth on the expo floor, where ProBuilder had a kiosk, and spoke with Karl from the ProBuilder team about this issue.

Karl had two suggestions:

1) Merge the boxes together and then weld the overlapping vertices. Welding puts both vertices at the same point, so should in theory close up the seam in between the faces.

2) Delete the faces that are facing each other in between the boxes.

I decided to try these methods when I got back. Here’s a video comparing the different methods and their results:

Separate Boxes

This is the default set up of the situation. In this case, I have a wall that’s made up of a separate individual ProBuilder boxes. The boxes are vertex-colored to show that they are different. At runtime, a material is applied to all of the boxes, so that together they look like one wall.

Below you can see that there are artifacts (note that this doesn’t show the problem as well as the video) since it’s just a still. However, it shows that these artifacts exist. You can click on the images to see the larger version.

Merged

In this method, I merged all the boxes into one mesh. As you can see, the problem persists.

Merged with Welded Vertices

I actually forgot to include footage from this method in the video, which sort of defeats the point a bit…

But anyway, it looks just liked the previous two methods, without any improvements.

No Draw

In this method, I set the top and bottom face of each box to a ‘NoDraw’ material. If using ProBuilder, then during run-time, these faces get deleted.

It reduced the number of artifacts significantly when viewing the wall at a distance, but when you’re up close and looking at the wall at an angle, there are still artifacts.

Also, one thing that is very interesting is that the artifacts actually look different than the others. The others are a black X, but these artifacts seem to be a white square.

No Draw and Merged

Taking all the boxes with no draw faces on them and merging them into one mesh.

For some reason, the mesh texture just gets completely meshed up. I think ProBuilder doesn’t intend for you to apply NoDraw faces and then merge?

Clearly, this method isn’t an option.

Deleted Faces

Delete the top and bottom face of each box. As to be expected, this looks just like the case when I’m using separate boxes with NoDraw faces (since NoDraw faces get deleted at runtime).

There are much fewer artifacts when viewed at a distance, but close up, there are still a lot.