1. Unity_objecttoworld Example

Summary 🔗︎

For me, one of the most interresting things to do with shaders is procedural images. To get started with that, we’re going to create a simple Checkerboard pattern.

The only thing to do in the shader is to patch the unityObjectToWorld matrix with the one coming from our StructuredBuffer, then we just forward the vertex to the normal deferred Unity function. To note: You will also need to compute the unityWorldToObject, which is the inverse of the unityObjectToWorld. On Unity UI components, the unityObjectToWorld matrix is not the transformation matrix of the local transform the Graphic component lives on but that of its parent Canvas. Many MRTK/Standard shader effects require object scale to be known.

This tutorial will build on the simple shader with only properties, but as always, you can also use the technique to generate colors in more complex shaders.

Stripes 🔗︎

I will take the world position of the surface to generate the chessboard texture, that way we can later move and rotate the model around and the generated patterns will fit together. If you want to pattern to move and rotate with the model, you can also use the object space coordinates (the ones from appdata, not multiplied with anything).

To use the worldposition in the fragment shader, we add the world position to the vertex to fragment struct and then generate the world position in the vertex shader and write it into the struct.

Then in the fragment shader, we can start by first doing a 1D chess field, so just alternating black and white lines. To do that, we take one of the axis of the position and modify the value. We start by flooring it. That means it’ll be the next smaller whole number. We do that to make sure we only have one color per unit.

Then we find out wether our field is a even or a odd one. To do that, we divide the value by two and take the fractional part (the part of the number after the dot). so now the even numbers are all 0(because after a division by 2 even numbers are still whole numbers, so their fractional part is 0) and all of the odd fields result in 0.5(because after a division by 2 odd numbers end up fractional, 1 becomes 0.5, 3 becomes 1.5…). To make the odd numbers white instead of grey, we can then multiply our value by 2.

Checkerboard in 2d and 3d 🔗︎

Next, we make the pattern two dimensional. To do that we only have to add a additional axis to the value we’re evaluating. That’s because when we add one to our rows all of the even values become odd and the odd values become even. This is also the main reason why we floor our values. We easily could have made the pattern work in one dimension without flooring them, but this makes it easier to add more dimensions.

After that we can go even further and add the third dimension in the same way as we added the second.

Scaling 🔗︎

Next I’d like to add the ability to make the pattern bigger or smaller. For that, we add a new property for the scale of the pattern. We divide the position by the scale before we do anything else with it, that way, if the scale is smaller than one, the pattern is generated as if the object is bigger than it is and as such it has more pattern density per surface area.

Another small change I made is that we now use floor on the whole vector instead of the components separately. That doesn’t change anything, I just think it’s nicer to read.

Customizable Colors 🔗︎

Finally I’d like to add the possibility to add Colors to the Pattern, One for the even areas, one for the odd. We add two new Properties and the matching values for those colors to the shader.

Then at the end of our fragment shader, we do a linear interpolation between the two colors. Since we only have two different values (zero and one), we can expect the interpolation to return either the color it interpolates from(for a input of 0) or the color it interpolates towards(for a input of 1). (If you’re confused by the interpolation, I explain it more thouroghly in another tutorial.

The complete shader for interpolating generating a checkerboard pattern on a surface should now look like this:

I hope you liked making this simple chess board shader and it helped you understand how to create patterns in shaders with simple math operations.

You can also find the source code for this shader here: https://github.com/ronja-tutorials/ShaderTutorials/blob/master/Assets/011_ChessBoard/Chessboard.shader

I hope you enjoyed my tutorial ✨. If you want to support me further feel free to follow me on twitter, throw me a one-time donation via ko-fi or support me on patreon (I try to put updates also there, but I fail most of the time, bear with me 💖).

This is a mobile-friendly shader for displaying an atmospheric light scattering effect around a sphere. I developed this graphical effect as two shaders – one shader for the planet’s surface and one transparent shader for the atmosphere around the planet. To reduce the number of vertices and object, I combined them into one shader for a single 3D sphere. You can use the two separate shaders or alternatively a combined shader. These are HLSL shaders for Unity wrapped in the Unity-specific shader property language ShaderLab.

Planet surface/ground shader

“UNITY_LIGHTMODEL_AMBIENT” can be replaced or set to 0 for more realism.

Atmosphere shader

Combined Planet surface and atmosphere shader

“UNITY_LIGHTMODEL_AMBIENT” can be replaced or set to 0 for more realism.

Unity_objecttoworld Example

I distribute these shaders under CC0 1.0 licence for free use “as is”. I do not take any responsibility for their use or provide any kind of support.