Zephyrnet-logo

Een zachte introductie tot WebXR

Datum:


Naarmate de technologie vordert, wordt het belangrijk om verschillende benaderingen te verenigen om te voorkomen dat fragmentatie de groei stopt. De afgelopen jaren hebben webontwikkelaars geprobeerd virtual reality-ervaringen op websites te integreren, te beginnen in 2016 met de eerste WebVR API, maar het belangrijke segment van augmented reality buiten beschouwing gelaten, en daarom is WebXR geboren.

WebXR staat voor “Extended Reality” voor het web, waaronder virtual reality en augmented reality vallen, en alle andere gerelateerde immersive technologieën, zoals mobiele devices, waarvoor dit soort ervaringen ook ontwikkeld kunnen worden. Is de evolutie in de verkenning van virtuele en augmented realiteiten, omdat het profiteert van de kracht van het web samen met de unificatie van deze realiteiten, waardoor het creëren van meeslepende en interactieve omgevingen, virtual reality-tools en meer wordt vergemakkelijkt.

WebXR is een groep standaarden die samen worden gebruikt ter ondersteuning van de weergave van 3D Scenes op hardware die is ontworpen om virtuele werelden te presenteren (virtual reality of VR) of om grafische afbeeldingen toe te voegen aan de echte wereld (augmented reality of AR)

Momenteel zijn er enkele WebXR-frameworks en API's ontwikkeld, waardoor webontwikkelaars virtual reality- of augmented reality-toepassingen kunnen maken zonder rechtstreeks met de hardware te hoeven werken. De eindgebruiker hoeft alleen maar de webbrowser te gebruiken om VR/AR-content te bekijken zonder extra software te installeren. Aan de andere kant hoeven ontwikkelaars de code maar één keer te schrijven en werkt het op alle apparaten (Oculus, Vive, HTC, Google Cardboard, etc.)

Trending AR VR-artikelen:

1. Hoe VR transhumanisme naar de massa kan brengen

2. Hoe Augmented Reality (AR) de foodservice-industrie hervormt

3. ExpiCulture - Een originele wereldreizende VR-ervaring ontwikkelen

4. Enterprise AR: 7 praktijkvoorbeelden voor 2021

WebXR-apparaat-API

Geïntroduceerd in 2018, het is een API die de kern van de WebXR-functieset implementeert, de selectie van uitvoerapparaten beheert, renders de 3D-scène op het gekozen apparaat met de juiste framesnelheid en verwerkt de invoer van de controller.

Het is compatibel met volledig meeslepende 3D-headsets en mobiele telefoons en biedt de volgende belangrijke mogelijkheden:

  • Vind compatibele VR- of AR-uitvoerapparaten
  • geven een 3D-scène naar het apparaat met een geschikte framesnelheid
  • (Optioneel) spiegel de uitvoer naar een 2D-scherm
  • Maak vectoren die de bewegingen van invoerbesturingselementen vertegenwoordigen

Kortom, een scène wordt in 3D weergegeven door het perspectief te berekenen dat op de scène moet worden toegepast opbrengst het vanuit het oogpunt van elk van de ogen van de gebruiker. beide perspectieven worden weergegeven in dezelfde framebuffer, die van het rechteroog aan de rechterkant en die van het linkeroog aan de linkerkant, zodra dit is gebeurd, wordt de framebuffer naar het WebXR-apparaat gestuurd om aan de gebruiker te worden getoond .

WebXR-frameworks

Hier is een lijst van enkele frameworks voor WebXR-ontwikkeling. De meeste (zo niet alle) implementeren de WebXR Device API.

drie.js

Het is waarschijnlijk de meest populaire JavaScript-weergavebibliotheek die er is. Het is volledig flexibel op een zeer laag niveau, omdat de weergave kan worden aangepast om te doen wat u wilt. U moet echter verantwoordelijk zijn voor het onderhouden van de prestaties van de applicaties, zodat ze ook op mobiele apparaten probleemloos werken.

De editor maakt het mogelijk om de scènes gemakkelijk samen te stellen en uit veel verschillende bestandsindelingen. Dit vergemakkelijkt het snel starten van projecten, maar vereist later coderen van uw interacties in JavaScript, daarom is het alleen nuttig voor het genereren van de initiële code voor uw project.

Babylon.js

Het is een realtime 3D-engine geschreven in JavaScript. Het heeft een snelle manier om elke 3D-toepassing te prototypen en heeft een geweldige lijst met voorbeelden om zo ongeveer alles weer te geven. De flexibiliteit stelt u in staat om in een zeer laag niveau te duiken en vereist dat u uw volledige toepassing in JavaScript schrijft. Daarom is het bedoeld voor ervaren programmeurs die de weergave moeten aanpassen.

Een kader

Het is een open-source framework op basis van Three.js. U kunt naar een lager niveau gaan als u maatwerk nodig heeft met een groot aantal bestaande componenten die opnieuw kunnen worden gebruikt.

Met A-Frame kunt u uw scène in HTML configureren. Het genereert een 3D-scènehiërarchie en maakt aangepaste JavaScript-componenten om gedrag en interacties aan te passen. Met de inspecteur kunt u eenvoudig uw scène bewerken en zien wat er uit de HTML wordt gegenereerd.

De projectgrootte is aan jou, A-Frame laat de optimalisatie van de assets voor laadtijden in jouw handen. Het is perfect voor eenvoudige gebruikssituaties en voor gemakkelijke ontwikkeling wordt het echter niet aanbevolen voor grotere projecten.

PlayCanvas

PlayCanvas is een open-source 3D-game-engine, een interactieve 3D-toepassingsengine, gekoppeld aan een eigen, door de cloud gehost authoringplatform dat gelijktijdige bewerking vanaf meerdere computers mogelijk maakt via een browsergebaseerde interface.

Dit ontwikkelplatform wordt geleverd met een volledig visuele editor. De grafische weergave is geoptimaliseerd voor mobiele apparaten en het ziet er prachtig uit als het correct is geconfigureerd.

De visuele editor maakt het eenvoudig om scènes samen te stellen, componenten toe te voegen en projecten te implementeren. Ook kunt u met een ingebouwde code-editor uw eigen scripts schrijven.

Uitdagingen in WebXR

Een van de belangrijkste uitdagingen voor XR-ervaringen om correct te werken en overtuigend te zijn, is het behouden van een lage latentie, hoge precisie en een grote capaciteit om gegevens snel te verwerken om scènes, animaties en nog veel meer weer te geven. Latency, dat verwijst naar de vertraging in communicatie tussen de beweging van een gebruiker en wat hij ziet, moet zo laag mogelijk zijn om de illusie van realiteit te creëren. Als er zelfs maar een klein probleempje of uitlijningsprobleem is, kan dit de ervaring verstoren of misselijkheid veroorzaken.

Een andere uitdaging is te wijten aan de manier waarop het web momenteel is gebouwd. Traditionele communicatiemethoden, zoals Web Sockets, zijn niet snel genoeg en browsers kunnen andere incrementele prestatiedalingen veroorzaken. Grote hoeveelheden gegevens voor het bekijken van scènes kunnen ook de grenzen van weergave overschrijden.

Ten slotte bieden webomgevingen beveiligingsproblemen vanwege de behoefte aan directe communicatie tussen apparaten en gegevensoverdracht.

WebXR-voorbeelden

WebXR-kamer

Ik heb onlangs deze eenvoudige applicatie gemaakt met behulp van de WebXR Device API die is ontwikkeld door Mozilla op de Unity-videogame-engine. Het bestaat uit een kamer waarin je met sommige objecten kunt communiceren. Je kunt het bekijken met een virtual reality-apparaat, je mobiele telefoon of gewoon met je browser.

WebXR-kamer

Hallo WebXR

Het is een demo voor de WebXR Device API, ontworpen als een speeltuin waar je verschillende ervaringen en interacties in VR kunt uitproberen en nieuwkomers soepel, gemakkelijk en mooi kunt introduceren in de VR-wereld en zijn speciale taal.

Hallo WebXR

XR-dinosaurussen

Simuleert een virtueel dinosauruspark, waar dinosaurussen kunnen worden bekeken met een verscheidenheid aan virtual reality-headsets, augmented reality-headsets en telefoons, of rechtstreeks in de browser.

XR-dinosaurussen

Meer voorbeelden

Als je geïnteresseerd bent en meer voorbeelden wilt weten van toepassingen die met WebXR zijn ontwikkeld, volg dan deze link.

Meer voorbeelden

Conclusie

WebXR is een zeer recente technologie die voortdurend in ontwikkeling is en die de manier kan veranderen waarop gebruikerservaringen worden ontwikkeld vanuit webapplicaties. Het is ook een zeer praktische technologie vanwege de manier waarop het virtual en augmented reality in de browser integreert, waardoor het veel toegankelijker en draagbaarder wordt. Dit leidt tot grote uitdagingen, waarvan de meeste gerelateerd zijn aan hardware, en aan hoe webplatforms zich tot nu toe hebben ontwikkeld, die met de tijd en de integratie van nieuwe technologieën zullen worden overwonnen, waardoor het waardevoller en meer onthullend wordt in de komende jaren.

Referenties

Vergeet niet je 👏 te geven!


Een zachte introductie tot WebXR werd oorspronkelijk gepubliceerd in AR / VR-reis: Augmented & Virtual Reality Magazine op Medium, waar mensen het gesprek voortzetten door dit verhaal te benadrukken en erop te reageren.

PlatoAi. Web3 opnieuw uitgevonden. Gegevensintelligentie versterkt.
Klik hier om toegang te krijgen.

Source: https://arvrjourney.com/a-gentle-introduction-to-webxr-d5111304a870?source=rss—-d01820283d6d—4

spot_img

Laatste intelligentie

spot_img