Comment créer un shader pour skybox avec le shadergraph de Unity : Unity

Bienvenue dans ce nouveau tutoriel dédié à l'utilisation du ShaderGaph dans Unity.

Pour rappel que vous débutiez totalement ou que vous ayez déjà fait des shaders sous Unity, n'hésitez pas à faire un tour sur notre playlist regroupant l'ensemble des tutoriels sur le Shadergraph .

Prérequis: avoir des bases dans l'utilisation de Unity et du shadergraph de Unity

Ici nous allons donc utiliser le Shadergraph pour créer un Shader qui sera utilisé pour la Skybox de notre projet. Ainsi vous saurez comment faire mieux que la Skybox par défaut de Unity qui, disons le, est bien bien moche .

OK, mais c'est quoi une Skybox ?

Pour ceux qui découvrent le mot "Skybox", retrouvez déjà une première définition dans notre glossaire des mots farfelus .

Notion de Skybox

Nous n'allons pas ici nous attarder trop longtemps sur la techique ni sur la création from scratch d'une skybox, mais déjà tentons de saisir l'idée générale.

Un tutoriel dédié sera traité sur la création d'un Skybox from scratch dans les semaines suivantes.

Imaginons un instant votre personnage au milieu de la scène. Si le personnage regarde en l'air dans un monde réel on est censé voir le ciel (étoilé s'il fait nuit par exemple).

Or sans Skybox dans votre scène ... ben y'aura rien de rien à voir ... juste une "solid color" ! (voir la documentation Camera de Unity).

Ainsi nous devons ajouter notre ciel, mais comment faire ?

Le principe est très simple. On place un "cube gigantesque", pour faire simple, autour du personnage. Et sur les 6 faces du cube on place les Textures de notre ciel.

La réalisation technique concrète maintenant est plus complexe ... Heureusement avec Unity ou tout autre moteur de jeu qui se respecte, créer une Skybox n'est pas aussi difficile que cela , en tout cas pour des Skyboxes simples.

Le jeu vidéo Valheim offre des Skyboxes riches et dynamiques ...aussi nous ne pourrons en un seul tutoriel réaliser cela, mais au moins vous aurez été initiés sur le principe de base.

Mode nuit dans le jeu Valheim... C'est déjà en cela que la Skybox de ce jeu est dynamique, car l'aspect de la Skybox change selon s'il fait jour ou nuit. (notion de cycle jour - nuit).

Comment créer une skybox ?

Crée une Skybox from scratch nécessite des logiciels graphiques, ainsi que des dons de dessinateur.

Autant le dire de suite, ce défi n'est pas à la portée de tout le monde, encore moins si vous débutez dans la création de jeux vidéos.

Mais nous pouvons tout de même utiliser des éléments graphiques existants pour les intégrer dans notre jeu sous Unity.

En effet Unity propose plusieurs méthodes pour utiliser des éléments graphiques existants, et ainsi créer une Skybox dans le moteur de jeu Unity.

La méthode la plus simple consiste à utiliser un Legacy Cubemap et c'est cette méthode que nous allons illustrer dans ce tutoriel de création de Skybox.

Pour créer un Legacy cubemap, on doit disposer des 6 textures que l'on va affecter à chacune des faces de notre "cube géant" jouant le rôle de Skybox !

Commençons par créer l'Asset en faisant:

Clic droit -> Asset -> Create -> Legacy -> Cubemap

Comme vous pouvez le voir sur la capture ci-dessus, l'Asset est crée (SkyNightCubeMap.cubemap).

Si on le sélectionne maintenant, on retrouve les paramètres dans l'Inspector.

C'est ici que vous devez affecter les 6 textures pour les 6 faces du "cube géant".

Pour cela rien de plus simple .... retrouvez les textures que vous avez téléchargé avec le package d'une Skybox gratuite depuis l'Asset store, et affecter les par simple glisser/déposer.

Notez aussi le warning indiqué par Unity, qui nous indique qu'il est préférable d'utiliser un Cubemap pur et non Legacy Cubemap. Ceci dit malgré cela, notre Skybox fonctionnera bien quand même.

Créer un Cubemap pur n'est pas si compliqué que cela, mais cela demande d'abord une étape préalable dans un logiciel graphique comme Photoshop ou Gimp, afin d'agencer les 6 textures sur une seule et même texture.

Ainsi par simplicité nous avons opté ici pour un Legacy Cubemap, afin de se concentrer sur la partie dédiée à Unity.

A partir de maintenant nous pouvons déjà créer notre Skybox en créant en premier un Material basé sur le cubemap fraichement crée.

Sélection du cubemap -> clic droit -> create -> material

Puis sélectionnez le shader à utiliser en utilisant les shaders built-in de Unity : Skybox/6 sided (Legacy) ou Skybox/Cubemap

Il ne reste plus qu'à donner ce Material en tant que Material pour la Skybox de Unity et le tour est joué. (Fenêtre Lighting)

Retournez dans votre scène ... votre toute belle Skybox devrait vous ravir les yeux

Créer le shader de la Skybox avec le Shadergraph de Unity

La méthode précédente fonctionne très bien, mais nous allons être vite limités si on veut du dynamique ou encore si on veut ajouter des effets visuels !

En effet nous avons que du "visuel" actuellement ... par exemple notre skybox ne tourne pas ! Ainsi cela va être dur de programmer un cycle jour/nuit avec cette méthode .

Cependant la partie précédente est principalement là pour vous permettre de bien prendre en main les notions.

Pour être sûr de pouvoir customiser à 4000% notre Skybox, nous devons prendre la main et créer notre propre Shader.

Et c'est bien là que le ShaderGraph de Unity entre en scène.

Commençons donc par créer notre shader de type ShaderGraph:

Clic droit -> create -> Rendering -> Universal Render Pipeline -> Pipeline Asset

La suite est de l'utilisation directe du ShaderGraph, aussi n'hésitez pas à vous former si vous débutez avec.

Mais avant de plonger dans les noeuds du ShaderGraph, créez un Material qui utilise votre Shader nouvellement crée et donner le en tant que Material pour la Skybox de Unity (comme précédemment). Ainsi votre scène est déjà prête et vous allez pouvoir admirer directement vos avancées à chaque sauvegarde du Shader par la suite.

A présent double-cliquez sur le shader pour entrer en édition !

Nous allons ici utiliser le noeud Sample Cubemap pour assigner notre cubemap et connecter le tout à l'Input BaseColor du Master Stack Node.

Le Sample Cubemap prend en paramètre (Input Cube (C)) une propriété SkyCubemap qui est justement le cubemap que nous avons crée au tout début.

Le shader est en fait très simple.

Pour faire simple, le noeud position assure que tout sera correct, quelque soit la position où l'on se trouve dans la scène.

Et c'est tout ! Il ne reste plus qu'à sauver et à retourner dans la scène pour voir de nouveau votre belle skybox.

Cette dernière n'a pas changé d'aspect mais au moins, vous avez désormais le contrôle de son aspect et vous pourrez ajouter du dynamisme, comme par exemple la rotation en temps réel de la Skybox !

Nous arrivons au terme de ce tutoriel d'introduction aux skyboxes et j'espère que cela vous aura tout du moins éclairé sur cette notion.

Au studio Event Orizon nous travaillons actuellement sur une skybox procédurale qui nous permettra, à terme de créer un cycle jour/nuit et bien d'autres choses pour nos prochains jeux vidéos.

Si vous souhaitez suivre les recherches et les résultats obtenus, n'hésitez pas à faire un tour sur le Tipee de Event Orizon.

A très vite pour de nouvelles aventures...

Avant de se quitter...que diriez vous d'une petite démo en vidéo ?