TD2 - Stéréoscopie et profondeur de champ

Stéréoscopie

Principe général

Afin de rendre possible le rendue stéréoscopique on effectue les opérations suivantes :

A l’aide de cela on peut tres bien effectuer independament des rendu à l’aide de l’une ou l’autre camera. Ceci est équivalent à observer la scene avec un oeil ou un autre. Ainsi on peut obtenir les image suivantes (au centre le rendu normal, a gauche le rendu de l’oeil gauche et a droite celui de l’oeil droit) :

left left left

Anaglyphe

Pour réaliser un rendu anaglyphique il nous faut afficher les rendu de chaque camera dans des canaux de couleurs differents. On utilisera le canal rouge pour le rendu gauchet et les canaux vert et bleu (cyan) pour le rendu droit. Ceci est effectuer grace au code suivant :

this.render = function ( scene, camera ) {
    this.update(camera);

    let glContext = renderer.domElement.getContext( 'webgl' );

    // Rendering for left eye (red)
    glContext.colorMask(true, false, false, true);
    renderer.render(scene, this.cameraLeft);

    // Between the eyes
    renderer.clearDepth();

    // Rendering for right eye (cyan = blue + green)
    glContext.colorMask(false, true, true, true);
    renderer.render(scene, this.cameraRight);

    // After all we reset the color mask
    glContext.colorMask(true, true, true, true);
  };

Grace a cela on obtient le résultat suivant :

anaglyph

Profondeur de champs

Rendu avec profondeur de champ

Afin d’appliquer la profondeur de champ il nous faut pouvoir evaluer la distance d’un fragment à l’observateur. Puis à l’aide de cette distance calculer le rayon du cercle de convolution (importance du flou) en ce fragment. Enfin à l’aide de ce rayon, pour chaque fragment, parcourir les pixels voisins et moyenner leurs couleur pour obtenir un flou. Ceci ressemble beaucoup à l’application d’un filtre moyenneur sur notre rendu mais donc la taille du filtre dépend de la distance du fragment.

Cette méthode est mise en oeuvre de la maniere suivante :

Noter que l’on peut directement (dans le cas d’une vue à la première personne) evaluer la distance focale directement depuis la depthMap aux coordonées (0.5, 0.5) pour obtenir une profondeur de champs par rapport a l’endroit ou l’on vise.

Ceci nous donne le resultat suivant :

anaglyph

De plus, on peut combiner le rendu anaglyphique et la profondeur de champ pour obtenir le résultat suivant :

anaglyph and blur

Liens utiles

Sujet du TD

Paul Bourke article

Gordon Wetestein slides

Code source du rendu final

Demo du rendu final

Archive contenant le code source