Comment construire VR sur le Web aujourd'hui-js tutoriel-php.cn

Comment construire VR sur le Web aujourd'hui

La réalité virtuelle devrait valoir jusqu'à 7 milliards de dollars d'ici 2020. Le Web ne restera certainement pas un environnement exclusivement 2D pendant cette période. En fait, il existe déjà quelques façons simples d'amener VR dans le navigateur. C'est aussi incroyablement amusant de travailler avec!

Pour commencer votre aventure de développement dans le Web virtuel, il existe trois façons potentielles de procéder:

javascript, trois.js et regardant l'orientation des appareils
javascript, trois.js et webvr (ma nouvelle méthode préférée!)
css et webvr (encore très tôt)

Je vais passer en revue chacun et montrer un bref résumé de la façon dont chacun fonctionne.

Les plats clés

La réalité virtuelle (VR) peut être incorporée dans le développement Web via trois méthodes principales: JavaScript, Three.js et l'orientation de l'appareil à regarder; JavaScript, trois.js et webvr; et css et webvr.
La méthode JavaScript, Three.js et Watching Device Orientation Utilise l'événement de navigateur de périphérique pour détecter la rotation et l'inclinaison des périphériques, qui, dans un contexte VR, permet au réglage de la caméra de suivre le regard du spectateur.
JavaScript, Three.js et WebVR est une méthode expérimentale actuellement mieux adaptée pour accéder à l'orientation du casque VR tel que l'Oculus Rift. Il utilise l'API WebVR pour donner accès aux informations de l'appareil VR.
La méthode CSS et WebVR, actuellement aux premiers stades de développement, vise à intégrer les transformations CSS 3D avec le mode VR complet.
La création d'expériences VR pour le Web est considérée comme un moteur clé pour l'adoption de la technologie VR, avec le bobinage WebVR de Boris SMUS recommandé comme le meilleur endroit pour commencer pour les développeurs qui cherchent à créer une expérience VR pour le Web.

javascript, trois.js et regardant l'orientation des appareils

L'une des façons dont la plupart des projets de réalité virtuelle basés sur le navigateur fonctionnent actuellement via l'événement de navigateur de dispositif. Cela indique au navigateur comment l'appareil est orienté et permet au navigateur de ramasser s'il a été tourné ou incliné. Cette fonctionnalité dans une perspective VR vous permet de détecter quand quelqu'un regarde autour de lui et ajuster la caméra pour suivre son regard.

Pour réaliser une merveilleuse scène 3D dans le navigateur, nous utilisons trois.js, un framework JavaScript qui facilite la création de formes et de scènes 3D. Cela enlève la majeure partie de la complexité de la mise en place d'une expérience 3D et vous permet de vous concentrer sur ce que vous essayez de mettre en place dans votre scène.

J'ai écrit deux démos ici sur SitePoint qui utilisent la méthode d'orientation de l'appareil:

apporter VR sur le Web avec Google Cardboard et trois.js
Visualiser un flux Twitter en VR avec trois.js et nœuds

Si vous êtes nouveau sur trois.js et comment assembler une scène, je vous recommande de jeter un œil aux deux articles ci-dessus pour une introduction plus approfondie dans cette méthode. Je couvrirai ici les concepts clés, mais ce sera à un niveau supérieur.

Les composants clés de chacun de ces éléments impliquent les fichiers JavaScript suivants (vous pouvez obtenir ces fichiers à partir de l'exemple de démos ci-dessus et les trouverez également dans les exemples trois.js téléchargement):

trois.min.js - Notre framework Three.js
DeviceorientationControls.js - Il s'agit du plugin Three.js qui fournit l'orientation de l'appareil dont nous avons discuté ci-dessus. Il déplace notre appareil photo pour répondre aux mouvements de notre appareil.
OrbitControls.js - Il s'agit d'un contrôleur de sauvegarde qui permet à l'utilisateur de déplacer la caméra à l'aide de la souris à la place si nous n'avons pas un appareil qui a accès à l'événement d'orientation de l'appareil.
stereoeffect.js - Un effet trois.js qui divise l'écran dans une image stéréoscopique inclinée légèrement différemment pour chaque œil comme dans la VR. Cela crée l'écran de division VR réel sans que nous ayons besoin de faire quelque chose de compliqué.

Orientation de l'appareil

Le code pour activer les contrôles d'orientation de l'appareil ressemble à ainsi:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Copier après la connexion

L'auditeur d'événements de périphérique fournit une valeur alpha, bêta et gamma lorsqu'il a un dispositif compatible. Si nous n'avons pas de valeur alpha, cela ne modifie pas nos contrôles pour utiliser l'orientation de l'appareil afin que nous puissions utiliser des contrôles d'orbite à la place.

S'il a cette valeur alpha, nous créons un contrôle d'orientation de l'appareil et lui fournissons notre variable de caméra pour contrôler. Nous le définissons également pour définir notre scène sur FullScreen si l'utilisateur exploite l'écran (nous ne voulons pas regarder la barre d'adresse du navigateur en VR).

Contrôles en orbite

Si cette valeur alpha n'est pas présente et que nous n'avons pas accès à l'événement d'orientation de l'appareil de l'appareil, cette technique fournit plutôt un contrôle pour déplacer l'appareil photo en le faisant glisser avec la souris. Cela ressemble à:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

Copier après la connexion

Les principales choses qui pourraient être déroutantes du code ci-dessus est le Nopan et le Nozoom. Fondamentalement, nous ne voulons pas nous déplacer physiquement autour de la scène via la souris et nous ne voulons pas pouvoir zoomer ou sortir - nous voulons seulement regarder autour de nous.

Effet stéréo

Afin d'utiliser l'effet stéréo, nous le définissons comme ça:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Copier après la connexion

Ensuite, sur le redimensionnement de la fenêtre, nous mettons à jour sa taille:

effect<span>.setSize(width, height);</span>

Copier après la connexion

Dans chaque demande de requête, nous avons mis la scène pour rendre notre effet:

effect<span>.render(scene, camera);</span>

Copier après la connexion

C'est les bases de la façon dont le style d'orientation de l'appareil de réalisation fonctionne. Il peut être efficace pour une implémentation agréable et simple avec Google Cardboard, mais il n'est pas aussi efficace sur l'Oculus Rift. L'approche suivante est bien meilleure pour le Rift.

javascript, trois.js et webvr

Vous cherchez à accéder à l'orientation du casque VR comme l'Oculus Rift? WebVR est le moyen de le faire pour le moment. WebVR est une API JavaScript précoce et expérimentale qui donne accès aux fonctionnalités des appareils de réalité virtuelle comme Oculus Rift et Google Cardboard. À l'heure actuelle, il est disponible sur Firefox tous les soirs et quelques versions expérimentales de chrome et de chrome mobile. Une chose à garder à l'esprit est que la spécification est toujours en ébauche et est sujette à changer, alors expérimentez-la, mais sachez que vous devrez peut-être ajuster les choses au fil du temps.

Dans l'ensemble, l'API WebVR donne accès aux informations du périphérique VR via:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Copier après la connexion

Je n'entrerai pas dans beaucoup de détails techniques ici (je couvrirai cela plus en détail dans son propre article de SitePoint!), Si vous souhaitez en savoir plus, consultez le projet de l'éditeur WebVR. La raison pour laquelle je ne vais pas entrer dans les détails, c'est qu'il existe une méthode beaucoup plus facile pour implémenter l'API.

Cette méthode plus facile susmentionnée pour implémenter l'API WebVR consiste à utiliser la bailluerplate WebVR à partir de Boris SMUS. Il offre un bon niveau de fonctionnalité de base qui implémente WebVR et dégrade gracieusement l'expérience de différents appareils. C'est actuellement la plus belle implémentation Web VR que j'ai vue. Si vous cherchez à créer une expérience VR pour le Web, c'est actuellement le meilleur endroit pour commencer!

Pour commencer à utiliser cette méthode, téléchargez le balibre WebVR sur GitHub.

Vous pouvez vous concentrer sur la modification de l'index.html et l'utilisation de tous les fichiers dans cette configuration, ou vous pouvez implémenter les plugins spécifiques dans votre propre projet à partir de zéro. Si vous souhaitez comparer les différences dans chaque implémentation, j'ai migré mon Visualisation d'un flux Twitter en VR avec trois.js et un exemple de nœud d'en haut en un flux Twitter propulsé par WebVR en VR.

Pour inclure ce projet dans le vôtre à partir de zéro, les fichiers que vous voudrez avoir sont:

trois.min.js - Notre cadre Three.js bien sûr
vrControls.js - Un plugin Three.js pour les contrôles VR via webvr (cela peut être trouvé dans Bower_Components / ThreeJS / Exemples / JS / Controls / VrControls.js dans le projet BULERPLAY)
vReffect.js - Un plugin Three.js pour l'effet VR lui-même qui affiche la scène pour un Rift Oculus (cela peut être trouvé dans Bower_Components / ThreeJS / Exemples / JS / Effects / Vreffect.js dans le projet Boilerplate)
webvr-polyfill.js - Il s'agit d'un polyfill pour les navigateurs qui ne prennent pas entièrement entièrement WebVR (cela peut être trouvé sur GitHub et également dans Bower_Components / Webvr-Polyfill / build / webvr-polyfill.js dans le réservoir code)
webvr-manager.js - Cela fait partie du code du chauffeur qui gère tout pour vous, notamment en fournissant un moyen d'entrer et de quitter le mode VR (cela peut être trouvé dans Build / Webvr-Manager.js)

L'implémenter ne nécessite que quelques ajustements de la méthode d'orientation de l'appareil. Voici un aperçu de ceux qui cherchent à essayer cette méthode:

Contrôles

Les commandes VR sont assez simples à configurer. Nous pouvons simplement affecter un nouvel objet VRControls à la variable de contrôle que nous avons utilisée plus tôt. Les commandes d'orbite et les commandes d'orientation de l'appareil ne doivent pas être nécessaires car la baillon doit désormais prendre soin des navigateurs sans capacités VR. Cela signifie que votre scène devrait aussi bien fonctionner sur Google Cardboard!

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Copier après la connexion

Effet VR

L'effet est très similaire à l'implémentation comme le STEREOEffect était. Remplacez simplement cet effet par notre nouveau Vreffect:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

Copier après la connexion

Cependant, nous ne rendons pas à travers cet effet dans cette méthode. Au lieu de cela, nous rendons par le biais de notre gestionnaire VR.

VR Manager

Le directeur de la réalité virtuelle s'occupe de toutes nos réalisations VR / sortant et ainsi de suite, c'est donc là que notre scène est enfin rendue. Nous l'avons initialement configuré via les éléments suivants:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Copier après la connexion

Le gestionnaire VR fournit un bouton qui permet à l'utilisateur de saisir le mode VR s'il est sur un navigateur compatible ou un plein écran si son navigateur n'est pas capable de VR (plein écran est ce que nous voulons pour le mobile). Le paramètre Hidebutton dit si nous voulons masquer ce bouton ou non. Nous ne voulons certainement pas le cacher!

Notre appel de rendu ressemble alors, il utilise une variable d'horodatage qui vient de notre fonction () de Three.js Update ():

effect<span>.setSize(width, height);</span>

Copier après la connexion

Avec tout cela en place, vous devriez avoir une implémentation VR fonctionnelle qui se traduit en différents formats en fonction de l'appareil.

Renderer.getSize () Renvoie-t-il une erreur? Cela m'a rendu fou pendant quelques heures, mais tout ce que vous aurez besoin de faire pour résoudre ce problème est - mettez à jour trois.js!

à quoi ressemble la baillulerplate webvr en action

Voici à quoi ressemble la vue de mon exemple Twitter sur un navigateur qui prend en charge VR:

Comment construire VR sur le Web aujourd'hui

Voici dans la vue Oculus Rift qui apparaît lorsque vous cliquez sur l'icône VR:

C'est à quoi ressemble la vue sur un smartphone, l'orientation de l'appareil nous permet toujours de regarder autour de la scène et nous n'avons pas d'écran fendu. Une grande vision réactive du contenu:

Si nous cliquons sur l'icône VR sur Mobile, nous obtenons une vue complète pour les appareils de style Google Cardboard:

css et webvr

Mozilla vise à apporter des capacités de vision en réalité virtuelle à son navigateur dans les versions Nightly Firefox, mais c'est assez tôt! Je n'ai pas eu beaucoup de chance de le faire fonctionner sur mon Mac et Oculus mis en place. Les types de conventions que Vladimir Vukićević de Firefox a mentionnés comprend l'intégration de transformations CSS 3D avec le mode VR complet.

À titre d'exemple du billet de blog de Vladimir, il dit que les éléments avec un style transform: Preserve-3D devrait rendre deux fois des deux points de vue pour le mettre en VR:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Copier après la connexion

Si vous connaissez des démos utilisant VR et CSS, faites-le moi savoir! Je n'ai pas pu en retrouver. L'idée d'amener la partie HTML et CSS du Web dans la VR est sans aucun doute un concept vraiment intrigant. Il est inévitable que le Web entre dans le domaine VR comme celui-ci à un moment donné car nous passons tous lentement aux appareils VR!

Conclusion

Le monde de la technologie va lentement mais sûrement adopter la réalité virtuelle dans les années à venir, car nos capacités technologiques correspondent à nos aspirations sauvages! La seule chose qui conduira l'adoption de la réalité virtuelle et sa valeur est le contenu. Nous devons obtenir du contenu VR pour que les utilisateurs de VR puissent en profiter! Quel est le moyen de mieux et de plus facile que via le Web?

Si vous franchissez le pas et créez une démo VR en utilisant ce code, veuillez le partager dans les commentaires ou contacter-moi sur Twitter (@ThatpatrickGuy). Je serais ravi de mettre mon Oculus Rift ou Google Cardboard et le faire tourner!

J'ai un ensemble de liens organisés sur VR et AR via JavaScript pour ceux qui recherchent une référence rapide. Rendez-vous sur Dev Diner et consultez mon Dev Diner VR et AR avec JavaScript Developer Guide, plein des deux liens mentionnés dans cet article, d'autres grands articles de point de site et plus encore. Si vous avez d'autres excellentes ressources que je n'ai pas énumérées - faites-le moi aussi!

Les questions fréquemment posées sur la création de VR sur le Web

Quelles sont les conditions préalables à la création de VR sur le Web?

Pour commencer à construire VR sur le Web, vous devez avoir une compréhension de base de HTML, CSS et JavaScript. Vous devriez également être familier avec WebGL, une API JavaScript pour rendre les graphiques 2D et 3D. La connaissance de Three.js, une bibliothèque JavaScript populaire pour la création de graphiques 3D, est également bénéfique. De plus, vous devriez avoir un casque VR pour tester vos expériences VR.

Comment puis-je créer des expériences VR en utilisant JavaScript?

JavaScript, ainsi que des bibliothèques comme Three.js et A-Frame, peuvent être utilisé pour créer des expériences VR. Three.js simplifie le processus de travail avec WebGL, tandis que le trame A vous permet de créer des scènes VR en utilisant une syntaxe de type HTML. Vous pouvez créer des objets 3D, ajouter des textures et l'éclairage et contrôler le mouvement de la caméra en utilisant ces outils.

Qu'est-ce que WebVR et comment est-il lié à VR sur le Web?

WebVR est une API JavaScript Cela prend en charge divers dispositifs de réalité virtuelle, tels que l'Oculus Rift, HTC Vive et Google Cardboard, dans un navigateur Web. Il permet aux développeurs de créer des expériences VR immersives sur le Web qui sont accessibles à toute personne disposant d'un appareil VR et d'un navigateur compatible.

Puis-je utiliser d'autres langages de programmation en plus de JavaScript pour créer une réalité virtuelle sur le Web?

JavaScript est la langue principale du développement Web, y compris la VR. Cependant, vous pouvez utiliser des langages qui compilent en JavaScript, tels que TypeScript ou CoffeeScript. De plus, WebAssembly vous permet d'exécuter du code écrit dans des langues comme C à une vitesse quasi native dans le navigateur.

Comment puis-je optimiser mes expériences VR pour le Web?

Optimisation des expériences VR pour les Le Web implique de réduire la latence, de gérer efficacement la mémoire et d'optimiser le rendu. Vous pouvez utiliser des techniques telles que le chargement asynchrone, la compression de texture et le niveau de détail (LOD) pour améliorer les performances. Considérez également les limites des conditions matérielles et réseau de l'utilisateur.

Comment puis-je rendre mes expériences VR accessibles aux utilisateurs sans périphériques VR?

Vous pouvez créer des secours pour les utilisateurs sans périphériques VR. Par exemple, vous pouvez utiliser l'API de périphérique pour permettre aux utilisateurs d'explorer la scène VR en déplaçant leur appareil mobile. Vous pouvez également fournir une vue à 360 degrés que les utilisateurs peuvent naviguer avec leur souris ou toucher.

Comment puis-je tester mes expériences VR sur le Web?

Vous pouvez tester vos expériences VR à l'aide d'un Casque VR. Si vous n'avez pas de casque, vous pouvez utiliser l'extension de l'émulateur WebVR pour Chrome et Firefox. Cet outil simule l'API WebVR et fournit une vue 3D de la scène VR.

Comment puis-je exporter mes créations VR de Three.js à A-Frame?

Vous pouvez utiliser l'exportateur GLTF en trois.js pour exporter vos modèles 3D dans un format que A-Frame peut lire. GLTF (Format de transmission GL) est un format de fichier standard pour les scènes et modèles 3D.

à quels sont les défis auxquels je pourrais faire face lors de la création de VR sur le Web?

Certains défis incluent la gestion de la contribution des utilisateurs dans un environnement 3D, l'optimisation des performances et l'assurance de la compatibilité entre différents appareils et navigateurs VR. De plus, la création de graphiques et d'animations 3D réalistes peut être complexe.

Où puis-je en savoir plus sur la création de VR sur le Web?

Il existe de nombreuses ressources disponibles en ligne. La documentation WebVR de Mozilla est un excellent point de départ. Vous pouvez également consulter des tutoriels et des exemples sur les sites Web de trois.js et de trame A. De plus, il existe de nombreuses communautés en ligne où vous pouvez poser des questions et partager votre travail.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!