> For the complete documentation index, see [llms.txt](https://steijn.gitbook.io/devlogs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://steijn.gitbook.io/devlogs/blewscreen/shaders/starting-shaders.md).

# Starting shaders

My first proof of concept was going to be a showcase of a cleaning gameplay as seen in powerwash simulator.

To start I looked around for [a tutorial](https://www.youtube.com/watch?v=YfolVBo_2-I) to get me started with shader graphs. 

![Shader graph of the tutorial](/files/EF7y8rWjfo9QwdkVyb7c)

<div align="left"><img src="/files/hpcEakI3MtxwusgYUeo3" alt="Result of the tutorial"></div>

This was the result of the tutorial. As you can see, it got to the point I wanted it to get to. After this tutorial, I set out to make some changes of my own.

There were a few issues with this tutorial that I wanted to fix. First of all, it uses two entirely different textures for dirty and clean, which I didn't agree with. I wanted to place the dirt on top of an existing texture and have this work properly.&#x20;

To do this, I required a dirt texture, preferably with a transparent.PNG background. I edited an image in Photoshop to get the desired result (seen in the bottom left below).

I also had to place a Blend node. A blend node mixes the A and B images based on the alpha provided. You use the alpha of the image with a transparent background so you can see the second texture behind it.&#x20;

This change meant I could apply dirt to any texture and not just the one provided by the tutorial.

![Resulting dirt shader](/files/9Zjm0zfYb1mg3ptJtbRk)

![Result of own implementation](/files/bRnmvychkG45YSHZbfo4)

This is the result, the blocky texture can be replaced with any other texture while the dirt will persist. My next step would be adding normal mapping, this will provide the texture with a sense of depth.