Construire la réalité virtuelle en VR avec Primrose et WebVR

Cette année, la réalité virtuelle (VR) connaît une vague de popularité, les casques VR volant des étagères. Les plateformes de développement se concentrent de plus en plus sur le développement de la réalité virtuelle pour répondre à la demande croissante des développeurs enthousiastes. Un développement particulièrement passionnant dans l'unité et le moteur Unreal est la capacité de modifier les scènes VR dans l'environnement VR lui-même. Pour les développeurs WebVR et JavaScript, un nouveau cadre émerge qui offre des capacités similaires pour le prototypage et l'expérimentation: primrose.

Caractéristiques clés de la primrose:

• Primrose est un cadre permettant l'édition IN-VR des scènes VR, abordant directement l'intérêt croissant pour le développement de la réalité virtuelle. Il facilite le prototypage rapide et l'itération visuelle dans le contexte VR.
• Pour utiliser Primrose, les développeurs ont besoin d'un navigateur WebGL avec une prise en charge WebVR (comme une version récente de Chromium WebVR ou Firefox Nightly), un casque Oculus Rift ou Google Cardboard (bien que l'expérimentation basée sur le navigateur soit possible sans casque), un Le serveur Web (serveurs locaux comme WAMP / MAMP / NODE / Python suffise) et les compétences de type tactile.
• Primrose propose du codage en direct, permettant l'édition de code en temps réel dans l'environnement VR ou même directement dans le navigateur sans casque.
• Les développeurs peuvent ajouter divers éléments de scène en primrose, y compris les axes, les nuages ​​ponctuels, les concentrateurs, les lumières, les boîtes et les cylindres. Ceux-ci peuvent être ajoutés via le fichier app.js ou directement dans l'éditeur VR.
• Bien que encore à ses débuts, Primrose montre un immense potentiel pour les applications VR futures. Les contributions communautaires sont encouragées à accélérer sa croissance.

Qu'est-ce que Primrose?

Comme indiqué sur son site officiel, Primrose est un cadre multi-dispusseur multi-appareils pour créer des outils de productivité dans les applications WebVR. Il offre un environnement basé sur un navigateur pour que les développeurs puissent expérimenter et visualiser les concepts VR. C'est open-source et activement en cours de développement.

Exigences du système:

Pour commencer votre voyage Webvr avec Primrose, vous aurez besoin:

• un navigateur Webgl avec une prise en charge WebVR (par exemple, une version récente de Chromium WebVR ou Firefox tous les soirs).
• un casque Oculus Rift, HTC Vive ou Google Cardboard (facultatif pour le travail basé sur le navigateur).
• un serveur Web (serveurs locaux tels que WAMP, MAMP, Node.js ou Python).
• Compétence de type tactile.

PRENDRE:

Une démo de codage en direct entièrement fonctionnel est disponible sur le site Web de Primrose (assurez-vous d'utiliser un navigateur compatible WebGL). Pour une copie locale, téléchargez ou clonez la dernière version et des exemples du référentiel GitHub Primrose.

Version simplifiée:

Une démo à codage en direct simplifié, basé sur la démo primrose, mais avec une fonctionnalité réduite pour une explication plus facile, est disponible sur un référentiel GitHub séparé [lien vers le repo github irait ici].

Exécution de la version simplifiée:

Placez la démonstration simplifiée sur votre serveur Web et ouvrez-la dans votre navigateur compatible WebGL (par exemple, http://localhost/primrose). N'oubliez pas qu'il ne fonctionnera pas directement à partir de votre système de fichiers en raison des restrictions de sécurité du navigateur sur l'accès aux ressources.

Exemple de capture d'écran (remplacer par l'image réelle):

Comment fonctionne Primrose:

Le cœur d'une application primrose implique de définir des textures et d'initialiser l'application Primrose:

var BRICK = "images/brick.png",
    GROUND = "images/deck.png",
    SKY = "images/bg2.jpg",
    app = new Primrose.BrowserEnvironment("Our Simplified 3D Editor", {
      skyTexture: SKY,
      groundTexture: GROUND
    });

Une zone d'éditeur est définie à l'aide de Primrose.Surface:

editorFrame = new Primrose.Surface({
  bounds: new Primrose.Text.Rectangle(0, 0, 2048, 2048)
});

Des éléments sont ajoutés dans le "ready" Écouteur d'événements:

app.addEventListener("ready", function() {
  // ... (add subScene, editor, initial code) ...
});

primrose utilise des objets de Primrose.Text pour les fonctionnalités d'édition de texte. L'événement update gère les mises à jour de la scène et les animations. D'autres événements comme keydown, mousedown, etc., gèrent les interactions utilisateur.

(le reste de la section "comment ça marche", y compris des exemples de code et des explications de axis, cloud, hub, light, box, cylinder, et d'autres Les fonctions, seraient incluses ici, en maintenant la même structure et en paraphrasant le texte d'origine.)

(la "conclusion", "les questions fréquemment posées", et leurs réponses respectives seraient également incluses ici, en maintenant la même structure et en paraphrasant le texte d'origine.) N'oubliez pas de remplacer les liens d'image d'espace réservé par les liens d'image avec les liens avec les liens avec les liens avec le URL d'image réelles.

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!