Utilisation combinée de XAML et DirectX

Blog des développeurs d'applications Windows 8

Indications sur la conception d'applications de style Metro pour Windows 8, par l'équipe d'ingénierie de Windows 8

Utilisation combinée de XAML et DirectX

  • Comments 1

Depuis les premières phases de développement de Windows 8, nous avons réfléchi à différentes solutions permettant d'associer interface utilisateur (le riche éventail de contrôles et d'interactivité offert par XAML, par exemple) et graphismes (le rendu performant et de bas niveau de DirectX, par exemple).

Les commentaires que vous avez laissés sur les forums consacrés au développement des applications de style Metro ou que vous avez transmis par d'autres moyens nous ont aidés à identifier les différents scénarios que les développeurs souhaitent créer. Nous avons identifié des thèmes communs : bon nombre d'entre vous souhaiteraient notamment pouvoir ajouter des graphismes DirectX à une « application XAML » ou ajouter facilement une interface utilisateur de style Metro à une application DirectX.

Bonne nouvelle : avec la publication de la version Consumer Preview, la frontière entre une application XAML et une application DirectX s'efface peu à peu. Désormais, vous pouvez profiter au sein d'une même application des avantages de XAML en matière d'interfaces utilisateur enrichies et de ceux de DirectX sur le plan du rendu haute performance, grâce à un modèle XAML familier.

En associant ces différents avantages, le meilleur des deux mondes s'offre à vous. Vous disposez ainsi d'un large éventail de possibilités répondant aux besoins des scénarios évoqués par certains d'entre vous :

  • Traitement des images, créativité et applications de conception mélangeant interface utilisateur et graphismes
  • Visionneuses de cartes et de documents à grande échelle, mélangeant des graphismes DirectX de très grande taille et des éléments d'interface utilisateur
  • Jeux et simulations en plein écran, avec graphismes DirectX à haute performance et quelques éléments d'interface utilisateur en superposition

Dans ces scénarios, l'association de XAML et de DirectX permet aux développeurs d'être plus productifs et de créer plus rapidement des applications toujours plus riches.

Interface utilisateur de style Metro dans Windows 8

XAML, utilisé en conjonction avec HTML/JavaScript, offre différents outils d'interface utilisateur pour tous les types d'applications dans Windows 8. Vous disposez ainsi de constructions pour l'interactivité, de contrôles et d'animations de style Metro, ainsi que de fonctionnalités enrichies : prise en charge de l'accessibilité, liaison de données, multimédia, hébergement HTML, etc. Vous bénéficiez également de la prise en charge au moment du design dans Visual Studio et Expression Blend, et vous continuez à utiliser les langages de programmation de votre choix.

Parmi les sujets couvrant l'ensemble de ces domaines, aussi bien en XAML qu'en HTML/JavaScript, les performances ont fait l'objet d'une attention toute particulière de la part de notre équipe de développeurs : nous avons beaucoup travaillé sur ce point dans Windows 8, pour vous permettre de créer plus facilement que jamais des applications de style Metro rapides et fluides. Dans le domaine des graphismes en particulier, nous avons continué à améliorer les performances de rendu et de composition. Chaque fois que possible, nous cherchons à utiliser le processeur graphique, notamment de façon à ce que les types d'animations courants s'exécutent indépendamment du thread d'interface utilisateur : ainsi, les graphismes restent fluides, quelle que soit la charge de travail imposée par votre application au processeur principal. Notre objectif est de faire en sorte que toutes les opérations réalisées par les infrastructures d'interface utilisateur le soient de façon optimale : avec rapidité, fluidité et une consommation électrique réduite au strict minimum. Si vous utilisez une infrastructure d'interface utilisateur, vous profitez déjà en arrière-plan de la puissance de DirectX. Dans de nombreux cas, vous disposez ainsi de tout ce dont vous avez besoin pour atteindre des performances graphiques excellentes.

DirectX dans Windows 8

Quoi qu'il en soit, vous avez dans certains cas besoin des performances de rendu brutes du mode immédiat, ainsi que de l'accès direct aux périphériques graphiques, autant d'avantages qu'offre DirectX. En commençant par Windows 8, les composants du SDK DirectX sont désormais inclus dans le SDK Windows principal et DirectX contient toute une série de nouveautés : API 3D unifiée, graphismes 2D améliorés et performances textuelles grâce à Direct2D, un pipeline de traitement d'images enrichi, et meilleure prise en charge de l'impression.

Tous les composants de Windows 8 ont été optimisés et bâtis autour de DirectX, des plateformes de développement au système d'exploitation, en passant par la conception matérielle. Ainsi, vous pouvez utiliser DirectX pour atteindre les meilleures performances de rendu possible dans Windows 8. En contrepartie, les solutions purement axées autour de DirectX peuvent s'avérer relativement complexes en termes de création et de maintenance. En outre, à moins d'utiliser un wrapper tiers, vous devez les implémenter en C++.

C'est justement là que l'interopérabilité entre DirectX et XAML prend tout son sens : vous pouvez désormais créer votre interface utilisateur XAML à l'aide de C#, Visual Basic ou C++, et inclure des composants DirectX C++. Vous vous demandez peut-être ce qu'il en est de HTML/JavaScript et DirectX. Comme nous l'avons déjà évoqué, nous avons travaillé d'arrache-pied pour intégrer toute la puissance de DirectX dans les plateformes d'interface utilisateur, mais pour associer l'interface utilisateur et des graphismes DirectX natifs, nous avons mis l'accent sur XAML pour Windows 8.

Objectifs de conception

En nous appuyant sur les principes ci-dessus, nous avons élaboré une liste d'objectifs à atteindre pour associer DirectX et XAML :

1. Performances

  • Prendre en charge les entrées à faible latence et l'interactivité
  • Permettre l'actualisation incrémentielle du contenu XAML et DirectX
  • Réduire la surcharge induite par l'utilisation de XAML

Nous souhaitions avant tout éviter d'imposer une « surtaxe XAML » : si votre application est avant tout basée sur DirectX, l'utilisation de XAML doit être un choix simple si vous avez besoin d'une interface utilisateur de style Metro. Cet avantage ne profite pas qu'aux développeurs : nous souhaitions en effet faire en sorte que vos clients profitent de performances excellentes et d'une longue autonomie en utilisant votre application.

2. Flexibilité

  • Offrir toutes les fonctionnalités de XAML et DirectX 11

Ainsi, vous pouvez concevoir et développer une interface XAML dans Blend et Visual Studio, puis l'associer à n'importe quel contenu DirectX. Nous avons veillé à ne limiter d'aucune façon que ce soit la puissance de XAML et DirectX, pour vous permettre de les utiliser conjointement.

3. Intégration

  • Garantir l'intégration aisée de XAML et DirectX

Vous pouvez associer des graphismes DirectX et des interfaces utilisateur XAML au sein d'une seule et même application en utilisant les concepts XAML que vous connaissez.

Après étude des scénarios déjà mentionnés, nous les avons classés en trois grandes catégories :

  1. Combinaison de petits îlots de contenu DirectX dans une interface utilisateur principale en XAML
  2. Combinaison de grandes surfaces DirectX évolutives avec une interface utilisateur XAML
  3. Superposition d'une interface utilisateur de style Metro en XAML sur une application utilisant principalement DirectX

Nous avons rapidement réalisé qu'une approche universelle ne pourrait pas fonctionner correctement pour toutes ces catégories. Ainsi, nous avons ajouté trois types XAML, chacun ciblant l'un de ces types de scénario principaux. Nous vous offrons ainsi un haut niveau de flexibilité, qui vous permet de choisir la ou les options les mieux adaptées à votre application. Ces options ne s'excluent pas mutuellement : vous pouvez même utiliser simultanément les trois approches pour les différents composants d'une même application.

Scénario 1 – SurfaceImageSource : îlots DirectX dans une interface utilisateur XAML

Pour combiner DirectX et XAML, vous pouvez utiliser le nouveau type XAML SurfaceImageSource, afin d'ajouter des zones de contenu DirectX à une application de style Metro XAML. Grâce à une instance de ce type XAML, vous disposez d'une surface DirectX partagée sur laquelle vous pouvez dessiner en utilisant toutes les fonctionnalités de DirectX, avant d'intégrer la surface dans le reste de l'interface de votre application XAML.

Cette option est particulièrement utile lorsque vous souhaitez utiliser DirectX pour dessiner des composants spécifiques faisant partie d'une interface utilisateur XAML plus vaste. Vous pouvez par exemple utiliser SurfaceImageSource pour appliquer des effets visuels complexes à une photo ou pour créer des visualisations de données 3D à haute performance.

Si vous avez déjà utilisé une classe XAML ImageSource, l'utilisation de ce type XAML vous semblera familière : vous pouvez définir une SurfaceImageSource comme source d'un ImageBrush, puis l'utiliser pour peindre presque n'importe quel élément XAML (ou même plusieurs éléments, car les brosses sont réutilisables). Vous pouvez par exemple utiliser une SurfaceImageSource pour remplir un Rectangle XAML :

SurfaceImageSource^ surfaceImageSource =  
ref new SurfaceImageSource(rectangle1->Width, rectangle1->Height, true);
ImageBrush^ brush = ref new ImageBrush();
brush->ImageSource = surfaceImageSource;
rectangle1->Fill = brush;

Vous pouvez ensuite utiliser DirectX pour tracer le contenu du Rectangle et le mettre à jour aussi souvent que vous le souhaitez. Cette surface a l'immense avantage de s'intégrer de façon transparente au modèle de composition XAML : les propriétés appliquées à ce Rectangle influent également sur le contenu tracé avec DirectX. Vous pouvez très facilement faire se chevaucher des éléments, mais aussi appliquer des transformations de rendu, des projections, des couches z-index et une opacité, le tout en XAML, sans rencontrer les problèmes d'espace aérien générés par le mélange de technologies de rendu :

Schéma montrant une application XAML mélangeant une surface DirectX et du contenu XAML. La surface DirectX a été tournée et composée avec d'autres contenus XAML, qui chevauchent la surface.

Surface DirectX rectangulaire composée avec du contenu XAML

Si vous trouvez que ce concept est similaire au type D3DImage de WPF, vous avez raison ! Néanmoins, nous avons écouté vos commentaires sur D3DImage et nous avons beaucoup travaillé pour rendre SurfaceImageSource à la fois plus puissant et plus simple d'utilisation. En particulier, SurfaceImageSource prend en charge DirectX 11 (y compris Direct2D), s'affranchit de bon nombre des limitations de D3DImage (par exemple, SurfaceImageSource peut fonctionner via une connexion Bureau à distance), améliore les performances et gère les surfaces pour vous : plus besoin de verrouiller et déverrouiller, ni de créer et gérer manuellement des tampons ! Une SurfaceImageSource peut même prendre en charge des surfaces plus vastes que la taille de texture maximale de votre périphérique Direct3D.

En créant une SurfaceImageSource, vous remarquerez tout de suite qu'en apparence, elle ne présente aucune nouvelle méthode. En réalité, l'implémentation est présentée par le biais d'une interface d'arrière-plan, car elle doit faire directement référence aux API DirectX, disponibles uniquement en C++. Par conséquent, vous devez utiliser C++ pour appeler des API DirectX, soit directement dans une application XAML C++, soit dans un composant WinRT séparé, que vous pouvez ensuite inclure dans n'importe quelle application C# ou Visual Basic. Incluez le fichier d'en-tête requis :

#include "windows.ui.xaml.media.dxinterop.h"

Vous pouvez ensuite interroger l'interface ISurfaceImageSourceNative, qui vous donne accès aux trois méthodes nécessaires :

interface ISurfaceImageSourceNative: IUnknown
{
SetDevice(IDXGIDevice *pDevice);
BeginDraw(
RECT updateRect,
IDXGISurface** pSurface,
POINT* offset
);

EndDraw();
};

BeginDraw() accepte un paramètre updateRect, qui vous permet de limiter la zone à actualiser. Vous pouvez ainsi améliorer les performances en actualisant la surface par petites incrémentations. La méthode renvoie également une surface et un point spécifiant un décalage où vous devez commencer le tracé : même si vous actualisez l'intégralité de la surface, vous devez vérifier ce décalage, car votre surface peut faire partie d'une surface plus importante dont la gestion est assurée par l'infrastructure dans le cadre d'une optimisation. Dès lors, vous pouvez créer et définir un périphérique DXGI, puis commencer à tracer avec DirectX. L'article du Centre de développement consacré à l'interopérabilité de DirectX et XAML offre de nombreuses informations détaillées à ce sujet.

Scénario 2 – VirtualSurfaceImageSource : contenu DirectX à grande échelle + interface utilisateur XAML

VirtualSurfaceImageSource étend SurfaceImageSource pour mieux prendre en charge les très grandes surfaces. Son principe réside dans le concept de virtualisation, qui consiste à tracer les zones d'une surface uniquement lorsqu'elles deviennent visibles à l'écran.

Ce type a été conçu pour être utilisé lors de l'affichage de contenus complexes plus grands que l'écran, en particulier lorsqu'il est possible de réaliser des panoramiques ou des zooms. Il peut être mis en œuvre dans de nombreux scénarios : visionneuse de documents, application d'imagerie médicale et plus généralement toutes les applications dont le contenu peut potentiellement être plusieurs fois plus grand que la résolution maximale d'un écran moyen. Les contrôles de carte constituent un autre exemple : en utilisant une VirtualSurfaceImageSource, vous pouvez implémenter une grande carte vectorielle avec DirectX et laisser le système suivre la zone affichée à chaque instant à l'écran. Vous pouvez également superposer sur la carte des éléments XAML (des punaises, par exemple) et synchroniser facilement leur position avec le contenu DirectX.

VirtualSurfaceImageSource implémente cette virtualisation grâce à un système de mosaïques et à un modèle de rappel. Une fois que vous avez créé votre VirtualSurfaceImageSource en taille réelle, en arrière-plan votre contenu DirectX est divisé en zones rectangulaires. L'infrastructure effectue automatiquement un suivi des rectangles visibles à chaque point (et éventuellement des rectangles situés juste à côté des rectangles visibles, pour rendre les mouvements de panoramique plus fluides) et lance un rappel que votre application implémente, pour fournir si nécessaire le contenu des régions rendues visibles. Cette méthode fonctionne particulièrement bien lorsque vous placez votre contenu VirtualSurfaceImageSource dans un ScrollViewer, afin de permettre des mouvements de panoramique fluides lorsqu'un écran tactile ou une souris sont utilisés.

Grande surface DirectX présentant une zone actuellement visible, délimitée par un écran. Les régions vides situées à l'extérieur de l'écran représentent les parties de la surface qui n'ont pas encore été tracées, car elles ne sont pas encore visibles à l'écran.

Grande surface divisée en une mosaïque de rectangles

Cette approche n'est pas uniquement plus simple à implémenter que lorsque vous effectuez vous-même un suivi des coordonnées : elle améliore aussi de façon significative les performances de votre application. Comme le système met en cache votre contenu en interne, il est conservé en mémoire une fois la région tracée, puis réutilisé par le processeur graphique même s'il n'apparaît plus à l'écran, et ainsi de suite : inutile de le tracer à nouveau ! Si vous souhaitez actualiser une région déjà tracée, il vous suffit d'appeler la méthode BeginDraw() comme vous le feriez avec une SurfaceImageSource. Pour optimiser encore plus les performances, le système recycle automatiquement la mémoire utilisée pour les régions anciennes qui ne sont pas visibles après un certain point. L'utilisation de la mémoire est ainsi limitée, ce qui permet à votre application de fonctionner de façon optimale sur différents formats d'appareils et sur différents profils matériels, y compris sur de grandes surfaces. Ce gain de performances est particulièrement visible sur les appareils portables tels que les tablettes.

Comme avec SurfaceImageSource, vous pouvez interroger l'interface d'arrière-plan native (IVirtualSurfaceImageSourceNative, dans ce cas précis), pour accéder aux méthodes requises. Pour en savoir plus, consultez l'article consacré à l'interopérabilité de DirectX et XAML sur le Centre de développement ou l'exemple d'application de magazine Direct2D.

Scénario 3 – SwapChainBackgroundPanel : DirectX avec une superposition XAML

Enfin, pour combiner du contenu XAML et DirectX, la troisième et dernière possibilité est l'élément SwapChainBackgroundPanel, conçu pour le développement d'applications plein écran basées principalement sur DirectX. Contrairement à SurfaceImageSource et VirtualSurfaceImageSource, SwapChainBackgroundPanel est un élément XAML et non pas une ImageSource. Il hérite du panneau de disposition Grid de XAML et permet aux applications de créer et contrôler entièrement une chaîne de permutation DirectX plein écran, sur laquelle l'ensemble du contenu XAML est superposé :

Illustration du modèle de composition de l'élément SwapChainBackgroundPanel, où le contenu DirectX se trouve toujours derrière une superposition XAML

Un élément SwapChainBackgroundPanel est placé derrière le contenu XAML superposé

Nous pensons qu'il s'agit de la meilleure solution dans le cas des jeux et des autres applications où la plupart des graphismes sont des graphismes DirectX. Ainsi, vous profitez de performances excellentes et d'un modèle d'actualisation proche de celui d'une application DirectX pure. En outre, vous pouvez utiliser parallèlement XAML pour créer facilement une interface à affichage tête haute et lier ses données à votre modèle de jeu, ajouter des contrôles interactifs et ajouter des éléments de style Metro tels que des AppBars.

Pour parvenir à ce résultat, nous avons imposé quelques restrictions à l'élément SwapChainBackgroundPanel : il doit être l'élément XAML racine de votre application et certaines propriétés XAML héritées (Opacity et RenderTransform, notamment) n'ont aucune incidence (mais vous pouvez évidemment appliquer les opérations DirectX équivalentes au contenu de la chaîne de permutation pour obtenir le même effet). Ainsi, vous parvenez à un juste équilibre entre l'intégration étroite avec le modèle de composition de l'infrastructure XAML offert par SurfaceImageSource, d'une part, et l'interaction à faible latence et les possibilités de contrôles supplémentaires du minutage de présentation dont vous disposez lorsque vous gérez vous-même la chaîne de permutation.

Dans ce cas, l'interface native d'arrière-plan ne dispose que d'une seule méthode :

interface ISwapChainBackgroundPanelNative: IUnknown
{
SetSwapChain(IDXGISwapChain *pSwapChain);
};

Vous pouvez commencer à présenter votre contenu dès que vous appelez la méthode SetSwapChain() pour associer votre chaîne de permutation au panneau. À ce stade, les tests de positionnement de SwapChainBackgroundPanel deviennent possibles et vous gérez les entrées à l'aide d'événements d'entrée XAML normaux. Les éléments XAML enfants que vous ajoutez au panneau s'affichent par dessus votre chaîne de permutation.

L'article consacré à l'interopérabilité sur le Centre de développement offre des informations complémentaires sur l'utilisation de SwapChainBackgroundPanel. Vous pouvez également consulter la source d'un exemple de jeu de tir DirectX conçu avec SwapChainBackgroundPanel, qui illustre l'implémentation de bout en bout d'un jeu Direct3D avec une interface XAML :

Capture d'écran d'un jeu de tir subjectif en DirectX et XAML. La surface DirectX contient des murs et des cibles, sur lesquels est superposée une interface XAML contenant un menu et un contrôle AppBar.

Jeu développé avec DirectX et XAML

Pour conclure

Les nouvelles possibilités qui s'offrent à vous lorsque vous associez les interfaces enrichies et la productivité de conception de XAML avec la puissance des graphismes haute performance de DirectX sont réellement fascinantes. Nous espérons qu'elles vous seront utiles pour créer des applications de style Metro qui deviendront très vite indispensables à vos clients !

-- Jesse Bishop
Chef de projet, Windows

  • Loading...
Leave a Comment
  • Please add 3 and 6 and type the answer here:
  • Post