{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/hacking-through-shaders/","result":{"data":{"site":{"siteMetadata":{"title":"A Game Studio","author":"Lythom"}},"markdownRemark":{"id":"a7b595fb-ea1b-5a5e-acb9-f813b76486fc","html":"

Any sane programmer would teach “Read the documentation, understand what you are doing, and you’ll be able to solve your problems”. While true, there is a flaw : the time required to fully understand something grows bigger and bigger as what you are learning is vast or deep. Sometimes, hacking its way in might be enough, and how fun would life be without a bit of crazyness? let’s hack into shaders !

\n
\n\n
\n

Just a step back

\n

Ok yes there ARE things you must know before diving into shaders, here they are :

\n
    \n
  1. \n

    A shader contains 3 key parts : declarations, vertex function, and fragment function.

    \n\n
    2. \n
  2. A color is represented as a 4 dimensions vector fixed4.
    3. \n
  3. In the fragment function, you manipulate only one pixel at a time.
    4. \n
  4. frac(float) function return the decimal part of a float.
    5. \n
  5. text2D(sampler2D,float2) gives the pixel color of the texture sample2D at the coordinate float2. You get this coordinate as input in the fragment function.
    6. \n
  6. Coordinates are between (0,0) and (1,1).
    7. \n
\n

It may looks very specific if you a new to shaders but this is actually things you’d find early while learning shaders.

\n

Multiple layers of rendering

\n

I’m working on a game called A Time Paradox which takes place in a futuristic universe (in a spaceship riding a blackhole horizon). A way to evocate a futuristic world is using something both typical, visual appealing, and quick to create : holograms.

\n

So here is the idea : we will display a spotlight texture as a background, then animate a glitch texture on the top of it, to simulate scanlines. The plan? Find a simple enough sprite shader as starter, add a glitch texture as parameter on top of the main texture, do fun math to animate the glitch texture

\n

Find a starter shader

\n
\n

Note : I use Unity and paint.NET as tools but the workflow would work for any engine or technology supporting shaders and any image editor.

\n
\n

On https://unity3d.com/fr/get-unity/download/archive you’ll find under “downloads (your platform)” an entry named “integrated shaders”. It contains all built-in shaders of unity and can be copy/pasted/modified in your project. I choose to start with the shader DefaultResourcesExtra\\Unlit\\Unlit-Alpha.shader since i’m working in 2D without lighting, and I want transparency in my result. It looks like :

\n
// Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)\n\n// Unlit alpha-blended shader.\n// - no lighting\n// - no lightmap support\n// - no per-material color\n\nShader \"Unlit/Transparent\" {\nProperties {    _MainTex (\"Base (RGB) Trans (A)\", 2D) = \"white\" {}}\nSubShader {\n    Tags {\"Queue\"=\"Transparent\" \"IgnoreProjector\"=\"True\" \"RenderType\"=\"Transparent\"}\n    LOD 100\n\n    ZWrite Off\n    Blend SrcAlpha OneMinusSrcAlpha\n\n    Pass {\n        CGPROGRAM\n            #pragma vertex vert\n            #pragma fragment frag\n            #pragma target 2.0\n            #pragma multi_compile_fog\n\n            #include \"UnityCG.cginc\"\n\n            struct appdata_t {\n                float4 vertex : POSITION;\n                float2 texcoord : TEXCOORD0;\n                UNITY_VERTEX_INPUT_INSTANCE_ID\n            };\n\n            struct v2f {\n                float4 vertex : SV_POSITION;\n                float2 texcoord : TEXCOORD0;\n                UNITY_FOG_COORDS(1)\n                UNITY_VERTEX_OUTPUT_STEREO\n            };\n\n            sampler2D _MainTex;\n            float4 _MainTex_ST;\n\n            v2f vert (appdata_t v)\n            {\n                v2f o;\n                UNITY_SETUP_INSTANCE_ID(v);\n                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);\n                o.vertex = UnityObjectToClipPos(v.vertex);\n                o.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);\n                UNITY_TRANSFER_FOG(o,o.vertex);\n                return o;\n            }\n\n            fixed4 frag (v2f i) : SV_Target            {                fixed4 col = tex2D(_MainTex, i.texcoord);                UNITY_APPLY_FOG(i.fogCoord, col);                return col;            }        ENDCG\n    }\n}}
\n

Here we find “Properties”, and both “vert” and “frag” functions. The frag function is basically doing the following thing : lookup the pixel color in _MainTex that is located at i.texcoord position, run a UNITY_APPLY_FOG process we don’t know about, return the color.

\n

Let’s try this shader already :

\n
    \n
  1. copy/paste file in project asset folder;
    2. \n
  2. in shader file line 8, rename shader from Shader Unlit/Transparent to Shader Custom/MyHologram;
    3. \n
  3. in unity editor right click on shader file -> create -> material to create a new material linked with the shader;
    4. \n
  4. drag and drop the “spotlight” sprite into the scene;
    5. \n
  5. drag and drop the material from asset folder to the sprite in the scene hierarchy, so that the sprite uses the material configured with our shader.
    6. \n
\n

The “spotlight” sprite? Let’s use this one :

\n
\n \n \n \n \"spot\"\n \n \n
\n

You should end with something like this :\n\n \n \n \n \n

\n

Add a glitch texture

\n

Let’s add a new glitch texture. We could either find one online, or create it ourself. Here is how I created mine :

\n
    \n
  1. Create a 1024x1024 png file filled with black.
    2. \n
  2. On a new layer, draw random horizontal white lines of 3 pixels height.
    3. \n
  3. Duplicate last created layer, apply a “motion blur effect” toward top, 10px
    4. \n
  4. repeat step 3. a few time until it creates a smooth gradient
    5. \n
  5. remove the original line layer (the pure white is too hard and sharp)
    6. \n
  6. merge all remaining layers
    7. \n
\n

You should get something like that (well, I also tweaked the luminosity curve a bit) :\n\n \n \n \n \n

\n

To use it into our shader, let’s mimic what is done for the _MainText.

\n

Line 11, add in the _GlitchTex property:

\n
Properties {\n    _MainTex (\"Base (RGB) Trans (A)\", 2D) = \"white\" {}\n    _GlitchTex (\"Glitch Texture\", 2D) = \"white\" {}\n}
\n

Then line 44, add the _GlitchTex declaration :

\n
sampler2D _MainTex;\nsampler2D _GlitchTex;\nfloat4 _MainTex_ST;
\n

From here, the “Glitch texture” property should appear in the spotlight inspector in Unity. Select the texture you just created (or use mine) as value.

\n

And… nothing happens. We now need to actually use the texture we declared in the shader code, the fun maths beggins !

\n

Fun with maths

\n

To change the rendering of the pixels, the fragment function is the one we should work with :

\n
fixed4 frag (v2f i) : SV_Target\n{\n    fixed4 col = tex2D(_MainTex, i.texcoord);\n    UNITY_APPLY_FOG(i.fogCoord, col);\n    return col;\n}
\n

We want to get the color of our glitch texture, let’s try to copy the function for the _MainTex, and mix the 2 colors.

\n
    fixed4 mainCol = tex2D(_MainTex, i.texcoord);\n    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);\n    fixed4 col = mainCol + glitchCol;
\n

\n \n \n \n \n

\n

Not bad, but we barly recognize the original sprite. That said, this colors could look good as an “additional layer”. Let’s add the original color on top of this one.

\n
    fixed4 mainCol = tex2D(_MainTex, i.texcoord);\n    fixed4 glitchCol = tex2D(_GlitchTex, i.texcoord);\n    fixed4 col = mainCol * glitchCol + mainCol;
\n

\n \n