Introduit par Windows Vista sous le nom Desktop Windows Manager (DWM), le moteur de composition (Windows Composition) n’est pas totalement récent en soit. Il a notamment été mis en place pour proposer l’expérience “Windows Aero”, assurant les fameux effets de perspective 3D et de semi transparence sur les fenêtres de Windows Vista.

Un peu de contexte technico-historique

Sous Windows XP, chaque application écrivait dans un buffer d’affichage commun pour effectuer le rendu à l’écran. Avec l’arrivée de DWM, une révolution silencieuse fait son apparition : chaque application dispose désormais d’un buffer séparé (le grand luxe) ! Ces snapshots sont ensuite récupérés puis (éventuellement) retravaillés par le moteur de composition pour effectuer le rendu à l’écran.

On passe donc d’une collocation sympa mais un peu désorganisé à des appartements séparés avec un propriétaire qui veille au grain

Ce moteur connaît l’état de chaque buffer et il maintient un arbre visuel (visual tree) des différentes sources ;  assurer les effets de transparence ou de perspectives entre les différents visuels (en résumé les fenêtres) est désormais presque un jeu d’enfant. Naturellement, il s’appuie sur DirectX, les opérations de composition sont effectuées par le GPU – libérant au passage le CPU de toute surcharge de travail non méritée.

L’histoire aurait pu en rester la - mais les équipes (depuis Windows 8) ont eu la bonne idée de doter ce moteur d’une API : DirectComposition (qui, comme son nom l’indique est liée intimement à DirectX).

Pourquoi ne pas prolonger l’arbre visuel avec des éléments graphiques qui appartiennent directement à mon application ? Comme DWM se charge déjà d’afficher le rendu de mon application et qu’il accède au GPU, autant en profiter pour lui déléguer des tâches (animations, effets) qui vampirise les ressources à mon thread UI. Et bien, c’est tout l’intérêt de ce jeu d’API !

What’s new pour la plateforme universelle ?

La nouveauté, c’est que l’API DirectComposition est désormais nativement proposée par WinRT (depuis la build 1511 du SDK) sous la terminologie Visual Layer (disponible dans le namespace Windows.UI.Composition).

En résumé, le Visual Layer va nous aider à créer des interfaces attrayantes, fluides et ainsi améliorer l'expérience de nos utilisateurs.

Le but n’est pas de remplacer les autres frameworks, mais de vous offrir un nouvel accès, plus proche du GPU, sans avoir besoin de mettre les mains dans DirectX (enfin presque). Xaml et le Visual Layer sont capables de coopérer main dans la main, rendez-vous en fin d’article sur ce point !

Comment débuter ?

Dans un premier temps, je vous propose de nous passer totalement de code Xaml (Rassurez-vous, ce n’est que temporaire).

1. Créez une Application vide (Windows universel) puis supprimer les fichiers App.xaml, App.xaml.cs, MainPage.xaml, MainPage.xaml.cs. On fait du vide !
2. Ajoutez une classe DefaultView.cs à votre projet et copiez le code suivant :

• Compositor : Classe principale, qui va permettre la communication entre le moteur de composition et l’application.
• CompositionTarget : Représente la surface d’affichage de notre application.

Composition : Les basiques

• CompositionObject : Classe de base.
• Visual : Hérite de CompositionObject et implémente toutes les opérations principales.
• ContainerVisual : Identique à la classe Visual mais dispose d'une propriété Children additionnelle.
• SpriteVisual : Identique à la classe ContainerVisual mais permet d'associer un objet Brush au Visual.

Animations

KeyFrame Animation : Animation traitée sur une durée de temps. On définie des positions clés (au minimum une position de départ et une position de fin) - on laisse ensuite le moteur interpoler toutes les positions intermédiaires pour chaque frame affichée à l'écran.

Le code suivant permet de faire tourner linéairement l'objet foreground ; un tour complet (360°) est effectuée toutes les 3 secondes.

Expression Animation : Animation qui n'est pas dépendante du temps ; on calcule explicitement la position pour chaque frame, basée sur un calcul mathématique (une expression).  Le code suivant permet d'effectuer une translation de l'objet background ; l'expression utilise une condition basée sur l'animation précédente  : l'angle de rotation de l'objet foreground. La méthode SetReferenceParameter permet à l'expression de faire référence aux propriétés des objets Visual.

Pour aller plus loin : compositions animations

Effets

Jusqu'à maintenant, on a utilisé un CompositionColorBrush pour 'remplir' le Visual avec une couleur fixe. Avant d'appliquer un effet, je vous propose de charger une image dans un Visual, on bascule désormais sur un CompositionSurfaceBrush. L'étape pour charger une image dans ce type d'objet n'est pas directement pris en charge dans Windows.UI.Composition, vous devez faire appel à Microsoft.UI.Composition.Toolkit (ou utiliser le package nugget CompositionImageLoader) pour vous aider dans cette démarche. Le code suivant fait le reste (il faut adapter un peu le code si vous utilisez le package nugget):

Saturation

Et le code Xaml dans tout ca ?

La classe ElementCompositionPreview nous vient en aide, elle permet de récupérer un Visual depuis un élément du Framework Xaml. Vous pouvez dès lors utiliser les connaissances précédentes pour appliquer une animation sur cet élément, comme dans le code ci-dessous :

Conclusion

Prometteur pour assurer de la fluidité à nos interfaces de demain, il manque cependant encore quelques briques pour que le Visual Layer prenne toutes ses lettres de noblesse (notamment des effets comme le blur et le drop shadow). Cette version laisse toutefois entrevoir de nouvelles possibilités et sans doutes quelques surprises dans les prochaines versions.

What's next ? Je vous invite à regarder les exemples proposés par https://github.com/Microsoft/composition et la documentation msdn. N'hésitez pas à suivre @wincomposition pour vous tenir informé des prochaines nouveautés.

Comme nous sommes tous frais et reposés en cette belle rentrée (meuh si) ; je vous propose d’étudier plus en détails les nouveautés de la plateforme universelle (UWP) disponible avec Windows 10. Comme il faut bien commencer par un sujet, je débute aujourd’hui par un sujet lié aux performances de vos applications C# et VB : .NET Native !

.NET Native

Alors un peu de contexte pour démystifier le sujet : historiquement, quand vous compilez du code qui repose sur le Framework .NET (C# ou VB dans le cadre du Windows Store), Visual Studio génère pour vous un package en code MSIL (Microsoft Intermediate Language). Ce code intermédiaire est ensuite lui même recompilé en code natif lors de l’exécution de l’application sur le poste cible (on utilise le terme JIT alias Just-In-Time compilation pour définir cette opération).

Cette gestion a ses avantages (il permet notamment de de fournir le même package indépendamment de l’architecture cible : x86, x64 ou ARM)  mais a pour désagrément d’impacter les performances (principalement au démarrage de l’application).

• Jusqu’à 60% pour un démarrage à froid
• Jusqu’à 40% pour un démarrage à chaud

Les dépendances au code .NET sont également injectés en statique au code de l’application – .Net native en profite pour supprimer les types/fonctions qui ne seront pas utilisés par votre code, l’empreinte mémoire est du coup plus faible, on peut donc espérer gagner jusqu'à 30 % de la consommation mémoire habituelle. Toutes ses valeurs restent théoriques mais pour résumer simplement : vous aller forcément gagner en performance !

Si vous avez toujours des doutes, vous pouvez tester par vous même votre gain de performance : Mesure de l'amélioration du démarrage avec .NET Native.

Le passage du code IL vers le code machine passe par les rouages d’une série d’outils, vous trouverez donc souvent la terminologie .NET Native tool chain dans les différentes documentations. Si le sujet vous passionne et que vous avez l’envie de soulever le capot,  l’article The .NET Native Tool-Chain est un bon point de départ.

Bon, ca rocks sérieusement du poney (David Catuhe 2015©) mais à quel moment se déclenche cette optimisation ? Attention, moment émotion :

Debug versus Release

Visual Studio s’adapte à ce changement de paradigme. En mode debug, la compilation .NET Native est désactivée par défaut. Visual Studio génère donc du code MSIL et mon package dépend toujours des librairies du Framework .NET. On ne gagne pas en performance mais msbuild compile votre solution rapidement (et ce point à son importance). Il est toutefois possible d’activer .NET Native au besoin dans les options de compilation.

Pour le mode release c’est une autre histoire, .NET Native compile votre projet en natif (cette fois-ci par défaut). Visual Studio prend donc son temps pour faire les choses bien et optimiser aux petits oignions votre code ! Vous pourrez profiter de ce moment délicieux pour faire une ou deux pause cafés bien méritées (bref, Sit back and Relax). A noter que AnyCPU est une option qui n’a plus lieu d’être car la compilation cible une architecture spécifique (du moins pour les applications, il reste toujours possible de l’utiliser si vous développez une librairie).

Le déploiement sur le Windows Store

Votre application est finalisée, voici venu le moment tant espéré de la publication.

L’assistant vous propose de sélectionner les architectures que vous souhaitez supporter, Visual Studio s’occupe du reste. La pause café terminée, vous obtenez le résultat suivant:

Pourquoi un répertoire Test !? Et bien ce répertoire contient l’application optimisé avec .NET Native, il sert principalement (comme son nom l’indique) pour effectuer des tests en local - ou - si vous souhaitez déployer votre application en mode sideloading (sans passer par le Windows Store).

Le fichier .appxupload contient quand à lui votre application à destination du Windows Dev Center (ou les différents fichiers .appxupload spécifiques à chaque architecture si vous n’êtes pas en mode bundle).

La compilation made in cloud

Petit point déstabilisant au premier abord, le fichier .appxupload n’est pas optimisé avec la .NET Native tool chain, (à cet instant, vous devez ne plus rien comprendre à ce que je viens de vous raconter précédemment, don’t panic).

.appxupload contient simplement du code MSIL ainsi que la version des outils utilisés par la tool chain pour compiler votre application (pour les curieux, cette liste est référencée dans le fichier AppxManifest.xml , disponible dans les répertoires de compilation).

L’étape suivant se déroule in the cloud, le Windows Store prend le relais et va se charger de recompiler l’application en code natif lorsque vous soumettez votre package. L’intérêt ne saute pas aux yeux tout de suite mais l’initiative permet au store une  petite liberté : il va recompiler votre application (de manière transparente pour vous) si des optimisations ou correctifs sont effectués dans les outils de la .NET Native tool chain. Ce petit détail implique deux choses pour vous.

1. Vous n’avez désormais plus accès au numéro de révision de l’application (les trois premiers chiffres du numéro de version vous appartiennent toujours, c’est simplement le dernier qui est préempté par le store – il sera incrémenté à chaque recompilation made in cloud).
2. Comme l’application n’est pas compilée localement, les symboles de debug (*.pdb) sont générés également pour vous. Vous pouvez les télécharger depuis le Windows Dev Center dans la rubrique packages actuels.

J’espère que ces quelques lignes vous seront bénéfiques, n’hésitez pas à me contacter - via ce blog ou twitter (@dupuyjs) - pour tout commentaire ou question.

Bref, comment débuter avec votre carte Arduino Yún?

Logiciels

Télécharger la version intitulée Arduino 1.5.8 BETA (with support for Arduino Yún and Arduino Due boards) depuis http://arduino.cc/en/main/software. Comme son nom l’indique cette version est la seule à supporter actuellement les cartes Yún et Due.

Shield de base Grove

Pour débuter et vérifier que tout fonctionne correctement, positionnez le Shield de base Grove sur la carte Arduino.

Attention: les connecteurs du Shield risquent de toucher le port Ethernet de la carte Arduino, assurez vous qu’ils ne rentrent pas en contact avant d’alimenter la carte. Placez un carton entre les deux ou un autre isolant si vous souhaitez garantir la pérennité de votre matériel ^^ (oui, c’est aussi l’esprit makers, on bricole déjà la carte).

Commencez par le support LED avec votre couleur préférée en évitant de confondre les bornes positives et négatives. :)

Reliez ensuite le support LED à la base Grove en utilisant une des fiches de D2 à D8 ; ce sont les entrées/sorties numériques. Dans mon exemple, j’utiliserai la fiche D6.

Alimentation de la Yún

Pour alimenter la carte Yún, il est simplement nécessaire de raccorder celle-ci à votre ordinateur à l’aide d’un câble USB micro-B (théoriquement le type de câble que vous utilisez pour charger vos smartphones). Il servira également à transmettre les données sur la carte Yùn depuis l’IDE Arduino

Premiers pas

Lancez maintenant l’IDE Arduino et assurez-vous que la carte Arduino Yún est bien sélectionnée dans le menu [Tools][Board] comme ci-dessous.

De même, assurez-vous que COMx (Arduino Yún) est bien sélectionnée dans le menu [Port]. Si ce menu n’est pas disponible, il est probable que le câble utilisé soit défectueux ou de type A.

Le menu [File][Examples] a la délicate attention de nous proposer des programmes prêt à l’emploi ; pour respecter la typologie Arduino, ces programmes seront nommés des Sketchs dans le reste de l’article. Pour s’assurer que tout fonctionne bien, sélectionnez le sketch Blink dans la section 01.Basics.

• Setup qui s’exécute une unique fois lorsque le sketch est téléchargé ou lors d’un arrêt/redémarrage de la carte. Ce point d’entrée permet donc d’initialiser les capteurs et vos variables.
• Loop, comme son nom l’indique, exécute ensuite du code en boucle.

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin 6 as an output.
  pinMode(6, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(6, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);              // wait for a second
  digitalWrite(6, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);              // wait for a second
}

Le langage utilisé par Arduino est une version simplifiée de C/C++ qui s’appuie sur Wiring (même si les initiatives sont désormais séparées). Pour accéder à l’ensemble des primitives, je vous invite à consulter Language Reference.

Il ne reste plus qu’à télécharger le Sketch sur la carte; et si tout se passe sans accros … la diode clignote. On vient au moins de déterminer que les basiques fonctionnent parfaitement !

Malgré tout le bien que je pense des outils Arduino, on peut regretter que l'IntelliSense ne soit pas présent - ainsi que de pouvoir positionner quelques breakpoints dans notre code (en tout ca je n’ai pas trouvé l’option). Et bien il existe une solution pour palier à ce problème – un plugin Visual Studio nommé Visual Micro répond parfaitement à cette demande. Et il s’installe parfaitement avec l’édition Visual Studio Community 2013 !

Certes, cette solution est payante mais une version d’évaluation est disponible sur le site suivant:

Réseau / Configuration du WiFi

La carte Yún a l’avantage de supporter deux options pour vous connecter au réseau : Ethernet et le WiFi. Usine.IO ne sera pas câblé en filaire, donc vraisemblablement, le choix du WiFi va vite s’imposer :).

Lors du démarrage de la carte, elle va déclarer automatiquement un réseau WiFi intitulé Arduino Yun-XXXXXXXXXXXX. Connectez vous à ce réseau depuis votre ordinateur ou votre smartphone.

Là où ca se complique, c’est lorsque 30 cartes se déclarent comme réseau WiFi en même temps ^^. Pour vous y retrouver, lancer le Sketch WiFiStatus disponible via [File][Examples][Bridge]. Après quelques secondes d’attente, la console Serial Monitor dans [Tools] affiche le nom de votre réseau (SSID).

Une fois connecté au réseau WiFi, naviguez vers http://arduino.local -ou- directement http://192.168.240.1 si la première option ne fonctionne pas.

Si les choses se compliquent et que vous souhaitez revenir à la configuration usine du WiFi : pressez le bouton WLAN RST pendant au minimum 5 secondes (mais surtout moins de 30 secondes – dans ce cas vous restaurez l’environnement linux). Plus d’information concernant cette procédure sur le site http://arduino.cc/en/Main/ArduinoBoardYun.

Se connecter au monde (et notamment à Microsoft Azure)

La carte Yun a une particularité, le microcontrôleur ATmega 32U4 est complété par un processeur Atheros AR9331 qui permet de faire tourner une distribution de Linux basée sur OpenWrt. Pour faire cohabiter les deux mondes, Arduino met à disposition plusieurs librairies; et notamment <Process.h> qui permet de lancer des commandes curl linux sans se soucier des deux environnements.

Par exemple, le sketch suivant effectue une requête HTTP GET pour télécharger le logo Arduino en mode ASCII.

#include <Process.h>

void setup() {
   // Initialize Bridge
   Bridge.begin();

   // Initialize Serial
   Serial.begin(9600);

   // Wait until a Serial Monitor is connected.
   while (!Serial);

   // run various example processes
   runCurl();
}

void loop() {
   // Do nothing here.
}

void runCurl() {
   // Launch "curl" command and get Arduino ascii art logo from the network
   // curl is command line program for transferring data using different internet protocols
   Process p;        // Create a process and call it "p"
   p.begin("curl");  // Process that launch the "curl" command
   p.addParameter("http://arduino.cc/asciilogo.txt"); // Add the URL parameter to "curl"
   p.run();      // Run the process and wait for its termination

   // Print arduino logo over the Serial
   // A process output can be read with the stream methods
   while (p.available()>0) {
     char c = p.read();
     Serial.print(c);
   }
   // Ensure the last bit of data is sent.
   Serial.flush();
}

En utilisant le même mécanisme, Thomas Conté (@tomconte) a publié plusieurs articles pour connecter la Yun aux services Microsoft Azure. #Zone61 n’impose pas d’architecture spécifique pour Azure, c’est à vous de faire le choix - héberger un web service - transmettre les données à un service de stockage - utiliser Event Hubs - sont tous des choix légitimes selon vos besoins.

Securing communications with HTTPS on the Arduino Yun Connecting the Arduino Yun to Azure Event Hubs

Pour aller plus loin

Nous voilà en approche de l’édition 2015 des TechDays ! Besoin d’un peu d’aide pour vous y retrouver dans le parcours développement d’applications ? Voici l’intégralité des sessions qui seront proposées.

Toutefois, développeurs, avant de vous plonger dans ces sessions, notez que d’autres parcours connexes seront également susceptible de vous intéresser et ne sont pas listés dans ce billet. C’est le cas du Design, de l’Architecture, Outils, Plateformes & Langages, du Développement Web, et du parcours DevOps. Des sessions sur l’IoT et ciblant les Makers sont également au programme tout au long des 3 jours ! 

La première journée débutera comme à son habitude par une Keynote consacrée aux développeurs - new Keynote() { cloudFirst=true, mobileFirst=true }.Connect(); - bien évidemment à ne pas manquer.

Plusieurs nouveautés font leur apparition cette année, notamment  l’arrivée de sessions en mode HOL (Hands On Labs) pour directement mettre les mains dans le code ; ainsi que des “keynote secondaires” en guise d’introduction et de synthèse pour les thèmes principaux.  Le parcours développement d’applications mobile n’échappe pas à la règle : cette keynote parlera bien évidemment d’applications universelles pour développer des applications Windows Store ; mais également de l’outillage présenté lors de l’évènement Connect() pour cibler du multi plateformes.

Cette session sera animée par :

• Rudy Hyun (6Studio) pour parler des applications universelles en C#/Xaml, et de la monétisation.
• Guillaume Leborgne (MCNECT) effectuera ensuite la transition pour présenter les nouveautés de WinJS ainsi que de Cordova.
• Cyril Cathala (Soat) terminera sur une note de Xamarin !
• Sébastien Pertus et moi-même animeront le reste de la session pour vous donner un maximum de visibilité sur les dernières nouveautés et peut-être quelques surprises.

Rendez-vous ensuite sur les différentes sessions pour approfondir et détailler cette keynote. Comme promis, voici le guide des sessions.

La keynote : une synthèse du parcours pour passer en revue toutes les nouveautés.

Keynote développement mobile : les solutions pour Windows (Phone), Android et iOS

Développeurs Windows & Windows Phone : partagez un maximum de code pour vos développements en optant pour les applications universelles. Besoin d'une solution pour cibler également Android et iOS ? Visual Studio s'enrichit chaque jour de nouvelles fonctionnalités pour le développement multi plateformes. Au programme de cette session : applications universelles, Cordova, Xamarin, Unity et Visual C++ for Cross-Platform Mobile Development.

Rudy Huyn (6Studio), Guillaume LEBORGNE (MCNEXT), Cyril Cathala (Soat), Sébastien Pertus (Microsoft) & Jean-Sébastien Dupuy (Microsoft)

L’univers Windows Store : les applications universelles !

Introduction aux applications universelles

Il n'y a plus aucun doute quant au fait que les applications universelles représentent le futur des applications pour l'OS de Microsoft. Pouvoir créer une seule application capable de fonctionner sur son PC, sa tablette Windows, son Windows Phone, et pourquoi pas sur XBox ou d'autres périphériques n'est plus une idée utopique, mais quasiment une réalité. C'est en tout cas la stratégie de Microsoft aujourd'hui. Nous vous proposons de voir ensemble les bases pour bien démarrer son application universelle, les ressources à connaître, mais aussi les particularités et autres concepts liés à ce développement, les émulateurs .... Bref, de la création de votre application à sa publication

Florian Rousselet (Soat) & Sébastien Thevenin (Soat)

Windows Phone: Migrez de Silverlight vers Universal App, Préparez vous à Windows 10

Les différences entre les Silverlight apps et Universal apps sont grandes et vous avez peur de repartir de zéro ? Venez découvrir les astuces et les outils indispensables pour faciliter cette migration et passer d'une technologie à l'autre rapidement tout en préparant vos applications à Windows 10 !

Julien Lo Presti (Soat) & Rudy Huyn (6Studio)

Développer des applications Windows Store pour l'entreprise

Les applications métier développées pour les besoins d'entreprise (encore appelées applications Line of Business – LOB), ont des caractéristiques particulières qui les distinguent des applications grand public. Nous aborderons dans cette session les impacts que cela peut avoir sur le développement, en terme d'architecture et d'intégration avec des backends.
Nous discuterons aussi de l'intégration entre les mondes Modern UI et Desktop sur Windows 8.1, et de la réutilisation de code issu de Windows Mobile, et bien sur des problématiques de déploiement des applications en dehors des stores Microsoft.

Michael Durand (Avanade) & Thomas Lebrun (Infinite Square)

Créer une application Windows (Phone) sans toucher une ligne de code avec Windows App Studio

Le Windows App Studio est un service en ligne gratuit permettant de créer des applications mobiles pour Windows Phone et Windows. Après une rapide introduction, nous nous lancerons ensemble dans la création d’une application. Cette session est principalement destinée aux débutants qui n’ont pas de compétence de développement mais qui souhaitent se lancer dans l’aventure de la création d’application mobile. En effet, grâce au Windows App Studio, nous n’aurons pas besoin de toucher à une seule ligne de code !

Nouveau format pour cette édition des TechDays : cette session sera délivrée sous forme de lab !

Anthony Virapin (Microsoft), Sherley Frydman (Microsoft)

Besoin de cibler également Android & iOS : la création d’applications multi plateformes.

Applications multi plateformes avec Cordova, HTML5 et Javascript

A travers Microsoft Open Technologies, Microsoft participe à de nombreux projets open source comme par exemple Apache Cordova. Nous vous présenterons comme tirer le meilleurs parti des outils Microsoft pour développer une application sur iOS, Android et Windows en utilisant HTML, Javascript et Cordova. Au menu : les outils en ligne de commandes, Visual Studio, un émulateur Android qui booste et du débug à distance sur un Mac !

Eric Mittelette (Microsoft) & Etienne Margraff (Microsoft)

Développement cross-plateforme sans compromis avec Xamarin

Après une rapide introduction à Xamarin, l'outil de création d'applications multi plateformes natives en C#, nous verrons comment (ré)organiser une application pour partager un maximum de code entre les plateformes. Nous exposerons les différentes possibilités et mettrons l'accent sur Xamarin.Forms, allant jusqu'à créer nos propres composants visuels. Cette session sera délivrée en anglais.

Alex Danvy (Microsoft) & Mike James (Xamarin)

Développez vos jeux multiplateformes grâce à Unity3D avec Visual Studio en C#

Dans cette session, vous découvrirez comment il est possible de créer un jeu-vidéo avec Unity3D. Vous apprendrez à utiliser l’éditeur et ses différents modules, le moteur physique, le scripting, les scènes, la caméra et plus encore ! Finalement, nous créerons des packages Android, iOS et Windows prêts à être déployés sur les différents Stores !

Nouveau format pour cette édition des TechDays : cette session sera délivrée sous forme de lab !

Jonathan Antoine (Infinite Square) & Maxime Frappat (Infinite Square)

Cortana, Capptain, Azure Mobile Services … des fonctionnalités, du back office et des retours d’expérience pour inspirer vos applications mobiles.

Fonctions vocales sous Windows Phone : intégrez votre application à Cortana !

Cortana a pris des cours de français ! Elle est désormais disponible en version alpha sous Windows Phone. Profitez de ce lancement pour mettre à jour vos applications et les intégrer simplement à Cortana. Au programme : Cortana, les fonctions vocales (Commandes, Reconnaissance, Synthèse) et le contextual awareness. En bref, donnez la parole à vos applications !

Caroline Constantin (Microsoft) & Jean-Sébastien Dupuy (Microsoft)

Bluetooth Low Energy dans les applications Windows

Le Bluetooth Low Energy est un des protocoles clé de l'Internet des objets. Montres, bracelets, ampoules et autres portes clés l'exploitent à merveille. Venez en comprendre ses principes, son fonctionnement et sa mise en oeuvre au sein d'une application Windows Universelle au travers d'un exemple très simple que vous pourrez reproduire chez vous à moindre frais. Nous développerons une station météo connectées avec l'application mobile qui l'accompagne.

Stéphane Sibué (GUYZMO)

Faites comme Netflix, voire mieux : diffuser de la VOD et du Live dans le monde entier avec Azure et les Frameworks Clients pour atteindre n'importe quels devices !

Venez voir nos experts et apprendre comment vous pouvez créer votre propre Netflix sécurisé dans Azure grâce à une combinaison subtile d'Azure Media Services, d'Azure Mobile Services, SQL Database, Azure Active Directory & Notification Hubs d'un point de vue cloud. Mais pas que, nous verrons également les Frameworks clients (HTML5 avec les extensions MSE & EME, Player Framework, JWPlayer et Cordova) permettant de jouer des flux vidéos sur les différentes plateformes clients (iOS, Android, Windows…).

Julien Corioland (Infinite Square), Frédéric Le Coquil (Microsoft) & Benjamin Moulès (Microsoft)

Lumia Imaging SDK & Win2D : Entre gestion d'images et création d'interfaces graphiques complexes

La manipulation d'image peut être une opération très couteuse en performances et qui ne pardonne pas si elle est mal employée. Les API Win2D ou le Lumia Imaging SDK, utilisables avec du C# ou du C++, permettent d'optimiser de façon drastique, les performances qui peuvent y être associés grâce à la puissance de l'accélération matérielle.
Nous vous proposons pendant cette session de découvrir Win2D et la dernière version du SDK Imaging de Nokia, de survoler les différences entre GPU & CPU et voir comment, il est possible de créer une application nécessitant du traitement d'images performant. Puis, Enfin, nous verrons comment créer des interfaces graphiques impossible à réaliser en XAML via Win2D

Christopher Maneu (Deezer) & David Poulin (Soat)

Personnaliser et piloter l'expérience client sur les applications mobile avec Capptain

Les dernières années ont vu fleurir la mise en place des collectes de données, qui deviennent de plus en plus fructueuses. Au coeur de ces évolutions qui mêlent marketing et technologie, Capptain est la solution qui compte dans l'écosystème du Big Data et son exploitation par le marketing. Venez apprendre comment faire parler la data et utiliser le mobile comme un nouveau canal d'engagement stratégique pour les entreprises.

Youssef Faury (Microsoft)

Back Office pour applications mobiles

Marre de l'intégration graphique ? Lassé d'enchainer les formulaires de saisie de données ? Le prochain qui vient vous parler du 17ème changement de couleur du bouton de validation va passer un sale quart d'heure ?
C'est le moment de changer de vie et de découvrir comment l'utilisation d'Azure Mobile Services permet aux développeurs back-end de faire le gros du travail en quelques minutes : stockage de données, synchronisation des data hors-ligne, authentification multiple (Facebook, Twitter, Azure Active Directory, etc.), gestion des push notif, etc.
Evidemment, ça fonctionne en multiplateforme, gère le cache et adapte sa consommation en fonction de la charge. La cerise sur le gâteau ? C'est en production depuis deux ans et continue d'intégrer de nouvelles fonctionnalités tous les trimestres. Alors sautez le pas et venez découvrir cette plateforme qui connectera votre prochaine application au cloud Azure.

Audrey Petit (Microsoft) & Nicolas Clerc (Microsoft)

Stratégie mobile de Meetic sur Windows

Les usages d'aujourd'hui sont en passe de devenir majoritairement mobiles. Leader européen des sites de rencontres, Meetic est un pionner du web français. Historiquement orientée vers le Desktop, l'entreprise se transforme en profondeur pour s'adapter aux nouveaux usages. Je vous propose une immersion au coeur de cette mutation. On parlera de l'histoire de Windows chez Meetic. Comment l'équipe s'est organisée autour de l'agilité, de quelle manière nous construisons nos applications avec des tests et une industrialisation complète des applications Phone et Universelle. Enfin nous parlerons des métriques autour de la qualité sur les technologies mobiles Microsoft.

Thomas Salandre (Meetic) & Jean-Loup Yu (Meetic)

Val d'Isère

Les experts SQLI ont réinventé l'expérience de la station Val d'Isère en réalisant une application mobile qui permet la récupération de  toute la data des vacanciers pour mieux servir et enrichir l'expérience Client.

Celle-ci offre en outre de multiples fonctionnalités telles que :

• des itinéraires sur mesure en fonction du profil du skieur
• l’« Augmented Skiing », un service inédit pour l’orientation et le guidage sur le domaine skiable
• la smart alarm, qui vous réveille en fonction de la météo la plus favorable
• la digitalisation des points de vente avec des bornes Beacon
• de la gamification
• des reporting permettant de connaître votre performance en temps réel et de la partager sur les réseaux sociaux
• un selfski : le selfie du ski

Thomas Gayet (SQLI)

Bonus Track

Et si vous arrivez à la fin de ce parcours, vous aurez probablement besoin de vous détendre les neurones. Parfait, j’ai les sessions qu’il vous faut !

Coding4Fun

La session Coding4Fun est une session à part. L'objectif est de se rassembler autour de notre passion : le code, mais dans un grand moment de n'importe quoi. Cette année plusieurs speakers (et non des moindres !) se relayeront pour vous faire partager leur passion avec des démos funs, puissantes et bigarées. Inscrivez-vous le plus rapidement possible afin que l'on puisse dimensionner la salle en fonction, car l'année dernière nous avons encore refusé du monde !!!

Mitsu Furuta (Sensorit), Pierre Lagarde (Microsoft), David Catuhe (Microsoft), David Rousset (Microsoft) & Etienne Margraff (Microsoft)

Geek is in da {new} House

Cette année nos geeks ont presque tous déménagé. Nouveaux logements --> Nouveaux projets et nouveaux défis pour "gadgetiser" la maison et le jardin toujours en intégrant la dimension WAF.
C'est dans une chaude ambiance et de la bonne humeur que nous vous accueillerons dans cette 4ème édition de Geek in da House avec comme chaque année de la geekerie de qualité française !

David Catuhe (Microsoft), Stanislas Quastana (Microsoft), Arnaud Lheureux (Microsoft), Sébastien Warin (Microsoft) & Laurent Ellerbach (Microsoft)

C’était promis depuis son lancement à l’évènement //build/ en avril dernier, Cortana a pris des cours de français et arrive sur notre vieux continent. Elle est disponible depuis le 5 décembre, en version Alpha, pour la France, l’Espagne, l’Italie et l’Allemagne. Cette mise à jour est principalement adressée aux développeurs pour 1/ participer à l’amélioration du service et nous proposer vos retours et 2/ en profiter pour intégrer vos applications avec Cortana. Pour découvrir la voix française  de Cortana et bénéficier de ses services, il suffit simplement d’être inscrit au programme Windows Phone Preview pour les développeurs que vous connaissez déjà certainement !

Version alpha ?

Pour développer Cortana, nous utilisons des techniques d’apprentissage automatique (machine learning) afin de construire des modèles de reconnaissance vocale et de compréhension de langage naturel. Pour les améliorer, nous avons besoin d’utilisateurs comme vous pour discuter avec Cortana ; qu’elle suive, en quelque sorte, des cours accélérés de français.

Cortana ne s’améliorera que si vous interagissez avec elle. En apprenant à vous connaitre au fil du temps, Cortana vous fera des suggestions de plus en plus pertinentes et précises et vous offrira une expérience personnalisée. Si vous souhaitez en découvrir davantage sur Cortana et ses services, rendez-vous sur Découvrez Cortana.

Votre avis compte, n’hésitez pas à nous transmettre vos commentaires : http://cortana.uservoice.com/.

Quel rapport avec les développeurs ?

Windows Phone propose des commandes vocales. Cette fonctionnalité n’est pas récente, elle a été introduite sous Windows Phone 8.0 et permettait le lancement de votre application par reconnaissance vocale. Même si quelques applications ont joué le jeu, le concept n’a pas forcément été des plus suivi par la communauté et la majorité des applications n’utilisait simplement pas (ou mal) cette fonctionnalité.

Pour quelles raisons ? Et bien il faut avouer que pour l’utilisateur, la fonctionnalité manquait un peu de visibilité : si un appui long sur le bouton Windows permettait bien de lancer la reconnaissance vocale, ce n’était clairement pas très intuitif. L’activation de nos commandes vocales était donc un peu difficile à dénicher.

Cortana change la donne, elle prend désormais directement les opérations en main.  Et elle ne se cache pas ! Elle est accessible  par une vignette dynamique ou directement par le bouton recherche du téléphone, elle devient donc la nouvelle interface pour accéder aux données de Bing. A noter au passage que Cortana n’est pas une assistante uniquement vocale, vous pouvez la questionner ou interagir avec elle en mode textuel si vous préférez plus d’intimité ^^.

Mais revenons aux applications. Cortana permet d’actionner simplement, et en langage naturel, les principales fonctionnalités du téléphone (passer un appel, prendre une note, créer une alarme, …). Et bien vous pouvez dès aujourd’hui étendre ces scénarios et lancer votre application par le biais de nos fameuses commandes vocales.

Dans le principe, les commandes vocales se mettent en place très rapidement en passant par les trois étapes suivantes:

	1. Création d’un fichier pour définir les commandes vocales
	2. Enregistrer les commandes vocales au démarrage de l’application
	3. Gérer l’activation des commandes vocales

Etape 1. Création d’un fichier pour définir les commandes vocales

Ajouter un nouvel élément de type ‘Définition des commandes vocales’ à votre projet.

Que vous développiez en Silverlight 8.1 ou en Windows Runtime 8.1 (Application Universelle), la structure du fichier est identique.

<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.1">
  <CommandSet xml:lang="en-us">
    <CommandPrefix>tickets</CommandPrefix>
    <Example>show tonight's events at Olympia</Example>

    <Command Name="showEventsAt">
      <Example>show tonight's events at Olympia</Example>
      <ListenFor> [Show] {eventsViews} at {eventsLocations} </ListenFor>
      <Feedback> Showing {eventsViews} at {eventsLocations} </Feedback>
      <Navigate Target="HomePage.xaml"/>
    </Command>

    <Command Name="showEventsFrom">
      <Example>show tonight's events from Shaka Ponk</Example>
      <ListenFor> [Show] {eventsViews} from {eventsArtists} </ListenFor>
      <Feedback> Showing {eventsViews} from {eventsArtists} </Feedback>
      <Navigate Target="HomePage.xaml"/>
    </Command>

    <PhraseList Label="eventsViews">
      <Item> tonight's events </Item>
      <Item> best sellers </Item>
    </PhraseList>

    <PhraseList Label="eventsLocations">
      <Item> Olympia </Item>
      <Item> Bercy </Item>
    </PhraseList>

    <PhraseTopic Label="eventsArtists" Scenario="Natural Language">
      <Subject>Music</Subject>
      <Subject>Artist</Subject>
    </PhraseTopic>
  </CommandSet>

  <!-- Other CommandSets for other languages -->
</VoiceCommands>

• CommandSet : Liste les commandes vocales pour une langue spécifique. Spécifiez l’attribut xml:lang=”fr-fr” pour supporter le français. Il est possible de supporter 15 langues différentes.
• CommandPrefix : Par défaut, vous pouvez lancer l’application directement par son nom. Toutefois, si le nom est trop compliqué ou trop long, vous pouvez lui attribuer un diminutif plus convivial à utiliser.
• Command : Définie chaque commande vocale individuelle que l’application supporte. Vous pouvez enrichir l’application avec un maximum de 100 commandes. Ces commandes sont elles mêmes définies par les éléments enfants suivants:
  • ListenFor : Expression qui va être reconnue par Cortana, et actionner l’interaction avec l’application. La syntaxe […] définie un terme optionnel, alors que la syntaxe {…} pointe sur un label de type PhraseList ou PhraseTopic (nouveauté en 8.1).
  • Feedback : Définie comment Cortana doit répondre à l’utilisateur pendant le lancement de l’application.
  • Navigate :  Précise la page que l’on souhaite afficher au lancement de l’application quand cette commande est invoquée. Ce point est obligatoire en Silverlight, optionnel en Universal.
• PhraseList : Une liste de termes pour aider à la compréhension. Un dictionnaire de 2000 éléments peut être renseigné. Comme c’est généralement fastidieux, je vous rassure, ces termes peuvent être dynamiquement ajoutés par code.
• PhraseTopic : C’est la nouveautés de Windows Phone 8.1. La commande vocale peut s’appuyer sur un label plus ouvert qu’un dictionnaire. Vous demander à Cortana/Bing de reconnaître simplement le mot. Comme la reconnaissance d’un terme est souvent lié à son contexte, je vous invite à préciser l’attribut Scenario et les enfants Subject pour faciliter le travail de reconnaissance et obtenir un résultat pertinent.

Pour résumer, mon exemple propose donc deux commandes, showEventAt et showEventFrom, dont le but est de lister les évènement musicaux par lieux et par artistes. Mes lieux sont définis par un dictionnaire fermé, alors que les artistes sont interprétés directement par le couple Cortana/Bing, dans un mode plus ouvert.

Etape 2. Enregistrer les commandes vocales au démarrage de l’application

L’application doit s’exécuter au moins une fois pour enregistrer les commandes et le rendre disponibles auprès de Cortana. Les quelques lignes suivantes suffisent à enregistrer le fichier vcd.xml et les commandes associées.

Projet Windows Phone 8.1 Xaml/C# (Universal):

private async void RegisterVoiceCommands()
{
    Uri uriVoiceCommands = new Uri("ms-appx:///vcd.xml", UriKind.Absolute);
    StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(uriVoiceCommands);
    await VoiceCommandManager.InstallCommandSetsFromStorageFileAsync(file);
}

private async void RegisterVoiceCommands()
{
    Uri uriVoiceCommands = new Uri("ms-appx:///vcd.xml", UriKind.Absolute));
    await VoiceCommandService.InstallCommandSetsFromFileAsync(uriVoiceCommands);
}

Etape 3. Gérer l’activation des commandes vocales

Une fois la commande reconnue et interprétée par le système. Cortana se charge de lancer l’application et en profite pour transmettre les informations vocales dictées par l’utilisateur. C’est sur ce point que l’architecture Silverlight vs Universal est la plus différente.

Projet Windows Phone Silverlight 8.1:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
  base.OnNavigatedTo(e);

  // Is this a new activation or a resurrection from tombstone?
  if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New)
  {

    // Was the app launched using a voice command?
    if (NavigationContext.QueryString.ContainsKey("voiceCommandName"))
    {

      // If so, get the name of the voice command.
      string voiceCommandName 
        = NavigationContext.QueryString["voiceCommandName"];

      // Define app actions for each voice command name.
      switch (voiceCommandName)
      {
        case "showWidgets":
          string viewWidget = NavigationContext.QueryString["widgetViews"];
                   
          // Add code to display specified widgets.
          break;
 
        // Add cases for other voice commands. 
        default:

          // There is no match for the voice command name.
          break;
      }
    }
  }
}

Projet Windows Phone 8.1 Xaml/C# (Universal):

Contrairement à Silverlight, les informations peuvent être interceptés directement dans la classe App via l’évènement OnActivated avant d’être transmise à la page (d’où le caractère optionnel de l’élément Navigate dans le fichier de commandes vocales). C’est donc à vous de rediriger l’utilisateur vers la page de votre choix !

IActivatedEventArgs permet de vérifier 1/ si l’activation de notre application provient bien de Cortana (args.Kind == ActivationKind.VoiceCommand) et 2/ d’extraire toutes les infos vocales dans un bel objet tout propre (plus classe qu’une Query String quand même) : SpeechRecognitionResult.

Code App.xaml.cs

protected override void OnActivated(IActivatedEventArgs args)
{
    base.OnActivated(args);

    Frame rootFrame = Window.Current.Content as Frame;

    // Was the app activated by a voice command?
    if (args.Kind == ActivationKind.VoiceCommand)
    {
        var commandArgs = args as VoiceCommandActivatedEventArgs;
        SpeechRecognitionResult speechRecognitionResult = commandArgs.Result;

        // If so, get the name of the voice command, the actual text spoken, and the value of Command/Navigate@Target.
        string voiceCommandName = speechRecognitionResult.RulePath[0];
        string textSpoken = speechRecognitionResult.Text;
        string navigationTarget = speechRecognitionResult.SemanticInterpretation.Properties["NavigationTarget"][0];

        switch (voiceCommandName)
        {
            case "showEventsAt":
                rootFrame.Navigate(typeof(HomePage), commandArgs.Result);
                break;

            case "showEventsFrom":
                rootFrame.Navigate(typeof(HomePage), commandArgs.Result);
                break;

            // Cases for other voice commands.
            default:
                // There is no match for the voice command name.
                break;
        }
    }
}

/// <summary>
/// Invoked when this page is about to be displayed in a Frame.
/// </summary>
/// <param name="e">Event data that describes how this page was reached.
/// This parameter is typically used to configure the page.</param>
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ApplicationView.GetForCurrentView().SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
    RegisterVoiceCommands();

    // Get recognition result from parameter passed in frame.Navigate call
    SpeechRecognitionResult speechRecognitionResult = e.Parameter as SpeechRecognitionResult;

    if (speechRecognitionResult != null)
    {
        string commandMode = speechRecognitionResult.SemanticInterpretation.Properties["commandMode"][0];

        if (commandMode == "voice") // Did the user speak or type the command?
        {
            //SpeakText(audioPlayer, String.Format("MSDN app heard you say {0}", vcResult.Text));
            HandleCommand(speechRecognitionResult);
        }
        else if (commandMode == "text")
        {
            //messageTextBox.Text = string.Format("Working on your request \"{0}\"", vcResult.Text);
            HandleCommand(speechRecognitionResult);
        }
    }

    SongkickService service = new SongkickService();
    ContentResponse response = await service.EventSearch(48.856930, 2.341200);

    lstLocations.ItemsSource = response.resultsPage.results.events;
}

private void HandleCommand(SpeechRecognitionResult speechRecognitionResult)
{
    string voiceCommandName = speechRecognitionResult.RulePath[0];
    string textSpoken = speechRecognitionResult.Text;
    string navigationTarget = speechRecognitionResult.SemanticInterpretation.Properties["NavigationTarget"][0];

    string eventsViews = speechRecognitionResult.SemanticInterpretation.Properties["eventsViews"][0];
    
    switch (voiceCommandName)
    {
        case "showEventsAt":
            string eventsAt = speechRecognitionResult.SemanticInterpretation.Properties["eventsLocations"][0];
            break;

        case "showEventsFrom":
            string eventsFrom = speechRecognitionResult.SemanticInterpretation.Properties["eventsArtists"][0];
            break;

        // Cases for other voice commands.
        default:
            // There is no match for the voice command name.
            break;
    }
}

Ressources

• Channel 9: Integrating Cortana with your App (video: 99 seconds)
• Channel 9: Integrating your App into the Speech and Natural Language experience in WP 8.1 (BUILD session)
• MSDN : Commandes vocales (XAML) - démarrage rapide
• MSDN: Voice commands for Windows Phone 8 (Silverlight)
• Exemple: MSDN Voice Search for Windows Phone 8.1
• Bing : Integrating Store Apps with Cortana in Windows Phone 8.1

Xbox Music, c’est avant tout une plateforme musicale qui permet d’écouter gratuitement en streaming votre musique (en mode web et sur Windows 8) ou d’emporter votre musique avec vous sur l’ensemble des plateformes en s’abonnant au Xbox Music Pass (vous pouvez télécharger les musiques localement sur votre périphérique). Des applications dédiées sont disponibles sur Windows 8, Windows Phone, Xbox et également sur l’App Store et Google Play.

La bonne nouvelle, c’est que les équipes de développement viennent d’ouvrir le catalogue aux développeurs sous forme de web services. Vous pouvez donc donner une nouvelle dimension à votre application ou votre site web en consommant les millions de titres, d’albums et d’artistes disponibles sur Xbox Music. En résumé, une base de données musicale facile d’accès ! Les APIs vont s’étoffer progressivement dans les prochaines semaines, je vous propose toutefois de découvrir les éléments proposés dans cette première mouture:

• Obtenez tous les détails d'un album, d’un artiste ou d’une chanson si vous connaissez son identifiant (ID).
• Rechercher par mot clés n'importe quel album, artiste, ou titre, par exemple, "Madonna hang out".
• Obtenez les meilleurs titres (top tracks) et les albums les plus récents d’un artiste.
• Obtenez un deep link qui redirige l’utilisateur vers les applications Xbox Music, que ce soit sur ​​le web, sur Windows Phone, Windows 8.x ou d'une autre plateforme.
• Récupérez les couvertures d'albums et les images de l’artiste en haute définition.

En complément, si votre application redirige vers l’application Xbox Music et permet de générer une vente (Xbox Music Pass ou achat d’un titre .mp3), vous pouvez également gagner des revenus en profitant d’un programme d’affiliation.

Comment utiliser les API ?

Avant de s’attaquer au code, il est nécessaire de s’inscrire sur Windows Azure Marketplace pour récupérer un identifiant (ID client) et une clé (Secret du client) qui permettra à votre application (ou site web) de s’authentifier auprès du service. A noter que ce service est totalement gratuit et le nombre de transactions est illimité.

La procédure complète pour s’enregistrer est disponible depuis l’article Obtaining a Developer Access Token mais voici les différentes étapes:

1. Connectez-vous sur https://datamarket.azure.com avec votre compte Microsoft.
2. Ajoutez les informations (nom et prénom) sur votre nouveau compte Windows Azure Marketplace, puis acceptez les conditions d’utilisation.
3. Enregistrez ensuite votre nouvelle application en passant par l’interface (depuis Mon compte, dans la section Développeurs) ou en allant directement sur https://datamarket.azure.com/developer/applications.

   
   
   
   Le formulaire génère automatiquement une clé, conservez cette information ainsi que l’identifiant client que vous aurez saisi.

4. Et, dernier point des plus importants, abonnez-vous à Xbox Music Plaform API pour accéder au catalogue de données.

Et le code dans tout ca?

Je vous propose une Portable Class Library pour intégrer facilement Xbox Music API dans vos applications Windows Phone et Windows Store. Et en cadeau l’application Windows Phone 8 qui utilise la librairie. Ok, l’idéal serait un petit package nugget, je vais m’y atteler prochainement :) Vous pouvez télécharger la solution depuis le lien suivant.

Si vous souhaitez utiliser directement l’exemple, ajoutez simplement votre ClientId/ClientSecret dans la classe App.

1. Récupérer le token d’identification.

GetAccessToken utilise simplement votre ClientId et de votre ClientSecret pour générer un token d’authentification , pas grand-chose de bien méchant. Attention, ce token a une validité de 10 minutes, vous devez donc rafraichir régulièrement celui-ci ^^

/// <summary>

/// Get a developer authentication Access Token obtained from Azure Data Market.

/// Used to identify the third-party application using the Xbox Music RESTful API.

/// </summary>

/// <param name="clientId"></param>

/// <param name="clientSecret"></param>

/// <returns></returns>

public async Task<string> GetAccessToken(string clientId, string clientSecret)

{

    string token = string.Empty;

    const string service = "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";

    const string scope = "http://music.xboxlive.com";

    const string grantType = "client_credentials";

    using (HttpClient proxy = new HttpClient())

    {

        var postData = new Dictionary<string, string>();

        postData["client_id"] = clientId;

        postData["client_secret"] = clientSecret;

        postData["scope"] = scope;

        postData["grant_type"] = grantType;

        HttpContent content = new FormUrlEncodedContent(postData);

        // Authentication Request

        HttpResponseMessage response = await proxy.PostAsync(new Uri(service), content);

        string responseContent = await response.Content.ReadAsStringAsync();

        if (response.IsSuccessStatusCode)

        {

            // Parsing content to extract the token

            token = ExtractTokenFromJson(responseContent);

        }

    }

    return token;

}

private string ExtractTokenFromJson(string json)

{

    string token = string.Empty;

    Match match = Regex.Match(json, ".*\"access_token\":\"(?<token>.*?)\".*", RegexOptions.IgnoreCase);

    if (match.Success)

    {

        token = match.Groups["token"].Value;

    }

    return token;

}

Utilisation de cette méthode:

MusicHelper helper = new MusicHelper();
string token = await helper.GetAccessToken(App.ClientId, App.ClientSecret);

2. Récupération du catalogue (recherche par mots clés).

SearchMediaCatalog permet de rechercher par mots clés dans le catalogue. Par défaut, la recherche est effectuée dans tous les éléments. Un filtre en argument permet donc de préciser si vous souhaitez filtrer sur une ou des sous-sections comme Albums, Artists, Tracks.

/// <summary>

/// Search for a potentially large number of items from a media catalog.

/// </summary>

/// <param name="token">Required. A valid developer authentication Access Token obtained from Azure Data Market, used to identify the third-party application using the Xbox Music RESTful API.</param>

/// <param name="query">Required. The search query.</param>

/// <param name="maxitems">Optional. Positive integer from 1 to 25, inclusive. The maximum number of results that should be returned in the response. If this parameter is not set, the response will be limited to a maximum of 25 results. There is no guarantee that all search results will be returned in a single response; the response may contain a truncated list of responses and a continuation token.</param>

/// <param name="filters">A subcategory of item types, in case the client is interested in only one or more specific types of items. If this parameter is not provided, the search will be performed in all categories.</param>

/// <param name="culture">Optional. The standard two-letter code that identifies the country/region of the user. If not specified, the value defaults to the geolocated country/region of the client's IP address. Responses will be filtered to provide only those that match the user's country/region.</param>

/// <returns></returns>

public async Task<Music> SearchMediaCatalog(string token, string query, uint maxitems = 25, Filters[] filters = null, Culture culture = null)

{

    const string scope = "https://music.xboxlive.com/1/content/music/search";

    Music search = null;

    // Formatting filters argument

    StringBuilder filtersbuilder = new StringBuilder();

    if (filters != null)

    {

        for (int cpt = 0; cpt < filters.Length; cpt++)

        {

            if (cpt != 0) filtersbuilder.Append("+"); filtersbuilder.Append(filters[cpt].ToString().ToLower());

        }

    }

    else

    {

        filtersbuilder.Append("music");

    }

    using (HttpClient proxy = new HttpClient())

    {

        StringBuilder service = new StringBuilder();

        service.Append(scope);

        service.Append("?q=");

        service.Append(WebUtility.UrlEncode(query));

        service.Append("&maxitems=");

        service.Append(maxitems.ToString());

        service.Append("&filter=");

        service.Append(filtersbuilder.ToString());

        service.Append("&accessToken=Bearer+");

        service.Append(WebUtility.UrlEncode(token));

        if (culture != null)

        {

            service.Append(string.Format("&language={0}", culture.Language));

            service.Append(string.Format("&country={0}", culture.Country));

        }

        // Authentication Request

        HttpResponseMessage response = await proxy.GetAsync(new Uri(service.ToString()));

        string responseContent = await response.Content.ReadAsStringAsync();

        if (response.IsSuccessStatusCode)

        {

            // Parsing Content to populate Music object

            search = Music.PopulateObject(responseContent);

        }

    }

    return search;

}

Utilisation de cette méthode:

MusicHelper helper = new MusicHelper();
string token = await helper.GetAccessToken(App.ClientId, App.ClientSecret);

Filters[] filters = new Filters[] { Filters.Music };
string keywords = "Daft Punk";
Music music = await helper.SearchMediaCatalog(token, keywords, 25, filters, new Culture("fr", "FR"));

public class Music
{
    // A paginated list of Artists that matched the request criteria.
    public Artists Artists { get; set; }
    // A paginated list of Albums that matched the request criteria.
    public Albums Albums { get; set; }
    // A paginated list of Tracks that matched the request criteria.
    public Tracks Tracks { get; set; }
}

/// <summary>

/// Access a small number of items from a media catalog.

/// </summary>

/// <param name="token">Required. A valid developer authentication Access Token obtained from Azure Data Market, used to identify the third-party application using the Xbox Music RESTful API.</param>

/// <param name="namespaceids">Required. The ID or IDs to be looked up. Each ID is prefixed by a namespace and ".". You can specify from 1 to 10 IDs in your request.</param>

/// <param name="extras">Optional. List of extra fields that can be optionally requested (at the cost of performance).</param>

/// <param name="culture">Optional. The standard two-letter code that identifies the country/region of the user. If not specified, the value defaults to the geolocated country/region of the client's IP address. Responses will be filtered to provide only those that match the user's country/region.</param>

/// <returns></returns>

public async Task<Music> LookupMediaCatalog(string token, string[] namespaceids, Extras[] extras = null, Culture culture = null)

{

    const string scope = "https://music.xboxlive.com/1/content/{0}/lookup";

    Music lookup = null;

    // Formatting namespace ids argument

    StringBuilder idsbuilder = new StringBuilder();

    for(int cpt = 0; cpt < namespaceids.Length; cpt++)

    {

        if (cpt != 0) idsbuilder.Append("+"); idsbuilder.Append(namespaceids[0]);

    }

    // Formatting extras argument

    StringBuilder extrasbuilder = new StringBuilder();

    if (extras != null)

    {

        for (int cpt = 0; cpt < extras.Length; cpt++)

        {

            if (cpt != 0) extrasbuilder.Append("+"); extrasbuilder.Append(extras[cpt].ToString());

        }

    }

    // Formatting lookup request Uri

    StringBuilder service = new StringBuilder();

    service.Append(string.Format(scope, idsbuilder.ToString()));

    service.Append("?accessToken=Bearer+");

    service.Append(WebUtility.UrlEncode(token));

    if (extras != null) 

    {

        service.Append(string.Format("&extras={0}", extrasbuilder.ToString()));

    }

    if (culture != null)

    {

        service.Append(string.Format("&language={0}", culture.Language));

        service.Append(string.Format("&country={0}", culture.Country));

    }

    using (HttpClient proxy = new HttpClient())

    {

        // Lookup Request - Look up a small number of items from a media catalog.

        HttpResponseMessage response = await proxy.GetAsync(new Uri(service.ToString()));

        string responseContent = await response.Content.ReadAsStringAsync();

        if (response.IsSuccessStatusCode)

        {

            // Parsing Content to populate Music object

            lookup = Music.PopulateObject(responseContent);

        }

    }

    return lookup;

}

MusicHelper helper = new MusicHelper();
string token = await helper.GetAccessToken(App.ClientId, App.ClientSecret);

string[] namespaceids = new string[] { "music.C61C0000-0200-11DB-89CA-0019B92A3933" };
Extras[] extras = new Extras[] { Extras.Tracks };

Music music = await helper.LookupMediaCatalog(token, namespaceids, extras, new Culture("fr", "FR"));

4. Obtenir les éléments additionnels.

LoadNext permet de charger des éléments additionnels à l’aide du ContinuationToken.

/// <summary>

/// Request the continuation of an incomplete list of content.

/// </summary>

/// <param name="token">Required. A valid developer authentication Access Token obtained from Azure Data Market, used to identify the third-party application using the Xbox Music RESTful API.</param>

/// <param name="continuationToken">Required. A Continuation Token provided in an earlier service response and optionally passed back to the service to request the continuation of an incomplete list of content.</param>

/// <param name="namespaceids">Optional. The ID or IDs to be looked up. Each ID is prefixed by a namespace and ".". You can specify from 1 to 10 IDs in your request.</param>

/// <returns></returns>

public async Task<Music> LoadNext(string token, string continuationToken, string[] namespaceids = null)

{

    const string scopesearch = "https://music.xboxlive.com/1/content/music/search";

    const string scopelookup = "https://music.xboxlive.com/1/content/{0}/lookup";

    string scope = string.Empty;

    string jsonContent = string.Empty;

    Music next = null;

    // Formatting namespace ids

    if (namespaceids != null)

    {

        StringBuilder ids = new StringBuilder();

        for (int cpt = 0; cpt < namespaceids.Length; cpt++)

        {

            if (cpt != 0) ids.Append("+"); ids.Append(namespaceids[0]);

        }

        scope = string.Format(scopelookup, ids.ToString());

    }

    else

    {

        scope = scopesearch;

    }

    using (HttpClient proxy = new HttpClient())

    {

        StringBuilder service = new StringBuilder();

        service.Append(scope);

        service.Append("?continuationToken=");

        service.Append(continuationToken);

        service.Append("&accessToken=Bearer+");

        service.Append(WebUtility.UrlEncode(token));

        // Authentication Request

        HttpResponseMessage response = await proxy.GetAsync(new Uri(service.ToString()));

        string responseContent = await response.Content.ReadAsStringAsync();

        if (response.IsSuccessStatusCode)

        {

            // Parsing Content to populate Music object

            next = Music.PopulateObject(responseContent);

        }

    }

    return next;

}

Utilisation de cette méthode (lors de l’évènement ItemRealized sur le LongListSelector):

private async void AlbumsList_ItemRealized(object sender, ItemRealizationEventArgs e)
{
    int offset = 25;
    if (AlbumsList.ItemsSource != null && AlbumsList.ItemsSource.Count >= offset)
    {
        if (e.ItemKind == LongListSelectorItemKind.Item)
        {
            if ((e.Container.Content as Album).Equals(AlbumsList.ItemsSource[AlbumsList.ItemsSource.Count 
                - offset]))
            {
                // Refresh token (in case of expiration)
                string token = await helper.GetAccessToken(App.ClientId, App.ClientSecret);
                string continuationToken = music.Albums.ContinuationToken;

                Music result = await helper.LoadNext(token, continuationToken);
                foreach (Album item in result.Albums.Items)
                {
                    music.Albums.Items.Add(item);
                }
            }
        }
    }
}

// Launches playback of the media content.
public string DeepLinkPlay
{
    get { return this.Link + "?action=play"; }
}

// Opens the "add to collection" screen on the Xbox Music service.
public string DeepLinkAddToCollection
{
    get { return this.Link + "?action=addtocollection"; }
}

// Opens the appropriate purchase flow on the Xbox Music service.
public string DeepLinkBuy
{
    get { return this.Link + "?action=buy"; }
}

private void TracksList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // If selected item is null (no selection) do nothing
    if (TracksList.SelectedItem == null)
        return;

    Track track = TracksList.SelectedItem as Track;
    // Navigate to the Xbox Music application
    WebBrowserTask webBrowserTask = new WebBrowserTask();
    webBrowserTask.Uri = new Uri(track.DeepLinkPlay, UriKind.Absolute);
    webBrowserTask.Show();

    // Reset selected item to null (no selection)
    TracksList.SelectedItem = null;
}

public enum ImageMode
{
    Scale = 1,
    LetterBox = 2,
    Crop = 3
}

public class ImageSettings
{
    public int Width { get; set; }
    public int Height { get; set; }
    public ImageMode Mode { get; set; }
    public string Background { get; set; }

    public ImageSettings(int width, int height, ImageMode mode, string background)
    {
        this.Width = width;
        this.Height = height;
        this.Mode = mode;
        this.Background = background;
    }
}

/// <summary>

/// Every piece of content returned by catalog search and lookup APIs contains a field ImageUrl, which is a direct link to the content's default image, hosted on http://musicimage.xboxlive.com/. This image link generates an image with specific default properties, but it is possible to modify the link in order to change some of the image properties, such as its size. Image resolution is context-aware, so the actual image might change depending on the size parameters used. The details of the image API are shown here.

/// You should use the image URL given in the response. The URL should not be modified or altered other than with the parameters described below. Any other use of the images will be considered as a breach of the terms of use of the API (see TBD).

/// </summary>

/// <param name="width">Image width. Cannot be set without height parameter.</param>

/// <param name="height">Image height. Cannot be set without width parameter.</param>

/// <param name="mode">Image resize mode: 

/// - scale to resize to maximum size which fits dimension without changing the aspect ratio.

/// - letterbox to pad to dimension after resize if aspect ratio didn't match. 

/// - crop to get the required width and height but image is cropped. Defaults to crop if w and h are provided.</param>

/// <param name="background">HTML-compliant color for letterbox resize mode background. Cannot be specified if mode is not set to letterbox.</param>

/// <returns></returns>

public string ImageUrlWithOptions(ImageSettings settings)

{

    if (settings.Mode == ImageMode.LetterBox)

    {

        return this.ImageUrl + string.Format("&w={0}&h={1}&mode={2}&background={3}", settings.Width.ToString(), settings.Height.ToString(), settings.Mode.ToString().ToLower(), settings.Background);

    }

    else

    {

        return this.ImageUrl + string.Format("&w={0}&h={1}&mode={2}", settings.Width.ToString(), settings.Height.ToString(), settings.Mode.ToString().ToLower(), settings.Background);

    }

}

// Settings in order to change image format

public ImageSettings ImageSettings { get; set; }

public string ImageUrlEx

{

    get

    {

        if (this.ImageSettings != null)

        {

            return this.ImageUrlWithOptions(ImageSettings);

        }

        else

        {

            return this.ImageUrlWithOptions(new ImageSettings(160, 160, ImageMode.Scale, "#000000"));

        }

    }

}

On va consacrer ce post aux matrices. Si vous avez allégrement séché cette discipline mathématique en pensant que ça ne servait probablement à rien, pas de bol, dans le monde de la 3D c’est essentiel! :)

La seule explication simple (en tout cas à ma portée) c’est que chaque matrice se définie comme un tableau de nombres (4x4 dans notre cas) qui va nous permettre de nous simplifier largement la vie pour appliquer des transformations à notre cube (rotation, translation et mise à l’échelle). Comme je n’ai pas prétention à vous donner un cours d’algèbre dont mes notions sont somme toute assez limité, je vous invite à consulter les ressources en fin d’article (volé sur un post précédent de mon collègue David Rousset ; que je vous encourage à étudier au passage ^^):

Avant de déprimer, la bonne nouvelle c’est que Direct3D gère en grande partie la complexité inhérente aux matrices, le point important à comprendre c’est que les coordonnées de notre objet (les sommets dans un premier temps) vont transiter dans plusieurs référentiels.

1. En premier lieu, on va pouvoir appliquer des transformations sur l’objet (model) pour le placer de manière appropriée dans la scène.
2. Ensuite, on va regarder cet objet sous un certains angle de vue (view). Imaginez une caméra qui se place au-dessus de notre objet. On va appliquer les transformations adéquates pour voir l’objet dans ce nouveau référentiel.
3. Et finalement la projection. On a beau être dans un monde en 3D, aux dernières nouvelles notre écran est une surface plane, l’emplacement de chaque pixel est représenté par 2 valeurs (x,y). On va donc basculer d’un référentiel 3D à un référentiel 2D.

Les transformations appliquées dans les référentiels précédents sont définies par des matrices différentes : model, view et projection. Nos données de départ (celles stockées dans le Vertex Buffer) vont donc être transformées par ces matrices pour obtenir les coordonnés finales de notre pixel à l’écran.

C’est en grande partie le rôle du Vertex Shader (encore un nouveau terme technique ^^) d’effectuer cette opération. Comment procède-t-il ? Il va simplement multiplier les coordonnées de départ par chacune des matrices model, view et projection, le tour est joué !

Constant Buffer

Avant de parler du Vertex Shader, un petit laïus additionnel sur le Constant Buffer, tout un programme pour vous faire rêver ami lecteur !

La carte graphique est notre amie, elle va vite (voir très vite) car elle a tout sous la main pour travailler. Son espace mémoire est dédiée et on lui a déjà fournie des informations à digérer avec nos buffers précédents (le Vertex Buffer et l’Index Buffer).

Il en va de même pour les matrices, on va les stocker dans un Constant Buffer. C’est un espace mémoire que le Vertex Shader va pouvoir consommer pour effectuer les calculs de projection. Avec cette dernière pièce à l’édifice, notre Vertex Shader est enfin prêt pour travailler sur nos données !

Ok, maintenant qu’on a introduit les concepts, un peu de code.

1. Décalaration du constant buffer

a. Dans SceneRenderer.cpp, nous allons commencer par déclarer la structure de notre Constant Buffer. Cette structure regroupe simplement nos 3 matrices 4x4 : model, view et projection.

struct ModelViewProjectionConstantBuffer
{
    DirectX::XMFLOAT4X4 model;
    DirectX::XMFLOAT4X4 view;
    DirectX::XMFLOAT4X4 projection;
};

Microsoft::WRL::ComPtr<ID3D11Buffer> m_constantBuffer;
ModelViewProjectionConstantBuffer m_constantBufferData;

• m_constantBuffer : c’est un pointeur sur notre buffer de données (au même titre que m_indexBuffer et m_vertexBuffer), il s’agit d’un espaces mémoire directement accessibles par la carte graphique (et du coup accessible par notre Vertex Shader)
• m_constantBufferData : les matrices vont être préalablement stockées dans cette variable (comme pour cubeVertices et cubeIndices). En bref, on prépare nos trois matrices dans cette variable et on envoie le résultat à m_constantBuffer.

2. Initialisation du constant buffer

L’initialisation s’effectue dans SceneRenderer::CreateDeviceResources, on procède d‘une manière identique à l’Index/Vertex Buffer avec un appel à ID3D11Device::CreateBuffer. L’unique différence c’est que les données en entrée sont vides dans l’immédiat (mais on va résoudre ce problème dans un instant).

CD3D11_BUFFER_DESC constantBufferDesc(sizeof(ModelViewProjectionConstantBuffer), D3D11_BIND_CONSTANT_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &constantBufferDesc,
    nullptr,
    &m_constantBuffer
    )
    );

3. Initialisation des matrices model, view et projection

a. matrice model

On commence par s’attaquer à la matrice model. Dans cet exemple, je désire faire tourner notre cube : nous allons donc appliquer une matrice de rotation (sur l’axe des Y), et mettre à jour l’angle de rotation à chaque nouvelle frame.

C’est le but de la méthode SceneRenderer:Update, tout le travail est effectuée par la méthode XMatrixRotationY : elle prend simplement un angle comme argument d’entrée (en radian). Ce type de méthode existe pour l’ensemble des transformations, du coup le calcul matriciel devient une boite noire que vous pouvez utiliser les yeux fermés (ou presque).

void SceneRenderer::Update(float timeTotal, float timeDelta)
{
    (void) timeDelta; // Unused parameter.
    XMStoreFloat4x4(&m_constantBufferData.model, XMMatrixTranspose(XMMatrixRotationY(timeTotal * XM_PIDIV4)));
}

b. matrice view

La matrice view positionne la scène dans un nouveau référentiel, celui de notre caméra. Pour définir une caméra, nous avons toutefois besoin de 3 vecteurs:

• eye définie la position de la camera
• at nous indique la direction vers l’objet étudié
• up positionne le haut de la caméra

XMVECTOR eye = XMVectorSet(0.0f, 0.7f, 1.5f, 0.0f);
XMVECTOR at = XMVectorSet(0.0f, -0.1f, 0.0f, 0.0f);
XMVECTOR up = XMVectorSet(0.0f, 1.0f, 0.0f, 0.0f);

XMStoreFloat4x4(&m_constantBufferData.view, XMMatrixTranspose(XMMatrixLookAtRH(eye, at, up)));

c. matrice projection

• FovAngleY défine l’angle du champ de vision (field-of-view) sur l’axe des Y (de haut en bas). Cet angle est de 70 degrés dans notre cas. Et pour faire simple, cette valeur doit être préalablement convertie en radian :)
• AspectRatio définie le rapport entre la largeur et la hauteur de l’écran (on divise simplement x par y)
• NearZ indique le plan de clipping proche, tous les éléments devant ce plan sont ignorés.
• FarZ indique le plan de clipping lointain, tous les éléments derrière ce plan sont ignorés.

Comme un dessin est probablement plus parlant, ca ressemble à ça :

Et le tour est joué, on a notre troisième matrice !

float aspectRatio = m_windowBounds.Width / m_windowBounds.Height;
float fovAngleY = 70.0f * XM_PI / 180.0f;  // convert in radian

if (aspectRatio < 1.0f)
{
    fovAngleY /= aspectRatio;
}

XMStoreFloat4x4(
    &m_constantBufferData.projection,
    XMMatrixTranspose(
        XMMatrixPerspectiveFovRH(
            fovAngleY,        // field-of-view
            aspectRatio,      // aspect ratio
            0.01f,            // near clipping plane
            100.0f            // far clipping plane
            )
        )
    );

m_d3dContext->UpdateSubresource(
    m_constantBuffer.Get(),
    0,
    NULL,
    &m_constantBufferData,
    0,
    0
    );

• Transforms (Direct3D 9)
• World, View and Projection Matrix Unveiled
• Cameras on OpenGL ES 2.x – The ModelViewProjection Matrix
• Tutorial 3 : Matrices
• A brief introduction to 3D
• OpenGL Transformation

Télécharger le Code

I will dedicate this post to matrices. If you missed this mathematical discipline thinking it was probably useless: bad luck, in the world of 3D rendering this topic is essential! :)

A simple explanation (basically) is that each matrix is ​​defined as an array of numbers (4x4 in our case) which will simplify our life for applying transformations to the cube mesh (rotation, translation and scaling). As I do not claim to give you an algebra class (that my notions are actually quite limited), I suggest you to visit the resources section at the end of this article (stolen on a previous post from my colleague David Rousset ^^):

Before depressing, the good news is that Direct3D manages much of the inherent complexity of the matrices, the important point to understand is that the coordinates of our object (vertices in first) will be transformed in the following way.

1. In the first place, we will apply transformations on the object (model) to position it appropriately in the scene.
2. Then, we'll look at this object from a certain point of view. Imagine a camera that fits over our cube. We will apply the appropriate transformations to see the object in the new coordinates system.
3. And finally the projection. It is nice to be in a 3D world, but our screen is a flat surface where each pixel is represented by 2 values (x and y). Projection will help us to switch from the 3D world to the 2D surface.

These transformations are defined by different matrices: model, view and projection. Our initial data (stored in the Vertex Buffer) will be transformed by these matrices to obtain the final coordinated of our pixel on the screen.

This is largely the role of the Vertex Shader (yet another technical term ^^) to perform this operation. How does it do? It will simply multiply the starting coordinates with each matrix model, view and projection, job completed!

Constant Buffer

Before talking about the Vertex Shader, a small additional speech about the Constant Buffer, an awesome program for you dear reader. :)

The graphics card is our friend, it works quickly because this hardware has everything available to work. Its memory is dedicated and we already allocated some information on this area with our previous buffers (Vertex Buffer and Index Buffer).

The same goes for the matrices, we will store them in a Constant Buffer. It is a memory space that Vertex Shader will be able to consume to perform the projection calculations. With this last piece, our Vertex Shader is finally ready to work on our data!

Ok, now that we have introduced the concepts, some code.

1. Constant buffer declaration

a. In SceneRenderer.cpp, we will start by declaring the structure of our Constant Buffer. This structure simply consists of our three 4x4 matrices: model, view and projection.

struct ModelViewProjectionConstantBuffer
{
    DirectX::XMFLOAT4X4 model;
    DirectX::XMFLOAT4X4 view;
    DirectX::XMFLOAT4X4 projection;
};

Microsoft::WRL::ComPtr<ID3D11Buffer> m_constantBuffer;
ModelViewProjectionConstantBuffer m_constantBufferData;

• m_constantBuffer: this is a pointer to our buffer data (as well as m_indexBuffer and m_vertexBuffer), directly accessible by the graphics card (and hence accessible by our Vertex Shader).
• m_constantBufferData: our matrices will be first stored in this variable (as cubeVertices and cubeIndices). In short, our three transformation matrices are initialized in this variable and we send the result to m_constantBuffer.

2. Constant buffer initialization

Initialization is performed in SceneRenderer::CreateDeviceResources, we proceed in a similar way to Index/Vertex Buffer with a call to ID3D11Device::CreateBuffer. The only difference is that the input data is empty at the moment (but we will fix this soon).

CD3D11_BUFFER_DESC constantBufferDesc(sizeof(ModelViewProjectionConstantBuffer), D3D11_BIND_CONSTANT_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &constantBufferDesc,
    nullptr,
    &m_constantBuffer
    )
    );

3. Matrices initialization: model, view et projection

a. model matrix

We begin by addressing the matrix model. In this example, I want to rotate the cube: we're going to apply a rotation matrix (on the Y axis), and update the rotation angle for each new frame.

This job is performed in SceneRenderer::Update method with a call to XMatrixRotationY: it simply takes an angle argument (in radians). This type of method exists for all transformations, by the way matrix calculation become a black box that you can use easily.

void SceneRenderer::Update(float timeTotal, float timeDelta)
{
    (void) timeDelta; // Unused parameter.
    XMStoreFloat4x4(&m_constantBufferData.model, XMMatrixTranspose(XMMatrixRotationY(timeTotal * XM_PIDIV4)));
}

b. view matrix

The view matrix sets the scene in a new coordinate systems, where object is targeted by a camera. To define a camera, we need three vectors:

• eye defines the position of the camera
• at defines the position of the focal point (the direction of the targeted object)
• up defines the up direction of the camera

XMVECTOR eye = XMVectorSet(0.0f, 0.7f, 1.5f, 0.0f);
XMVECTOR at = XMVectorSet(0.0f, -0.1f, 0.0f, 0.0f);
XMVECTOR up = XMVectorSet(0.0f, 1.0f, 0.0f, 0.0f);

XMStoreFloat4x4(&m_constantBufferData.view, XMMatrixTranspose(XMMatrixLookAtRH(eye, at, up)));

c. projection matrix

• FovAngleY defines the top-down field-of-view angle in radians. This angle is 70 degrees in our case, we just need to convert this value in radian :)
• AspectRatio defines the aspect ratio of the view space (we devide x by y)
• NearZ is the distance to the near clipping plane, all graphics elements before this plane are not displayed.
• FarZ is the distance to the far clipping plane, all graphics elements after this plane are not displayed.

As drawing is probably more meaningful, it looks like this:

And voila, we have our third matrix !

float aspectRatio = m_windowBounds.Width / m_windowBounds.Height;
float fovAngleY = 70.0f * XM_PI / 180.0f;  // convert in radian

if (aspectRatio < 1.0f)
{
    fovAngleY /= aspectRatio;
}

XMStoreFloat4x4(
    &m_constantBufferData.projection,
    XMMatrixTranspose(
        XMMatrixPerspectiveFovRH(
            fovAngleY,        // field-of-view
            aspectRatio,      // aspect ratio
            0.01f,            // near clipping plane
            100.0f            // far clipping plane
            )
        )
    );

m_d3dContext->UpdateSubresource(
    m_constantBuffer.Get(),
    0,
    NULL,
    &m_constantBufferData,
    0,
    0
    );

• Transforms (Direct3D 9)
• World, View and Projection Matrix Unveiled
• Cameras on OpenGL ES 2.x – The ModelViewProjection Matrix
• Tutorial 3 : Matrices
• A brief introduction to 3D
• OpenGL Transformation

Download the Code

Initialisation de Direct3D

Bonne nouvelle, vous n’avez pas à gérer cette partie de code, le contrôle DrawingSurfaceBackgroundGrid (ou DrawingSurface) prend en charge ce point pour vous, c’est cadeau ! Bien évidemment, si vous n’utilisez pas ces contrôles XAML et que vous souhaitez développer une application 100% native, vous devez effectuer cette initialisation … faut pas rêver non plus.

Concrètement, quelles sont les opérations prises en charge lors de cette initialisation ??

1. La création des objets device et device context

La communication avec la carte graphique (ou plus largement le périphérique)  s’effectue par l’intermédiaire de ces deux objets. Il s’agit des principaux points d’entrées pour utiliser Direct3D.

• L’objet device (ID3D11Device) s’occupe principalement de créer les ressources graphiques (textures, vertex buffers, shaders, …).
• L’objet device context (ID3D11DeviceContext) se charge d’effectuer les opérations de rendu en utilisant les ressources initilisés par l’objet device.      

2. La création de la swap chain

Le rendu n’est pas effectué directement à l’écran, il est réalisé dans un buffer mémoire (cad. un tableau de pixels de la dimension de l’écran) que l’on nomme back buffer. La swap chain se charge de copier le contenu du back buffer directement à l’écran. Pour information, la swap chain peut théoriquement utiliser plusieurs back buffers, mais Windows Phone limite son utilisation à un seul et unique buffer.

En complément, Direct3D permet d’accéder aux données du  back buffer (notre tableau de pixels) via l’objet render target view (ID3D11RenderTargetView).

Perdu ? Reprenons par exemple les lignes de code du post précédent. Le code de la méthode Direct3DBackground::Draw initialise en bleu notre écran. 

a/ La méthode ClearRenderTargetView est appelée depuis l’objet device context
b/ On cible le back buffer via l’objet render target view. Ca devient plus clair ?

HRESULT Direct3DBackground::Draw(_In_ ID3D11Device1* device, _In_ ID3D11DeviceContext1* context, _In_ ID3D11RenderTargetView* renderTargetView)
{
    // Clear the render target to default values.
    const float midnightBlue [] = { 0.098f, 0.098f, 0.439f, 1.000f };
    context->ClearRenderTargetView(
        renderTargetView,
        midnightBlue
        );

    RequestAdditionalFrame();

    return S_OK;
}

Pour compléter ces informations, je vous invite à consulter l’article Creating a Direct3D device and swap chain for Windows Phone 8.

Construction de notre objet 3D

Les sommets (déclaration des vertices)

Un objet 3D (ou mesh) se définie généralement par une liste de sommets (vertices) et de faces. Par exemple, huit sommets sont nécessaires pour décrire un cube. Et puisque nous sommes dans un repère à trois dimensions, chaque sommet comporte trois coordonnées : x, y et z. Si on place le centre du cube à l’origine de la scène avec des sommets définies entre les valeurs -0.5 et 0.5, on obtient donc le tableau suivant :

Pour compléter notre exemple, on va associer une couleur à chaque sommet (pour visualiser les faces plus simplement lors du rendu). Cette couleur se compose également de trois valeurs : rouge, vert et bleu (format RGB). Un sommet sera donc défini par une position et une couleur associée de la manière suivante :

struct VertexPositionColor
{
    DirectX::XMFLOAT3 pos;
    DirectX::XMFLOAT3 color;
};

Pour des objets complexes, on chargera généralement les valeurs depuis un fichier (par exemple depuis un format Autodesk FBX qui fera l’objet d’un prochain post pour charger le vaisseau). Dans le cas présent, on va déclarer manuellement notre tableau de sommets, avec des couleurs définies arbitrairement :

VertexPositionColor cubeVertices [] =
{
    { XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT3(0.0f, 0.0f, 0.0f) }, // Vertice 0 at -0.5, -0.5, -0.5 // White
    { XMFLOAT3(-0.5f, -0.5f,  0.5f), XMFLOAT3(0.0f, 0.0f, 1.0f) }, // Vertice 1 at -0.5, -0.5,  0.5 // Blue
    { XMFLOAT3(-0.5f,  0.5f, -0.5f), XMFLOAT3(0.0f, 1.0f, 0.0f) }, // Vertice 2 at -0.5,  0.5, -0.5 // Green
    { XMFLOAT3(-0.5f,  0.5f,  0.5f), XMFLOAT3(0.0f, 1.0f, 1.0f) }, // Vertice 3 at -0.5,  0.5,  0.5 
    { XMFLOAT3( 0.5f, -0.5f, -0.5f), XMFLOAT3(1.0f, 0.0f, 0.0f) }, // Vertice 4 at  0.5, -0.5, -0.5 // Red
    { XMFLOAT3( 0.5f, -0.5f,  0.5f), XMFLOAT3(1.0f, 0.0f, 1.0f) }, // Vertice 5 at  0.5, -0.5,  0.5 
    { XMFLOAT3( 0.5f,  0.5f, -0.5f), XMFLOAT3(1.0f, 1.0f, 0.0f) }, // Vertice 6 at  0.5,  0.5, -0.5 
    { XMFLOAT3( 0.5f,  0.5f,  0.5f), XMFLOAT3(1.0f, 1.0f, 1.0f) }, // Vertice 7 at  0.5,  0.5,  0.5 // Black
};

Les faces (déclaration des indices)

Maintenant que nous avons nos sommets, il reste toutefois à définir les faces de notre cube pour compléter sa définition : celui-ci comporte 6 faces chacune composé de 4 sommets (un carré). Cependant, si vous raisonnez plus largement,  certains objets 3D peuvent se définir avec des faces non rectangulaires. Par exemple une pyramide à base carrée comporte 1 face de 4 sommets (la base) + 4 faces de 3 sommets (les côtés triangulaires).

Les algorithmes pour remplir les faces seraient particulièrement complexes si le nombre de sommets étaient variables. Direct3D (et plus généralement le monde de la 3D) utilise donc des triangles comme primitive pour définir des faces ; chaque carré pouvant se représenter par deux triangles.

Si on reprend l’exemple de notre cube, la première face se compose donc de deux triangles:

• Triangle 1: {0, 2, 1}
• Triangle 2: {1, 2, 3}

Et en extrapolant, on se retrouve donc avec 12 triangles pour une définition complète des faces. On va cataloguer/indexer ces triangles dans un tableau que l’on nomme liste d’index ou indices.

unsigned short cubeIndices[] = 
{
    0,2,1, // -x
    1,2,3,

    4,5,6, // +x
    5,7,6,

    0,1,5, // -y
    0,5,4,

    2,6,7, // +y
    2,7,3,

    0,4,6, // -z
    0,6,2,

    1,3,7, // +z
    1,7,5,
};

Vertex buffer et Index buffer

On a désormais une définition de notre cube stockée dans deux tableaux (cubeVertices et cubeIndices) mais DirectX à besoin d’un coup de main supplémentaire pour consommer et interpréter les données précédentes.

En premier lieu, les deux listes [sommets (vertices) et faces (indices)] doivent être stockées dans des buffers prévus à cet effet, nommés sans trop d'originalité Vertex buffer et Index buffer : c’est le rôle de la méthode ID3D11Device::CreateBuffer.

Pour faire simple, ID3D11Device::CreateBuffer récupère en entrée …

• Les données via la structure D3D11_SUBRESOURCE_DATA qui pointe sur nos tableaux cubeVertices ou cubeIndices.
• Une description via D3D11_BUFFER_DESC pour indiquer l’usage de ces données : Vertex buffer, Index Buffer, …

… et nous retourne un objet qui implémente l’interface D3D11Buffer (notre buffer Direct3D). On obtient donc le code suivant pour instancier notre Vertex buffer :

D3D11_SUBRESOURCE_DATA vertexBufferData = { 0 };
vertexBufferData.pSysMem = cubeVertices;
vertexBufferData.SysMemPitch = 0;
vertexBufferData.SysMemSlicePitch = 0;

CD3D11_BUFFER_DESC vertexBufferDesc(sizeof(cubeVertices), D3D11_BIND_VERTEX_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &vertexBufferDesc,
    &vertexBufferData,
    &m_vertexBuffer
    )
    );

D3D11_SUBRESOURCE_DATA indexBufferData = { 0 };
indexBufferData.pSysMem = cubeIndices;
indexBufferData.SysMemPitch = 0;
indexBufferData.SysMemSlicePitch = 0;

CD3D11_BUFFER_DESC indexBufferDesc(sizeof(cubeIndices), D3D11_BIND_INDEX_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &indexBufferDesc,
    &indexBufferData,
    &m_indexBuffer
    )
    );

Il y a toutefois une différence majeure pour DirectX entre ces deux buffers. Ils contiennent tous les deux des données mais, dans l’état, seul l’Index buffer est compréhensible par Direct3D. Pourquoi ?

Notre Vertex buffer contient la position des sommets, mais également des couleurs. Et à termes, vous allez renseigner d’autres informations associés à chaque sommet (notamment pour éclairer convenablement votre objet et le texturer). Du coup, DirectX n’a aucune idée de la signification exacte des données que vous lui fournissez en entrée. Il n’est pas capable de les digérer sans un coup de pouce additionnel. Ce petit service est rendu par l’Input layout  (cf. section suivante).

Ce n’est pas le cas de l’Index buffer dont le seul travail est de d’indexer les sommets pour fournir une liste de triangles. Direct3D connait nativement la signification de ces données.

const D3D11_INPUT_ELEMENT_DESC vertexDesc [] =
{
    { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
    { "COLOR", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
};

DX::ThrowIfFailed(
    m_d3dDevice->CreateInputLayout(
    vertexDesc,
    ARRAYSIZE(vertexDesc),
    fileData->Data,
    fileData->Length,
    &m_inputLayout
    )
    );

• POSITION : Exprime la position de nos sommets sous la forme des 3 flottants (32bits) : x, y et z.
• COLOR : Exprime la couleur de nos sommets sous la forme de 3 flottants également (32bits): r, g et b.

Vous pouvez constater qu’on utilise le format DXGI_FORMAT_R32G32B32_FLOAT dans les deux cas, qui s’apparente à l’utilisation d’une couleur. Ce n’est pas une erreur, comme il s’agit de 3 flottants dans les deux cas, pourquoi ne pas utiliser le même format?

De manière plus imagé, notre tableau de flottants est donc désormais interprétable de la manière suivante par Direct3D:

void SceneRenderer::CreateDeviceResources()
{
    auto loadVSTask = DX::ReadDataAsync("SimpleVertexShader.cso");
    auto loadPSTask = DX::ReadDataAsync("SimplePixelShader.cso");

    auto createVSTask = loadVSTask.then([this](Platform::Array<byte>^ fileData) {
        DX::ThrowIfFailed(
            m_d3dDevice->CreateVertexShader(
            fileData->Data,
            fileData->Length,
            nullptr,
            &m_vertexShader
            )
            );

        const D3D11_INPUT_ELEMENT_DESC vertexDesc [] =
        {
            { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
            { "COLOR", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
        };

        DX::ThrowIfFailed(
            m_d3dDevice->CreateInputLayout(
            vertexDesc,
            ARRAYSIZE(vertexDesc),
            fileData->Data,
            fileData->Length,
            &m_inputLayout
            )
            );
    });

    auto createPSTask = loadPSTask.then([this](Platform::Array<byte>^ fileData) {
        DX::ThrowIfFailed(
            m_d3dDevice->CreatePixelShader(
            fileData->Data,
            fileData->Length,
            nullptr,
            &m_pixelShader
            )
            );

        CD3D11_BUFFER_DESC constantBufferDesc(sizeof(ModelViewProjectionConstantBuffer), D3D11_BIND_CONSTANT_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &constantBufferDesc,
            nullptr,
            &m_constantBuffer
            )
            );
    });

    auto createCubeTask = (createPSTask && createVSTask).then([this]() {
        VertexPositionColor cubeVertices [] =
        {
            { XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT3(0.0f, 0.0f, 0.0f) }, // Vertice 0 at -0.5, -0.5, -0.5 // White
            { XMFLOAT3(-0.5f, -0.5f,  0.5f), XMFLOAT3(0.0f, 0.0f, 1.0f) }, // Vertice 1 at -0.5, -0.5,  0.5 // Blue
            { XMFLOAT3(-0.5f,  0.5f, -0.5f), XMFLOAT3(0.0f, 1.0f, 0.0f) }, // Vertice 2 at -0.5,  0.5, -0.5 // Green
            { XMFLOAT3(-0.5f,  0.5f,  0.5f), XMFLOAT3(0.0f, 1.0f, 1.0f) }, // Vertice 3 at -0.5,  0.5,  0.5 
            { XMFLOAT3( 0.5f, -0.5f, -0.5f), XMFLOAT3(1.0f, 0.0f, 0.0f) }, // Vertice 4 at  0.5, -0.5, -0.5 // Red
            { XMFLOAT3( 0.5f, -0.5f,  0.5f), XMFLOAT3(1.0f, 0.0f, 1.0f) }, // Vertice 5 at  0.5, -0.5,  0.5 
            { XMFLOAT3( 0.5f,  0.5f, -0.5f), XMFLOAT3(1.0f, 1.0f, 0.0f) }, // Vertice 6 at  0.5,  0.5, -0.5 
            { XMFLOAT3( 0.5f,  0.5f,  0.5f), XMFLOAT3(1.0f, 1.0f, 1.0f) }, // Vertice 7 at  0.5,  0.5,  0.5 // Black
        };

        D3D11_SUBRESOURCE_DATA vertexBufferData = { 0 };
        vertexBufferData.pSysMem = cubeVertices;
        vertexBufferData.SysMemPitch = 0;
        vertexBufferData.SysMemSlicePitch = 0;
        CD3D11_BUFFER_DESC vertexBufferDesc(sizeof(cubeVertices), D3D11_BIND_VERTEX_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &vertexBufferDesc,
            &vertexBufferData,
            &m_vertexBuffer
            )
            );

        unsigned short cubeIndices [] =
        {
            0, 2, 1, // -x
            1, 2, 3,

            4, 5, 6, // +x
            5, 7, 6,

            0, 1, 5, // -y
            0, 5, 4,

            2, 6, 7, // +y
            2, 7, 3,

            0, 4, 6, // -z
            0, 6, 2,

            1, 3, 7, // +z
            1, 7, 5,
        };

        m_indexCount = ARRAYSIZE(cubeIndices);

        D3D11_SUBRESOURCE_DATA indexBufferData = { 0 };
        indexBufferData.pSysMem = cubeIndices;
        indexBufferData.SysMemPitch = 0;
        indexBufferData.SysMemSlicePitch = 0;
        CD3D11_BUFFER_DESC indexBufferDesc(sizeof(cubeIndices), D3D11_BIND_INDEX_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &indexBufferDesc,
            &indexBufferData,
            &m_indexBuffer
            )
            );
    });

    createCubeTask.then([this]() {
        m_loadingComplete = true;
    });
}

Ressources

• Creating a Direct3D device and swap chain for Windows Phone 8
• Get started with DirectX game development
• Games for Windows Phone

Télécharger le Code

Direct3D Initialization

Good news, you do not have to manage this part of code, DrawingSurfaceBackgroundGrid control (or DrawingSurface) supports this point to you, it’s a gift! Of course, if you do not use the XAML controls and you want to develop an application 100% native, you must perform this initialization ... do not dream either :)

Specifically, what are the supported operations during this initialization??

1. Creating device and device context objects

Communication with the graphics card (or more broadly the device) is done through these two objects. These are the main entry points to use Direct3D.

• The device object (ID3D11Device) is primarily responsible for creating the graphic resources (textures, vertex buffers, shaders, ...).
• The device context object (ID3D11DeviceContext) takes care of rendering operations using resources initialized by the device object.      

2. Creating swap chain

The rendering is not performed directly on the screen, it is made into a buffer memory (aka. an array of pixels of the screen size) named back buffer. The swap chain is responsible for copying the contents of the back buffer directly on the screen. For information, the swap chain can theoretically use multiple back buffers, but Windows Phone limit its use to a single buffer.

In addition, Direct3D provides access to data located in the back buffer (our array of pixels) via the render target view object (ID3D11RenderTargetView).

Lost? Let us take for example the lines of code from the previous post. The code Direct3DBackground::Draw method initializes our screen with a blue color.

a/ ClearRenderTargetView method is called from the device context object
b/ We target the back buffer via render target view object. It becomes clearer?

HRESULT Direct3DBackground::Draw(_In_ ID3D11Device1* device, _In_ ID3D11DeviceContext1* context, _In_ ID3D11RenderTargetView* renderTargetView)
{
    // Clear the render target to default values.
    const float midnightBlue [] = { 0.098f, 0.098f, 0.439f, 1.000f };
    context->ClearRenderTargetView(
        renderTargetView,
        midnightBlue
        );

    RequestAdditionalFrame();

    return S_OK;
}

For additional information, I suggest you to read the following article: Creating a Direct3D device and swap chain for Windows Phone 8.

Building our 3D mesh object

Vertices

A 3D object (or mesh) is generally defined by a list of vertices and faces. For example, eight vertices are needed to describe a cube. And since we're in a three-dimensional world, each vertex has three coordinates: x, y and z. If the center of the cube is placed at the origin of the scene, with vertices values defined ​​between -0.5 and 0.5, we obtain the following table:

To complete our example, we will assign a color to each vertex (to see the faces more easily when rendering). This color is also made up of three values​​: red, green and blue (RGB format). A vertex will be defined by a position and a color associated in the following way:

struct VertexPositionColor
{
    DirectX::XMFLOAT3 pos;
    DirectX::XMFLOAT3 color;
};

For complex objects, we usually load the values ​​from a file (eg from an Autodesk FBX format which will be the subject of a future post to load our shuttle). In the present case, we will manually declare our vertices table with colors defined arbitrarily:

VertexPositionColor cubeVertices [] =
{
    { XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT3(0.0f, 0.0f, 0.0f) }, // Vertice 0 at -0.5, -0.5, -0.5 // White
    { XMFLOAT3(-0.5f, -0.5f,  0.5f), XMFLOAT3(0.0f, 0.0f, 1.0f) }, // Vertice 1 at -0.5, -0.5,  0.5 // Blue
    { XMFLOAT3(-0.5f,  0.5f, -0.5f), XMFLOAT3(0.0f, 1.0f, 0.0f) }, // Vertice 2 at -0.5,  0.5, -0.5 // Green
    { XMFLOAT3(-0.5f,  0.5f,  0.5f), XMFLOAT3(0.0f, 1.0f, 1.0f) }, // Vertice 3 at -0.5,  0.5,  0.5 
    { XMFLOAT3( 0.5f, -0.5f, -0.5f), XMFLOAT3(1.0f, 0.0f, 0.0f) }, // Vertice 4 at  0.5, -0.5, -0.5 // Red
    { XMFLOAT3( 0.5f, -0.5f,  0.5f), XMFLOAT3(1.0f, 0.0f, 1.0f) }, // Vertice 5 at  0.5, -0.5,  0.5 
    { XMFLOAT3( 0.5f,  0.5f, -0.5f), XMFLOAT3(1.0f, 1.0f, 0.0f) }, // Vertice 6 at  0.5,  0.5, -0.5 
    { XMFLOAT3( 0.5f,  0.5f,  0.5f), XMFLOAT3(1.0f, 1.0f, 1.0f) }, // Vertice 7 at  0.5,  0.5,  0.5 // Black
};

Faces (indices declaration)

Now that we have our vertices, it remains to define the faces of the cube to complete its definition: it has six faces, each consisting of four vertices (a square). However, if you reason more broadly, some 3D objects cannot be defined with rectangular faces. For example, a square base pyramid is built with one face of 4 vertices (the square basement) + four faces of 3 vertices (the triangular sides).

Algorithms to fill the faces would be particularly complex if the number of vertices is variable. Direct3D (and more generally the 3D world) therefore uses triangles as primitive to define faces, each square can be represented by two triangles.

If we take the example of our cube, the first side is therefore composed of two triangles:

• Triangle 1: {0, 2, 1}
• Triangle 2: {1, 2, 3}

And extrapolating, we end up with 12 triangles for a complete definition of faces. We will catalog / index these triangles in a table named indices.

unsigned short cubeIndices[] = 
{
    0,2,1, // -x
    1,2,3,

    4,5,6, // +x
    5,7,6,

    0,1,5, // -y
    0,5,4,

    2,6,7, // +y
    2,7,3,

    0,4,6, // -z
    0,6,2,

    1,3,7, // +z
    1,7,5,
};

Vertex buffer and Index buffer

We just obtained a definition of our cube stored in two tables (cubeVertices and cubeIndices) but DirectX need a little extra hand to use and interpret the data above.

First, the two lists [vertices and faces (indices)] must be stored in buffers provided for this purpose, named without much originality Vertex Buffer and Index Buffer: this is the purpose of ID3D11Device::CreateBuffer method.

Simply, ID3D11Device::CreateBuffer will take the following input arguments …

• Data via D3D11_SUBRESOURCE_DATA structure that points to our cubeVertices or cubeIndices tables.
• A description via D3D11_BUFFER_DESC to indicate the use of these data: vertex buffer, index buffer, ...

… and we will return an object that implements the D3D11Buffer interface (our Direct3D buffer). So we get the following code to instantiate our Vertex Buffer:

D3D11_SUBRESOURCE_DATA vertexBufferData = { 0 };
vertexBufferData.pSysMem = cubeVertices;
vertexBufferData.SysMemPitch = 0;
vertexBufferData.SysMemSlicePitch = 0;

CD3D11_BUFFER_DESC vertexBufferDesc(sizeof(cubeVertices), D3D11_BIND_VERTEX_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &vertexBufferDesc,
    &vertexBufferData,
    &m_vertexBuffer
    )
    );

D3D11_SUBRESOURCE_DATA indexBufferData = { 0 };
indexBufferData.pSysMem = cubeIndices;
indexBufferData.SysMemPitch = 0;
indexBufferData.SysMemSlicePitch = 0;

CD3D11_BUFFER_DESC indexBufferDesc(sizeof(cubeIndices), D3D11_BIND_INDEX_BUFFER);
DX::ThrowIfFailed(
    m_d3dDevice->CreateBuffer(
    &indexBufferDesc,
    &indexBufferData,
    &m_indexBuffer
    )
    );

There is one major difference between these two buffers DirectX. They both contain data, but in the state, only the Index buffer is understood by Direct3D. Why?

Our Vertex buffer contains the position of the vertices, but also the colors. And in the future posts, you will add other information associated with each vertex (including texture coordinates, normals …). So, at the moment, DirectX has no idea of the exact meaning of this data that you provided. It is not able to digest without an added boost. This small service is offered by the input layout (see next section).

This is not the case of the Index buffer whose only job is to index the vertices to provide a list of triangles. Direct3D natively knows the meaning of these data

const D3D11_INPUT_ELEMENT_DESC vertexDesc [] =
{
    { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
    { "COLOR", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
};

DX::ThrowIfFailed(
    m_d3dDevice->CreateInputLayout(
    vertexDesc,
    ARRAYSIZE(vertexDesc),
    fileData->Data,
    fileData->Length,
    &m_inputLayout
    )
    );

• POSITION: Declares the position of our vertices with 3 floats struct (32bits): x, y and z.
• COLOR: Declares the color of our vertices with 3 floats struct (32bit): r, g and b.

You may find that I used the DXGI_FORMAT_R32G32B32_FLOAT format in both cases, which seems to be specific to RGB color usage. This is not a mistake, as it is a 3 floats struct in both cases, why not use the same format?

In more pictorial way, our array of floats is now interpreted as follows by Direct3D:

void SceneRenderer::CreateDeviceResources()
{
    auto loadVSTask = DX::ReadDataAsync("SimpleVertexShader.cso");
    auto loadPSTask = DX::ReadDataAsync("SimplePixelShader.cso");

    auto createVSTask = loadVSTask.then([this](Platform::Array<byte>^ fileData) {
        DX::ThrowIfFailed(
            m_d3dDevice->CreateVertexShader(
            fileData->Data,
            fileData->Length,
            nullptr,
            &m_vertexShader
            )
            );

        const D3D11_INPUT_ELEMENT_DESC vertexDesc [] =
        {
            { "POSITION", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 0, D3D11_INPUT_PER_VERTEX_DATA, 0 },
            { "COLOR", 0, DXGI_FORMAT_R32G32B32_FLOAT, 0, 12, D3D11_INPUT_PER_VERTEX_DATA, 0 },
        };

        DX::ThrowIfFailed(
            m_d3dDevice->CreateInputLayout(
            vertexDesc,
            ARRAYSIZE(vertexDesc),
            fileData->Data,
            fileData->Length,
            &m_inputLayout
            )
            );
    });

    auto createPSTask = loadPSTask.then([this](Platform::Array<byte>^ fileData) {
        DX::ThrowIfFailed(
            m_d3dDevice->CreatePixelShader(
            fileData->Data,
            fileData->Length,
            nullptr,
            &m_pixelShader
            )
            );

        CD3D11_BUFFER_DESC constantBufferDesc(sizeof(ModelViewProjectionConstantBuffer), D3D11_BIND_CONSTANT_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &constantBufferDesc,
            nullptr,
            &m_constantBuffer
            )
            );
    });

    auto createCubeTask = (createPSTask && createVSTask).then([this]() {
        VertexPositionColor cubeVertices [] =
        {
            { XMFLOAT3(-0.5f, -0.5f, -0.5f), XMFLOAT3(0.0f, 0.0f, 0.0f) }, // Vertice 0 at -0.5, -0.5, -0.5 // White
            { XMFLOAT3(-0.5f, -0.5f,  0.5f), XMFLOAT3(0.0f, 0.0f, 1.0f) }, // Vertice 1 at -0.5, -0.5,  0.5 // Blue
            { XMFLOAT3(-0.5f,  0.5f, -0.5f), XMFLOAT3(0.0f, 1.0f, 0.0f) }, // Vertice 2 at -0.5,  0.5, -0.5 // Green
            { XMFLOAT3(-0.5f,  0.5f,  0.5f), XMFLOAT3(0.0f, 1.0f, 1.0f) }, // Vertice 3 at -0.5,  0.5,  0.5 
            { XMFLOAT3( 0.5f, -0.5f, -0.5f), XMFLOAT3(1.0f, 0.0f, 0.0f) }, // Vertice 4 at  0.5, -0.5, -0.5 // Red
            { XMFLOAT3( 0.5f, -0.5f,  0.5f), XMFLOAT3(1.0f, 0.0f, 1.0f) }, // Vertice 5 at  0.5, -0.5,  0.5 
            { XMFLOAT3( 0.5f,  0.5f, -0.5f), XMFLOAT3(1.0f, 1.0f, 0.0f) }, // Vertice 6 at  0.5,  0.5, -0.5 
            { XMFLOAT3( 0.5f,  0.5f,  0.5f), XMFLOAT3(1.0f, 1.0f, 1.0f) }, // Vertice 7 at  0.5,  0.5,  0.5 // Black
        };

        D3D11_SUBRESOURCE_DATA vertexBufferData = { 0 };
        vertexBufferData.pSysMem = cubeVertices;
        vertexBufferData.SysMemPitch = 0;
        vertexBufferData.SysMemSlicePitch = 0;
        CD3D11_BUFFER_DESC vertexBufferDesc(sizeof(cubeVertices), D3D11_BIND_VERTEX_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &vertexBufferDesc,
            &vertexBufferData,
            &m_vertexBuffer
            )
            );

        unsigned short cubeIndices [] =
        {
            0, 2, 1, // -x
            1, 2, 3,

            4, 5, 6, // +x
            5, 7, 6,

            0, 1, 5, // -y
            0, 5, 4,

            2, 6, 7, // +y
            2, 7, 3,

            0, 4, 6, // -z
            0, 6, 2,

            1, 3, 7, // +z
            1, 7, 5,
        };

        m_indexCount = ARRAYSIZE(cubeIndices);

        D3D11_SUBRESOURCE_DATA indexBufferData = { 0 };
        indexBufferData.pSysMem = cubeIndices;
        indexBufferData.SysMemPitch = 0;
        indexBufferData.SysMemSlicePitch = 0;
        CD3D11_BUFFER_DESC indexBufferDesc(sizeof(cubeIndices), D3D11_BIND_INDEX_BUFFER);
        DX::ThrowIfFailed(
            m_d3dDevice->CreateBuffer(
            &indexBufferDesc,
            &indexBufferData,
            &m_indexBuffer
            )
            );
    });

    createCubeTask.then([this]() {
        m_loadingComplete = true;
    });
}

Resources

• Creating a Direct3D device and swap chain for Windows Phone 8
• Get started with DirectX game development
• Games for Windows Phone

Download the Code