Creating a cross-platform wireframe shader in Unity

Wanna create some cyber-like effects for your games? :)

Over the years, video game graphics have evolved and improved so much that the latest sometimes AAA look like live action movies. But hyperrealism is not the only trend, and a lot of indie creators are looking for more stylish aesthetics.

A very cool effect that always gives a nice cyber-vibe to a game is a wireframe render. And yet, it’s not that easy to do, especially if you’re targeting multiple platforms!

So in this tutorial, we’re going to learn how to make a simple cross-platform shader to allow us to render most geometries as wireframes with various colours, transparency effect and other options:

This tutorial is available in video or text format — see below for the text version :)

Check out the Github repo with all my Unity tutorials! 🚀

And with that said, let’s dive in and see how to create this cross-platform wireframe shader :)

A few gotchas of wireframes

Before we get into the implementation stuff, let’s first take a second to discuss why wireframe shaders aren’t that easy to do, and why making a cross-platform version require some brainstorming.

Now, I’m not going to go in details about what shaders are here, and I’ll assume that you already know the basics about the vertex and the fragment stages of a shader:

And, in particular, that you know something crucial about basic shaders, which is that in a simple vertex and fragment shader, you don’t have any info about your mesh’s topology.

Indeed, in most shaders, you know things about each of your vertices independently in the vertex stage, but this function has absolutely no idea how…