L'Article ASP .NET

Il sera abordé:

1. Des définitions
2. L'élaboration d'une identité graphique

Télecharger le fichier

Il présente tellement de fonctionnalités, que nous n'aborderons qu’une petite partie de ces possibilités, afin de prendre en main ce logiciel. Nous verrons donc comment encoder indépendamment le flux vidéo et le flux audio.

Encoder les flux vidéo et audio

Le flux vidéo

Dans cette partie, nous allons voir comment encoder le flux vidéo. Avant toute chose, vous devez sélectionner le mode « Full processing mode » afin de spécifier au logiciel que vous allez personnaliser l’encodage vidéo :

Une fois ceci réalisé, nous allons indiquer à VirtualDub le format de sortie désiré. Pour ce faire, allez dans l’onglet « Video » et cliquez sur « Compression… » :

Une nouvelle fenêtre apparaît alors. Cette dernière regroupe l’ensemble des formats vidéo vers lesquels vous pouvez encoder votre vidéo. Bien évidemment, cette liste dépend de votre configuration et donc des codecs vidéo installés sur votre ordinateur. Si vous ne trouvez pas le format de sortie souhaité, vous pouvez alors vous rendre sur des sites spécialisés et télécharger le codec correspondant.

Dans cet exemple, nous allons choisir le codec « XviD MPEG-4 ». En effet, ce dernier est très répandu et offre un rapport poids/qualité très correct.

Cliquez ensuite sur « OK » et vous en avez fini pour le flux vidéo.

Le flux audio

L’encodage du flux audio est très similaire à celui du flux vidéo. La première étape consiste également à sélectionner le mode « Full processing mode », pour les mêmes raisons citées précédemment.

Ensuite, pour déterminer le format de sortie, allez dans l’onglet « Audio », puis « Compression… »

Une fois cette opération effectuée, une nouvelle fenêtre apparaît avec tous les formats audio disponibles. Comme expliqué précédemment, ils dépendent toujours de votre configuration. Dans le cadre de cet exemple, nous allons choisir le format MP3, le plus répandu.

Après avoir cliqué sur « MPEG Layer-3 », nous pouvons constater que dans la partie droite de la fenêtre se trouvent de nombreuses caractéristiques ; ces dernières correspondent au débit et la fréquence d'échantillonnage du flux audio. Elles vont influencer sur le poids et sur la qualité du son de sortie. Si vous n'avez le choix que jusqu'à un débit de 56 kBit/s, c'est qu'il vous faut télécharger un codec MP3 complet et non bridé (comme c’est le cas ici).

Une fois ces caractéristiques définies, cliquez sur « OK » pour terminer le choix de l’encodage du flux audio.

Enregistrer le fichier

Une fois arrivé à cette étape, vous avez déterminé l’ensemble des formats de sortie et leurs réglages. Cependant, le traitement n’a pas encore été effectué. Pour ce faire, allez dans l’onglet « File » et cliquez sur « Save as AVI… ». Spécifiez un nom de sortie et attendez… En effet, selon le type d’encodage, la configuration de votre ordinateur et la durée de la vidéo, cela peut prendre de nombreuses minutes.

Remarque

Dans cet exemple, nous avons à la fois encodé le flux vidéo ET le flux audio. Cependant, nous ne sommes pas obligés de réaliser cela, et il peut s’avérer parfois très utile d’encoder qu’un seul des deux flux. Reprenons par exemple le cas de la vidéo précédente, en décidant d’encoder seulement le flux vidéo, car le flux audio est déjà dans le format souhaité. La première partie (l’encodage du flux vidéo) va donc se dérouler de la même façon que précédemment. En ce qui concerne le flux audio, il faut préciser au logiciel que l’on souhaite garder le flux déjà existant. Pour ce faire, allez dans l’onglet « Audio » et cliquez sur « Direct stream copy » :

Bien évidemment, cette étape fonctionne également dans le sens inverse, c’est-à-dire dans le cas où l’on souhaite seulement encoder le flux audio, et garder le flux vidéo courant.

Nous savons donc maintenant encoder :

• le flux vidéo uniquement,
• le flux audio uniquement,
• les flux vidéo et audio.

Conclusion

VirtualDub est un logiciel vidéo très puissant, apportant d’innombrables possibilités. Avec ce tutoriel de prise en main, nous n’avons pu voir qu’une partie des fonctionnalités de ce merveilleux utilitaire. Je vous invite donc à approfondir vos connaissances dans ce sujet en le manipulant sans modération !

Les réseaux locaux d'entreprise (LAN : Local Area Network ou RLE: Réseau Local d'Entreprise) sont des réseaux internes à une organisation. Cela signifie que les liaisons entre les différentes machines appartiennent à cette même organisation (cf. figure 0.1).

Figue 0.1 - Exemple d’une LAN de typologie étoile.

Avec l’évolution du World Wide Web, ces réseaux sont de plus en plus souvent reliés à Internet par l'intermédiaire d'équipements d'interconnexion (concentrateurs, ponts...). Il arrive alors fréquemment que des entreprises éprouvent le besoin de communiquer avec des filiales, des clients ou même du personnel géographiquement éloignés via Internet.

Pour autant, les données transmises sur Internet sont beaucoup plus vulnérables que lorsqu'elles circulent sur un réseau interne à une organisation. En effet, le chemin emprunté n'est pas défini à l'avance, ce qui signifie que les données empruntent une infrastructure réseau publique appartenant à différents opérateurs. Ainsi, il n'est pas impossible que sur le chemin parcouru, le réseau soit écouté par un utilisateur indiscret ou même détourné (cf. figure 0.2). Il n'est donc pas imaginable de transmettre des informations sensibles pour l'organisation ou l'entreprise, dans de telles conditions.

Figure 0.2 - Pirate écoutant le réseau reliant les divers pôles d’une entreprise via Internet.

La première solution pour répondre à ce besoin de communication sécurisé consiste à relier les réseaux distants à l'aide de lignes spécialisées. Une ligne spécialisée est en fait une liaison permanente reliant deux points ensemble. Contrairement au réseau téléphonique commuté (i.e. l'ADSL) où les ressources sont partagées, une ligne spécialisée ne fait aucun partage en dehors de cette liaison. Ce genre de lien garantit qu'aucune entité tierce ne peut physiquement avoir accès aux données circulant à travers la ligne. Toutefois, la plupart des entreprises ne peuvent pas (par soucis techniques ou de prix) se permettre de relier deux réseaux locaux distants par une ligne spécialisée.

Un bon compromis consiste à utiliser Internet comme support de transmission en utilisant un protocole encapsulant les données à transmettre de façon chiffrée. On parle alors de réseau privé virtuel : VPN, pour Virtual Private Network.

Le concept de réseau virtuel privé

Ce type de réseau est dit « virtuel » car il fait la liaison entre deux réseaux physiques (réseaux locaux par exemple) à l'aide d'un réseau non fiable, Internet par exemple (cf. figure 1.1). En ce qui concerne le terme « privé », cela vient du fait que seuls les ordinateurs des réseaux locaux de part et d'autre du VPN peuvent « voir » les données.

Un système VPN permet de mettre en place une liaison sécurisée à moindre coût (cependant, cela dépend aussi des équipements terminaux utilisés). En contrepartie, il ne permet pas d'assurer une qualité de service comparable à une ligne spécialisée dans la mesure où le réseau physique est public et donc non garanti.

Figure 1.1 - Schéma représentant un réseau utilisant un système de réseau privé virtuel.

Un système de VPN est censé mettre en oeuvre les fonctionnalités suivantes :

• authentification d'utilisateur. Seuls les utilisateurs autorisés doivent pouvoir s'identifier sur le réseau virtuel. De plus, un historique des connexions et des actions effectuées sur le réseau doit être conservé.
• gestion d'adresses. Chaque client sur le réseau doit avoir une adresse privée. Cette adresse privée doit rester confidentielle. Un nouveau client doit pouvoir se connecter facilement au réseau et recevoir une adresse.
• cryptage des données. Lors de leurs transports sur le réseau public, les données doivent être protégées par un cryptage efficace.
• gestion de clés. Les clés de cryptage pour le client et le serveur doivent pouvoir être générées et régénérées.
• prise en charge multiprotocole. La solution VPN doit supporter les protocoles les plus utilisés sur les réseaux publics en particulier IP.

Le VPN est un principe, il ne décrit pas l'implémentation effective de ces caractéristiques. C'est pourquoi il existe plusieurs produits différents sur le marché dont certains sont devenus standard, et même considérés comme des normes.

Fonctionnement d'un VPN

Les réseaux privés virtuels reposent sur la sécurité des données transmises au sein d'un réseau. Afin de rendre ces données sûres, il est nécessaire d'utiliser des algorithmes de cryptologie. Ces algorithmes sont regroupés dans ce que l'on appelle un « protocole de tunneling ». Ce protocole permet ainsi de sécuriser toutes les données qui transitent sur le réseau.

Lorsque l'on parle de VPN, on retrouve souvent le terme de « tunnel ». En effet, un réseau privé virtuel peut être assimilé à un tunnel dans lequel transitent des données. Le tunnel symbolise ici le fait qu'entre l'entrée et la sortie d'un VPN les données sont cryptées et, de ce fait, elles sont incompréhensibles par n'importe quelle personne située entre les deux extrémités. Dans le cas d'une connexion VPN entre deux machines, on appelle « client VPN » l'élément permettant de chiffrer/déchiffrer les données du côté utilisateur et « serveur VPN » le même élément du côté de l'organisation.

Voici un descriptif de la façon de communiquer d'un VPN :

• un utilisateur éprouve le besoin d'accéder au réseau privé virtuel d'une organisation (afin d'utiliser une ressource par exemple),
• sa requête est alors transmise en clair au système passerelle (qui peut être une solution hardware ou software),
• celui-ci se connecte au réseau distant par l'intermédiaire d'une infrastructure réseau public (non sûre) puis transmet la requête de façon chiffrée,
• le serveur VPN (côté organisation) récupère cette requête puis la déchiffre et répond alors à l'utilisateur de façon chiffrée,
• une fois la réponse reçue côté utilisateur, le système passerelle n'a plus qu'à déchiffrer et restituer les informations en clair à l'utilisateur.

Voilà de façon très synthétique le fonctionnement d'un échange au travers d'une connexion VPN. L'ensemble des réseaux privés virtuels est basé sur un protocole de tunneling. C'est ce protocole qui techniquement donne tout son sens au terme de « tunnel » (les différents protocoles de tunneling sont traités dans la suite du document).

Il existe deux façons de mettre en pratique un VPN :

• la façon « LAN to LAN »,
• la façon « RoadWarrior ».

Un VPN de type « LAN to LAN » est assez proche du terme de « réseau virtuel ». En effet, cette pratique consiste à relier deux réseaux locaux (géographiquement éloignés) en un seul (cf. figure 2.1). Ce genre de VPN a pour vocation d'être permanent. Il convient donc, dans ce genre de cas, d'être très vigilant quant à la sécurité du tunnel ainsi créé. En effet, les échanges entre les deux réseaux étant permanents, un pirate aura plus de matière pour décoder les données qui transitent.

Figure 2.1 - Représentation d'un VPN de type « LAN to LAN ».

En ce qui concerne un VPN de type « RoadWarrior », le principe est assez différent. En effet, dans ce cas de figure, un tunnel est créé entre un utilisateur distant et un réseau (cf. figure 2.2). Avec ce type de VPN, un employé a la possibilité d'accéder au réseau interne de son entreprise quelque soit sa localisation géographique. Il s'agit ici d'un VPN temporaire qui n'est pas destiné à être fixe. La connexion n'étant pas permanente, l'importance de la sécurité est « moindre » (bien qu'elle soit ici aussi importante).

Figure 2.2 - Représentation d'un VPN de type « RoadWarrior ».

Protocoles de tunneling

La réalisation d'un tunnel à travers un réseau consiste, globalement, à établir et à maintenir une connexion logique entre deux points. A travers cette connexion, on envoie différentes données à l'aide d'un protocole VPN (dit de « tunneling »). Les VPNs supportent différentes fonctionnalités telles que l'encryptage ou encore l'authentification afin d'assurer la sécurité des données qui transitent dans les tunnels établis.

Il existe deux types de tunneling :

• le tunneling dit « volontaire ». Dans ce cas, le tunnel est basé sur un client VPN qui doit réaliser la connexion, créer le tunnel pour finalement l'utiliser. Avec ce genre de tunneling l'utilisateur doit gérer le type de connectivité et c'est à lui de démarrer et d'arrêter le client VPN.
• le tunneling dit « transparent ». Celui-ci est basé sur un équipement matériel ou logiciel qui gère la connexion à l'insu de l'utilisateur. Celui-ci l'utilise d'une manière transparente et ne voit en aucun cas qu'il passe par un tunnel. Toutes les actions se font de manière transparente.

Parmi les protocoles tunneling les plus utilisés, on retrouve : PPTP, L2TP, IPSec ou encore SSL. Ces protocoles sont incompatibles entre eux, cela signifie que les deux extrémités du tunnel doivent être définies pour supporter le même protocole. Il est donc impossible d'utiliser deux protocoles différents pour une même connexion.

Nous aborderons ces différents protocoles dans la seconde partie de l’article.

Avantages et inconvénients d'un VPN

Avantages

La technologie VPN présente deux avantages principaux. Tout d'abord, cette technologie permet de réduire grandement les coûts relatifs à la connectivité. En effet, il n'est plus nécessaire d'établir des connexions longues distances via des lignes privées (très coûteuses), il suffit d'implémenter des tunnels VPN afin de réaliser un réseau privé à travers Internet.

Le second avantage est la flexibilité de cette solution. Par exemple, dans le cadre d'une organisation ayant plusieurs localisations géographiquement éloignées, il est très facile d'ajouter un nouveau site. Pour cela, il suffit de le connecter à Internet et de l'inclure sur le VPN de l'organisation.

Inconvénients

Cette technologie apporte des avantages non négligeables. Cependant comme toute technologie, elle a ses limites. Tout d'abord, on peut souligner le fait que la disponibilité et les performances d'un VPN dépendent en grande partie des fournisseurs de services et autres sous-traitants. Une organisation utilisant une architecture VPN ne contrôle pas tous les paramètres.

Deuxièmement, l'établissement d'un VPN réclame une forte expertise et une bonne compréhension de la sécurité informatique. Il est aussi nécessaire de bien connaître les technologies VPN (différents protocoles, solutions hardware et software...) afin de déterminer la solution la plus adaptée.

Pour finir, les technologies VPN ne suivent pas de normes bien spécifiques, c'est pourquoi il est souvent inévitable d'utiliser des équipements provenant d'un même constructeur afin d'assurer un bon fonctionnement.

Conclusion

Les réseaux privés virtuels sont nés de la nécessité, qu'ont de nombreuses organisations, de relier des sites géographiquement éloignés. En effet, ces organisations ont, pour la plupart, besoin d'un transfert de données confidentiel permettant de partager des informations sensibles. Cependant, l'établissement d'une connexion directe entre les différents sites est très coûteux, voire inabordable. D'où la création de ce type de réseau.

La technologie VPN permet de transmettre des informations de façon sécurisée au sein d'un réseau qui, lui, ne l'est pas. La majeure partie des VPNs utilise Internet comme réseau d'interconnexion. Il permet d'éviter l'utilisation de lignes spécialisées si coûteuses.

La technologie VPN n'est pas spécifiquement établie. En effet, il n'existe aucune vraie référence, chaque constructeur décrit son propre fonctionnement (d'où parfois la nécessité d'utiliser du matériel provenant d'une même enseigne). Chaque VPN repose sur un protocole de tunneling qui permet d'assurer la sécurité des informations transmises. Chaque protocole à ses avantages et ses inconvénients. Il est donc important de bien définir les besoins ainsi que le niveau de sécurité que l'on souhaite avant de mettre en place une quelconque solution. On trouve de nombreuses solutions sur le marché qui vont du logiciel au matériel. Cette technologie peut s'avérer difficile à appréhender. En effet, le grand nombre de protocoles et les différentes façons de la mettre en place portent facilement à confusion.

Pour conclure, cette technologie est une très bonne alternative aux lignes spécialisées très coûteuse. Cependant, il est nécessaire d'avoir des compétences relativement étendues sur le sujet pour établir un réseau virtuel privé compétitif.

Sources du projet

Prérequis

Bien entendu, lorsque l'on désire faire de l'eau, c'est pour la placer dans un décor. On imagine difficilement mettre de l'eau dans une scène noire. C'est pour ça que ce tutoriel se base sur un projet qui contient déjà une heightmap (Comment faire une heightMap), mais aussi une skybox. La skybox a toute son importance si l'on souhaite faire de l'eau en extérieur. En effet, la surface de l'eau va réfléchir le ciel de la skybox, donnant un peu plus de réalisme à notre réalisation.

Voilà en image notre terrain de départ :

Map de départ

Une petite précision, nous allons utiliser un repère un peu spécial, puisque l'axe représentant habituellement la profondeur (l'axe z) sera remplacé par l'axe y, l'axe z étant utilisé pour la hauteur. Si vous voulez appliquer le tutoriel suivant à d'autres types de repères, il vous suffira simplement de modifier les vecteurs que j'utilise pour les positions etc.

Comment ça marche ?

Pour comprendre comment faire de l'eau réaliste, il faut d'abord se mettre dans une situation réelle. Imaginons que je sois au bord d'un lac, quelque part dans notre beau pays. Un peu de soleil, de vent, quelques nuages. Si je regarde le lac, qu'est-ce que je vois?

Globalement, on voit le ciel être réfléchi dans l'eau, mais puisqu'il y a quelques vaguelettes à la surface du lac, cela déforme l'image du ciel dans l'eau. Si je me rapproche du lac, je vois aussi un peu au travers. Pour les mêmes raisons, ce que je vois du fond de l'eau est déformé.

On a donc grossièrement trois phénomènes : une part de réfraction de la lumière dans l'eau qui nous laisse entrevoir en profondeur, une part de réflexion qui nous fait voir le ciel à la surface de l'eau et un phénomène de déformation de ce que l'on voit à cause des vagues.

Maintenant si nous regardons en détails, on remarque que plus on regarde au loin sur le lac, moins on voit en profondeur, et plus le ciel est réfléchi. Inversement, si l'on regarde l'eau à nos pieds, la profondeur est plus visible que la réflexion du ciel.

Voilà! Maintenant que nous avons identifié comment notre œil perçois l'eau d'un lac, il ne nous reste plus qu'à imiter tous ces phénomènes pour avoir un lac en 3D plus vrai que nature!

Principe utilisé

La première idée que l'on peut avoir sur le "comment faire?", c'est d'imaginer une sorte de plan déformé par les vagues. Cela nous donnerait beaucoup de vertices à définir pour avoir un résultat réaliste. Seulement, faire bouger ces vertices pour rendre un effet de vague utiliserait beaucoup la ressource précieuse qu'est notre CPU. Nous allons donc ruser! Nous allons faire une surface plane et lisse composée de deux triangles uniquement, autrement dit six vertices! Mais alors, comment rendre la surface de l'eau mouvementée? Et bien nous allons appliquer une texture d'eau avec des vagues et la faire vivre dans le pixel shader! Vous aller voir que le résultat est plus que satisfaisant, et tout le calcul va donc se faire au niveau de la carte graphique. C'est parti!

La réfraction

Puisque nous allons jouer sur les textures pour faire notre rendu du lac, il nous faut une première texture qui représente ce que l'on voit sous la surface de l'eau. Nous avons donc besoin de quelques variables pour stocker tout ça :

// Indique la hauteur de l'eau
public const float waterHeight = 5.0f;
RenderTarget2D refractionRenderTarget;
Texture2D refractionMap;

Puisque nous allons utiliser une renderTarget pour récupérer le rendu de la map lorsque l'on affiche uniquement la partie sous l'eau, il nous faut l'initialiser dans notre méthode LoadContent :

PresentationParameters pp = device.PresentationParameters;
refractionRenderTarget = new RenderTarget2D(device, pp.BackBufferWidth, pp.BackBufferHeight, 1, device.DisplayMode.Format);

Nous voulons afficher uniquement la partie de la map qui est sous l'eau et cacher la partie au-dessus de l'eau. Pour ce faire, nous allons utiliser un plan horizontal, de sorte que la partie au-dessus de ce plan soit cachée. La manière la plus simple pour définir un plan mathématiquement est de définir la normale à ce plan et la distance qui le sépare de l'origine du repère (0,0,0). Voici la fonction qui sera chargée de créer notre plan :

private Plane CreatePlane(float height, Vector3 planeNormalDirection, Matrix currentViewMatrix, bool clipSide)
        {
            planeNormalDirection.Normalize();
            Vector4 planeCoeffs = new Vector4(planeNormalDirection, height);
            if (clipSide)
                planeCoeffs *= -1;
            Matrix worldViewProjection = currentViewMatrix * this.cam.projectionMatrix;
            Matrix inverseWorldViewProjection = Matrix.Invert(worldViewProjection);
            inverseWorldViewProjection = Matrix.Transpose(inverseWorldViewProjection);
            planeCoeffs = Vector4.Transform(planeCoeffs, inverseWorldViewProjection);
            Plane finalPlane = new Plane(planeCoeffs);
            return finalPlane;
        }

Comme je vous l'ai dit, nous avons besoin de la hauteur de ce plan (qui correspond à la hauteur de la surface de l'eau), du vecteur normal à ce plan, de la matrice de vue et d'un booléen qui va nous permettre d'afficher ce qui est au-dessous ou au-dessus du plan (utile pour la réflexion). Nous avons besoin de récupérer l'inverse de la matrice de la caméra pour modifier les coordonnées du plan car il sera affiché après que les vertices du terrain aient été placées dans la vue de la caméra. Pour ce faire, il suffit d'abord de prendre l'inverse de la matrice, puis de la transposer. Enfin on transforme les coordonnées du plan avec cette matrice avant de créer le plan en lui-même.

Il nous faut maintenant une fonction qui va être chargée de dessiner la map avec uniquement la partie sous le niveau de l'eau :

private void DrawRefractionMap(GameTime gameTime)
        {
            Plane refractionPlane = CreatePlane(waterHeight + 1f, new Vector3(0, 0, -1), cam.viewMatrix, false);
            device.ClipPlanes[0].Plane = refractionPlane;
            device.ClipPlanes[0].IsEnabled = true;
            device.SetRenderTarget(0, refractionRenderTarget);
            device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1.0f, 0);
 
            device.RenderState.CullMode = CullMode.CullClockwiseFace;
 
            heightMap.DrawTerrain(cam, this.effect);
            device.ClipPlanes[0].IsEnabled = false;
 
            device.SetRenderTarget(0, null);
            refractionMap = refractionRenderTarget.GetTexture();
        }

Ici nous appelons donc notre méthode qui va créer le plan en lui précisant que nous voulons un plan légèrement au dessus du niveau de l'eau et que nous voulons afficher la partie en dessous du plan (dernier paramètre à false).

Ensuite on indique au device d'utiliser ce plan pour enlever de la scène ce qui sera au dessus. On termine en dessinant la map dans la renderTarget, et en sauvegardant sous forme de texture le rendu.

Si vous voulez vérifier le rendu obtenu dans la renderTarget, vous pouvez utiliser l'instruction suivante à la fin de la fonction :

refractionMap.Save("refractionmap.jpg", ImageFileFormat.Jpg);

Je vous préviens tout de suite, cela va grandement ralentir le FPS de votre application, puisque nous allons appeler notre méthode DrawRefractionMap(GameTime gameTime) au début de notre fonction Draw(). Je vous rappelle que par défaut cette fonction est appelée 60 fois par secondes. Imaginez ce que ça fait d'enregistrer un fichier sur le disque 60 fois par secondes... Donc une fois que vous aurez vérifié le résultat, je vous conseil d'enlever cette ligne!

Voici ce que l'on obtient avec notre map :

Réfraction

Cette image montre exactement la même map que nous avons vu au début, mais avec la partie au-dessus de l'eau coupée. On ne voit donc que ce qui est sous l'eau.

Voilà, nous avons récupéré la partie immergée de la map, qui sera visible à travers l'eau via la réfraction de la lumière. Passons au second phénomène : la réflexion!

La réflexion

Nous avons vu comment obtenir, dans une texture, uniquement la partie immergée de la map, nous allons maintenant nous intéresser à la partie réfléchie par l'eau, donc à la partie au-dessus de la surface. De la même manière que pour la réfraction, nous allons sauvegarder en mémoire la texture correspondant pour chaque pixel du lac aux pixels de l'environnement qui doivent être réfléchis. Il faut donc déclarer une nouvelle texture et une renderTarget spécifique dans notre classe :

RenderTarget2D reflectionRenderTarget;
Texture2D reflectionMap;

Tout comme pour la réfraction, il faut initialiser notre renderTarget dans la méthode LoadContent() :

reflectionRenderTarget = new RenderTarget2D(device, pp.BackBufferWidth,
pp.BackBufferHeight, 1, device.DisplayMode.Format);

La question qui se pose maintenant est comment afficher la partie réfléchie par le lac? En fait c'est assez simple. Puisque nous considérons notre lac comme une surface plane, cela veut dire que pour un point donné du lac, le pixel réfléchi se trouve sur un vecteur qu'il est possible de calculer en utilisant le vecteur incident et le vecteur normal au plan du lac :

Réflexion

A partir de cette observation, on en déduit que si on place la caméra sur le rayon réfléchi, à une position qui correspond exactement à l'application d'une symétrie horizontale dont l'axe est le niveau de l'eau, la caméra pourra voir la partie de l'environnement qui doit être réfléchie pour chaque pixel du lac

Dans notre projet, nous avons la classe Camera qui s'occupe complètement de la gestion de la caméra. Ajoutons la matrice de la seconde caméra qui se trouve sur le vecteur correspondant au rayon réfléchi :

public Matrix reflectionViewMatrix;

Déterminer la position exacte de notre seconde caméra est chose facile à partir de la position de la caméra principale. Puisque nous appliquons une symétrie horizontal, seul la hauteur de la caméra va être différente, on modifie donc la coordonné Z de notre nouvelle caméra (si vous utilisez un repère classique, il s'agit de la coordonné Y) dans notre constructeur de caméra :

Vector3 reflCameraPosition = cameraPosition;
reflCameraPosition.Z = -cameraPosition.Z + Game.waterHeight * 2;
Vector3 reflTargetPos = cameraFinalTarget;
reflTargetPos.Z = -cameraFinalTarget.Z + Game.waterHeight * 2;
reflectionViewMatrix = Matrix.CreateLookAt(reflCameraPosition, reflTargetPos, new Vector3(0, 0, 1));

Si la caméra bouge, il faut mettre à jour la position de la seconde caméra dans la méthode UpdateViewMatrix() :

Vector3 reflCameraPosition = cameraPosition;
reflCameraPosition.Z = -cameraPosition.Z + Game.waterHeight * 2;
Vector3 reflTargetPos = cameraFinalTarget;
reflTargetPos.Z = -cameraFinalTarget.Z + Game.waterHeight * 2;
Vector3 cameraRight = Vector3.Transform(new Vector3(0, 1, 0), cameraRotation);
Vector3 invUpVector = Vector3.Cross(cameraRight, reflTargetPos - reflCameraPosition);
reflectionViewMatrix = Matrix.CreateLookAt(reflCameraPosition, reflTargetPos, invUpVector);

Maintenant que nous avons la caméra qui nous intéresse pour obtenir la partie de la scène qui sera réfléchie, nous allons créer la méthode DrawReflectionMap() pour sauvegarder dans une texture cette partie de la scène :

private void DrawReflectionMap(GameTime gameTime)
        {
            device.RenderState.CullMode = CullMode.CullClockwiseFace;
            Plane reflectionPlane = CreatePlane(waterHeight - 1f, new Vector3(0, 0, -1), cam.reflectionViewMatrix, true);
            device.ClipPlanes[0].Plane = reflectionPlane;
            device.ClipPlanes[0].IsEnabled = true;
            device.SetRenderTarget(0, reflectionRenderTarget);
            device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1.0f, 0);
            heightMap.DrawTerrain(cam, this.effect, true);
 
            device.RenderState.CullMode = CullMode.CullCounterClockwiseFace;
            skyBox.DrawSkybox(cam.reflectionViewMatrix);
            device.ClipPlanes[0].IsEnabled = false;
            device.SetRenderTarget(0, null);
            reflectionMap = reflectionRenderTarget.GetTexture();
        }

On commence donc par créer le plan qui va couper la scène pour n'afficher que la partie au-dessus de l'eau, puis on dessine la map et la skybox. Vous remarquerez qu'avant de dessiner la skybox, on change le CullMode (qui permet de préciser de quelle façon les deux cotés d'un triangle doivent être dessiné) de sorte que la partie qui correspond au dos des triangles soit affichée. En effet, notre skybox constitue un énorme cube dont on a peint la partie intérieure.

On fini par sauvegarder dans une texture la scène affichée. De la même manière que pour la réfraction, vous pouvez ajouter une instruction pour sauvegarder dans une image la texture et vérifier que le résultat est satisfaisant. Dans le cas de notre map, on obtient le résultat suivant :

Partie réfléchis de la scène

Comme vous pouvez le constater, nous voyons uniquement le ciel. En effet, nous avons mis le niveau de l'eau au raz de celui de la terre. Cependant, si le niveau de l'eau avait été plus bas, vous vous doutez bien que l'on verrais apparaitre sur la texture les "bords" du lac. Voici un exemple en utilisant la même map, mais en diminuant le niveau de l'eau :

Autre exemple de réflexion

1er rendu : le miroir

Maintenant que les préparatifs sont terminés, il est temps d'afficher notre lac! Le principe va être d'appliquer notre texture de réflexion sur notre lac. Il nous faut donc déjà créer le lac. Ajoutons de nouveaux attributs à notre classe heightMap :

VertexBuffer waterVertexBuffer;
VertexDeclaration waterVertexDeclaration;

Puis nous devons créer les deux triangles qui forment notre lac. Nous allons faire cela dans une nouvelle méthode :

private void SetUpWaterVertices()
        {
            VertexPositionTexture[] waterVertices = new VertexPositionTexture[6];
 
            int width = this.terrainWidth;
            int length = this.terrainLength;
            // Oui...notre map est gigantesque...
            this.terrainLength = 50000;
            this.terrainWidth = 50000;
 
            // On place notre lac pour qu'il recouvre le trou au milieu de la map
            waterVertices[0] = new VertexPositionTexture(new Vector3(20000, -28000, Game.waterHeight), new Vector2(0, 1));
            waterVertices[2] = new VertexPositionTexture(new Vector3(35000, -28000, Game.waterHeight), new Vector2(1, 0));
            waterVertices[1] = new VertexPositionTexture(new Vector3(35000, -14000, Game.waterHeight), new Vector2(0, 0));
 
            waterVertices[3] = new VertexPositionTexture(new Vector3(20000, -14000, Game.waterHeight), new Vector2(0, 1));
            waterVertices[5] = new VertexPositionTexture(new Vector3(35000, -14000, Game.waterHeight), new Vector2(1, 1));
            waterVertices[4] = new VertexPositionTexture(new Vector3(20000, -30000, Game.waterHeight), new Vector2(1, 0));
 
            waterVertexBuffer = new VertexBuffer(device, waterVertices.Length * VertexPositionTexture.SizeInBytes, BufferUsage.WriteOnly);
            waterVertexBuffer.SetData(waterVertices);
 
            this.terrainWidth = width;
            this.terrainLength = length;
        }

On appelle maintenant la methode dans LoadVertices() :

SetUpWaterVertices();
waterVertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements)

Passons à la méthode qui va dessiner notre lac :

public void DrawWater(Camera cam, Effect effect, float time, Texture2D refractionMap, Texture2D reflectionMap)
        {
            effect.CurrentTechnique = effect.Techniques["Lake"];
            Matrix worldMatrix = Matrix.Identity;
            effect.Parameters["xWorld"].SetValue(worldMatrix);
            effect.Parameters["xView"].SetValue(cam.viewMatrix);
            effect.Parameters["xReflectionView"].SetValue(cam.reflectionViewMatrix);
            effect.Parameters["xProjection"].SetValue(cam.projectionMatrix);
            effect.Parameters["xReflectionMap"].SetValue(reflectionMap);
            effect.Parameters["xRefractionMap"].SetValue(refractionMap);
 
            effect.Begin();
            foreach (EffectPass pass in effect.CurrentTechnique.Passes)
            {
                pass.Begin();
 
                device.Vertices[0].SetSource(waterVertexBuffer, 0, VertexPositionTexture.SizeInBytes);
                device.VertexDeclaration = waterVertexDeclaration;
                int noVertices = waterVertexBuffer.SizeInBytes / VertexPositionTexture.SizeInBytes;
                device.DrawPrimitives(PrimitiveType.TriangleList, 0, noVertices / 3);
 
                pass.End();
            }
            effect.End();
        }

Cette méthode va utiliser notre technique "Lake" contenue dans notre fichier d'effet (MapEffect.fx).

Vous remarquerez que l'on donne en paramètres à l'effet la caméra principal, la caméra utilisée pour la réflexion ainsi que les textures de réfraction et de réflexion que nous avons obtenues dans les précédentes parties. Nous pouvons maintenant appeler cette fonction dans la méthode Draw de notre classe principale :

float time = (float)gameTime.TotalGameTime.TotalMilliseconds / 100.0f;
heightMap.DrawWater(cam, effect, time, refractionMap, reflectionMap);

Venons en justement à notre technique "Water". Nous allons la créer. Pour cela, allez dans votre fichier d'effet et déclarez quelques variables qui nous serviront pour notre effet de lac

float4x4 xReflectionView;
//------- Texture Samplers --------
Texture xReflectionMap;
sampler ReflectionSampler = sampler_state { texture =  ; magfilter = LINEAR; minfilter = LINEAR; mipfilter=LINEAR; AddressU = mirror; AddressV = mirror;};
 
Texture xRefractionMap;
 
sampler RefractionSampler = sampler_state { texture =  ; magfilter = LINEAR; minfilter = LINEAR; mipfilter=LINEAR; AddressU = mirror; AddressV = mirror;};

On définit ensuite la technique "Lake" avec son vertex shader et son pixel shader :

//------- Technique: Lake --------
struct WVertexToPixel
{
    float4 Position                 : POSITION;
    float4 ReflectionMapSamplingPos    : TEXCOORD1;
};
 
struct WPixelToFrame
{
    float4 Color : COLOR0;
};
 
WVertexToPixel LakeVS(float4 inPos : POSITION, float2 inTex: TEXCOORD)
{
    WVertexToPixel Output = (WVertexToPixel)0;
 
    float4x4 preViewProjection = mul (xView, xProjection);
    float4x4 preWorldViewProjection = mul (xWorld, preViewProjection);
    float4x4 preReflectionViewProjection = mul (xReflectionView, xProjection);
    float4x4 preWorldReflectionViewProjection = mul (xWorld, preReflectionViewProjection);
 
    Output.Position = mul(inPos, preWorldViewProjection);
    Output.ReflectionMapSamplingPos = mul(inPos, preWorldReflectionViewProjection);
 
    return Output;
}
 
WPixelToFrame LakePS(WVertexToPixel PSIn)
{
    WPixelToFrame Output = (WPixelToFrame)0;        
 
    float2 ProjectedTexCoords;
    ProjectedTexCoords.x = PSIn.ReflectionMapSamplingPos.x/PSIn.ReflectionMapSamplingPos.w/2.0f + 0.5f;
    ProjectedTexCoords.y = -PSIn.ReflectionMapSamplingPos.y/PSIn.ReflectionMapSamplingPos.w/2.0f + 0.5f;    
 
    Output.Color = tex2D(ReflectionSampler, ProjectedTexCoords);    
 
    return Output;
}
 
technique Lake
{
    pass Pass0
    {
        VertexShader = compile vs_1_1 LakeVS();
        PixelShader = compile ps_2_0 LakePS();
    }
}

Dans le vertex shader on s'occupe de calculer les coordonnées de la texture de réflexion. Ensuite dans le pixel shader on calcule la position du vertex courant en 2D ainsi que la position correspondante vue par la caméra qui filme la réflexion.

Voilà le résultat que l'on obtient avec notre map :

Effet miroir

Le reflet du ciel dans notre lac est bien visible!

Ajouter l'effet de vague

Nous allons à présent ajouter les vaguelettes pour rendre la surface de notre lac plus réaliste. La difficulté réside dans le fait que nous n'avons que deux triangles, donc six vertices. Dans ce contexte, il est donc impossible de déformer les triangles pour faire des vagues. Comme je vous l'expliquais au début de ce tutoriel, nous allons jouer avec une texture sur laquelle il y a des vagues, et l'appliquer à nos deux triangles. Ce qu'il faut comprendre, c'est que pour une vague, le point au creux de la vague et le point sur le haut de la vague ont le même vecteur normal qu'une surface plane. Ainsi sur ces pixels, le point réfléchi correspondant est exactement le pixel de la texture de réflexion. En revanche, les autres points de la vague subissent une déformation qui change ce qu 'ils réfléchissent.
Il nous faut donc une façon de mesurer cette déformation pour chaque pixel. C'est ici qu'intervient la texture de lac! Nous allons utiliser une technique appelé Bump mapping qui va nous permettre d'ajouter du relief à notre lac, et donc des vagues.
Voici à quoi ressemble la texture que nous utiliserons pour ce tutoriel :

Texture de base pour le bump mapping

Importation la texture dans notre projet :

Texture2D waterBumpMap;

Puis nous faisons l'initialisation dans la méthode LoadContent() :

waterBumpMap = Content.Load ("waterbump");

Enfin on la transmet au fichier d'effet dans notre méthode DrawWater() :

effect.Parameters["xWaterBumpMap"].SetValue(waterBumpMap);

Maintenant, nous allons voir le code HLSL correspondant dans le fichier d'effet :

Texture xWaterBumpMap;
sampler WaterBumpMapSampler = sampler_state { texture =  ; magfilter = LINEAR; minfilter = LINEAR; mipfilter=LINEAR; AddressU = mirror; AddressV = mirror;};

Pour pouvoir prendre en compte la texture de notre Bump map dans chaque pixel, il faut modifier la structure de sortie du vertex shader (WVertexToPixel dans notre MapEffect.fx) en ajoutant l'attribut suivant :

float2 BumpMapSamplingPos        : TEXCOORD2;

Ainsi que le vertex shader lui même :

Output.BumpMapSamplingPos = inTex;

Dans le pixel shader nous récupérons ces coordonnées :

float4 bumpColor = tex2D(WaterBumpMapSampler, PSIn.BumpMapSamplingPos);

Un pixel se définit par ses 3 composantes de couleur (R, G, B) et un coefficient de transparence. L'instruction précédente implique que ce sont les composantes R et G de bumpColor qui nous indiquent à quel point il faut perturber la texture de réflexion. Cependant ces valeurs sont comprises dans l'intervalle [0;1] alors que nous avons besoins de valeurs dans [-1;1] pour avoir des perturbations différentes. Pour passer du premier intervalle au seconde, il suffit de soustraire le résultat par 0.5 et de multiplier par 2 :

float2 perturbation = (bumpColor.rg - 0.5f)*2.0f;

On obtient maintenant facilement la partie de la texture correspondante et on lui applique la perturbation :

float2 perturbatedTexCoords = ProjectedTexCoords + perturbation;
Output.Color = tex2D(ReflectionSampler, perturbatedTexCoords);

Il reste tout de même un problème. La texture du lac utilisée reste fixe, ce qui implique que les vagues que nous aurons sur le lac seront toujours de la même taille. Ainsi si vous vouliez faire des vagues plus grosses ou plus petites, c'est raté...
Mais bon, nous allons corriger cela! Ajoutez deux variables à notre fichier d'effet :

float xWaveLength;
float xWaveHeight;

Une pour faire varier la longueur des vagues, l'autre pour faire varier leur hauteur.
Pour appliquer le changement de la longueur de la vague, il suffit de réduire les coordonnées de texture, de sorte que plus cette valeur sera grande, plus les coordonnées seront petites, et plus la texture sera étirée. Modifiez donc la ligne suivante dans le vertex shader :

Output.BumpMapSamplingPos = inTex/xWaveLength;

Quand à la hauteur des vagues, elle va jouer sur la perturbation de la texture, en relation avec la longueur des vagues précédemment calculée. En effet, plus une vague est haute et courte, plus la pente est forte et la perturbation grande. En revanche, une hauteur de vague faible et une longueur forte implique des vagues presque plates, donc peu de perturbations. Modifiez le pixel shader comme suit :

float2 perturbation = xWaveHeight*(bumpColor.rg - 0.5f)*2.0f;

Maintenant que la longueur et la largeur de nos vagues est prise en compte dans le fichier d'effet, il nous faut encore leur attribuer des valeurs dans dans notre méthode DrawWater() :

effect.Parameters["xWaveLength"].SetValue(0.1f);
effect.Parameters["xWaveHeight"].SetValue(1f);

Voilà le résultat obtenu avec notre map :

Vagues sur le lac

Équilibrer la réfraction et la réflexion

Nous avons appliqué la technique de Bump mapping pour obtenir les perturbations à appliquer sur la texture de réflexion, nous allons donc faire la même chose pour la réfraction puis équilibrer le rendu de sorte que la proportion de réflexion et de réfraction utilisée par pixel dépende de l'angle de vue.
Appliquons la technique du Bump mapping pour la réfraction. Modifiez la structure de sortie du vertex shader en ajoutant deux variables :

float4 RefractionMapSamplingPos : TEXCOORD3;
float4 Position3D                : TEXCOORD4;

Ensuite modifiez le vertex shader :

Output.RefractionMapSamplingPos = mul(inPos, preWorldViewProjection);
Output.Position3D = mul(inPos, xWorld);

Vous remarquerez qu'à présent nous récupérons la position 3D du vertex. Cela nous permettra de calculer le vecteur de direction de la caméra.
Au niveau du pixel shader, nous avons besoin de sauvegarder dans une variable la couleur obtenue avec la réflexion et faire le même procédé avec la réfraction :

float2 ProjectedRefrTexCoords;
ProjectedRefrTexCoords.x = PSIn.RefractionMapSamplingPos.x/PSIn.RefractionMapSamplingPos.w/2.0f + 0.5f;
ProjectedRefrTexCoords.y = -PSIn.RefractionMapSamplingPos.y/PSIn.RefractionMapSamplingPos.w/2.0f + 0.5f;
float2 perturbatedRefrTexCoords = ProjectedRefrTexCoords + perturbation;
float4 refractiveColor = tex2D(RefractionSampler, perturbatedRefrTexCoords);
float4 reflectiveColor = tex2D(ReflectionSampler, perturbatedTexCoords);

Si vous voulez vous faire une idée de ce à quoi peut ressembler le lac si on ne considère que la réfraction, il vous suffit de changer l'outpout :

Output.Color = refractiveColor;

Le résultat est assez...intéressant :

Vague sur le lac + réfraction

Comme je vous l'ai expliqué précédemment, une matière telle que l'eau réfléchit et réfracte la lumière. C'est ici qu'intervient le terme de Fresnel qui décrit la quantité de lumière qui est réfléchie et celle qui est réfractée pour un vecteur incident donné.
Il nous faut donc calculer le vecteur dont l'origine est la caméra et la destination du pixel en cours de traitement. Nous aurons donc besoin de renseigner la position de la caméra via une variable du fichier d'effet :

float3 xCamPos;

Ensuite on calcule le vecteur dans le pixel shader :

float3 eyeVector = normalize(xCamPos - PSIn.Position3D);

Pour calculer le terme de Fresnel il nous faut aussi le vecteur normal au plan tangent à la vague passant par le pixel traité. Dans un premier temps, nous allons considérer que ce vecteur correspond au vecteur normal à notre lac, en tant que plan horizontal :

float3 normalVector = float3(0,0,1);

Dès lors, nous sommes capable de calculer la couleur d'un pixel en fonction de la réfraction, la réflexion et le terme de Fresnel :

Output.Color = lerp(reflectiveColor, refractiveColor, fresnelTerm);

N'oubliez pas d'affecter la variable xCamPos dans la méthode DrawWater() :

effect.Parameters["xCamPos"].SetValue(cam.Position);

Le résultat est déjà très satisfaisant si l'on se rapproche de l'eau :

Réfraction + réflexion

Pour matifier notre lac, ce qui le rendra plus beau, nous allons rajouter un peu de bleu dans le pixel shader :

// On sauvegarde la couleur précédente
float4 combinedColor = lerp(reflectiveColor, refractiveColor, fresnelTerm);
float4 dullColor = float4(0.3f, 0.3f, 0.5f, 1.0f);
Output.Color = lerp(combinedColor, dullColor, 0.2f);

Ainsi, la couleur finale du pixel sera composée à 80% de la couleur que nous avons calculé avec les réflexion et la réfraction et à 20% de notre bleu dullColor.
Voyez vous-même la différence :

Ajout de bleu

Faites bouger les choses!

Notre lac est plutôt réussi, mais il manque encore un peu de dynamisme! Comme je vous l'ai expliqué au début, ce qui génère les vaguelettes à la surface d'un lac est le vent.
Nous allons donc avoir besoin de la direction et la force du vent, mais aussi du temps courant dans notre fichier d'effet :

float xTime;
float3 xWindDirection;
float xWindForce;

On modifie ensuite le vertex shader pour prendre en compte le vent :

float3 windDir = normalize(xWindDirection);
float3 perpDir = cross(xWindDirection, float3(0,0,1));
float ydot = dot(inTex, xWindDirection.xy);
float xdot = dot(inTex, perpDir.xy);
float2 moveVector = float2(xdot, ydot);
moveVector.y += xTime*xWindForce;
Output.BumpMapSamplingPos = moveVector/xWaveLength;

On renseigne ensuite ces variables dans notre méthode DrawWater() :

 effect.Parameters["xTime"].SetValue(time);
 effect.Parameters["xWindForce"].SetValue(20.0f);
 effect.Parameters["xWindDirection"].SetValue(new Vector3(1, 0, 0));

Cette fois une capture d'écran ne suffirait pas à vous montrer le résultat, lancez l'application, et vous verrez l'effet du vent sur le lac.

Conclusion

J'espère qu'à travers ce tutoriel vous avez compris comment faire de l'eau en 3D, avec XNA en l'occurrence. Nous avons vu les concepts fondamentaux qui permettent de réaliser de l'eau en travaillant sur les textures, ce qui nous donne un résultat intéressant. De plus, cette méthode implique peu de travail du coté du CPU puisqu'elle s'applique à faire travailler la carte graphique via les shaders.

Loin de la classique navigation page par page introduite par le HTML, Flash propose des sites vivants, réactifs, faisant la part belle à la découverte. C’est donc à cette réinvention de l’interface que nous nous intéresserons au sein de cet article, et ce à travers un panorama de ce qu’a proposé le web à ce sujet depuis ces dernières années.

Genèse

A partir de 1998 apparurent les premiers sites exploitant entièrement le potentiel de Flash en terme animation. Ceux-ci tiraient parti de la gestion native des graphiques vectoriels pour présenter un site adaptable à n’importe quelle résolution d’écran. A cela était ajoutée une myriade d’effets visuels et sonores, la moindre transition étant animée. Bien qu’ayant mal vieilli, les sites ci-dessous n’en demeurent pas moins les ancêtres des sites Flash d’aujourd’hui.

http://www.eye4u.com/home/ (1998)

http://www.balthaser.com/b1/home.html (1998)

Plus récent, ce dernier sorti en 2001 fut l’un des sites web dont le design fut le plus copié :

http://v3.2a-archive.com

Expérimentations

Encore tout jeune, le Flash se cherche. L’un des sites les plus expérimentaux est incontestablement celui de Yugo Nakamura, designer Japonais qui mit en ligne dès 1998 yugop.com, laboratoire foisonnant d’expériences interactives :

http://yugop.com

Beaucoup suivront ses traces :

http://lab.mathieu-badimon.com/

Navigation

Aux expériences abstraites viennent s’ajouter celles tentant de définir des nouveaux modèles de navigation. L’une des plus notables est celle d'un site allemand qui tente de répondre la question suivante : est-il possible de concevoir des interfaces utilisables sans cliquer ? A travers différents tableaux et mini-jeux, c’est l'immersion dans un monde sans clic que l'utilisateur est amené à découvrir :

http://www.dontclick.it

Ces expériences sont quelques fois utilisées au sein de solutions réelles comme c’est le cas pour cette boutique en ligne qui propose plusieurs navigations innovantes au sein de ses produits : par couleur, via une ligne de temps, par géolocalisation, etc…

http://www.etsy.com/buy.php

Vidéo

Les capacités de Flash au niveau de la vidéo furent également exploitées au maximum. Cela aboutit à des sites toujours plus réalistes pouvant présenter une navigation originale comme ce que propose Ikea sur son site promotionnel :

http://www.ikea.com/ms/sv_SE/kampanj/fy06_dromkok/dromkok.html

http://www.leschinois.com

Illusion de 3D

L’une des principales utilisations de la vidéo en termes d’interface fut de servir de transition entre écrans fixes pour produire une illusion de 3D. Les différentes scènes 3D sont ainsi précalculées et intégrées au sein du site web pour former un ensemble cohérent.

http://www.whoswestudios.com/flashsite.html

http://monoedge.com/main

http://www.interactivehrp.com/aaatown/

3D Temps Réel

Avec la croissance de la puissance des ordinateur, Flash devient en mesure de faire tourner des applications en véritable 3D interactive. Bien que non inclus dans le kit de développement par défaut, plusieurs bibliothèques de 3D virent le jour parmi lesquelles Papervision, Alternativa3D ou encore DirectFlex. La 3D temps réel dans Flash est encore peu utilisée mais chaque nouvelle production repousse les limites techniques en regroupant vidéo, audio, 3D et navigation au sein d’un univers complexe.

http://www.barcinski-jeanjean.com/

http://www.ecodazoo.com/

L’application suivante présente un concept de film visible à 360° :

http://www.villmer.com/

http://www.whitevoid.com/o2cando/

Cette dernière démonstration présente un concept de bureau 3D en Flash exporté sous forme d’application grâce à Adobe Air :

http://www.youtube.com/watch?v=Kz5RzBS7seg

Webcam

Le support de la webcam fut également une source d’inspiration pour les créateurs. Le site ci-dessous a ainsi entièrement basé sa navigation sur un contrôle via la webcam, les mouvements de la tête faisant office de clics :

http://www.hrp.com

Réalité augmentée

Consistant à ajouter en surimpression un environnement 3D à de la vidéo, la réalité augmentée est encore peu répandue. Toutefois, certaines entreprises n’hésitent pas à tenter l’expérience comme c’est le cas d’Ubisoft et son site promotionnel pour Assasins Creed 2 :

http://assassinscreed.fr.ubi.com/assassins-creed-2/teaser/

http://ge.ecomagination.com/smartgrid/#/augmented_reality

Ecrans de chargement

La taille des sites Web évoluant parallèlement à la croissance du débit Internet, les écrans de chargement ne disparurent pas du Web avec la diffusion du haut débit. Un site s’est même chargé de recenser les plus réussis d’entres-eux :

http://www.prettyloaded.com

Immersion

Flash fut même utilisé pour jouer des tours au visiteur en empruntant les traits du site web d’origine pour mieux le singer :

http://producten.hema.nl

http://www.youtube.com/wariolandshakeit2008

Conclusion

Malgré les critiques, Flash peut se targuer d’avoir redéfini ce que peut proposer le web en termes d’interactivité. Grâce à la démocratisation du haut débit, tout le monde peut désormais avoir accès à un contenu riche, multimédia et de plus en plus immersif. Que ce soit via la vidéo, la 3D ou la combinaison des deux, Flash n’a pas encore révélé toutes ses surprises.

Si un site non présent sur cette page vous a marqué, n'hésitez pas à le partager dans les commentaires.

Interview sur Flash et sa concurrence from Vimeo.

Un grand merci à Michaël Chaize et Thibault Imbert pour nous avoir permis de réaliser ces interviews.

Nous vous avions proposé il y a quelques temps une interview exclusive de Michaël Chaize et Thibault Imbert, professionnels des produits Flex et Creative Suite chez Adobe France, à propos de l'Adobe MAX 2009. Nous vous offrons maintenant une nouvelle interview de nos deux compères à propos de la plateforme Flash, de ses nouveautés et de son ouverture sur le marché du mobile.

Interview sur la Plateforme Flash from Vimeo.

En octobre dernier au Los Angeles Convention Center en Californie, s'est tenue la dernière édition de ces Adobe MAX. Quelques chanceux ont pu y participer et parmis eux deux représentants d'Adobe France, Michaël Chaize et Thibault Imbert, ont eut l'immense privilège de réaliser une présentation: "A Deep Dive Into Ten Innovative Flash Projects" (une plongée dans dix projets Flash novateurs).

Les étudiants de la spécialisation MTI sont allés à leur rencontre afin qu'ils puissent nous faire partager leur expérience et leur témoignage.

Interview Adobe Max 2009 from Vimeo.

Cet article va vous expliquer ce qu'est AviSynth, quelle est son intérêt et comment réussir à utiliser la puissance des filtres qui le compose. Avec ces scripts AviSynth, vous pourrez dans un second temps vous attaquer à des encodages précis et de qualité.

Présentation

AviSynth est ce que l'on appelle un Frameserver, en français un serveur d'images. C'est à dire qu'AviSynth agit entre votre source vidéo ou audio (la vidéo que vous voulez compresser ou réenregistrer) et votre logiciel d'encodage à condition, bien sûr que celui-ci sache ouvrir des fichiers AVS. Avisynth fournit, image par image, votre film à votre encodeur (VirtualDubMod, TMPGEnc, Cinema Craft Encoder, Producer, FFMPEG, etc....).

Le fait qu'il alimente votre application vidéo images par images vous permet de traiter des fichiers de très grosse taille (dépassant les 20go) là où ces mêmes applications ne sauraient gérer des fichiers de telles tailles (limite fatidique pour certaines applications vidéo) puisque quand AviSynth leur fourni ces images une par une, les applications n'ont aucune information concernant la taille finale du fichier et n’ont pas besoin de charge la source en ram par exemple. De plus, toutes les sources compatibles AviSynth pourront devenir compatibles avec les logiciels encodeurs bien que ceux-ci ne les acceptaient pas au départ.

Mais AviSynth ne fait pas que servir des images à votre logiciel d'encodage, il a aussi bien d'autres fonctions:

• Il vous permet, dans les dernières versions, de travaillez dans l'espace couleur YUV.
• Il peut filtrer votre film, AviSynth possède les filtres vidéo les plus puissants et les plus performants.
• Il vous permet d'ouvrir des fichiers vidéo possédant des formats que votre programme d'encodage ne saurait reconnaître, comme le MPEG, le MOV (QuickTime), du WMV (Windows Media) ou encore du RealVideo.
• Il est un économiseur d'espace disque puisqu'il ne créer aucun fichier vidéo provisoire ou temporaire comme le font certaines applications.
• Il vous permet de faire fusionner plusieurs fichiers vidéo, audio, appliquer des transformations à la volée, faire de la superposition d’images.
• Il vous permet d'insérer des sous-titres aux formats texte ou images directement dans votre film.

Il est à noter qu’AviSynth ne fonctionne que pour Windows pour le moment.

Comment ça marche ?

Il suffit d’installer AviSynth (je recommande la version au minimum 2.55, ou plus récent disponible sur http://avisynth.org/). Le fichier AVS est tout simplement un fichier texte que l’on peut créer avec Notepad qui contient de simples commandes, nous pourrons dire que les AVS sont des sortes de script vidéo.

Tous les filtres et plugins sont des fichiers DLL qu’il suffit de copier dans le dossier plug-ins d’AviSynth. Ces filtres seront lus et utilisés automatiquement s’ils sont installés dans ce dossier, autrement il faudra les charger dans l’AVS avec une commande du type :

LoadPlugins("path_plugin")

• La syntaxe d'un filtre s'écrit toujours de la même manière, le nom du filtre puis une parenthèse dans laquelle se trouvent écrites ses fonctions. Une chaîne de caractères peut contenir n'importe quels caractères, excepté les terminaisons telles que les guillemets ou les doubles quotes. Il y a deux types de fonctions, celles qui indiquent des chemins (path) comme les plugins de sources vidéo ou de sous-titres, exemple:
  MPEG2Source("C:\mon_repertoire\projet.d2v") pour charger une source vidéo
  TextSub("C:\mon_repertoire\fichier.srt") pour un fichier sous-titres au format texte
• et celles qui exercent directement un filtrage spécifique sur la source comme un filtre jouant sur la luminance,exemple:

  LumaFilter(-2,0.9) une fonction agissant sur la lumière de la vidéo et qui prend en argument deux valeurs.

• Vous devez respecter impérativement l'orthographe du filtre, toutefois l'utilisation de majuscules ou de minuscules n'a aucune incidence puisque la plupart des scripts sous Windows ne sont pas Case Sensitive.
• Les valeurs ou variables d'un filtre sont toujours entre parenthèses, aucun espace dans ces parenthèses n'est toléré.
• Les chemins de fichiers sont forcément des chaînes de caractère et doivent donc être entre doubles quote.
• Toutes les fonctions possèdent des valeurs par défaut, et les arguments ne sont généralement pas obligatoires. Exemple : Undot est communément utilisé comme ceci: Undot(), cependant il est possible de passer des arguments permettant de peaufiner les paramètres d’Undot.
• Vous pouvez appeler plusieurs fonctions dans une même expression, il vous suffit de mettre la fonction suivante à la ligne.

exemple:


Mpeg2Source("C:\mon_path\projet.d2v")
LanczosResize(592,320)

• Vous pouvez inscrire autant de commentaires que vous le désirez dans votre script. Pour se faire, il vous suffit de précéder vos commentaires par un dièse (#). Ceci est très pratique si vous faites des archives de vos scripts, afin de vous souvenir du pourquoi et du comment.


#ma source
Mpeg2Source("C:\mon_path\projet.d2v")
#un crop pour aspect ratio 1:85
Crop(16,16,-16,-16)
#j'applique toujours un préfiltre
Undot()

• Les filtres ne peuvent pas être exprimés dans n'importe quel ordre, pour certains l'ordre est obligatoire pour d'autres il est tout simplement conseillé pour une meilleure optimisation de la compression vidéo et du rendu visuel.
  Par exemple, selon que vous employez un filtre avant ou après le resize de la vidéo, celui-ci n'aura pas la même incidence à variables égales puisqu’avant le resize il aura plus de pixels à traiter qu'après (images réduites après le resize). Vous devez toujours commencer par le filtre d'importation de la source, puis le cropping (réduction de l’espace vidéo), puis les filtres couleur, les filtres de redimensionnement, enfin les filtres qui modifieront la vidéo de façon plus précise.
• Il est possible de déclarer des variables afin de rendre plus lisible le script AVS. La syntaxe est simple : maVariable = valeur. Nous pourrons par la suite utiliser la variable par son nom, partout dans la suite du script.
• Enfin, il est important de noter des éléments dans AviSynth que l’on appelle des clips. Un clip est la représentation d’une source vidéo et est représenté par une variable. On pourra alors appliquer les fonctions que l’on désire sur un clip spécifique. Avoir plusieurs clips nous permettra à la fois de faire plusieurs traitements sur plusieurs fichiers avec un même script AVS mais aussi, et surtout de faire du collage vidéo. Nous pourrons ainsi avoir deux sources vidéo, leur appliquer des filtres, puis les coller afin de former une unique source qui sera passée directement à l’encodeur de façon transparente.

Exemple de script utilisant des clips :


clipIntro = AviSource("C:\mon_path\mon_intro.avi")
clipIntro = Undot()
clipIntro = SimpleResize (800,600)
clipMain = Mpeg2Source("C:\fichier.d2v")
clipMain = SimpleResize (800,600)
clipFinal = clipIntro + clipMain
return clipFinal

Nous noterons ici deux éléments importants :

• Le collage de nos deux clips se fait grâce à l’opérateur + entre les deux clips
• Nous sommes obligés de spécifier quel va être le clip de sortie du script avec le mot clé return, puisque plusieurs clips étant définis, le script ne peut savoir de lui-même quel va être le clip final à utiliser.

Enfin, afin de tester le rendu de votre script AVS, vous pouvez directement le lire dans un player vidéo supportant DirectShow. Sur les dernières versions d’AviSynth, Media Player Classic peut être installé, car c’est le player le plus adapté à la lecture des scripts AVS.

Les Filtres

Source

C'est le premier type filtre à utiliser puisque c’est celui qui importe la source vidéo ou audio dans votre script

Pour les sources avec conteneur de type AVI

AviSource(Source, option)

Source MPEG2/LST/VOB/D2V

Mpeg2Source(Source, idct = CPUType ), avec "Source" et "CPUtype" définis précédemment

Source autre RMVB/ASF/MOV etc

DirectShowSource("Path", fps_source)

Ce filtre source permet de charger n’importe quelle source vidéo en se basant sur les codecs de FFDShow. Le framerate de la vidéo n’est alors pas connu, il faut donc le spécifier en deuxième argument afin que la source soit correctement chargée.

Source Image (BMP/JPEG/Etc.)

ImageSource("file%d.jpg", 1, 100, 25) # charge toutes les images de file1.jpg à file100.jpg pour former une vidéo cadencé à 25fps

ImageSource("file%03d.jpg", 1, 100, 24) # charge toutes les images de file001.jpg à file100.jpg pour former une vidéo cadencé à 24fps

Framerate

Pour changer le FPS de la source :

ChangeFPS(fps) exemple ChangeFPS(25)

Crop

Pour découper la vidéo (suppression de bandes noires par exemple)


Top = x
Bottom = y
Left = z
Right = w
Crop( [clip], Left, Top, -Right, -Bottom ) # x,y,z,w sont les valeurs en pixel de découpage


Trim

Pour délimiter la durée de la source (peut servir pour faire du découpage)

Trim( [clip], Start, End ) Start et End seront définis précédemment

Undot

Ce filtre permet de supprimer les pixels isolés sur la vidéo, indispensable, ce filtre supprime les imperfections de la vidéo.

Undot() ou Undot( clip )

Resize

Pour modifier la résolution de la vidéo:

SimpleResize( DimX, DimY ) - Modification de la résolution brute, sans analyse, filtre basique qui offre peut de possibilités

BilinearResize( DimX, DimY ) - C'est surement le filtre qui offre le plus de compressibilité, il est rapide par contre pas très précis. A ne surtout pas utiliser avec un denoiser sans quoi votre image risquerait de manquer crucialement de détails. Avec ce filtre pas de variables d'ajustement du sharpen/soften

LanczosResize( DimX, DimY ) - Analyse complète, filtre Sharpness, à utiliser pour de la qualité avec codec puissant et bitrate élevé (>900)

Bicubic possède les mêmes capacités que Lanczos mais avec possibilité de choisir les options et les algorithmes qui vont permettre le redimensionnement de la vidéo.

BicubicResize( clip, DimX, DimY , 0 , 0.75) [Sharp]

BicubicResize( clip, DimX, DimY , 0.333 , 0.333) [Soft]

BicubicResize( clip, DimX, DimY , 0 , 0.5) [Neutre]

Hybridfupp( clip, DimX, DimY , preset="") - Pour moi le meilleur filtre de Resize, se marie très bien avec les autres filtres de retouche vidéo. Configurable à la main ou en utilisant des presets qui vont contenir des valeurs adaptées pour un type de source donné. Les presets peuvent être:

"very low" "low" "medium" "high" "very high" "anime"

Denoiser

Les filtres qui permettront de supprimer le "bruit" sur la vidéo et de rendre la vidéo plus "belle" dans le sens où celle-ci aura un aspect plus lisse, avec des traits plus fins.

• Le Deen

Le plus utilisé avec le Convolution3D. Il s'agit là d'un ensemble optimisé de denoisers. Le Deen fonctionne en espace couleur YV12 et nécessite un CPU compatible iSSE. Il possède 4 méthodes de "débruitages" ("c3d", "a3d", "a2d", "m2d"), "c3d" par défaut est conseillé, car vous obtiendrez une matrice de poids (équivalent à du Convolution3D avec matrice 0) ; en appliquant un "2d" vous n'avez plus qu'un filtre spatial (déconseillé) et non plus spatio-temporel. Voici donc comment s'écrit la syntaxe par défaut de ce filtre:

Deen("c3d",0,10,12,3)     ou encore      Deen()

• 1ere variable = nom de la chaîne de caractères ⇒ "c3d" conseillé pour faire une convolution spatio-temporelle
• 2e variable = mode interne ⇒ 0 pour la matrice par défaut, 1 pour une matrice plus douce
• 3e variable = Ythreshold ⇒ seuil interne de Luma (clarté de lumière) par défaut 10
• 4e variable = UVthreshold ⇒ seuil interne de chrominance (composant de la couleur) par défaut 12
• 5e variable = float ti ⇒ influence temporelle, par défaut 3

À utiliser surtout avec un encodage XviD/DivX

• Le Convolution3D

Il s'agit surement de l'un des plus utilisés, nécessite un CPU compatible SSE, ne peut donc pas fonctionner avec des P2 ou K6-2, fonctionne uniquement en espace couleur YV12. Il peut s'écrire de bien des manières en fonction de votre source .Attention ce filtre est très efficace, mais lent, car engendre beaucoup de calculs. Il y a deux syntaxes possibles, la première est de loin la plus simple et c'est celle que je vous conseille d'utiliser, c'est-à-dire que vous avez là une syntaxe correspondant à un filtre préréglé (preset).

Toutefois s'il vous prenez l'envie de vouloir tester ce filtre, il vaut mieux que vous sachiez tout de même à quoi correspondent toutes ces variables incluent dans la 2e syntaxe:

• 1ere variable = Matrice, c'est à dire gestion de la matrice, pour un maximum de détail conseillé 0, vous pouvez aller jusqu'à 3, mais je vous le déconseille puisque la vidéo serait de plus en plus floue.
• 2e variable = Ythreshold, le seuil (threshold) de filtration spatiale de la luminance (clarté), rester entre 2 et 10
• 3e variable = Cthresthold, fixe le seuil de la filtration spatiale de la chrominance (composants de la couleur), rester entre 2 et 16
• 4es variable = TYthreshold, fixe le seuil de la filtration temporelle de la luminance, rester entre 2 et 10
• 5e variable= TCthresthold, fixe le seuil de la filtration temporelle de la chrominance, rester entre 2 et 10
• 6e variable = l'influence temporelle. Plus la valeur est haute plus la compression est élevée. Entre 2 et 3, valeur flottante (pas de virgule mais un point)
• 7e variable = Debug, à désactiver avec la valeur 0.
• Pour le temporel au-delà de 10 vous risquez de flouter considérablement votre vidéo. Vous pouvez augmenter la filtration spatiale de chrominance(3e argument) la limite se situe au moment où les bords deviennent moins précis.

Convolution3D (preset="movieHQ") ⇒ Film haute qualité comme la plupart des bons DVD, peut s'écrire également Convolution3D(0, 3, 4, 3, 4, 2.8, 0) si l’on passe les arguments à la main.

Convolution3dD(preset="movieLQ") ⇒ Film de basse qualité, hé oui il y a parfois des DVD mal faits, ou des sources corrompues. Peut s'écrire également Convolution3D (0, 6, 10, 6, 8, 2.8, 0)

Convolution3d (preset="animeHQ" ) ⇒ Anime haute qualité , pareil que pour un film, mais cette fois-ci il s'agit de dessin animé. Peut s'écrire également Convolution3D (0, 6, 12, 6, 8, 2.8, 0)

Convolution3d (preset="animeLQ") ⇒ Anime de basse qualité. Peut s'écrire également Convolution3D (1, 8, 16, 8, 8, 2.8, 0)

Convolution3d (preset="vhsBQ") ⇒ Capture VHS de mauvaise qualité. Peut s'écrire également Convolution3D (0, 32, 128, 16, 64, 10, 0)

Convolution3d (preset="animeBQ") ⇒ Animé de mauvaise qualité. Preset à utiliser pour les cas extrêmes comme les acquisitions VHS  de vidéos anciennes par exemple.

Sharpen/soften: (affilé/floutant)

•aSharp

À la base ce filtre est un "mask unsharp" très commun, il comporte une technique de seuil adaptatif pour éviter l'augmentation de bruit et il influe de manière à éviter une apparence trop importante de Blocks DCT (Discrete Cosine Transform est une méthode de compression de données vidéo numériques largement répandue qui atténue l'apparition des blocs dans l'image dans les fréquences, les amplitudes et couleurs), autrement dit qui lutte contre l'effet mosaïque d'une image.

Pour faire un "unsharp masking " simple :
asharp(2,0)

Pour essayer un "sharpenning adaptatif"
asharp(2,4)

Suggestion de l'auteur pour encodage d'anime :
asharp(2.5,4.5,0.25,hqbf=true)

•aWarpSharp

Pour CPU compatible iSSE.Il a été optimisé pour Atlhon XP, mais tous les CPU modernes pourront utiliser ce filtre à vitesse maximale. Il s'agit d'un authentique filtre de "warpsharping". Authentique signifie que l'algorithme utilisé diffère ,sur plusieurs points, par rapport à d'autres filtres "warpsharping".Le code y est entièrement optimisé iSSE avec une haute exactitude.Vous devez avoir un minimum de 550Mhz (CPU) pour utiliser Warpsharp avec une résolution de 640X480 et un débit de 25fps.La syntaxe par défaut s'écrit comme suit:

aWarpSharp("depth","blurlevel", "thresh", "cm") ==> par défaut cela donne   aWarpSharp(16.0,2,0.5,1)  ou encore aWarpsharp()

D'après l'auteur il n'y pas lieu d'utiliser de paramètres avancés, les paramètres par défaut étant optimum.

•UnFilter

Travaille en espace couleur YV12 & YUY2 .Unfilter est un simple filtre soften/sharpen et il est raisonnablement rapide.Ce filtre peut être soften si vous appliquez des valeurs négatives ou sharpen si vous appliquez des valeurs positives, neutre si vous mettez 0 sur les 2 valeurs (aucun intérêt).Les valeurs soften vont donc de 0 à -100 et les valeurs sharpen de 0 à +100. Toutefois pour éviter une trop importante déformation de l'image je vous conseille de rester dans une fourchette de -5 à +5.Il exige toujours des largeurs de Pixel multiple de 2.Voici la syntaxe du filtre:

UnFilter(HSharp, VSharp), s'écrit par défaut Unfilter(5,5). C'est-à-dire que là il "sharp".

Sous-titre

TextSub("path")

Logo

VobSub("path")

Pour incruster une image uniquement sur une certaine durée, il faudra jouer du Trim

Limiter

Permet de modifier les gammas (les couleurs) pour un meilleur rendu sur TV

Limiter() ou Limiter( clip ), rend l'image un peu plus foncée sur PC, mais je la trouve plus nette.

Conclusion

Vous êtes maintenant armé pour pouvoir créer des scripts AviSynth pour vos encodeur préférés. Vous pourrez ainsi merger et mixer une multitude de fichiers de source en une seule fois, sans faire d'étapes de transformation intermédiaires et en optimisant complètement la qualité de rendu et la conservation de la vidéo source.

Un exemple de script un petit peu complet pourrait être :


# Variables
DimX = 1024
DimY = 576
CPUType = 7

# on charge L'intro en AVI codec VBLE
intro = AviSource("D:\Enco\intro-openVBLE.avi",false)
# ajustement de son FPS
intro = intro.ChangeFPS(25)

# on charge le contenu principal issue d'un encodage MAC
clip1 = DirectShowSource("Mycontent.mov",23.976)
# on ne sélectionne que les frames utiles
clip1 = clip1.Trim(10760,11967)
clip1 = clip1.ChangeFPS(25)

# on charge le logo animé sous forme de plusieurs JPG
logo = ImageSource("title%d.jpg",1,26,25)
logo = ConvertToYV12(logo)
# on redimensionne pour être aligné sur les autres sources
logo = hybridFupp(logo,DimX, DimY, preset="anime")

# on charge le generique de fin, issue d'une source DVD
clipfin = Mpeg2Source("generique.d2v", CPUType)
clipfin = clipfin.Trim(163552,164772)
clipfin = clipfin.ChangeFPS(25)

# on colle toutes les sources
final = intro + clip1 + logo + clipfin
# filtre pour enlever le bruit
final = final.Convolution3D (preset ="animeHQ")
# redimensionnement
final = hybridFupp(final,DimX, DimY, preset="anime")
final = UnDot( final )
# ajustements vidéo
final = final.aWarpSharp()
final = final.Unfilter(-50,-50)
# ajout d'un sous-titre incrusté dans la vidéo
final = final.textsub("Sous-titre_movie.ass")
final = Limiter( final )

# on définit la source finale
Return final

Pour encore plus de filtres, n'hésitez pas à visiter le site officiel d'AviSynth: http://avisynth.org/warpenterprises/