Concepteur Shader

Ce document explique comment utiliser le Concepteur de nuanceur Visual Studio pour créer, modifier et exporter des effets visuels personnalisés, appelés nuanceurs.

Le Concepteur de nuanceur permet de créer des effets visuels personnalisés pour un jeu ou une application sans même connaître la programmation HLSL (High Level Shader Language). Un nuanceur créé dans le Concepteur de nuanceur est présenté sous forme de graphe. En d’autres termes, vous ajoutez à l’aire de conception des nœuds qui représentent les données et les opérations, avant de créer des connexions pour définir la manière dont ces opérations traitent les données. À chaque nœud d’opération, un aperçu de l’effet jusqu’à ce point est fourni afin que vous puissiez visualiser son résultat. Les flux de données transitent via les nœuds vers un nœud final qui représente la sortie du nuanceur.

Formats pris en charge

Le Concepteur de nuanceur prend en charge les formats de nuanceur suivants :

Nom de format	Extension de fichier	Opérations prises en charge (afficher, modifier, exporter)
DGSL (Directed Graph Shader Language)	.dgsl	Afficher, modifier
Nuanceur HLSL (code source)	.hlsl	Exporter
Nuanceur HLSL (bytecode)	.cso	Exporter
En-tête C++ (tableau de bytecode HLSL)	.h	Exporter

Bien démarrer

Cette section explique comment ajouter un nuanceur DGSL à un projet C++ Visual Studio et donne des informations de base pour commencer.

Notes

L’intégration de la génération automatique d’éléments graphiques comme les graphes de nuanceurs (fichiers .dgsl) n’est prise en charge que pour les projets C++.

Pour ajouter un nuanceur DGSL à votre projet

1. Vérifiez que le composant Visual Studio dont vous avez besoin pour travailler avec les graphismes est installé. Il s’appelle Éditeurs d’images et de modèles 3D.

   Pour l’installer, ouvrez Visual Studio Installer en sélectionnant Outils>Obtenir des outils et des fonctionnalités dans la barre de menus, puis sélectionnez l’onglet Composants individuels. Sélectionnez le composant Éditeurs d’images et de modèles 3D sous la catégorie Jeux et graphiques, puis sélectionnez Modifier.

   

2. Dans l’Explorateur de solutions, ouvrez le menu contextuel du projet C++ auquel vous voulez ajouter le nuanceur, puis choisissez Ajouter>Nouvel élément.

3. Dans la boîte de dialogue Ajouter un nouvel élément, sous Installé, sélectionnez Graphiques, puis Graphe de nuanceur visuel (.dgsl).

   Notes

   Si la catégorie Graphismes n’apparaît pas dans la boîte de dialogue Ajouter un nouvel élément alors que le composant Éditeurs d’images et de modèles 3D est installé, cela signifie que les éléments graphiques ne sont pas pris en charge pour votre type de projet.

4. Spécifiez le Nom du fichier du nuanceur, ainsi que l’Emplacement où vous souhaitez le créer.

5. Choisissez le bouton Ajouter.

Nuanceur par défaut

Chaque fois que vous créez un nuanceur DGSL, il s’agit au début d’un nuanceur minimal qui dispose simplement d’un nœud Couleur du point, qui est connecté au nœud Couleur finale. Même si ce nuanceur est complet et fonctionnel, il ne fait pas grand-chose. Par conséquent, la première étape de la création d’un nuanceur de travail consiste souvent à supprimer le nœud Couleur du point ou à le déconnecter du nœud Couleur finale pour faire de la place pour d’autres nœuds.

Utilisation du concepteur Shader

Les sections suivantes décrivent l’utilisation du concepteur de nuanceur avec des nuanceurs personnalisés.

Barres d’outils du concepteur de nuanceur

Les barres d’outils du concepteur de nuanceur contiennent des commandes qui vous permettent de travailler avec des graphes de nuanceur DGSL.

Les commandes qui affectent l’état du concepteur de nuanceur se trouvent dans la barre d’outils Mode du concepteur de nuanceur, dans la fenêtre principale de Visual Studio. Les outils et commandes de conception sont situés dans la barre d’outils Concepteur de nuanceur de l’aire de conception du concepteur de nuanceur.

Barre d’outils Mode du concepteur de nuanceur :

Ce tableau décrit les éléments de la barre d’outils Mode du concepteur de nuanceur, répertoriés suivant l’ordre de leur affichage, de gauche à droite.

Élément de la barre d'outils	Description
Select	Permet l’interaction avec des nœuds et des bords dans le graphique. Dans ce mode, vous pouvez sélectionner des nœuds et les déplacer ou les supprimer. Vous pouvez également créer des bords ou les couper.
Panoramique	Permet de déplacer un graphe de nuanceur par rapport au cadre de la fenêtre. Pour effectuer un mouvement panoramique, sélectionnez un point dans l’aire de conception et déplacez-le. En mode Sélection, vous pouvez maintenir enfoncée la touche Ctrl pour activer temporairement le mode Panoramique.
Zoom	Permet d’afficher un graphique de nuanceur avec plus ou moins de détails par rapport au cadre de la fenêtre. En mode Zoom, sélectionnez un point dans l’aire de conception et déplacez-le vers la droite ou le bas pour effectuer un zoom avant, ou vers la gauche ou le haut pour effectuer un zoom arrière. En mode Sélection, vous pouvez maintenir enfoncée la touche Ctrl pour effectuer un zoom avant ou arrière à l’aide de la roulette de la souris.
Zoom pour ajuster	Affiche le graphe de nuanceur complet dans le cadre de la fenêtre.
Mode de rendu en temps réel	Quand le rendu en temps réel est activé, Visual Studio redessine l’aire de conception, même quand aucune action utilisateur n’est effectuée. Ce mode est utile lorsque vous travaillez avec des nuanceurs qui évoluent avec le temps.
Aperçu avec la sphère	Si cette option est activée, un modèle de sphère est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Aperçu avec le cube	Si cette option est activée, un modèle de cube est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Aperçu avec le cylindre	Si cette option est activée, un modèle de cylindre est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Aperçu avec le cône	Si cette option est activée, un modèle de cône est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Aperçu avec Teapot	Si cette option est activée, un modèle de théière est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Aperçu avec le plan	Si cette option est activée, un modèle de plan est utilisé pour afficher un aperçu du nuanceur. Une seule forme d’aperçu peut être activée à la fois.
Boîte à outils	Affiche ou masque la Boîte à outils.
Propriétés	Affiche ou masque la fenêtre Propriétés.
Avancée	Contient des commandes et des options avancées. Exporter : permet l’exportation d’un nuanceur dans plusieurs formats. Exporter en tant que : exporte le nuanceur soit en tant que code source HLSL ou en tant que bytecode de nuanceur compilé. Pour plus d’informations sur la façon d’exporter des nuanceurs, consultez Guide pratique pour exporter un nuanceur. Moteurs Graphics : permet de sélectionner le renderer utilisé pour afficher l’aire de conception. Render with D3D11 (Afficher avec D3D11) : utilise Direct3D 11 pour afficher l’aire de conception du concepteur de nuanceur. Render with D3D11WARP (Afficher avec D3D11WARP) : utilise la plateforme WARP (Windows Advanced Rasterization Platform) D3D11 WARP pour afficher l’aire de conception du concepteur de nuanceur. Vue : permet de sélectionner des informations supplémentaires sur le concepteur de nuanceur. Fréquence d’images : si cette option est activée, affiche la fréquence d’images actuelle dans l’angle supérieur droit de l’aire de conception. La fréquence d'images est le nombre d'images dessinées par seconde. Cette option est utile lorsque vous activez l’option Mode de rendu en temps réel.

Conseil

Vous pouvez choisir le bouton Avancé pour réexécuter la dernière commande.

Utilisation des nœuds et des connexions

Utilisez le mode Sélection pour ajouter, supprimer, repositionner, connecter et configurer des nœuds. Voici comment effectuer ces opérations de base :

Pour effectuer des opérations de base en mode Sélection

• Voici comment procéder :

  • Pour ajouter un nœud au graphique, sélectionnez-le dans la boîte à outils, puis déplacez-le vers l’aire de conception.

  • Pour supprimer un nœud du graphe, sélectionnez-le, puis appuyez sur la touche Suppr.

  • Pour repositionner un nœud, sélectionnez-le, puis déplacez-le vers un nouvel emplacement.

  • Pour connecter deux nœuds, déplacez un terminal de sortie d’un nœud vers un terminal d’entrée de l’autre nœud. Seuls les terminaux de type compatible peuvent être connectés. Une ligne entre les terminaux indique la connexion.

  • Pour supprimer une connexion, dans le menu contextuel de l’un des terminaux connectés, choisissez Rompre les liaisons.

  • Pour configurer les propriétés d’un nœud, sélectionnez le nœud, puis, dans la fenêtre Propriétés, spécifiez de nouvelles valeurs pour les propriétés.

Afficher un aperçu des nuanceurs

Pour vous aider à comprendre comment un nuanceur apparaîtra dans votre application, vous pouvez configurer le mode de visualisation de l’effet. Pour estimer votre application, vous pouvez choisir l’une des formes à afficher, configurer des textures et d’autres paramètres de matériau, activer l’animation des effets à durée définie et examiner l’aperçu sous différents angles.

Formes

Le concepteur de nuanceur comprend six formes (une sphère, un cube, un cylindre, un cône, une théière et un plan) que vous pouvez utiliser pour visualiser votre nuanceur. Selon le nuanceur, certaines formes peuvent vous donner un meilleur aperçu.

Pour choisir une forme d’aperçu, dans la barre d’outils Mode du concepteur Shader, choisissez la forme souhaitée.

Paramètres des textures et des matériaux

De nombreux nuanceurs utilisent des textures et des propriétés de matériau pour produire une apparence unique pour chaque type d’objet de votre application. Pour voir à quoi votre nuanceur ressemblera dans votre application, vous pouvez définir les textures et les propriétés de matériau qui sont utilisées pour afficher l’aperçu pour qu’elles correspondent aux textures et aux paramètres que vous pouvez utiliser dans votre application.

Pour lier une autre texture à un registre de textures ou pour modifier d’autres paramètres de matière :

1. En mode Sélection, sélectionnez une zone vide de l’aire de conception. La fenêtre Propriétés affiche alors les propriétés globales du nuanceur.

2. Dans la fenêtre Propriétés, spécifiez de nouvelles valeurs pour les propriétés de texture et de paramètre que vous souhaitez modifier.

Le tableau suivant présente les paramètres modifiables du nuanceur :

Paramètre	Propriétés
Texture 1 - Texture 8	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Nom de fichier : chemin d’accès complet au fichier de texture associé à ce registre de texture.
Matériau ambiant	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Valeur : couleur diffuse du pixel actuel qui est due à l’éclairage indirect, ou ambiant.
Matériau diffus	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Valeur : couleur qui décrit la manière dont le pixel actuel diffuse la lumière directe.
Matériau émissif	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Valeur : contribution de couleur du pixel actuel, basée sur l’auto-éclairage.
Matériau spéculaire	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Valeur : couleur qui décrit la manière dont le pixel actuel reflète la lumière directe.
Puissance spéculaire du matériau	Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire. Valeur : exposant qui définit l’intensité des surbrillances spéculaires sur le pixel actuel.

Effets à durée définie

Certains nuanceurs sont pourvus d’un composant à durée définie qui anime l’effet. Pour afficher l’effet en action, l’aperçu doit être mis à jour plusieurs fois par seconde. Par défaut, l’aperçu est mis à jour uniquement lorsque le nuanceur est modifié. Pour changer ce comportement afin de pouvoir afficher les effets à durée définie, vous devez activer le rendu en temps réel.

Pour activer le rendu en temps réel, dans la barre d’outils du concepteur Shader, choisissez Rendu en temps réel.

Examiner l’effet

De nombreux nuanceurs sont affectés par des variables telles que l’angle de visualisation ou la lumière directionnelle. Pour examiner la réaction de l’effet lorsque ces variables sont modifiées, vous pouvez faire pivoter la forme d’aperçu librement et observer le comportement du nuanceur.

Pour faire pivoter la forme, appuyez et maintenez enfoncée la touche Alt, puis sélectionnez un point quelconque dans l’aire de conception et déplacez-le.

Exporter des nuanceurs

Avant de pouvoir utiliser un nuanceur dans votre application, vous devez l’exporter dans un format pris en charge par DirectX.

Vous pouvez exporter des nuanceurs en tant que code source HLSL ou bytecode de nuanceur compilé. Le code source HLSL est exporté dans un fichier texte ayant l’extension de nom de fichier .hlsl. Le bytecode de nuanceur peut être exporté dans un fichier binaire brut ayant l’extension de nom de fichier .cso ou dans un fichier d’en-tête (.h) en C++, qui encode le bytecode de nuanceur dans un tableau.

Pour plus d’informations sur la façon d’exporter des nuanceurs, consultez Guide pratique pour exporter un nuanceur.

Raccourcis clavier

Commande	Raccourcis clavier
Passer en mode Sélection	Ctrl+G, Ctrl+Q S
Passer en mode Zoom	Ctrl+G, Ctrl+Z Z
Passer en mode Panoramique	Ctrl+G, Ctrl+P K
Sélectionner tout	Ctrl+A
Supprimer la sélection actuelle	Supprimer
Annuler la sélection actuelle	Séquence d’échappement (Échap)
Faire un zoom avant	Ctrl+Roulette de la souris vers l’avant Signe plus (+)
Faire un zoom arrière	Ctrl+Roulette de la souris vers l’arrière Signe moins (-)
Mouvement panoramique vers le haut de l’aire de conception	Roulette de la souris vers l’arrière Pg suiv
Mouvement panoramique vers le bas de l’aire de conception	Roulette de la souris vers l’avant Pg préc
Mouvement panoramique vers la gauche de l’aire de conception	Maj+Roulette de la souris vers l’arrière Roulette de la souris vers la gauche Maj+Pg. suiv
Mouvement panoramique vers la droite de l’aire de conception	Maj+Roulette de la souris vers l’avant Roulette de la souris vers la droite Maj+Pg. préc
Déplacer le focus clavier vers un autre nœud	Touches de direction
Sélectionner le nœud ayant le focus clavier (ajoute le nœud au groupe de sélection)	Maj+Espace
Activer la sélection du nœud ayant le focus clavier	Ctrl+Espace
Activer la sélection actuelle (si aucun nœud n’est sélectionné, sélectionner le nœud ayant le focus clavier)	Barre d’espace
Déplacer la sélection actuelle vers le haut	Maj+Flèche haut
Déplacer la sélection actuelle vers le bas	Maj+Flèche bas
Déplacer la sélection actuelle vers la gauche	Maj+Flèche gauche
Déplacer la sélection actuelle vers la droite	Maj+Flèche droite.

Rubriques connexes

Intitulé	Description
Utilisation de composants 3D pour les jeux et les applications	Présente les outils Visual Studio permettant de travailler avec les textures et les images, les modèles 3D et les effets de nuanceur.
Image Editor	Décrit comment utiliser l’éditeur d’images Visual Studio pour travailler avec des textures et des images.
Éditeur de modèle	Décrit comment utiliser l’éditeur de modèle Visual Studio pour travailler avec des modèles 3D.