{"componentChunkName":"component---src-templates-blog-post-js","path":"/fr/blog/hacking-through-shaders/","result":{"data":{"site":{"siteMetadata":{"title":"A Game Studio","author":"Lythom"}},"markdownRemark":{"id":"c5a862c5-f752-5eca-95db-91acae69c013","html":"

N’importe quel programmeur sain d’esprit enseignerait “Lisez la documentation, comprenez ce que vous faites, et vous serez capable de résoudre vos problèmes”. Tout à fait vrai ! Mais il y a un défaut : plus le sujet est vaste ou profond, plus le temps nécessaire à son apprentissage est grand. Parfois, “hacker” son chemin pourrait suffire. Et puis la vie est plus amusante avec un brin de folie non ? Trafiquons les shaders !

\n
\n\n
\n

Un pas en arrière

\n

Ok oui il y a des choses que vous devez savoir avant de plonger dans les shaders, les voici :

\n
    \n
  1. \n

    Un shader contient 3 parties importantes : les déclarations, la fonction vertex et la fonction fragment.

    \n\n
    2. \n
  2. Une couleur est représentée par un vecteur à 4 dimensions fixed4.
    3. \n
  3. Dans la fonction fragment, vous ne manipulez qu’un seul pixel à la fois.
    4. \n
  4. La fonction frac(float) renvoie la partie décimale d’un nombre à virgule flottante.
    5. \n
  5. text2D(sampler2D,float2) donne la couleur des pixels de la texture sample2D à la coordonnée float2. Vous obtenez cette coordonnée en paramètre d’entrée dans la fonction fragment.
    6. \n
  6. Les coordonnées sont comprises entre (0,0) et (1,1).
    7. \n
\n

Ça peut sembler très spécifique si les shaders sont nouveaux pour vous, mais ce sont en fait des choses que vous trouveriez tôt dans votre apprentissage des shaders.

\n

Plusieurs couches de rendu

\n

Je travaille sur un jeu appelé A Time Paradox qui se déroule dans un univers futuriste (dans un vaisseau spatial chevauchant un horizon de trou noir). Une façon d’évoquer un monde futuriste est d’utiliser quelque chose de typique, attrayant et rapide à créer : des hologrammes.

\n

Voici l’idée : nous allons afficher une texture de projecteur (spotlight) en arrière-plan, puis animer une texture de bruit (glitch) sur le dessus pour simuler des lignes de balayage. Le plan ? Trouver un shader 2D assez simple comme point de départ, puis ajouter une texture de glitch par dessus la texture principale. Enfin, s’amuser avec des maths pour animer la texture de glitch.

\n

En avant !

\n

Shader de départ

\n
\n

Note : J’utilise Unity et paint.NET comme outils mais la façon de faire fonctionnerait pour n’importe quel moteur ou technologie supportant les shaders et n’importe quel éditeur d’images.

\n
\n

Sur https://unity3d.com/fr/get-unity/download/archive vous trouverez sous “téléchargements (votre plate-forme)” une entrée nommée “shaders intégrés”. Il contient tous les shaders de Unity et ils peuvent être copié/collé/modifié dans votre projet. J’ai choisi de commencer avec le shader DefaultResourcesExtra\\Unlit\\Unlit-Alpha.shader puisque je travaille en 2D sans éclairage et avec transparence. Il ressemble à ça :

\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

On trouve ici les “Properties”, ainsi que les fonctions “vert” et “frag”. La fonction frag fait globalement la chose suivante : rechercher la couleur du pixel dans _MainTex qui est situé à la position i.texcoord, exécuter un processus UNITY_APPLY_FOG_FOG que nous ne connaissons pas, retourner la couleur.

\n

Avant tout, faisons fonctionner ce shader :

\n
    \n
  1. copier/coller le fichier shader dans le dossier assets du projet;
    2. \n
  2. dans le fichier shader ligne 8, renommer le shader de Shader Unlit/Transparent en Shader Custom/MyHologram ;
    3. \n
  3. dans l’éditeur de Unity, cliquez avec le bouton droit de la souris sur le fichier shader -> create -> material pour créer un nouveau material associé au shader ;
    4. \n
  4. créer (voir ci-dessous), puis glisser-déposer le sprite “spotlight” depuis les assets vers la scène ;
    5. \n
  5. glisser-déposer le material du dossier asset vers le sprite dans la hiérarchie de la scène pour que le sprite utilise le material configuré avec notre shader.
    6. \n
\n

Le sprite “spotlight” ? Utilisons celui là :

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

Cela devrait donner le résultat suivant :\n\n \n \n \n \n

\n

Ajouter une texture de glitch

\n

Ajoutons une nouvelle texture de glitch. Nous pourrions soit en trouver une en ligne, soit la créer nous-même. Voici comment j’ai créé la mienne :

\n
    \n
  1. Créez un fichier png 1024x1024 entièrement noir.
    2. \n
  2. Sur un nouveau calque, tracez au hasard des lignes blanches horizontales de 3 pixels de hauteur.
    3. \n
  3. Dupliquer le dernier calque créé, appliquer un “effet de flou de mouvement” vers le haut de 10px
    4. \n
  4. Répétez l’étape 3. quelques fois jusqu’à avoir un dégradé lisse.
    5. \n
  5. Enlever la couche de ligne d’origine (le blanc pur est trop dur et tranchant).
    6. \n
  6. Fusionner toutes les couches restantes.
    7. \n
\n

Vous devriez obtenir quelque chose comme ça (j’ai aussi un peu modifié la courbe de luminosité) :\n\n \n \n \n \n

\n

Pour l’utiliser dans notre shader, recopions ce qui est fait pour le _MainText.

\n

Ligne 11, ajoutons la propriété _GlitchTex :

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

Puis ligne 44, ajouter la déclaration _GlitchTex :

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

A partir de ce point, la propriété “Glitch texture” devrait apparaître dans l’inspecteur du sprite “spotlight” dans Unity. Sélectionnez la texture que vous venez de créer (ou utilisez la mienne) comme valeur.

\n

Et… il ne se passe rien. En effet, nous devons maintenant utiliser au niveau du rendu la texture que nous avons déclarée dans le code du shader. Que les maths commencent !

\n

Maths et fun

\n

Pour changer le rendu des pixels, la fonction fragment est celle que nous devons modifier :

\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

L’objectif est d’afficher la couleur de notre texture “glitch”, essayons de copier le code utilisé pour _MainTex et de mélanger les 2 couleurs.

\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

Pas mal, mais on ne reconnait pas le sprite d’origine. Cela dit, on pourrait utiliser ce résultat comme “couche supplémentaire” non ? Additionnons ce rendu (mainCol * glitchCol) avec la couleur d’origine (mainCol).

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

\n \n