Concepteur ShaderShader Designer

Ce document décrit l’utilisation du concepteur de nuanceur Visual StudioVisual Studio pour créer, modifier et exporter des effets visuels personnalisés, appelés nuanceurs.This document describes how to work with the Visual StudioVisual Studio Shader Designer to create, modify, and export custom visual effects that are known as shaders.

Le concepteur de nuanceur vous permet de créer des effets visuels personnalisés pour votre jeu ou votre application même si vous ne connaissez pas la programmation HLSL.You can use the Shader Designer to create custom visual effects for your game or app even if you don't know HLSL programming. Pour créer un nuanceur dans le concepteur de nuanceur, il vous suffit de le disposer sous forme de graphique. En d’autres termes, vous ajoutez à l’aire de conception des nœuds qui représentent des données et des opérations, avant de créer des connexions entre eux pour définir le traitement des données par ces opérations.To create a shader in the Shader Designer, you just lay it out as a graph; that is, you add to the design surface nodes that represent data and operations and then make connections between them to define how the operations process the data. À 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.At each operation node, a preview of the effect up to that point is provided so that you can visualize its result. Les flux de données transitent via les nœuds vers un nœud final qui représente la sortie du nuanceur.Data flows through the nodes toward a final node that represents the output of the shader.

Formats pris en chargeSupported formats

Le concepteur de nuanceur prend en charge les formats de nuanceur suivants :The Shader Designer supports these shader formats:

Nom de formatFormat Name Extension de fichierFile Extension Opérations prises en charge (afficher, modifier, exporter)Supported Operations (View, Edit, Export)
DGSL (Directed Graph Shader Language)Directed Graph Shader Language .dgsl.dgsl Afficher, modifierView, Edit
Nuanceur HLSL (code source)HLSL Shader (source code) .hlsl.hlsl ExporterExport
Nuanceur HLSL (bytecode)HLSL Shader (bytecode) .cso.cso ExporterExport
En-tête C++ (tableau de bytecode HLSL)C++ header (HLSL bytecode array) .h.h ExporterExport

Prise en mainGetting Started

Cette section explique comment ajouter un nuanceur DGSL à votre projet Visual StudioVisual Studio et fournit les informations de base pour commencer.This section describes how to add a DGSL shader to your Visual StudioVisual Studio project and provides basic information to help you get started.

Pour ajouter un nuanceur DGSL à votre projetTo add a DGSL shader to your project

  1. Dans l’Explorateur de solutions, ouvrez le menu contextuel du projet auquel vous souhaitez ajouter le nuanceur, puis choisissez Ajouter, Nouvel élément.In Solution Explorer, open the shortcut menu for the project that you want to add the shader to, and then choose Add, New Item.

  2. Dans la boîte de dialogue Ajouter un nouvel élément, sous Installé, sélectionnez Graphiques, puis Graphe de nuanceur visuel (.dgsl).In the Add New Item dialog box, under Installed, select Graphics, and then select Visual Shader Graph (.dgsl).

  3. Spécifiez le Nom du fichier du nuanceur, ainsi que l’Emplacement où vous souhaitez le créer.Specify the Name of the shader file, and the Location where you want it to be created.

  4. Choisissez le bouton Ajouter .Choose the Add button.

Nuanceur par défautThe default shader

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.Each time that you create a DGSL shader, it begins as a minimal shader that has just a Point Color node that's connected to the Final Color node. Même si ce nuanceur est complet et fonctionnel, il ne fait pas grand-chose.Although this shader is complete and functional, it doesn't do much. 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.Therefore, the first step in creating a working shader is often to delete the Point Color node or disconnect it from the Final Color node to make room for other nodes.

Utilisation du concepteur de nuanceurWorking with the Shader Designer

Les sections suivantes décrivent l’utilisation du concepteur de nuanceur avec des nuanceurs personnalisés.The following sections describe how to use the Shader Designer to work with custom shaders.

Barres d’outils du concepteur de nuanceurShader Designer toolbars

Les barres d’outils du concepteur de nuanceur contiennent des commandes qui vous permettent de travailler avec des graphes de nuanceur DGSL.The Shader Designer toolbars contain commands that help you work with DGSL shader graphs.

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 StudioVisual Studio.Commands that affect the state of the Shader Designer are located on the Shader Designer Mode toolbar in the main Visual StudioVisual Studio window. 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.Design tools and commands are located on the Shader Designer toolbar on the Shader Designer design surface.

Barre d’outils Mode du concepteur de nuanceur :Here's the Shader Designer Mode toolbar:

Barre d’outils modale du concepteur de nuanceur.The Shader Designer modal toolbar.

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.This table describes the items on the Shader Designer Mode toolbar, which are listed in the order in which they appear from left to right:

Élément de la barre d'outilsToolbar Item DescriptionDescription
SelectSelect Permet l’interaction avec des nœuds et des bords dans le graphique.Enables interaction with nodes and edges in the graph. 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.In this mode, you can select nodes and move or delete them, and you can establish edges or break them.
PanoramiquePan Permet de déplacer un graphe de nuanceur par rapport au cadre de la fenêtre.Enables movement of a shader graph relative to the window frame. Pour effectuer un mouvement panoramique, sélectionnez un point dans l’aire de conception et déplacez-le.To pan, select a point on the design surface and move it around.

En mode Sélection, vous pouvez appuyer sur la touche Ctrl de façon prolongée pour activer temporairement le mode Panoramique.In Select mode, you can press and hold Ctrl to activate Pan mode temporarily.
ZoomZoom Permet d’afficher un graphique de nuanceur avec plus ou moins de détails par rapport au cadre de la fenêtre.Enables the display of more or less shader-graph detail relative to the window frame. 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.In Zoom mode, select a point on the design surface and then move it right or down to zoom in, or left or up to zoom out.

En mode Sélection, vous pouvez appuyer sur la touche Ctrl de façon prolongée pour effectuer un zoom avant ou arrière à l’aide de la roulette de la souris.In Select mode, you can press and hold Ctrl to zoom in or out by using the mouse wheel.
Zoom pour ajusterZoom to Fit Affiche le graphe de nuanceur complet dans le cadre de la fenêtre.Displays the full shader graph in the window frame.
Mode de rendu en temps réelReal-Time Rendering Mode Lorsque le rendu en temps réel est activé, Visual StudioVisual Studio redessine l'aire de conception, même lorsqu'aucune action utilisateur n'est effectuée.When real-time rendering is enabled, Visual StudioVisual Studio redraws the design surface, even when no user action is performed. Ce mode est utile lorsque vous travaillez avec des nuanceurs qui évoluent avec le temps.This mode is useful when you work with shaders that change over time.
Aperçu avec la sphèrePreview with sphere Si cette option est activée, un modèle de sphère est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a sphere is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Aperçu avec le cubePreview with cube Si cette option est activée, un modèle de cube est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a cube is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Aperçu avec le cylindrePreview with Cylinder Si cette option est activée, un modèle de cylindre est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a cylinder is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Aperçu avec le cônePreview with cone Si cette option est activée, un modèle de cône est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a cone is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Aperçu avec TeapotPreview with teapot Si cette option est activée, un modèle de théière est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a teapot is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Aperçu avec le planPreview with plane Si cette option est activée, un modèle de plan est utilisé pour afficher un aperçu du nuanceur.When enabled, a model of a plane is used to preview the shader. Une seule forme d’aperçu peut être activée à la fois.Only one preview shape at a time can be enabled.
Boîte à outilsToolbox Affiche ou masque la Boîte à outils.Alternately shows or hides the Toolbox.
PropriétésProperties Affiche ou masque la fenêtre Propriétés.Alternatively shows or hides the Properties window.
AvancéAdvanced Contient des commandes et des options avancées.Contains advanced commands and options.

Exporter : permet l’exportation d’un nuanceur dans plusieurs formats.Export: Enables the export of a shader in several formats.

Exporter en tant que : exporte le nuanceur soit en tant que code source HLSL ou en tant que bytecode de nuanceur compilé.Export As: Exports the shader as either HLSL source code or as compiled shader bytecode. Pour plus d’informations sur l’exportation des nuanceurs, consultez l’article Comment : exporter un nuanceur.For more information about how to export shaders, see How to: Export a Shader.

Moteurs Graphics : permet de sélectionner le renderer utilisé pour afficher l’aire de conception.Graphics Engines: Enables the selection of the renderer that is used to display the design surface.

Render with D3D11 (Afficher avec D3D11) : utilise Direct3D 11 pour afficher l’aire de conception du concepteur de nuanceur.Render with D3D11: Uses Direct3D 11 to render the Shader Designer design surface.

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.Render with D3D11WARP: Uses Direct3D 11 Windows Advanced Rasterization Platform (WARP) to render the Shader Designer design surface.

Vue : permet de sélectionner des informations supplémentaires sur le concepteur de nuanceur.View: Enables the selection of additional information about the Shader Designer.

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.Frame Rate: When enabled, displays the current frame rate in the upper-right corner of the design surface. La fréquence d'images est le nombre d'images dessinées par seconde.The frame rate is the number of frames that are drawn per second. Cette option est utile lorsque vous activez l’option Mode de rendu en temps réel.This option is useful when you enable the Real-Time Rendering Mode option.

Conseil

Vous pouvez choisir le bouton Avancé pour réexécuter la dernière commande.You can choose the Advanced button to run the last command again.

Utilisation des nœuds et des connexionsWorking with nodes and connections

Utilisez le mode Sélection pour ajouter, supprimer, repositionner, connecter et configurer des nœuds.Use Select mode to add, remove, reposition, connect, and configure nodes. Voici comment effectuer ces opérations de base :Here's how to perform these basic operations:

Pour effectuer des opérations de base en mode SélectionTo perform basic operations in Select mode
  • Voici comment :Here's how:

    • Pour ajouter un nœud au graphique, sélectionnez-le dans la boîte à outils, puis déplacez-le vers l’aire de conception.To add a node to the graph, select it in the Toolbox and then move it to the design surface.

    • Pour supprimer un nœud du graphique, sélectionnez-le, puis appuyez sur Suppr.To remove a node from the graph, select it and then press Delete.

    • Pour repositionner un nœud, sélectionnez-le, puis déplacez-le vers un nouvel emplacement.To reposition a node, select it and then move it to a new location.

    • 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.To connect two nodes, move an output terminal of one node to an input terminal of the other node. Seuls les terminaux de type compatible peuvent être connectés.Only terminals that have compatible types can be connected. Une ligne entre les terminaux indique la connexion.A line between the terminals shows the connection.

    • Pour supprimer une connexion, dans le menu contextuel de l’un des terminaux connectés, choisissez Rompre les liaisons.To remove a connection, on the shortcut menu for either one of the connected terminals, choose Break Links.

    • 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.To configure the properties of a node, select the node, and then, in the Properties window, specify new values for the properties.

Aperçu des nuanceursPreviewing shaders

Pour vous aider à comprendre comment un nuanceur apparaîtra dans votre application, vous pouvez configurer le mode de visualisation de l’effet.To help you understand how a shader will appear in your app, you can configure how your effect is previewed. 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.To approximate your app, you can choose one of several shapes to render, configure textures and other material parameters, enable animation of time-based effects, and examine the preview from different angles.

FormesShapes

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.The Shader Designer includes six shapes—a sphere, a cube, a cylinder, a cone, a teapot, and a plane—that you can use to preview your shader. Selon le nuanceur, certaines formes peuvent vous donner un meilleur aperçu.Depending on the shader, certain shapes might give you a better preview.

Pour choisir une forme d’aperçuTo choose a preview shape
  • Dans la barre d’outils Mode du concepteur de nuanceur, choisissez la forme souhaitée.On the Shader Designer Modes toolbar, choose the shape that you want.

Textures et paramètres de matériauTextures and material parameters

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.Many shaders rely on textures and material properties to produce a unique appearance for each kind of object in your app. 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.To see what your shader will look like in your app, you can set the textures and material properties that are used to render the preview to match the textures and parameters that you might use in your app.

Pour lier une autre texture à un registre de texture ou pour modifier d’autres paramètres de matériauTo bind a different texture to a texture register, or to modify other material parameters
  1. En mode Sélection, sélectionnez une zone vide de l’aire de conception.In Select mode, select an empty area of the design surface. La fenêtre Propriétés affiche alors les propriétés globales du nuanceur.This causes the Properties window to display the global shader properties.

  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.In the Properties window, specify new values for the texture and parameter properties that you want to change.

    Voici les paramètres de nuanceur que vous pouvez modifier :Here are the shader parameters that you can modify:

ParamètreParameter PropriétésProperties
Texture 1 - Texture 8Texture 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.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Nom de fichier : chemin d’accès complet au fichier de texture associé à ce registre de texture.Filename: The full path of the texture file that is associated with this texture register.
Matériau ambiantMaterial Ambient Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valeur : couleur diffuse du pixel actuel qui est due à l’éclairage indirect, ou ambiant.Value: The diffuse color of the current pixel due to indirect - or ambient - lighting.
Matériau diffusMaterial Diffuse Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valeur : couleur qui décrit la manière dont le pixel actuel diffuse la lumière directe.Value: A color that describes how the current pixel diffuses direct lighting.
Matériau émissifMaterial Emissive Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valeur : contribution de couleur du pixel actuel, basée sur l’auto-éclairage.Value: The color contribution of the current pixel due to self-provided lighting.
Matériau spéculaireMaterial Specular Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valeur : couleur qui décrit la manière dont le pixel actuel reflète la lumière directe.Value: A color that describes how the current pixel reflects direct lighting.
Puissance spéculaire du matériauMaterial Specular Power Accès : Public pour que la propriété puisse être définie dans l’éditeur de modèle. Privé dans le cas contraire.Access: Public to allow the property to be set from the Model Editor; otherwise, Private.

Valeur : exposant qui définit l’intensité des surbrillances spéculaires sur le pixel actuel.Value: The exponent that defines the intensity of specular highlights on the current pixel.

Effets à durée définieTime-based effects

Certains nuanceurs sont pourvus d’un composant à durée définie qui anime l’effet.Some shaders have a time-based component that animates the effect. Pour afficher l’effet en action, l’aperçu doit être mis à jour plusieurs fois par seconde.To show what the effect looks like in action, the preview has to be updated several times per second. 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.By default, the preview is only updated when the shader is changed; to change this behavior so that you can view time-based effects, you have to enable real-time rendering.

Pour activer le rendu en temps réelTo enable real-time rendering
  • Dans la barre d’outils du concepteur de nuanceur, choisissez Rendu en temps réel.On the Shader Designer toolbar, choose Real time Rendering.

Examen de l’effetExamining the effect

De nombreux nuanceurs sont affectés par des variables telles que l’angle de visualisation ou la lumière directionnelle.Many shaders are affected by variables such as viewing angle or directional lighting. 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.To examine how the effect responds as these variables change, you can rotate the preview shape freely and observe how the shader behaves.

Pour faire pivoter la formeTo rotate the shape
  • Appuyez de façon prolongée sur Alt, puis sélectionnez un point quelconque dans l’aire de conception et déplacez-le.Press and hold Alt, and then select any point on the design surface and move it.

Exportation des nuanceursExporting shaders

Avant de pouvoir utiliser un nuanceur dans votre application, vous devez l’exporter dans un format pris en charge par DirectX.Before you can use a shader in your app, you have to export it in a format that DirectX understands.

Vous pouvez exporter des nuanceurs en tant que code source HLSL ou bytecode de nuanceur compilé.You can export shaders as HLSL source code or as compiled shader bytecode. Le code source HLSL est exporté dans un fichier texte pourvu de l’extension de nom de fichier .hlsl.HLSL source code is exported to a text file that has an .hlsl file name extension. Le bytecode de nuanceur peut être exporté dans un fichier binaire brut pourvu de 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.Shader bytecode can be exported either to a raw binary file that has a .cso file name extension, or to a C++ header (.h) file that encodes the shader bytecode into an array.

Pour plus d’informations sur l’exportation des nuanceurs, consultez l’article Comment : exporter un nuanceur.For more information about how to export shaders, see How to: Export a Shader.

Raccourcis clavierKeyboard shortcuts

CommandeCommand Raccourcis clavierKeyboard shortcuts
Passer en mode SélectionSwitch to Select mode Ctrl+G, Ctrl+QCtrl+G, Gtrl+Q

SS
Passer en mode ZoomSwitch to Zoom mode Ctrl+G, Ctrl+ZCtrl+G, Ctrl+Z

ZZ
Passer en mode PanoramiqueSwitch to Pan mode Ctrl+G, Ctrl+PCtrl+G, Ctrl+P

KK
Sélectionner toutSelect all Ctrl+ACtrl+A
Supprimer la sélection actuelleDelete the current selection SupprimerDelete
Annuler la sélection actuelleCancel the current selection ÉchapEscape
Zoom avantZoom in Ctrl+Roulette de la souris vers l'avantCtrl+Mouse wheel forward

Signe plus (+)Plus Sign (+)
Zoom arrièreZoom out Ctrl-Roulette de la souris vers l’arrièreCtrl-Mouse wheel backward

Signe moins (-)Minus Sign (-)
Mouvement panoramique vers le haut de l’aire de conceptionPan the design surface up Roulette de la souris vers l'arrièreMouse wheel backward

Pg suivPageDown
Mouvement panoramique vers le bas de l’aire de conceptionPan the design surface down Roulette de la souris vers l'avantMouse wheel forward

Pg précPageUp
Mouvement panoramique vers la gauche de l’aire de conceptionPan the design surface left Maj+Roulette de la souris vers l'arrièreShift+Mouse wheel backward

Roulette de la souris vers la gaucheMouse wheel left

Maj+Pg. suivShift+PageDown
Mouvement panoramique vers la droite de l’aire de conceptionPan the design surface right Maj+Roulette de la souris vers l'avantShift+Mouse wheel forward

Roulette de la souris vers la droiteMouse wheel right

Maj+Pg. précShift+PageUp
Déplacer le focus clavier vers un autre nœudMove the keyboard focus to another node Touches de directionThe Arrow keys
Sélectionner le nœud ayant le focus clavier (ajoute le nœud au groupe de sélection)Select the node that has keyboard focus (adds the node to the selection group) Maj+EspaceShift+Spacebar
Activer la sélection du nœud ayant le focus clavierToggle selection of the node that has keyboard focus Ctrl+Barre d'espaceCtrl+Spacebar
Activer la sélection actuelle (si aucun nœud n’est sélectionné, sélectionner le nœud ayant le focus clavier)Toggle current selection (if no nodes are selected, select the node that has keyboard focus) Barre d’espaceSpacebar
Déplacer la sélection actuelle vers le hautMove the current selection up Maj+HautShift+Up Arrow
Déplacer la sélection actuelle vers le basMove the current selection down Maj+BasShift+Down Arrow
Déplacer la sélection actuelle vers la gaucheMove the current selection left Maj+GaucheShift+Left Arrow
Déplacer la sélection actuelle vers la droiteMove current selection right Maj+DroiteShift+Right Arrow.
TitreTitle DescriptionDescription
Utilisation de ressources 3D pour les jeux et les applicationsWorking with 3-D Assets for Games and Apps Présente les outils Visual StudioVisual Studio que vous pouvez utiliser avec les textures et les images, les modèles 3D et les effets de nuanceur.Provides an overview of the Visual StudioVisual Studio tools that you can use to work with textures and images, 3-D models, and shader effects.
Éditeur d’imagesImage Editor Explique comment utiliser l'éditeur d'images de Visual StudioVisual Studio pour travailler avec des textures et des images.Describes how to use the Visual StudioVisual Studio Image Editor to work with textures and images.
Éditeur de modèleModel Editor Décrit l’utilisation de l’éditeur de modèle Visual StudioVisual Studio avec les modèles 3D.Describes how to use the Visual StudioVisual Studio Model Editor to work with 3-D models.