Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

Unity - Écrire votre premier shader

Effet de distorsion

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Cette série explique comment programmer ses propres effets visuels grâce aux shaders.


Vous pouvez retrouver les autres épisodes de cette série dans le sommaire dédié.

II. Vidéo


Unity - Écrire votre premier shader


III. Résumé

Dans cette vidéo, vous allez découvrir comment modifier à la volée les sommets et le rendu du modèle 3D grâce aux shaders.

La première étape est d'utiliser la fonction clip() afin de supprimer des pixels à la volée :

 
Sélectionnez
clip(col.r - _CutoutThresh);

Ainsi, les pixels ayant une composante rouge inférieure à un certain seuil seront supprimés. La fonction clip() équivaut au code suivant :

 
Sélectionnez
if (col.r < _CutoutThresh) discard;

L'effet de distorsion est réalisé dans le vertex shader. En effet, le fragment shader n'a pas accès aux informations concernant les sommets, seul le vertex shader peut le faire.

_Time est une variable provenant de Unity permettant d'avoir accès au temps de l'application et ainsi de réaliser une animation dans le shader.

La distorsion est implémentée comme suit :

 
Sélectionnez
v.vertex.x += sin(_Time.y * _Speed + v.vertex.y * _Amplitude) * _Distance * _Amount;

La coordonnée X dépend du temps et de différents paramètres contrôlables à partir de l'éditeur. L'effet est réalisé dans l'espace de l'objet.

Sachant que l'animation est réalisée grâce au shader, l'animation sera visible dans l'éditeur même si vous n'êtes pas en mode jeu.

Le shader final est le suivant :

 
Sélectionnez
Shader "Unlit/Hologram"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _TintColor("Tint Color", Color) = (1,1,1,1)
        _Transparency("Transparency", Range(0.0, 0.5)) = 0.25
        _CutoutThresd("Cutout Threshold", Range(0.0, 1.0)) = 0.2
        _Distance("Distance", Float) = 1
        _Amplitude("Amplitude", Float) = 1
        _Speed("Speed", Float) = 1
        _Amount("Amount", Range(0.0,1.0)) = 1
    }

    SubShader
    {
        Tags { "Queue"="Transparent" "RenderType"="Transparent" }
        LOD 100
        
        ZWrite Off
        Blend SrcAlpha OneMinusSrcAlpha

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float4 _TintColor;
            float _Transparency;
            float _CutoutThresh;
            float _Distance;
            float _Amplitude;
            float _Speed;
            float _Amount;
            
            v2f vert (appdata v)
            {
                v2f o;
                v.vertex.x += sin(_Time.y * _Speed + v.vertex.y * _Amplitude) * _Distance * _Amount;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }
            
            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex, i.uv) + _TintColor;
                col.a = _Transparency;
                clip(col.r - _CutoutThresh);
                return col;
            }
            ENDCG
        }
    }
}

La variation des paramètres du shader est réalisée à travers un script C#. Pour ce faire, il est nécessaire d'accéder au Material de l'objet et de modifier la variable grâce à SetFloat() :

 
Sélectionnez
holoRenderer = GetComponent<Renderer>();
holoRenderer.material.SetFloat(«_Amount », 1f);

IV. Ressources

Vous pouvez télécharger les ressources pour ce projet ici.

V. Commenter

Vous pouvez commenter et donner vos avis dans la discussion associée sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2017 Unity Technologies. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.