(prise en compte de la transparence pour la projection des ombres)

6000+ view sur unify community (MàJ janv. 2012)	Etude complète, mise à disposition du code sous licence LGPL

Shader double face (transparent shadow receiver)

(prise en compte de la transparence pour la projection des ombres avec les Spot/Point lights et les Directional lights)

2500 + view sur unify community (MàJ janv. 2012)	Etude complète, mise à disposition du code sous licence LGPL

Shader Programing

Character Design

Scenario

Illustration

Asset 2D

3D Character

C# Programing

Scripting Python

• * Gestion avancée des ombres pour un « surface shader » ShaderLab Transparent
• * Travailler en rendering path “Forward” et le Lightmode “ForwardBase”
• * Activer les ombres depuis n’importe quel type de Light (Méthodes 1 et 2)
• * Composer une scène à partir de vues en mode “Forward” et “Deferred Lighting”

Cet article n’est, pour l’instant, disponible qu’en version anglaise.

Il comprend

• coté client : un moteur de jeu connecté à un système de base de donnée via un outil de gestion de base de donnée automatisé.

• coté serveur : un serveur connecté à un système de base de donnée via un outil de gestion de base de donnée automatisé. La gestion des listes d’utilisateurs se fait via le BackEnd WordPress. La récupération de données de jeu automatique (par exemple pour la publication de classements de joueurs) est également assurée par des modules WordPress.

Nous avons le plaisir de vous annoncer que nous allons commercialiser cette intégration sous la forme d’un SDK incluant le code source complet. Tous les éléments de l’intégration sont soit sous licence libre soit disposent d’une licence d’utilisation (limitée ou non) gratuite. Seuls vos impératifs de production ou l’exploitation commerciale à large échelle de votre application vous imposera l’achat de licence(s) tierce(s).

Klakos le SDK sera disponible pour essai sous la forme d’une DLL et d’un jeu de données d’essai dans 15 jours. 10 licences d’utilisation commerciale seront concédées au prix de 5000€ HT (monde entier, nombre d’application illimité, pas de royalties).

Pour plus de renseignement, contactez Jean Christophe sur

• * Animation des vertex d’un drapeau via un shader (trigonométrie)
• * Usage avancé des « Surface Shaders » (ShaderLab) pour gérer la transparence
• * Ajout d’une passe de « Shadow » (supporte l’Alpha)
• * Méthodes de rendu double-faces (Double-sided) (méthodes 1, 2 et 3)
• * Assistant de configuration des « Materials » double-faces (pour la méthode 3)

>>> Téléchargements

• - Version PDF de cet article : WavingFlag.pdf
• - Assistant de configuration : BackwardMaterialBuilder.cs
• - Package Unity 3.3.0f4 : WavingFlagDemo.unitypackage | WavingFlagDemo.rar

>>> Animation des vertex d’un drapeau via un shader ShaderLab (Unity 3)

Ref : http://forum.unity3d.com/threads/19575-waving-flag-shader-feedback-please!

Partant de ce post, j’ai développé l’idée. Voici quelques informations sur l’animation des vertex d’un « Mesh » directement dans un shader.

[CODE]

void computeWave (inout appdata_full v, inout v2f o)
{
float sinOff=(v.vertex.x+v.vertex.y+v.vertex.z) * _WaveStrength;
float t=-_Time*_WaveSpeed;
float fx=v.texcoord.x;
float fy=v.texcoord.x*v.texcoord.y;
v.vertex.x+=sin(t*1.45+sinOff)*fx*0.5;
v.vertex.y=(sin(t*3.12+sinOff)*fx*0.5-fy*0.9);
v.vertex.z-=(sin(t*2.2+sinOff)*fx*0.2);
o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
o.uv = v.texcoord;
}

Ceci est l’algorithme original tel que conçu par « cboe » et « Seon » – voir le lien ci-dessus.

J’y ai simplement ajouté un paramètre “_WaveStrength”, permettant d’obtenir un drapeau plus réactif, pour les jours de tempête.

[FIG 1]

>>> Usage avancé des « Surface Shaders » (ShaderLab) pour gérer la transparence

Les “Surface” shaders, disponibles sous Unity 3 sont simples et puissants (à l’exception du fait qu’ils n’autorisent pas le « multi-passes » – voir plus loin dans ce doc.)

Quoi qu’il en soit, ce sont eux que j’ai choisi pour accomplir cette étude.

[CODE]


Tags {
"Queue"="Geometry"
"IgnoreProjector"="True"
"RenderType"="Transparent"
}
LOD 300
CGPROGRAM
#pragma surface surf BlinnPhong alpha vertex:vert fullforwardshadows approxview
#include "FlagWaveCG.cginc"
half _Shininess;
sampler2D _BumpMap;
float _Parallax;
struct Input {
float2 uv_MainTex;
float2 uv_BumpMap;
};
v2f vert (inout appdata_full v) {
v2f o;
computeWave(v, o);
return o;
}
void surf (Input IN, inout SurfaceOutput o) {
fixed4 tex = tex2D(_MainTex, IN.uv_MainTex);
o.Albedo = tex.rgb * _Color.rgb;
o.Gloss = tex.a;
o.Alpha = tex.a * _Color.a;
o.Specular = _Shininess;
o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
}
ENDCG


Détails concernant le code ci-dessus :

> Les Tags :

• - Il est important d’utiliser le paramètre “Geometry”, pour la file de rendu, afin de conserver une position correcte en terme de profondeur dans le flux de rendu (habituellement “Transparent” est utilisé pour les objets transparents, mais, dans notre cas, nous souhaitons avoir un drapeau qui soit bien agencé dans notre « scene graph » – les objets qui sont devant lui doivent le cacher, et il doit cacher ceux qui sont derrière lui).




• - Le type de rendu “Transparent”, a également sont importance : c’est lui qui permet d’obtenir les trous dans la surface de l’objet (en utilisant la couche Alpha de la texture principale).

> “#pragma surface surf BlinnPhong alpha vertex:vert fullforwardshadows approxview” :

Cette ligne est assez complexe, mais les éléments à en retenir sont :

• - L’option “alpha” : permet un « beau » rendu des pixels semi-transparents (ceci diffère du simple “Cutoff”, qui, lui, affiche ou non les pixels sans demie-mesure.

Cette option nécessite d’être accompagnée de l’instruction “o.Alpha = tex.a * _Color.a;” (dans la fonction ‘surf’).

[FIG 2.1]

[FIG 2.2]

Dans la figure [FIG 2.1], nous voyons ostensiblement l’aliasing autour des zones transparentes; là où la fusion avec le fond devrait être douce (puisqu’elle l’est dans ma texture principale).


Dans la figure [FIG 2.2] : le résultat en activant l’option “alpha”.


Attention : Cette manière de faire peut entraîner des soucis en cas d’utilisation des « Skybox » toutes faites de Unity… Donc, il convient d’être vigilant en ce qui concerne la gestion de la file de rendu (Render Queue).

• - La déclaration “vertex:vert” : où ‘vert’ est la fonction utilisée pour opérer sur les vertex. Comme vu précédemment, c’est elle qui est sollicitée pour animer la position des vertex (fonction ‘computeWave’).




• - L’option “fullforwardshadows” : permet de forcer notre drapeau à recevoir les ombres, bien qu’en “alpha” :

[FIG 3]

Ici, les drapeaux reçoivent les ombres projetées par l’objet solide, en haut à gauche.

Note : Ces ombres projetées ne gênent en rien au niveau des zones de transparence (voir zone entourée de rouge).


Ils projettent aussi des ombres sur eux-même :


[FIG 4]

• - L’option “approxview” : sert, ici, à économiser des instructions de calcul (néanmoins : perte quand la caméra est très proche du sujet).

>>> Ajout d’une passe de « Shadow » (supporte l’Alpha)

Pour rendre tout cela plus réaliste, le drapeau devrait aussi projeter des ombres sur son environnement; et ces ombres doivent être en concordance avec ses déformations.

Dans ce cadre, nous devons ajouter une passe de rendu supplémentaire au shader :

[CODE]


Pass
{
Name "ShadowCaster"
Tags { "LightMode" = "ShadowCaster" }
Fog {Mode Off}
ZWrite On ZTest Less Cull Off
Offset 1, 1
CGPROGRAM
#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_shadowcaster
#include "FlagWaveCG.cginc"
v2f vert( appdata_full v )
{
v2f o;
computeWave(v, o);
TRANSFER_SHADOW_CASTER(o)
return o;
}
float4 frag( v2f i ) : COLOR
{
fixed4 texcol = tex2D( _MainTex, i.uv );
clip( texcol.a - _Cutoff );
SHADOW_CASTER_FRAGMENT(i)
}
ENDCG
}


Dans cette passe, nous appliquons, d’abord, (fonction ‘vert’) une transformation ondulatoire d’UV, avec la même fonction que celle utilisée précédemment dans la passe de type « Surface » (fonction ‘computeWave’), puis, nous sommons le moteur de rendu de projeter l’ombre du drapeau en fonction de sa nouvelle géométrie, en temps réel (instruction ‘TRANSFER_SHADOW_CASTER’).

Pour finir, nous voulons que l’ombre reflète les trous dans le drapeau – les zones transparentes de la texture principale : ceci sera effectué dans la fonction ‘frag’, où l’ombre est découpée par rapport à un seuil donné par la couche Alpha de cette texture (instruction ‘SHADOW_CASTER_FRAGMENT’).

Note : Le seuil peut être personnalisé en modulant le paramètre “_Cutoff”, dynamiquement, ou directement depuis le fenêtre ‘Inspector’ de Unity.

>>> Conclusion Intermédiaire :

Bien, nous en avons terminé avec la première partie : concevoir un très très joli drapeau aux mouvement ondulatoires d’un réalisme complètement fou. Vous en avez donc également terminé, si votre objectif était de n’afficher qu’un drapeau qui ne serait regardé que de face. La suite de ce document consiste à obtenir une surface à double-faces (double-sided) – qu’on puisse au moins tourner autour du drapeau dans un FPS ! Pour cela, différentes méthodes peuvent être envisagées (qui possèdent, bien entendu, toutes, des avantages et des inconvénients).

Le code source complet pour le shader dont nous avons parlé jusqu’ici :

[CODE] / Le fichier ‘.cginc’ partagé inclus : FlagWaveCG.cginc [télécharger le fichier]


#include "UnityCG.cginc"
float4 _Color;
sampler2D _MainTex;
fixed _Cutoff;
float _WaveSpeed;
float _WaveStrength;
struct v2f {
V2F_SHADOW_CASTER;
float2 uv : TEXCOORD1;
};
void computeWave (inout appdata_full v, inout v2f o)
{
float sinOff=(v.vertex.x+v.vertex.y+v.vertex.z) * _WaveStrength;
float t=-_Time*_WaveSpeed;
float fx=v.texcoord.x;
float fy=v.texcoord.x*v.texcoord.y;
v.vertex.x+=sin(t*1.45+sinOff)*fx*0.5;
v.vertex.y=(sin(t*3.12+sinOff)*fx*0.5-fy*0.9);
v.vertex.z-=(sin(t*2.2+sinOff)*fx*0.2);
o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
o.uv = v.texcoord;
}


[CODE] / Le fichier principal du « Surface Shader » : FlagWave-Advanced.shader [télécharger le fichier]


// Original shader by cboe - Mar, 23, 2009
// Enhanced to 3 axis movement by Seon - Jan, 21, 2010
// Added _WaveSpeed by Eric5h5 - Jan, 26, 2010
// CHANGE LOG - Gauthier BOAGLIO (golgauth) / Klakos - May, 07, 2011 :
// - Added Transparency support
// - Added Spec and Normal mapping support
// - Added Shadow casting support (+ Shadow Alpha and Shadow Alpha cutoff support)
// [Done in the "ShadowCaster" additional Pass]
// - Added advanced double-sided rendering support
// - Added _WaveStrength param
//
// Requirements: assumes you are using a subdivided plane created with X (width) * Z (height) where Y is flat.
// Requirements: assumes UV as: left X (U0) is attatched to pole, and Top Z (V1) is at top of pole.
//
// See [ http://klakos.com/en/advanced-waving-flag-shader-for-unity-double-sided-alpha-shadow-support-2/ ] for
// visuals and more informations
Shader "Selfmade/for-2sided/FlagWave Advanced Regular"
{
Properties
{
// Ususal stuffs
_Color ("Main Color", Color) = (1,1,1,1)
_SpecColor ("Specular Color", Color) = (0.5, 0.5, 0.5, 0)
_Shininess ("Shininess", Range (0.01, 1)) = 0.078125
_MainTex ("Base (RGB) TransGloss (A)", 2D) = "white" {}
// Bump stuffs
//_Parallax ("Height", Range (0.005, 0.08)) = 0.02
_BumpMap ("Normalmap", 2D) = "bump" {}
//_ParallaxMap ("Heightmap (A)", 2D) = "black" {}
// Shadow Stuff
_Cutoff ("Shadow Alpha cutoff", Range(0.25,0.9)) = 1.0
// Flag Stuffs
_WaveSpeed ("Wave Speed", Range(0.0, 300.0)) = 50.0
_WaveStrength ("Wave Strength", Range(0.0, 5.0)) = 1.0
}
SubShader
{
Tags {
"Queue"="Geometry"
"IgnoreProjector"="True"
"RenderType"="Transparent"}
LOD 300
Pass
{
Name "ShadowCaster"
Tags { "LightMode" = "ShadowCaster" }
Fog {Mode Off}
ZWrite On ZTest Less Cull Off
Offset 1, 1
CGPROGRAM
#pragma exclude_renderers gles
#pragma vertex vert
#pragma fragment frag
#pragma fragmentoption ARB_precision_hint_fastest
#pragma multi_compile_shadowcaster
#include "FlagWaveCG.cginc"
v2f vert( appdata_full v )
{
v2f o;
computeWave(v, o);
TRANSFER_SHADOW_CASTER(o)
return o;
}
float4 frag( v2f i ) : COLOR
{
fixed4 texcol = tex2D( _MainTex, i.uv );
clip( texcol.a - _Cutoff );
SHADOW_CASTER_FRAGMENT(i)
}
ENDCG
}
CGPROGRAM
#pragma surface surf BlinnPhong alpha vertex:vert fullforwardshadows approxview
#include "FlagWaveCG.cginc"
half _Shininess;
sampler2D _BumpMap;
//sampler2D _ParallaxMap;
float _Parallax;
struct Input {
float2 uv_MainTex;
float2 uv_BumpMap;
//float3 viewDir;
};
v2f vert (inout appdata_full v) {
v2f o;
computeWave(v, o);
return o;
}
void surf (Input IN, inout SurfaceOutput o) {
// Comment the next 4 following lines to get a standard bumped rendering
// [Without Parallax usage, which can cause strange result on the back side of the plane]
/*half h = tex2D (_ParallaxMap, IN.uv_BumpMap).w;
float2 offset = ParallaxOffset (h, _Parallax, IN.viewDir);
IN.uv_MainTex += offset;
IN.uv_BumpMap += offset;*/
fixed4 tex = tex2D(_MainTex, IN.uv_MainTex);
o.Albedo = tex.rgb * _Color.rgb;
o.Gloss = tex.a;
o.Alpha = tex.a * _Color.a;
//clip(o.Alpha - _Cutoff);
o.Specular = _Shininess;
o.Normal = UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
}
ENDCG
}
Fallback "Transparent/VertexLit"
}


Note : Si vous souhaitez utiliser ce shader tel-quel et voulez activer le « parallax », vous aurez à jongler avec le nombre d’instructions autorisées dans la fonction ‘surf’ (limité à 64 – Voir aussi “#pragma target 3.0”, pour augmenter ce nombre). Ajouter des instructions va immanquablement vous pousser à en supprimer d’autres (ce shader étant déjà relativement chargé – ex : “fullforwardshadows” est un peu lourd, c’est la raison pour laquelle j’ai dû y adjoindre “approxview”).

>>> Méthodes de rendu double-faces (Double-sided) (méthodes 1, 2 and 3)

>> La Méthode du “Mesh Doublé” :

Cette méthode est fréquemment utilisée pour sa simplicité et son efficacité, suivant l’objectif visé.

Il s’agit de dupliquer le mesh du plan, en gardant le même « Material » que pour le mesh originel; mais en en inversant les normales des faces via votre outil de modélisation 3D préféré (c’est-à-dire Blender ).

Avantages : Facile

inconvénients : A chaque fois que le mesh doit être modifié, le second aussi : cette opération peut s’avérer compliquée et chronophage.

>> La Méthode “CULL Off” :

Celle-ci est également simple à mettre en œuvre :

Il nous suffit d’éditer notre précédent shader et d’y ajouter l’instruction “CULL Off”, juste avant de débuter le corps du “CGPROGRAM”, comme suit :

[CODE]


CULL Off
CGPROGRAM
#pragma surface surf BlinnPhong alpha vertex:vert fullforwardshadows approxview
#include "FlagWaveCG.cginc"
.
.
.


La commande “CULL” peut prendre 3 valeurs :

• - “Back” (la valeur par défaut) : cache les faces arrières
• - “Front” : ne montre que les faces arrières
• - “Off” : fait le rendu de toutes les faces

[FIG 5]

Bien, ça marche, mais il semblerait que j’aie perdu mon Bump, ma Spec, et bien d’autres choses…

Avantages : Simple, inclus au shader (donc le mesh peut être modifié à volonté, sans affecter le rendu).


inconvénients : Les faces arrière sont bien affichées, mais elles héritent de l’éclairage des faces avant (dans la figure [FIG 5], il apparaît que le drapeau est plongé dans la noirceur X-). Exception faite de certains cas bien précis, ça n’est pas du tout satisfaisant.


>> La Méthode “Flip Normals Via Shader” :


Celle que je préfère !


Ref : http://forum.unity3d.com/threads/61882-U3-Add-2-sided-to-AlphaTest-Bumped.shader

[Big thanks to Daniel Brauer]


L’objet de cette méthode est de traiter séparément les faces avant et arrière du Mesh du plan. Pour faire ceci, et du fait que nous travaillons avec des « Surface Shaders » (souvenez-vous que ces derniers ne supportent pas le « multi-passes »*), nous sommes dans l’obligation de créer deux Shaders/Materials pour chaque type de faces.


*Note : Si c’était le cas, nous aurions pu utiliser un Shader/Material unique constitué de deux passes (une pour les faces avant et une autre pour les faces arrière), au lieu de deux…


Etape 1 :


Choisir un shader (parmi ceux intégrés à Unity
[ http://unity3d.com/support/resources/assets/built-in-shaders ], ou un de votre cru).


Note : La valeur de “CULL” doit être : “Back” (ou, encore, pas d’instruction “CULL” du tout). Ce Material / Shader doit, en effet, n’affecter que les faces avant !


Etape 2 :


L’affecter à un un Material fraîchement créé sous Unity, et configurer selon les besoins.


Etape 3 :


Ajouter ce Material à la liste des Materials du composant Renderer de l’objet plan du drapeau.


Etape 4 :


Créer le Shader pour les faces arrière.

Pour ce faire, simplement éditer le shader précédent [appelons le : “Regular” shader] et le sauvegarder sous un autre nom [appelons ce dernier : le “Backward” shader].


Puis, quelques modiques modifications :

Nous n’avons, ici, pas besoin de changer le comportement général (Bump, …) du shader : les faces arrière doivent avoir, à priori, les mêmes réactions à la lumière que les faces avant. Tout ce que nous voulons, c’est avoir des faces arrière correctement orientées lorsqu’elles sont affichées (c’est-à-dire, face à l’objectif) : Le jeu étant d’inverser la direction des normales directement via le shader :


1- Ajouter une directive “CULL Front” (comme exposé précédemment dans le doc. pour “CULL Off”)

2- Inverser les normales au moment de les déployer/unpacking, comme suit (un “moins” devant la commande “UnpackNormal”) :


[CODE] – [télécharger le fichier]


CULL Front
CGPROGRAM
#pragma surface surf BlinnPhong alpha vertex:vert fullforwardshadows approxview
.
.
.
void surf (Input IN, inout SurfaceOutput o) {
o.Gloss = tex.a;
o.Alpha = tex.a * _Color.a;
.
.
.
o.Specular = _Shininess;
o.Normal = -UnpackNormal(tex2D(_BumpMap, IN.uv_BumpMap));
}
ENDCG


Etape 5 :


Affecter le “Backward” shader à un Material nouvellement créé, et le configurer comme le “Regular” shader.


Etape 6 :


Ajouter ce second Material à la liste des Materials du Renderer de l’objet plan du drapeau.


Etape 7 :


Voilà !

Vous pouvez tourner l’objet dans n’importe quel sens, déplacer ou ajouter des Lights, modifier le Mesh. Tout devrait bien se passer…


[FIG 6]

Ces tous derniers paramétrages donnent :

Avantages : Principalement, le fait qu’on ne travaille que sur un seul Mesh et que les deux côtés de l’objet sont rendus correctement, sans pour autant perdre en qualité (transparency, shadowing, …), implémentée au fil de ce document.


inconvénients : Nécessite 2 Materials (qui ont le même paramétrage) [voir “Assistant de Configuration”, pour plus de facilité à configurer et synchroniser les “Regular” => “Backward” materials]

>>> Assitant de Configuration des « Materials » Double-Faces (pour la méthode 3)

> Description :

Cet outil est destiné à faciliter l’exécution des étapes énoncées précédemment. En particulier, la nécessité de synchroniser les Materials des faces avant et arrière.


> Prérequis :

1- Conventions de nommage pour les shaders.

En premier lieu, bien garder en tête que, pour des raisons de simplicité, cet outil est partiellement basé sur des conventions de noms :

• - Les noms des Shaders de type Front/Forward doivent se terminer par le suffixe “Regular”
• - Les noms des Shaders de type Back/Backward doivent se terminer par le suffixe “Backward”

Ces conventions se rapportent exclusivement aux noms donnés aux Shaders (voir en-tête « Shader » des shaders), et non aux noms des Materials.


[CODE]


Shader "Selfmade/for-2sided/FlagWave Advanced Regular"
{
Properties
{
// Usual stuffs
_Color ("Main Color", Color) = (1,1,1,1)
_SpecColor ("Specular Color", Color) = (0.5, 0.5, 0.5, 0)
.
.
.


2- Les Materials (au sens d’assets Unity) doivent être créés manuellement, et cet outil n’est destiné qu’à faciliter leur configuration.

3- Les différents Shaders utilisés doivent avoir été créés au préalable.

> Installation :

Juste faire glisser le script “BackwardMaterialBuilder.cs” (ScriptableWizard) dans le répertoire “Assets/Editor” du projet Unity.


> Usage :

Pour accéder à l’assistant, sélectionner un objet (depuis l’onglet « Hierarchy » ou « Project »). Puis, click-droit sur l’icône du menu contextuel du Renderer (valable aussi bien pour les MeshRenderers que pour les SkinnedMeshRenderers), et choisir “Set 2-sided Materials” :


[FIG 7]

La fenêtre correspondante liste tous les materials ayant un “Regular” shader de la liste de Materials du Renderer :

[FIG 8]

Ensuite, sélectionner un des Materials et cliquer sur “Proceed”.


Si le “Backward” Shader correspondant existe dans le projet, 3 opportunités peuvent se présenter :

• - La synchronisation des propriétés des Materials de type “Regular” vers “Backward”, si ces Materials existent déjà
• - La création de la version “Backward” du Material celle-ci n’existe pas (sans toucher au shader)
• - Ecraser ou non le Shader actuel de l’actuel “Target Backup Material”

Puis, faire glisser un Material de votre choix depuis le dossier “Assets” vers le champ “Target Backup Material”.


L’option “Force Shader” est destinée à remplacer sciemment, le “Backward” Shader approprié vers le Material ciblé.

Si cette option est décochée, le Shader d’origine du Material demeure inchangé.

Dans la plupart des cas, cette option doit être activée (mais elle comporte le risque d’écraser toute la configuration courante du Material ciblé – Ctrl-Z is your friend, anyway…).


[FIG 9]

Big Conclusion

Ben… Pas plus, en fait…

Hope this will help,

et n’hésitez pas à poster des retours (j’ai besoin de vous pour m’aider à améliorer ce doc.)

Thanks & Enjoy!