Créer des nuanceurs avec le Concepteur de nuanceur dans Visual Studio

Dans cet article, vous allez apprendre à utiliser le Concepteur de nuanceur pour créer différents types de nuanceurs.

Créer des nuanceurs de couleurs simples de base

Vous pouvez utiliser le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur de couleurs simples. Ce nuanceur définit la couleur finale sur une valeur de couleur RVB de constante. Vous pouvez implémenter un nuanceur de couleur plat en écrivant la valeur de couleur d’une constante de couleur RVB sur la couleur de sortie finale.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un shader DGSL à utiliser. Pour plus d’informations sur l’ajout d’un nuanceur DGSL à votre projet, consultez la section Prise en main de l’article Concepteur de nuanceur.

2. Supprimez le nœud Couleur du point. À l’aide de l’outil Sélection, sélectionnez le nœud Couleur du point puis, dans la barre de menus, choisissez Modifier>Supprimer.

3. Ajoutez un nœud Constante de couleur au graphique. Dans la Boîte à outils, sous Constantes, sélectionnez Constante de couleur et déplacez-la vers l’aire de conception.

4. Spécifiez une valeur de couleur pour le nœud Constante de couleur. À l’aide de l’outil Sélection, sélectionnez le nœud Constante de couleur, puis, dans la fenêtre Propriétés, dans la propriété Sortie, spécifiez une valeur de couleur. Pour l’orange, spécifiez la valeur (1,0, 0,5, 0,2, 1,0).

5. Connectez la constante de couleur à la couleur finale. Pour créer les connexions, déplacez le terminal RVB du nœud Constante de couleur vers le terminal RVB du nœud Couleur finale, puis le terminal Alpha du nœud Constante de couleur vers le terminal Alpha du nœud Couleur finale. Ces connexions définissent la couleur finale sur la constante de couleur définie à l’étape précédente.

L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à un cube.

Notes

Une couleur orange a été spécifiée dans l’illustration pour mettre en évidence l’effet du nuanceur.

Certaines formes peuvent fournir de meilleurs aperçus pour certains nuanceurs. Pour plus d’informations sur l’aperçu des nuanceurs dans le concepteur de nuanceur, consultez l’article Concepteur de nuanceur.

Créer un nuanceur Lambert de base

Vous pouvez également utiliser le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur d’éclairage implémentant le modèle d’éclairage Lambert classique.

Le modèle d’éclairage Lambert intègre un éclairage ambiant et directionnel pour ombrer des objets dans une scène 3D. Les composants ambiants fournissent un niveau de base d’éclairage de la scène 3D. Les composants directionnels fournissent un éclairage supplémentaire provenant de sources de lumière (éloignées) directionnelles. L’éclairage ambiant affecte également toutes les surfaces de la scène, quelle que soit leur orientation. Pour une surface donnée, il s’agit d’un produit de la couleur ambiante de la surface et de la couleur et de l’intensité de l’éclairage ambiant de la scène. L’éclairage directionnel affecte différemment chaque surface de la scène, selon l’orientation de la surface par rapport à la direction de la source de lumière. Il s’agit d’un produit de la couleur diffuse et de l’orientation de la surface, et de la couleur, de l’intensité et de la direction des sources de lumière. Les surfaces qui font directement face à la source de lumière reçoivent la contribution maximale tandis que celles qui lui tournent le dos ne reçoivent aucune contribution. Dans le modèle d’éclairage Lambert, le composant ambiant et un ou plusieurs composants directionnels sont combinés pour déterminer la contribution de couleur diffuse totale pour chaque point de l’objet.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un nuanceur DGSL à utiliser. Pour plus d’informations sur l’ajout d’un nuanceur DGSL à votre projet, consultez la section Prise en main de l’article Concepteur de nuanceur.

2. Déconnectez le nœud Couleur du point du nœud Couleur finale. Choisissez le terminal RVB du nœud Couleur du point, puis choisissez Rompre les liaisons. Laissez le terminal Alpha connecté.

3. Ajoutez un nœud Lambert au graphique. Dans la Boîte à outils, sous Utilitaire, sélectionnez Lambert et déplacez-le vers l’aire de conception. Le nœud lambert calcule la contribution de couleur diffuse totale du pixel, en fonction des paramètres d’éclairage ambiant et diffus.

4. Connectez le nœud Couleur du point au nœud Lambert. En mode Sélection, déplacez le terminal RVB du nœud Couleur du point vers le terminal Couleur diffuse du nœud Lambert. Cette connexion fournit au nœud lambert la couleur diffuse interpolée du pixel.

5. Connectez la valeur de couleur calculée à la couleur finale. Déplacez le terminal Sortie du nœud Lambert vers le terminal RVB du nœud Couleur finale.

   L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à un modèle de théière.

Notes

Pour mettre en évidence l’effet du nuanceur dans cette illustration, la couleur orange a été spécifiée à l’aide du paramètre MaterialDiffuse du nuanceur. Un jeu ou une application peuvent utiliser ce paramètre pour fournir une valeur de couleur unique pour chaque objet. Si vous souhaitez obtenir plus d’informations sur les paramètres matériels, voir Concepteur de nuanceur.

L’illustration suivante montre le nuanceur décrit dans ce document appliqué à un modèle 3D.

Créer des nuanceurs Phong de base

Vous pouvez également utiliser le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur d’éclairage implémentant le modèle d’éclairage Phong classique.

Le modèle d’éclairage Phong étend le modèle d’éclairage Lambert pour inclure une mise en surbrillance spéculaire, ce qui simule les propriétés de reflet d’une surface. Le composant spéculaire fournit un éclairage supplémentaire provenant des mêmes sources de lumière directionnelle que celles qui sont utilisées dans le modèle d’éclairage Lambert, mais sa contribution à la couleur finale est traitée différemment. L’éclairage spéculaire affecte différemment chaque surface de la scène, en fonction de la relation entre la direction de l’affichage, la direction des sources de lumière et l’orientation de la surface. Il s’agit d’un produit de la couleur spéculaire, de la puissance spéculaire, de l’orientation de la surface, et de la couleur, de l’intensité et de la direction des sources de lumière. Les surfaces qui reflètent directement la source de lumière à la visionneuse reçoivent la contribution spéculaire maximale, tandis que celles qui reflètent la source de lumière distante de la visionneuse ne reçoivent aucune contribution. Dans le modèle d’éclairage Phong, un ou plusieurs composants spéculaires sont combinés pour déterminer la couleur et l’intensité de la mise en surbrillance spéculaire de chaque point de l’objet. Ils sont ensuite ajoutés au résultat du modèle d’éclairage Lambert pour produire la couleur finale du pixel.

Pour plus d’informations sur le modèle d’éclairage Lambert, consultez Guide pratique pour créer un nuanceur Lambert de base.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un nuanceur Lambert en suivant les étapes décrites dans Guide pratique pour créer un nuanceur Lambert de base.

2. Déconnectez le nœud Lambert du nœud Couleur finale. Choisissez le terminal RVB du nœud Lambert, puis choisissez Rompre les liaisons. Le nœud ajouté à l'étape suivante bénéficie ainsi d'un espace supplémentaire.

3. Ajoutez un nœud Ajouter au graphique. Dans la Boîte à outils, sous Math, sélectionnez Ajouter et déplacez-le vers l’aire de conception.

4. Ajoutez un nœud Spéculaire au graphique. Dans la Boîte à outils, sous Utilitaire, sélectionnez Spéculaire et déplacez-le vers l’aire de conception.

5. Ajoutez la contribution spéculaire. Déplacez le terminal Sortie du nœud Spéculaire vers le terminal X du nœud Ajouter, puis le terminal Sortie du nœud Lambert vers le terminal Y du nœud Ajouter. Ces connexions combinent les contributions de couleur spéculaire et diffuse totale du pixel.

6. Connectez la valeur de couleur calculée à la couleur finale. Déplacez le terminal Sortie du nœud Ajouter vers le terminal RVB du nœud Couleur finale.

   L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à un modèle de théière.

Notes

Pour mettre en évidence l’effet du nuanceur dans cette illustration, une couleur orange a été spécifiée à l’aide du paramètre MaterialDiffuse du nuanceur, et un fini d’aspect métallique a été spécifié à l’aide des paramètres MaterialSpecular et MaterialSpecularPower. Si vous souhaitez obtenir plus d’informations sur les paramètres matériels, voir Concepteur de nuanceur.

Certaines formes peuvent fournir de meilleurs aperçus pour certains nuanceurs. Si vous souhaitez obtenir plus d’informations sur la version préliminaire des nuanceurs, consultez Concepteur de nuanceur.

L’illustration suivante montre le nuanceur décrit dans ce document appliqué à un modèle 3D. La propriété MaterialSpecular est définie sur (1,00, 0,50, 0,20, 0,00), et sa propriété MaterialSpecularPower est définie sur 16.

Notes

La propriété MaterialSpecular détermine le fini apparent du matériau de surface. Une surface haute brillance comme le verre ou le plastique a tendance à avoir une couleur spéculaire, autrement dit une nuance de blanc lumineuse. Une surface métallique a tendance à avoir une couleur spéculaire proche de sa couleur diffuse. Une surface satinée a tendance à avoir une couleur spéculaire, autrement dit une nuance de gris foncée.

La propriété MaterialSpecularPower détermine l’intensité des mises en surbrillance spéculaires. Des puissances très spéculaires simulent des mises en surbrillance plus ternes et plus localisées. Des puissances faiblement spéculaires simulent des mises en surbrillance intenses et de grande envergure qui peuvent saturer et masquer la couleur de la surface totale.

Créer des nuanceurs de texture de base

Utilisez le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur de texture unique. Ce nuanceur définit la couleur finale directement sur les valeurs RVB et alpha échantillonnées à partir de la texture.

Vous pouvez implémenter un nuanceur de texture unique de base en écrivant les valeurs de couleur et alpha d’un échantillon de texture directement dans la couleur de sortie finale.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un shader DGSL à utiliser. Pour plus d’informations sur l’ajout d’un nuanceur DGSL à votre projet, consultez la section Prise en main de l’article Concepteur de nuanceur.

2. Supprimez le nœud Couleur du point. En mode Sélection, sélectionnez le nœud Couleur du point puis, dans la barre de menus, choisissez Modifier>Supprimer. Le nœud ajouté à l'étape suivante bénéficie ainsi d'un espace supplémentaire.

3. Ajoutez un nœud Échantillon de texture au graphique. Dans la Boîte à outils, sous Texture, sélectionnez Échantillon de texture et déplacez-le vers l’aire de conception.

4. Ajoutez un nœud Coordonnée de texture au graphique. Dans la Boîte à outils, sous Texture, sélectionnez Coordonnée de texture et déplacez-la vers l’aire de conception.

5. Choisissez une texture à appliquer. En mode Sélection, sélectionnez le nœud Échantillon de texture, puis, dans la fenêtre Propriétés, spécifiez la texture que vous souhaitez utiliser à l’aide de la propriété Nom de fichier.

6. Rendez la texture publiquement accessible. Sélectionnez le nœud Échantillon de texture, puis, dans la fenêtre Propriétés, définissez la propriété Accès sur Public. À présent, vous pouvez définir la texture à partir d’un autre outil, par exemple l’Éditeur de modèle.

7. Connectez les coordonnées de texture à l’échantillon de texture. En mode Sélection, déplacez le terminal Sortie du nœud Coordonnée de texture vers le terminal UV du nœud Échantillon de texture. Cette connexion échantillonne la texture aux coordonnées spécifiées.

8. Connectez l’échantillon de texture à la couleur finale. Déplacez le terminal RVB du nœud Échantillon de texture vers le terminal RVB du nœud Couleur finale, puis le terminal Alpha du nœud Échantillon de texture vers le terminal Alpha du nœud Couleur finale.

L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à un cube.

Notes

Dans cette illustration, un plan est utilisé comme forme d’aperçu, et une texture a été spécifiée pour mettre en évidence l’effet du nuanceur.

Certaines formes peuvent fournir de meilleurs aperçus pour certains nuanceurs. Pour plus d’informations sur l’aperçu des nuanceurs dans le concepteur de nuanceur, consultez l’article Concepteur de nuanceur.

Créer un nuanceur de texture avec des nuances de gris

Utilisez le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur de texture avec des nuances de gris. Ce nuanceur modifie la valeur de couleur RVB de l’échantillon de texture, puis l’utilise avec la valeur alpha non modifiée pour définir la couleur finale.

Vous pouvez implémenter un nuanceur de texture avec nuances de gris en modifiant la valeur de couleur d’un échantillon de texture avant de l’écrire dans la couleur de sortie finale.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un nuanceur de texture de base en suivant la description de l’article Guide pratique pour créer un nuanceur de texture de base.

2. Déconnectez le terminal RVB du nœud Échantillon de texture à partir du terminal RVB du nœud Couleur finale. En mode Sélection, choisissez le terminal RVB du nœud Échantillon de texture, puis Rompre les liaisons. Le nœud ajouté à l'étape suivante bénéficie ainsi d'un espace supplémentaire.

3. Ajoutez un nœud Désaturer au graphique. Dans la Boîte à outils, sous Filtres, sélectionnez Désaturer et déplacez-le vers l’aire de conception.

4. Calculez la valeur de nuances de gris à l’aide du nœud Désaturer. En mode Sélection, déplacez le terminal RVB du nœud Échantillon de texture vers le terminal RVB du nœud Désaturer.

   Notes

   Par défaut, le nœud Désaturer désature entièrement la couleur d’entrée et utilise les pondérations de luminance standard pour la conversion des nuances de gris. Vous pouvez modifier le comportement du nœud Désaturer en changeant la valeur de la propriété Luminance ou en ne désaturant que partiellement la couleur d’entrée. Pour désaturer partiellement la couleur d’entrée, indiquez une valeur scalaire comprise dans la plage [0,1] pour le terminal Pour cent du nœud Désaturer.

5. Connectez la valeur de couleur de nuances de gris à la couleur finale. Déplacez le terminal Sortie du nœud Désaturer vers le terminal RVB du nœud Couleur finale.

L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à un cube.

Dans cette illustration, un plan est utilisé comme forme d’aperçu, et une texture a été spécifiée pour mettre en évidence l’effet du nuanceur. Certaines formes peuvent fournir de meilleurs aperçus pour certains nuanceurs. Si vous souhaitez obtenir plus d’informations sur la version préliminaire des nuanceurs, consultez Concepteur de nuanceur.

Créer des nuanceurs de dégradés basé sur la géométrie

Utilisez le Concepteur de nuanceur et DGSL (Directed Graph Shader Language) pour créer un nuanceur de dégradés basés sur la géométrie. Ce nuanceur met à l’échelle une valeur de couleur RVB de constante en fonction de la hauteur de chaque point d’un objet dans l’espace universel.

Vous pouvez implémenter un nuanceur de géométrie en incorporant la position du pixel dans votre nuanceur. Dans les langages d’ombrage, un pixel contient plus d’informations que sa couleur et son emplacement sur un écran 2D. Un pixel, appelé fragment dans certains systèmes, est une collection de valeurs qui décrivent la surface correspondant à un pixel. Le nuanceur décrit dans ce document utilise la hauteur de chaque pixel d’un objet 3D dans l’espace universel pour affecter la couleur de sortie finale du fragment.

Avant de commencer, veillez à ce que la fenêtre Propriétés et la Boîte à outils soient affichées.

1. Créez un nuanceur DGSL à utiliser. Si vous souhaitez obtenir plus d’informations sur l’ajout d’un nuanceur DGSL à votre projet, consultez la section Bien démarrer de l’article Concepteur Shader (Concepteur de nuanceur).

2. Déconnectez le nœud Couleur du point du nœud Couleur finale. Choisissez le terminal RVB du nœud Couleur du point, puis choisissez Rompre les liaisons. Le nœud ajouté à l'étape suivante bénéficie ainsi d'un espace supplémentaire.

3. Ajouter un nœud Multiplier au graphique. Dans la Boîte à outils, sous Math, sélectionnez Multiplier et déplacez-le vers l’aire de conception.

4. Ajoutez un nœud Vecteur de masque au graphique. Dans la Boîte à outils, sous Utilitaire, sélectionnez Vecteur de masque et déplacez-le vers l’aire de conception.

5. Spécifiez des valeurs de masque pour le nœud Vecteur de masque. En mode Sélection, sélectionnez le nœud Vecteur de masque, puis, dans la fenêtre Propriétés, définissez la propriété Vert / Y sur True, puis les propriétés Rouge / X, Bleu / Z et Alpha / W sur False. Dans cet exemple, les propriétés Rouge / X, Vert / Y et Bleu / Z correspondent aux composants x, y et z du nœud Position universelle, et la propriété Alpha / W n’est pas utilisée. Comme seule la propriété Vert / Y est définie sur True, seul le composant y du vecteur d’entrée demeure après le masquage.

6. Ajoutez un nœud Position universelle au graphique. Dans la Boîte à outils, sous Constantes, sélectionnez Position universelle et déplacez-la vers l’aire de conception.

7. Masquez la position du fragment dans l’espace universel. En mode Sélection, déplacez le terminal Sortie du nœud Position universelle vers le terminal Vecteur du nœud Vecteur de masque. Cette connexion masque la position du fragment pour ignorer les composants x et z.

8. Multipliez la constante de couleur RVB par la position masquée dans l’espace universel. Déplacez le terminal RVB du nœud Couleur du point vers le terminal Y du nœud Multiplier, puis le terminal Sortie du nœud Vecteur de masque vers le terminal X du nœud Multiplier. Cette connexion met à l’échelle la valeur de couleur en fonction de la hauteur du pixel dans l’espace universel.

9. Connectez la valeur de couleur mise à l’échelle à la couleur finale. Déplacez le terminal Sortie du nœud Multiplier vers le terminal RVB du nœud Couleur finale.

L’illustration suivante présente le graphique du nuanceur terminé ainsi qu’un aperçu du nuanceur appliqué à une sphère.

Notes

Dans cette illustration, la couleur orange est spécifiée pour mettre en évidence l’effet du nuanceur, mais comme la forme d’aperçu n’a pas de position dans l’espace universel, le nuanceur ne peut pas être entièrement visualisé dans le concepteur de nuanceur. Le nuanceur doit être visualisé dans une scène réelle pour montrer l’effet réel.

Certaines formes peuvent fournir de meilleurs aperçus pour certains nuanceurs. Si vous souhaitez obtenir plus d’informations sur la version préliminaire des nuanceurs, consultez Concepteur de nuanceur.

L’illustration suivante montre le nuanceur, décrit dans ce document, appliqué à la scène 3D qui est illustrée dans Guide pratique pour modéliser un terrain 3D. L’intensité de la couleur augmente avec la hauteur du point dans l’espace universel.

Pour plus d’informations sur l’application d’un nuanceur à un modèle 3D, consultez Guide pratique pour appliquer un nuanceur à un modèle 3D.

Contenu connexe

• Guide pratique pour appliquer un nuanceur à un modèle 3D
• Guide pratique pour exporter un nuanceur
• Nœuds du concepteur Shader
• Image Editor