Cet article aurait dû paraître il y a 2 mois, mais je ne me suis jamais senti assez motivé pour l'écrire. Jusqu'à ce que je jouais à Zhihu récemment et que j'ai vu un problème similaire. De plus, ce sont de courtes vacances ennuyeuses, alors j'ai écrit cet article.
Cet article est divisé en quatre parties :
Connaissances de base : Monde 3D et quaternions
Un Hello, World
Application - Exemple avancé
Parce que je n'ai joué qu'à l'Oculus DK2 de la société, cet article est basé sur DK2.
En fait, il est très simple d'utiliser JavaScript pour utiliser les programmes VR :
Utiliser Node .js pour lire les données des capteurs sur Oculus et fournir un service utilisant le protocole WebSocket.
Recherchez un moteur de jeu 3D comme Three.js pour créer un monde 3D.
Lit la valeur du capteur pour le représenter dans le monde 3D.
Ceci peut également être utilisé dans des applications hybrides, il vous suffit d'avoir un CardBoard. Utilisez Cordova pour lire les données du capteur du téléphone mobile, puis utilisez ces données pour modifier l'état de WebView - sauf que la chaleur sera grave, il ne devrait y avoir aucun autre effet.
Dans les jeux 3D que nous connaissons, la position d'un point est déterminée par trois coordonnées (x, y, z), comme indiqué dans le figure ci-dessous Affichage :
Ces trois coordonnées ne peuvent représenter que notre position dans ce monde, mais ne peuvent pas regarder le monde de haut en bas.
Oculus DK2 utilise la puce MPU (Motion Processing Unit) MPU6500, qui est le deuxième composant intégré de traitement de mouvement à 6 axes (le premier est MPU6050). Il peut produire numériquement des données de calcul de matrice de rotation, de quaternion et de fusion sur 6 ou 9 axes au format Euler Angle.
À l'heure actuelle, nous avons besoin des angles et des quaternions d'Euler pour représenter l'état de l'objet dans le monde virtuel. (PS : Pardonnez-moi de le mentionner brièvement)
Les angles d'Euler sont un ensemble d'angles utilisés pour décrire l'attitude d'un corps rigide. Euler a proposé que toute orientation d'un corps rigide dans un espace euclidien tridimensionnel puisse. être déterminé par La rotation de deux axes est composée. Normalement, les trois axes sont orthogonaux entre eux.
Les trois angles correspondants sont le roulis (angle de roulis), le tangage (angle de tangage) et le lacet (angle de lacet).
Le quaternion est :
Le quaternion peut être utilisé pour représenter la rotation dans un espace tridimensionnel. Les deux autres représentations couramment utilisées (matrices orthogonales tridimensionnelles et angles d'Euler) sont équivalentes. Les gens utilisent des quaternions pour représenter les rotations afin de résoudre deux problèmes. L'un est de savoir comment utiliser les quaternions pour représenter des points dans un espace tridimensionnel, et l'autre est de savoir comment utiliser les quaternions pour représenter des rotations dans un espace tridimensionnel.
Le 6050 auquel j'ai joué auparavant ressemblait probablement à ceci. Si vous jouez à un quadricoptère, vous devriez également jouer comme ceci :
Copier/Coller. Après avoir terminé le contenu ci-dessus, vous n'en avez peut-être aucune idée, alors donnons un exemple de bonjour, tout le monde.
Reprenons les trois étapes évoquées au début Nous devrons faire trois choses :
. Vous recherchez une extension Oculus pour Node - mais cela peut désormais être laissé à WebVR.
Recherche d'une bibliothèque web 3D et de son plug-in d'affichage Oculus correspondant.
Lisez les données du capteur et affichez-les dans le monde virtuel.
Comme indiqué ci-dessous :
J'ai donc trouvé la bibliothèque Node correspondante : Node-HMD, qui peut lire les données du capteur.
Il existe également des plug-ins Three.js et Oculus Effect, qui peuvent afficher la vue suivante :
De cette façon, notre contrôle DK2 lit le données du capteur, vous pouvez jouer dans ce monde virtuel ~~.
Une introduction plus détaillée peut être trouvée sur : http://www.php.cn/
L'exemple d'application ci-dessus est encore trop simple . Regardons une application avancée - c'est une autre idée de Hackday que nous avons réalisée il y a deux mois, c'est un autre "Mars Rover" :
Imaginez que vous vouliez voir Mars, mais que vous n'avez pas l'argent pour y aller. . Et vous pouvez louer un tel robot, puis vous déplacer sur Mars.
Donc, nous avons d'abord besoin d'une communication vidéo en temps réel, ici nous utilisons WebRTC :
Grâce à WebRTC, nous pouvons établir une communication en temps réel sur le navigateur de l'ordinateur, puis grâce à Three.js, nous pouvons convertir cette vidéo en une perspective 3D approximative. Cette vidéo peut être capturée via le navigateur du téléphone mobile, ou l'application Web correspondante peut être écrite sur le téléphone mobile.
Voici une démo en ligne : http://www.php.cn/
L'architecture est à peu près la suivante :
De cette façon, nous résolvons le problème de la vidéo en temps réel, et nous devons également contrôler le matériel :
Utilisez le protocole WebSocket pour fournir le haut, le bas, la gauche et la droite d'Oculus données de mouvement
Lisez ces données de capteur sur votre téléphone mobile et transmettez ces données à la voiture via BLE.
La voiture peut effectuer les mouvements correspondants grâce aux instructions.
Pour plus d'informations sur cette partie, vous pouvez lire mon précédent article "Comment ai-je hacké un robot ?" 》
Par rapport au C (C), JavaScript est plus adapté à la construction de prototypes - rapide, direct et efficace. Après tout, la compilation en C prend du temps. L'effet de fonctionnement est comme prévu. Le ventilateur de l'ordinateur tourne de différentes manières. Je ne sais pas si c'est unique à Mac. Cependant, je pense que ce problème de performances a toujours existé.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
