Veille Technologique

sokhona ousmane
25 juin 2019
6 min de lecture

1-Qu’est ce que la VR ?

La Réalité Virtuelle ou “VR”(Virtual Technologie) est un ensemble de technologies (programmes, composants, terminaux) donnant au spectateur l’impression d’être immergé dans des environnements réels ou imaginaires. C’est un jeu de perception et d’interactions.

L’expérience est à la fois visuelle, auditive et, dans certains cas, haptique avec la production d’un retour d’effets. Lorsque la personne est équipée des interfaces adéquates, comme des gants ou des vêtements, elle peut alors éprouver certaines sensations liées au toucher ou à certaines actions (coup, impact…).

2-Les casque Vr

Cette immersion se fait au moyen d’un casque de réalité virtuelle qui place un système d’affichage 3D stéréoscopique sur le nez, devant les yeux. Certains modèles sont équipés de capteurs qui détectent les mouvements de la tête pour permettre à l’utilisateur de regarder autour de lui. Les images sont alors recalculées en temps réel pour se synchroniser avec la direction du regard.

2-Les casque Vr

Il existe 3 types de casques :

–Les casques Pour Ordinateurs : (Type Oculus Rift, HTC Vive) Cette catégorie de casque souvent onéreuse est destiner a un public ayant une puissante config hardware (i5,i7 ;carte graphique récente …etc.)coupler avec une technologie de suivi de mouvements via des dispositif(leap motion ,contrôleur..etc)📷📷

-Default :

-Les fil qui peuvent tuer l’immersion

-La config

-Avantages :

-La qualité du matériel

-Le suivi dans l’espace

-Le catalogue d’application

Les Casque pour Mobile(Google Cardboard,GearVR…etc) Cette catégorie de casque est destiné pour un usage mobile ,le dispositif contient un support avec des lentilles et se sert des capteurs du téléphone pour reproduire les images a travers le casque📷📷

Ses défaut :

-le suivi du mouvement dans l’espace

-Le smartphone

–Avantages :

-User Friendly

-Pratique pour une utilisation familiale

Les casque autonomes : (Daydream,Oculus Go)C’est le type de casque le plus Vr-friendly ;cette catégorie utilise un ensemble de capteurs directement intégré au casque ,contrairement aux autres casque elle s ‘auto suffit📷

-défaut

– l’autonomie qui dépasse pas généralement les 3h

-le suivi du mouvement dans l’espace

-Catalogue d’appli vide

Avantage :

-Convient a tout le monde

-traking des mains

-Accessibilité

3-Défi

La qualité d’immersion dans un environnement virtuel dépend des ressources mises en place. Le plus souvent, les appareils utilisent la vue pour plonger l’utilisateur directement dans l’application. Si l’on y ajoute des effets sonores, des vibrations et des odeurs, la simulation devient très réaliste. En effet, des tests ont mis à l’épreuve des utilisateurs avec un casque ou ceux-ci devaient avancer le long d’une planche tout en évitant de tomber. Les personnes ayant participé à ces tests exprimaient visiblement leur malaise durant la simulation (peur du vide)

3-Les Usages

La réalité virtuelle peut être utilisé dans tout les usages, a des fins de divertissement (jeux vidéo, expérience…etc), a des fins culturelles( apprentissage, Expos et découverte )comme a fins plus professionnelles ( comme par exemple d’immerger les employés et de les former au service clients,ou encore l’entrainement virtuelles des futur médecins/scientifiques)

4-créer un site web en vr ?

📷

Pour créer un site web en vr en se sert généralement d’un CMS

CMS : CMS est l’acronyme de content management system, soit, en français, « système de gestion de contenu ». Il s’agit d’un programme informatique utilisant une base de données et permettant de gérer de A et Z l’apparence et le contenu d’un site web.

Le plus populaires est A frame : ( https://aframe.io/) est un Framework qui va nous permettre de coder des sites web en 3D et 360 degrés. Accessible pour les novices comme les expérimentés, nous avons la possibilité de créer les sites web plus immersifs, on naviguerait donc sur le web au travers d’un “lieu virtuel” au lieu d’une page web classique. Une nouvelle expérience du web s’ouvre à notre portée. Afin de coder avec ce Framework, il suffit d’avoir une bonne base en html, car le langage fonctionne sur la base de balise html standard et d’autres balises propres à A-Frame. Nous pouvons donc créer des pages web en VR dans lesquelles nous pourrons naviguer avec seulement de l’html.

4-Support du WebGL

Oculus Browser affiche le contenu des pages Web 2D à une fréquence de rafraîchissement de 72 Hz par défaut et le contenu WebVR à une fréquence de rafraîchissement de 60 Hz par défaut.
Dans notre cas l’intégration fait sur un modèle GearVR Avec un S8
Si vous souhaitez déboguer alors que votre appareil est connecté au casque Gear VR, utilisez le débogage Wi-Fi. Le Wi-Fi est nécessaire car le débogage USB ne fonctionne pas lorsque votre appareil est branché sur Gear VR.

Activation du webVR

Tout d’abord, vous devez configurer votre canevas WebGL et tout état de rendu de scène WebGL. Le canevas WebGL sera utilisé comme source VRLayer lors de la présentation.

var layerSource;

function initWebGLProgram() {

layerSource = document.getElementById(“webgl-canvas”);

}

Puis ajouter les options de vérification du navigateur

if (navigator.getVRDisplays) {

navigator.getVRDisplays().then(function (displays) {

if (displays.length > 0) {

//reutilization de l’image pour eviter les erreur

frameData = new VRFrameData();

vrDisplay = displays[0];

// Ajuster les canvas pour qu’il correspond au DisplayVr

var leftEye = vrDisplay.getEyeParameters(“left”);

var rightEye = vrDisplay.getEyeParameters(“right”);

// Mise a jour de la resolution Oeil par Oeil

layerSource.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;

layerSource.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);

// Affiche le bouton Enter Vr

}

} else {

// Si le peripherique n’est pas connecter

}

).catch(function (err) {

});

} else {

// Sinon le le WebVr n’est pas accessible

}

Pour entrer dans le navigateur

function enterVRButtonClicked() { vrDisplay.requestPresent([{ source: layerSource }]).then(function () { vrDisplay.requestAnimationFrame(onAnimationFrame); }).catch(function (err) { }); };

Pour optimiser le rendu

function onAnimationFrame(timestamp) { // envoi des image de rendu en boucle vrDisplay.requestAnimationFrame(onAnimationFrame); // Efface le calque de source en dehors du rendu gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // mise a jour des Frames update(timestamp); vrDisplay.getFrameData(frameData); // Rendu de l’oeil Gauche gl.viewport(0, 0, layerSource.width * 0.5, layerSource.height); render(frameData.leftProjectionMatrix, frameData.leftViewMatrix); // rendu de l’oeil droit gl.viewport(layerSource.width * 0.5, 0, layerSource.width * 0.5, layerSource.height); render(frameData.rightProjectionMatrix, frameData.rightViewMatrix); // Soumet le nouveau calque vrDisplay.submitFrame();} function update(timestamp) { // mise a jour de la scene} // Parametre de la mise a jour de la camerafunction render(projectionMat, viewMat) {

Pour les option de rafraichissement

dictionary VRAttributes {

…

boolean highRefreshRate;

…

};

Pour fixer la rotation

dictionary VRAttributes { … unsigned long foveationLevel; …};

Pour active les controlleur

Lorsqu’on lance le site pour la premiere fois on doit change l’etat a partir de l’url

// Convertir les parameter de requete en jsonfunction getJsonFromUrl() { var query = location.search.substr(1); var result = {}; query.split(“&”).forEach(function(part) { var item = part.split(“=”); result[item[0]] = decodeURIComponent(item[1]); }); return result;} // Mise a jour de la localisationfunction loadFromUrl() { var urlArgs = getJsonFromUrl(); changeState(Number(urlArgs.depth) || 1, true);}

Cela mets a jour l’etat et lance active l’API dans l’URL

// Restituer les canvas pour visualizer les changeset function changeState(newState, replace) { depth = newState; var path = window.location.pathname + “?”; // path += “depth=” + encodeURIComponent(depth); if (replace) { window.history.replaceState({}, “Navigation”, path); } else { // window.history.pushState({}, “Navigation”, path); } renderCanvas(depth, path);};

Afficher une image

Pour le balayage

// Si vous balayez gauche / droite sur le contrôleur ou appuyez à gauche / droite sur le clavier. var oninput = function ( direction ) { switch ( direction ) { case ‘gauche’ : currentPano = ( currentPano – 1 + createPano . length ) % createPano . longueur ; briser ; case ‘right’ : currentPano = ( currentPano + 1 ) % createPano . longueur ; briser ; } }; // Aide pour détecter les glissements sur le pavé tactile du contrôleur. gamepad = new GamepadState (); manette de jeu . ongearvrinput = oninput ; // Lorsqu’il est exécuté dans le navigateur, le clavier émule là Fenêtre de balayage du pavé tactile du contrôleur . onkeydown = function ( e ) { switch ( e . keyCode ) { case 37 : oninput ( ‘left’ ); briser ; cas 39 : en entrée ( «à droite» ); briser ; } }; // Chaque image dont nous avons besoin pour détecter les événements d’entrée. webVRCommon . update = function ( time ) { manette de jeu . mise à jour ( heure ); };

afficher un hello word-type:

et ajouter le fichier:aframe.min

R

Veille Technologique

1-Qu’est ce que la VR ?

2-Les casque Vr

2-Les casque Vr

3-Défi

3-Les Usages

4-créer un site web en vr ?

Posts récents

Comments