samedi 25 février 2012

La terre et ses rayons

Dans cet article nous allons voir comment créer avec Tao Presentations une suite de pages qui permettent de faire un menu grâce à des rayons colorés autour de la Terre. Voici à quoi ressemble le résultat final (la Terre tourne sur elle même) :

Afficher le fond

Le fond est simplement constitué d’une photo de la galaxie Andromède. Les utilisateurs de Macintosh pourront trouver cette image sous /Library/Desktop Pictures/Andromeda Galaxy.jpg. Les autres pourront utiliser une autre image de ciel étoilé.
Comme l'image originale est un peu trop claire, on l’assombrit en la coloriant en gris.
color "gray"
image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"

Placer le fond en profondeur

Tao Presentations permet l'affichage en 3D sur les écrans qui le permettent, par exemple un téléviseur 3D. Pour que l’effet 3D puisse être rendu, il nous faut placer l'image de fond en arrière. Nous allons pour cela utiliser une technique décrite précédemment.
background -2400,
    color "gray"
    image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"
Ce code nous permet de faire deux choses très utiles: envoyer l'image en arrière plan avec translatez sans faire apparaître de bord noir, et s'assurer qu'il s'adapte automatiquement à la taille de la fenêtre ou de l'écran.

Afficher la Terre

La Terre est affichée en léger arrière plan avec background -800, ... pour permettre aux information de venir se mettre devant. La Terre en elle-même est constituée d’une sphère sur laquelle est plaquée une texture représentant la surface du globe.
On rajoute une deuxième sphère autour de la première, sur laquelle est plaquée une texture de nuages qui tourne légèrement plus lentement que la Terre. Pour cette deuxième texture, nous utilisons un fichier .PNG qui permet d'avoir de la transparence. Enfin, ajouter une lumière permet de rendre l'ensemble beaucoup plus réaliste.
background -800,
    light 0
    light_position 1000, 1000, 1000

    texture_wrap true, true
    rotatey 3.5 * time
    texture "earth.bmp"
    sphere 550
    rotatey -0.2 * time
    texture "clouds.png"
    sphere 560

Afficher les textes un par un

Chaque «gélule» est sur une page différente pour utiliser le mécanisme pré-câblé de défilement des pages par les flèches haut et bas pour l’affichage progressif.

Fond

On va donc créer une fonction «earth_background» qui va gérer l’affichage du fond tel que nous l’avons vu dans les étapes précédentes :
earth_background ->
    locally
        background -2400,
            color "gray"
            image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"

        background -800,
            light 0
            light_position 1000, 1000, 1000

            texture_wrap true, true
            rotatey 3.5 * time
            texture "earth.bmp"
            sphere 550
            rotatey -0.2 * time
            texture "clouds.png"
            sphere 560

Gélule de texte

Ce qui est identique dans chaque gélule, c’est sa taille et sa «position» à la rotation près. Ce qui diffère entre les gélule, c’est la couleur, la rotation et le texte. On va donc créer une fonction qui dessine une gélule et qui prend le texte en paramètre, la rotation et la couleur seront donnés avant l’appel à la fonction :
rrect T:text ->
    locally
        translatex 500
        translatez -50
        rounded_rectangle 0, 0, 300, 80, 50
                    
        text_box 0, 0, 280, 80,
            color "white"
            font "Arial Rounded MT Bold", 40
            align 0.5
            vertical_align 0.5
            text T
On dessine donc un rectangle arrondi, et on y place une boîte de texte centrée horizontalement et verticalement, contenant le texte donné en paramètre.
Puis nous appelons cette fonction après avoir fait la rotation et donné la couleur de la gélule :
        locally
            rotatez 25 * (2-N)
            color tao_color N
            rrect tao_ray_text N

Affichage de l’ensemble du texte

Maintenant nous faisons une fonction qui affiche de 1 à 5 rayons suivant un nombre maximum de rayons souhaités :
tao_rays Max:integer ->
    locally
        translatex 100
        scale_contents
        tao_ray 0, Max
        tao_ray 1, Max
        tao_ray 2, Max
        tao_ray 3, Max
        tao_ray 4, Max

tao_ray N:integer, NbMaxRay:real ->
    if NbMaxRay > N then
        locally
            rotatez 25 * (2-N)
            color tao_color N
            rrect tao_ray_text N

Affichage des pages

Et enfin nous définissons les pages qui affichent les rayons :
page "Spinning Earth in 3D",
    earth_background

page "Spinning Earth + Dynamic",
    earth_background
    tao_rays 1

page "Spinning Earth + Interactive",
    earth_background
    tao_rays 2

page "Spinning Earth + Simple",
    earth_background
    tao_rays 3

page "Spinning Earth + Extensible",
    earth_background
    tao_rays 4

page "Spinning Earth + 3D",
    earth_background
    tao_rays 5

vendredi 24 février 2012

Afficher une image en fond en 3D

Tao Presentations permet l'affichage en 3D. Cela veut dire qu'on peut l'utiliser sur des télévisions 3D ou des projecteurs 3D et avoir un réel effet de profondeur.

Pour donner une bonne impression de profondeur, il est important d'utiliser une image ou un film en fond qui va donner à l'oeil une perspective. Idéalement, ce fond doit couvrir correctement l'ensemble de l'écran.

Dans ce tutoriel, nous allons voir comment envoyer une image en fond d'écran qui s'adapte automatiquement à la taille de l'écran

Afficher une image

Pour afficher une image, on utilise tout simplement la fonction image de Tao Presentations. Par exemple, pour créer un simple fond d'écran utilisant le fichier Andromeda Galaxy.jpg, il suffit d'utiliser le script suivant:

color "white"
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Envoyer cette image vers le fond

Sauf instructions particulière de notre part, notre image s'affiche directement sur le plan de l'écran. Si nous voulons l'envoyer en arrière plan, nous pouvons utiliser la fonction translate qui nous permet de l'envoyer par exemple "4000 pixels en arrière":

translate 0, 0, -4000
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Redimensionner le fond

Le fond est maintenant entouré d'un bord noir disgracieux. On peut corriger cela assez facilement en utilisant la fonction scale pour redimensionner l'image. Par exemple:

translate 0, 0, -4000
scale 150%, 250%, 100%
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Redimensionner intelligemment

Le facteur d'échelle à appliquer dépend de la taille de la fenêtre. C'est là que le fait de disposer dans Tao Presentations d'un véritable langage de programmation va se révéler très utile. Nous allons pouvoir calculer correctement le facteur d'échelle à appliquer en utilisant le code suivant:

scale_background -> scale3 background_scale
background_scale -> max(window_width/slide_width, window_height/slide_height)
scale3 S:real -> scale S, S, S
slide_width  -> 1024
slide_height -> 768
Ce code ajoute un nouveau mot à notre vocabulaire: scale_background, qui applique un facteur d'échelle applicable à un fond d'écran, qui garantit que l'image choisie couvrira toujours la totalité de la fenêtre, a supposer que l'image d'origine fasse 1024x768 comme indiqué par slide_width et slide_height.

On peut créer une autre variante sur le même principe, mais destinée à du contenu qui lui doit toujours être affiché en intégralité:

contents_scale -> min(window_width/slide_width, window_height/slide_height)
scale_contents -> scale3 contents_scale

On peut maintenant créer des présentations dans lesquelles le fond et le texte s'adaptent de façon différente à un changement de dimensions de la fenêtre: le fond occupe tout l'espace quitte à être "découpé", tandis que le texte s'adapte pour tenir en entier dans la page.

Redimensionner un fond

Il nous reste encore à calculer automatiquement le facteur d'échelle à appliquer à un fond. Celui-ci dépend de la position de la caméra.

ztrans_contents Z:real ->
    Z0 -> 6000.0
    Z0 := camera_position at 3
    translatez Z/contents_scale
    scale3 (Z0-Z)/Z0

ztrans_background Z:real ->
    Z0 -> 6000.0
    Z0 := camera_position at 3
    translatez Z/background_scale
    scale3 (Z0-Z)/Z0
Ce code ajoute deux nouveaux mots à notre vocabulaire: ztrans_background pour reculer un fond et ajuster sa taille automatiquement, et ztrans_contents pour faire la même opération avec un contenu comme un texte ou une image.

Rendre tout cela facile à utiliser.

La dernière étape est de rendre tout cela facile à utiliser. Nous allons créer le mot background pour placer n'importe quel type de contenu en fond.

background Depth:real, Body ->
    locally
        scale_background
        ztrans_background Depth
        color "white"
        Body
Nous utilisons ici une possibilité très intéressante du langage XL, celle de passer facilement un "bout de code" en argument. L'utilisation de background pour afficher notre image de fond devient très simple:
background -4000,
    image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Lecteur multimédia dans Tao Presentations

Il est très fréquent d’avoir besoin de lire des vidéos ou des musiques dans des présentations. Mais malheureusement la plupart des logiciels de présentations courants ne proposent que peu de contrôle sur ce type de contenu. C’est pourquoi il semblait intéressant de voir ce qu’il était possible de réaliser avec le logiciel Tao Presentations pour comparer avec ce qui existe déjà.
Ainsi, je me suis laissé tenter par la création d'un lecteur multimédia uniquement dans Tao Presentations en utilisant le module VLCAudioVideo pour faciliter la gestion de la lecture et le résultat est finalement très intéressant :
  • Prise en charge de la majorité des formats multimédia
  • Lecture d'un fichier unique, d'une liste ou d'un dossier complet ainsi que des URLs (notamment Youtube)
  • Utilisation facile par l'intermédiaire de contrôles simples

En conclusion, je vous invite à decouvrir le résultat directement sur notre boutique à l'adresse ci-dessous :

http://www.taodyne.com/shop/fr/exemples-de-documents/97-lecteur-multimedia.html

Pour voir ce résultat, vous devez avoir installé une version de Tao Presentations (une version d'essai est disponible ici) ainsi que le module VLCAudioVideo à jour (disponible ici).

dimanche 19 février 2012

Profondeur de champ

La perception de la profondeur d’une scène 3D passe par plusieurs phénomènes, dont l’un des plus importants est sans doute la vision binoculaire : notre œil gauche ne voit pas exactement la même image que notre œil droit, puisqu’il est légèrement décalé. Le cerveau interprète les différences entre les deux images comme une différence de distance de l’observateur par rapport aux objets observés, ce qui crée l’impression de profondeur ou de relief.

C’est ce phénomène stéréoscopique qui est principalement mis en œuvre dans le cadre du cinéma ou de la télévision en 3D tels que nous les connaissons aujourd’hui. Grâce à ses module d’affichage, Tao Presentations permet de tirer pleinement parti de tels systèmes.

D’autres caractéristiques de l’image participent à l’effet de profondeur :
  • La projection de la scène 3D en deux dimensions introduit un effet de perspective, qui fait converger les lignes parallèles à l’infini. Cette convergence est un indice fort permettant à l’œil d’estimer la distance, et donc la profondeur 3D.
  • De cette perspective découlent d’autres indices visuels plus ou moins forts : impression de profondeur due aux objets en mouvement, taille relative de deux objets identiques mais positionnés à une distance différente de l’observateur, disparition des détails dans le lointain...
Mais l’effet qui m’intéresse ici, et qui participe également à la création d’un volume 3D, est le flou de mise au point (ou d'accommodation). Lorsqu’on observe un objet, l’œil fait la mise au point sur cet objet de manière à ce qu’il soit net. En contrepartie, les objets qui sont beaucoup plus éloignés, ou au contraire beaucoup plus proche de nous que l’objet observé apparaissent flous. Cette “profondeur de champ” limitée de l’œil est également fréquemment mise en avant en photographie, pour produire des clichés plus expressifs.

Il y a quelques jours, je suis tombé sur un article (en anglais) qui propose une technique pour simuler cette profondeur de champ en OpenGL. En quelques mots, on génère deux textures :
  • La première représentent l’image 2D de la scène 3D,
  • La deuxième est la carte de profondeur (depth map en anglais) qui correspond à cette image. Cette carte est une représentation, en niveaux de gris, de la distance qui sépare l’œil de l’observateur du point observé.
Ensuite on utilise un fragment shader GLSL qui va appliquer sur la première texture (image) un flou plus ou moins important selon la distance donnée par la seconde texture (depth map).

La commande frame_texture_with_depth de Tao Presentations permet d’obtenir facilement les deux textures requises. Voici un exemple qui représente deux boules de billard, la bleue se trouvant plus éloignée de l’observateur que la jaune :


Les textures d’image et de profondeur sont les suivantes :


Les tons de gris affichés dans la moitié droite de l’image représentent fidèlement la profondeur de la scène. Ainsi, un point blanc signifie qu’il n’y a aucun objet visible (c’est la couleur de fond qui est affichée sur l’image de gauche, ici le blanc). Au contraire, un point sombre correspond à un objet très proche de l’observateur. La boule jaune étant plus proche que la bleue, elle apparaît en gris plus foncé sur la depth map.

À partir de ces textures, il est possible d’intégrer une version simplifiée du shader écrit par martinsh pour obtenir l'effet de flou désiré. J’ai choisi de le faire sous la forme d’un module Tao afin de faciliter l’utilisation de l’effet. Ce module s’appelle sans surprise “Profondeur de champ” (Depth of field en anglais). Vous pouvez le télécharger et le tester dès maintenant (il est compatible avec Tao Presentations 1.03) ou bien attendre la prochaine version de Tao pour l’obtenir. Le module définit une fonction dof_frame_texture qui s'utilise comme frame_texture tout en permettant de bénéficier de l'effet de profondeur de champ. La mise au point s'ajuste grâce à quelques variables.

Voici le résultat lorsqu’on fait la mise au point sur la boule jaune :


Vous pouvez consulter la documentation technique du module sur notre site. Elle contient le code source du document Tao Presentations utilisé pour illustrer cet article.

Références : Depth perception (wikipedia), DoF with bokeh GLSL shader v2.4 (Martins Upitis).