Augmented reality voor internet

Joe Medley
Joe Medley
GitHub

In Chrome 67 hebben we de WebXR Device API aangekondigd voor zowel augmented reality (AR) als virtual reality (VR), hoewel alleen de VR-functies waren ingeschakeld. VR is een ervaring die puur gebaseerd is op wat er in een computerapparaat zit. Met AR kun je virtuele objecten in de echte wereld weergeven. Om plaatsing en tracking van deze objecten mogelijk te maken, hebben we zojuist de WebXR Hit Test API toegevoegd aan Chrome Canary, een nieuwe methode waarmee meeslepende webcode objecten in de echte wereld kan plaatsen.

Waar kan ik het krijgen?

Het is de bedoeling dat deze API in de nabije toekomst op Canarische eilanden blijft. We willen een langere testperiode omdat dit een heel nieuw API-voorstel is en we willen er zeker van zijn dat het zowel robuust als geschikt is voor ontwikkelaars.

Naast Chrome Canary heb je ook het volgende nodig:

Hiermee kun je in de demo's duiken of ons codelab uitproberen.

Het is gewoon internet

Dit jaar hebben we tijdens Google IO augmented reality gedemonstreerd met een vroege versie van Chrome. Ik zei tijdens die drie dagen herhaaldelijk iets tegen zowel ontwikkelaars als niet-ontwikkelaars waarvan ik wou dat ik het had geweten om in mijn meeslepende webartikel te plaatsen: "Het is gewoon internet."

"Welke Chrome-extensie moet ik installeren?" "Er is geen extensie. Het is gewoon internet."

"Heb ik een speciale browser nodig?" "Het is gewoon internet."

"Welke app moet ik installeren?" "Er is geen speciale app. Het is gewoon internet."

Dit is misschien voor de hand liggend voor u, aangezien u dit leest op een website die gewijd is aan internet. Als u demonstraties bouwt met deze nieuwe API, bereid u dan voor op deze vraag. Je zult er veel van krijgen.

Over IO gesproken: als je meer wilt horen over het meeslepende web in het algemeen, waar het is en waar het naartoe gaat, bekijk dan deze video .

Waar is het nuttig voor?

Augmented reality zal een waardevolle aanvulling zijn op veel bestaande webpagina's. Het kan mensen bijvoorbeeld helpen bij het leren op onderwijssites en potentiële kopers in staat stellen voorwerpen in hun huis te visualiseren tijdens het winkelen.

Onze demo's illustreren dit. Hiermee kunnen gebruikers een levensgrote weergave van een object plaatsen alsof het in werkelijkheid is. Eenmaal geplaatst blijft de afbeelding op het geselecteerde oppervlak, heeft de grootte die het zou hebben als het daadwerkelijke item zich op dat oppervlak zou bevinden, en kan de gebruiker er omheen bewegen, maar ook dichterbij of verder weg. Dit geeft kijkers een dieper begrip van het object dan mogelijk is met een tweedimensionaal beeld.

Als je niet zeker weet wat ik daarmee bedoel, wordt het duidelijk als je de demo's gebruikt. Als u geen apparaat heeft waarop de demo kan worden uitgevoerd , bekijk dan de videolink bovenaan dit artikel.

Eén ding dat de demo en video niet laten zien, is hoe AR de grootte van een echt object kan overbrengen. De video hier toont een educatieve demo die we hebben gebouwd, genaamd Chacmool . Een begeleidend artikel beschrijft deze demo in detail. Het belangrijkste voor deze discussie is dat wanneer je het Chacmool-beeldje in augmented reality plaatst, je de grootte ervan ziet alsof het daadwerkelijk bij jou in de kamer staat.

Het voorbeeld van Chacmool is leerzaam, maar kan net zo goed commercieel zijn. Stel je een meubelwinkelsite voor waarmee je een bank in je woonkamer kunt plaatsen. De AR-applicatie vertelt je of de bank in jouw ruimte past en hoe hij naast je andere meubels zal staan.

Raycasts, hittests en dradenkruizen

Een belangrijk probleem dat moet worden opgelost bij het implementeren van augmented reality is hoe objecten in een realistisch beeld kunnen worden geplaatst. De methode om dit te doen heet raycasting . Straalgieten betekent het berekenen van het snijpunt tussen de wijzerstraal en een oppervlak in de echte wereld. Dat kruispunt heet een treffer en het vaststellen of er een treffer heeft plaatsgevonden is een treffertest .

Dit is een goed moment om het nieuwe codevoorbeeld in Chrome Canary uit te proberen. Voordat u iets doet, controleert u nogmaals of de juiste vlaggen zijn ingeschakeld . Laad nu het voorbeeld en klik op "Start AR".

Let op een paar dingen. Ten eerste toont de snelheidsmeter die je misschien herkent van de andere meeslepende samples 30 frames per seconde in plaats van 60. Dit is de snelheid waarmee de webpagina beelden van de camera ontvangt.

AR draait op 30 frames per seconde

De AR Hit Test-demo

Het andere dat opvalt is het zonnebloembeeld. Het beweegt terwijl u beweegt en klikt vast op oppervlakken zoals vloeren en tafelbladen. Als je op het scherm tikt, wordt er een zonnebloem op een oppervlak geplaatst en beweegt een nieuwe zonnebloem met je apparaat mee.

Het beeld dat met uw apparaat meebeweegt en dat probeert zich op oppervlakken te vergrendelen, wordt een dradenkruis genoemd. Een dradenkruis is een tijdelijk beeld dat helpt bij het plaatsen van een object in augmented reality. In deze demo is het dradenkruis een kopie van de te plaatsen afbeelding. Maar dat hoeft niet zo te zijn. In de Chacmool-demo is het bijvoorbeeld een rechthoekige doos die ongeveer dezelfde vorm heeft als de basis van het object dat wordt geplaatst.

Tot aan de code

De Chacmool-demo laat zien hoe AR eruit zou kunnen zien in een productie-app. Gelukkig is er een veel eenvoudigere demo in de WebXR-voorbeeldrepository . Mijn voorbeeldcode komt uit de AR Hit Test- demo in die repository. Ter informatie: ik vereenvoudig graag codevoorbeelden om u te helpen begrijpen wat er aan de hand is.

De basisprincipes van het starten van een AR-sessie en het uitvoeren van een renderloop zijn voor AR hetzelfde als voor VR. Als je niet bekend bent, kun je mijn vorige artikel lezen. Om specifieker te zijn: het starten en uitvoeren van een AR-sessie lijkt bijna precies op het betreden van een VR Magic Window-sessie . Net als bij een magisch venster moet het sessietype niet-immersief zijn en moet het referentiekader 'eye-level' zijn.

De nieuwe API

Nu laat ik je zien hoe je de nieuwe API gebruikt. Bedenk dat in AR het dradenkruis probeert een oppervlak te vinden voordat een item wordt geplaatst. Dit gebeurt met een hittest. Om een ​​hittest uit te voeren, roept u XRSession.requestHitTest() aan. Het ziet er zo uit:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

De drie argumenten voor deze methode vertegenwoordigen een straalcast. De straalvorm wordt gedefinieerd door twee punten op de straal ( origin en direction ) en waaruit deze punten worden berekend ( frameOfReference ). De oorsprong en richting zijn beide 3D-vectoren. Ongeacht welke waarde u indient, ze worden genormaliseerd (geconverteerd) naar een lengte van 1.

Het dradenkruis verplaatsen

Terwijl u uw apparaat verplaatst, moet het dradenkruis meebewegen, omdat het een locatie probeert te vinden waar een object kan worden geplaatst. Dit betekent dat het dradenkruis in elk frame opnieuw moet worden getekend.

Begin met de callback requestAnimationFrame() . Net als bij VR heb je een sessie en een pose nodig.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Zodra je de sessie en de pose hebt, bepaal je waar de straal naartoe gaat. De voorbeeldcode maakt gebruik van de gl-matrix wiskundebibliotheek . Maar gl-matrix is ​​geen vereiste. Het belangrijkste is dat je weet wat je ermee berekent en dat dit gebaseerd is op de positie van het apparaat. Haal de apparaatpositie op uit XRPose.poseModalMatrix . Met uw straal in de hand roept u requestHitTest() aan.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Hoewel dit niet zo duidelijk is in het hittestvoorbeeld, moet je nog steeds door de weergaven bladeren om de scène te tekenen. Het tekenen gebeurt met behulp van WebGL API's. Dat kan als je echt ambitieus bent. We raden echter aan een raamwerk te gebruiken. De meeslepende webvoorbeelden gebruiken er een die speciaal voor de demo's is gemaakt, genaamd Cottontail , en Three.js ondersteunt WebXR sinds mei.

Het plaatsen van een voorwerp

Een object wordt in AR geplaatst wanneer de gebruiker op het scherm tikt. Daarvoor gebruik je het select event. Het belangrijkste in deze stap is weten waar je het moet plaatsen. Omdat het bewegende dradenkruis u een constante bron van hittests biedt, is de eenvoudigste manier om een ​​object te plaatsen het te tekenen op de locatie van het dradenkruis tijdens de laatste hittest. Als dat nodig is, bijvoorbeeld als u een legitieme reden heeft om geen dradenkruis weer te geven, kunt u requestHitTest() aanroepen in de select-gebeurtenis , zoals weergegeven in het voorbeeld .

Conclusie

De beste manier om hier grip op te krijgen is door de voorbeeldcode te doorlopen of het codelab uit te proberen. Ik hoop dat ik je genoeg achtergrondinformatie heb gegeven om beide te begrijpen.

We zijn nog lang niet klaar met het bouwen van meeslepende web-API's. We zullen hier nieuwe artikelen publiceren naarmate we vooruitgang boeken.