{"id":83843,"date":"2022-09-28T07:49:58","date_gmt":"2022-09-28T05:49:58","guid":{"rendered":"https:\/\/rmarketingdigital.com\/puede-que-ya-lo-sepas\/"},"modified":"2020-09-17T03:18:05","modified_gmt":"2020-09-17T06:18:05","slug":"puede-que-ya-lo-sepas","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/","title":{"rendered":"Sie wissen es vielleicht schon"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#%C2%BFPara-que-sirve\" >Wof\u00fcr ist das?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Solicitando-una-sesion\" >Sitzung anfordern<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Una-propiedad-de-conveniencia\" >Eine Eigenschaft der Bequemlichkeit<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Entrar-en-una-sesion\" >Geben Sie eine Sitzung ein<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Espacios-de-referencia\" >Referenzr\u00e4ume<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Ejecutando-un-bucle-de-cuadro\" >Ausf\u00fchren einer Frame-Schleife<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/puede-que-ya-lo-sepas\/#Conclusion\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Wenn Sie die WebXR-Ger\u00e4te-API bereits verwendet haben, haben Sie den gr\u00f6\u00dften Teil des Weges bereits zur\u00fcckgelegt.\n        <\/p>\n<p>\n          <time>13. Februar 2020<\/time><\/p>\n<\/header>\n<p>Die WebXR-Ger\u00e4te-API wurde im letzten Herbst in Chrome 79 ausgeliefert. Wie bereits erw\u00e4hnt, ist die API-Implementierung in Chrome in Arbeit. Chrome freut sich bekannt zu geben, dass ein Teil der Arbeit erledigt ist. In Chrome 81 sind zwei neue Funktionen verf\u00fcgbar:<\/p>\n<p>Dieser Artikel behandelt Augmented Reality. Wenn Sie die WebXR-Ger\u00e4te-API bereits verwendet haben, werden Sie froh sein zu wissen, dass es nur sehr wenig Neues zu lernen gibt. Das Aufrufen einer WebXR-Sitzung ist grunds\u00e4tzlich dasselbe. Das Ausf\u00fchren einer Frame-Schleife ist grunds\u00e4tzlich dasselbe. Die Unterschiede liegen in den Einstellungen, mit denen Inhalte f\u00fcr Augmented Reality angemessen angezeigt werden k\u00f6nnen. Wenn Sie mit den Grundlagen von WebXR nicht vertraut sind, sollten Sie meine vorherigen Beitr\u00e4ge zur WebXR-Appliance-API lesen oder zumindest mit den dort behandelten Themen vertraut sein. Sie m\u00fcssen wissen, wie Sie eine Sitzung anfordern und eingeben, und Sie m\u00fcssen wissen, wie Sie Frames schleifen.<\/p>\n<p>Informationen zu Positionierungstests finden Sie im Begleitartikel Positionieren virtueller Objekte in realen Ansichten. Der Code in diesem Artikel basiert auf dem Beispiel einer immersiven AR-Sitzung (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Manifestation<\/a><br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/immersive-web\/webxr-samples\/blob\/master\/immersive-vr-session.html\">Quelle<\/a>) von Immersive Web Working Group&#039;s <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">Beispiele f\u00fcr WebXR-Ger\u00e4te-APIs<\/a>.<\/p>\n<p>Bevor Sie in den Code eintauchen, sollten Sie die verwenden <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Beispiel f\u00fcr eine immersive Augmented Reality-Sitzung<\/a><br \/>\nwenigstens einmal. Sie ben\u00f6tigen ein modernes Android-Handy mit Chrome 81 oder h\u00f6her.<\/p>\n<h2 id=\"what's-it-useful-for\"><span class=\"ez-toc-section\" id=\"%C2%BFPara-que-sirve\"><\/span>Wof\u00fcr ist das? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Augmented Reality ist eine wertvolle Erg\u00e4nzung f\u00fcr viele neue oder vorhandene Webseiten, da sie AR-Anwendungsf\u00e4lle implementieren k\u00f6nnen, ohne den Browser zu verlassen. Sie k\u00f6nnen beispielsweise Menschen dabei helfen, auf Bildungsseiten zu lernen, und potenziellen K\u00e4ufern erm\u00f6glichen, Artikel in Ihrem Haus anzuzeigen, w\u00e4hrend sie einkaufen.<\/p>\n<p>Betrachten Sie den zweiten Anwendungsfall. Stellen Sie sich die Simulation vor, eine lebensgro\u00dfe Darstellung eines virtuellen Objekts in einer realen Szene zu platzieren. Nach dem Platzieren bleibt das Bild auf der ausgew\u00e4hlten Oberfl\u00e4che, erscheint in der Gr\u00f6\u00dfe, die es h\u00e4tte, wenn sich das tats\u00e4chliche Objekt auf dieser Oberfl\u00e4che befinden w\u00fcrde, und erm\u00f6glicht es dem Benutzer, sich darauf zu bewegen sowie n\u00e4her an oder weiter von dieser zu entfernen. Dies gibt dem Betrachter ein tieferes Verst\u00e4ndnis des Objekts als dies mit einem zweidimensionalen Bild m\u00f6glich ist.<\/p>\n<p>Ich bin mir ein wenig voraus. Um das zu tun, was ich beschrieben habe, ben\u00f6tigen Sie AR-Funktionalit\u00e4t und einige Mittel zum Erkennen von Oberfl\u00e4chen. Dieser Artikel behandelt den ersten. Der zugeh\u00f6rige Artikel zur WebXR Success Test API (oben verlinkt) behandelt Letzteres.<\/p>\n<h2 id=\"requesting-a-session\"><span class=\"ez-toc-section\" id=\"Solicitando-una-sesion\"><\/span>Sitzung anfordern <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Anfordern einer Sitzung ist dem, was Sie zuvor gesehen haben, sehr \u00e4hnlich. Stellen Sie zun\u00e4chst durch einen Anruf fest, ob der gew\u00fcnschte Sitzungstyp auf dem aktuellen Ger\u00e4t verf\u00fcgbar ist<br \/>\n<code>xr.isSessionSupported ()<\/code>. Anstatt zu fragen <code>&#039;immersive-vr&#039;<\/code> nach wie vor anfordern <code>&#039;immersive-ar&#039;<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>Navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">const<\/span> unterst\u00fctzt <span class=\"token operator\">=<\/span> <span class=\"token keyword\">erwarten<\/span> Navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">.<\/span><span class=\"token function\">isSessionSupported<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;immersive-ar&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>unterst\u00fctzt<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'click'<\/span><span class=\"token punctuation\">,<\/span> onButtonClicked<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Enter AR'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    xrButton<span class=\"token punctuation\">.<\/span>enabled <span class=\"token operator\">=<\/span> unterst\u00fctzt<span class=\"token punctuation\">;<\/span> <\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Dies aktiviert nach wie vor die Schaltfl\u00e4che &#039;AR eingeben&#039;. Wenn der Benutzer darauf klickt, rufen Sie an<br \/>\n<code>xr.requestSession ()<\/code>, auch passiert <code>&#039;immersive-ar&#039;<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">Lassen<\/span> xrSession <span class=\"token operator\">=<\/span> <span class=\"token keyword\">Null<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">onButtonClicked<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>xrSession<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    Navigator<span class=\"token punctuation\">.<\/span>xr<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestSession<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;immersive-ar&#039;<\/span><span class=\"token punctuation\">)<\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">Sitzung<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      xrSession <span class=\"token operator\">=<\/span> Sitzung<span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">      xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">=<\/span> <span class=\"token boolean\">wahr<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">      xrButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Exit AR'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">      <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span>xrSession<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">Ende<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"a-convenience-property\"><span class=\"ez-toc-section\" id=\"Una-propiedad-de-conveniencia\"><\/span>Eine Eigenschaft der Bequemlichkeit <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sie haben wahrscheinlich bemerkt, dass ich im letzten Codebeispiel zwei Zeilen hervorgehoben habe. das <code>XRSession<\/code> Das Objekt scheint eine Eigenschaft namens zu haben <code>isImmersive<\/code>. Dies ist eine Convenience-Eigenschaft, die ich selbst erstellt habe und die nicht Teil der Spezifikation ist. Ich werde es sp\u00e4ter verwenden, um Entscheidungen dar\u00fcber zu treffen, was dem Betrachter gezeigt werden soll. Warum ist diese Eigenschaft nicht Teil der API? Da Ihre Anwendung diese Eigenschaft m\u00f6glicherweise anders verfolgen muss, haben die Spezifikationsautoren beschlossen, die API sauber zu halten.<\/p>\n<h2 id=\"entering-a-session\"><span class=\"ez-toc-section\" id=\"Entrar-en-una-sesion\"><\/span>Geben Sie eine Sitzung ein <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Erinnere dich daran <code>onSessionStarted ()<\/code> es sah aus wie in meinem vorherigen Artikel:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><span class=\"token keyword\">Lassen<\/span> canvas <span class=\"token operator\">=<\/span> Dokument<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">wahr<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>Sitzung<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;local-floor&#039;<\/span><span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>xrRefSpace <span class=\"token operator\">=<\/span> refSpace<span class=\"token punctuation\">;<\/span><br>xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Ich muss ein paar Dinge hinzuf\u00fcgen, um das Rendern von Augmented Reality zu erkl\u00e4ren. Hintergrund ausschalten Zuerst werde ich feststellen, ob ich den Hintergrund ben\u00f6tige. Dies ist der erste Ort, an dem ich meine Convenience-Eigenschaft nutzen werde.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>Sitzung<span class=\"token punctuation\">.<\/span>isImmersive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token function\">removeBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token punctuation\">}<\/span><\/mark><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">Lassen<\/span> canvas <span class=\"token operator\">=<\/span> Dokument<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">wahr<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>Sitzung<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  refSpaceType <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;lokal&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'viewer'<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"reference-spaces\"><span class=\"ez-toc-section\" id=\"Espacios-de-referencia\"><\/span>Referenzr\u00e4ume <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Meine vorherigen Artikel gingen durch die Referenzr\u00e4ume. Das Beispiel, das ich beschreibe, verwendet zwei davon. Es ist also an der Zeit, diese Auslassung zu korrigieren.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Eine vollst\u00e4ndige Erkl\u00e4rung der Referenzr\u00e4ume w\u00e4re l\u00e4nger, als ich hier angeben kann. Ich werde nur \u00fcber Referenzr\u00e4ume sprechen, wenn es um Augmented Reality geht.<\/p>\n<\/div>\n<p>Ein Referenzraum beschreibt die Beziehung zwischen der virtuellen Welt und der physischen Umgebung des Benutzers. Dies geschieht durch:<\/p>\n<ul>\n<li>Geben Sie den Ursprung des Koordinatensystems an, mit dem Positionen in der virtuellen Welt ausgedr\u00fcckt werden.<\/li>\n<li>Geben Sie an, ob der Benutzer sich innerhalb dieses Koordinatensystems bewegen soll.<\/li>\n<li>Wenn dieses Koordinatensystem voreingestellte Grenzen hat. (In den hier gezeigten Beispielen werden keine Koordinatensysteme mit voreingestellten Grenzwerten verwendet.)<\/li>\n<\/ul>\n<p>F\u00fcr alle Referenzr\u00e4ume dr\u00fcckt die X-Koordinate links und rechts aus, Y dr\u00fcckt auf und ab und Z dr\u00fcckt vorw\u00e4rts und r\u00fcckw\u00e4rts aus. Positive Werte sind jeweils nach oben und hinten korrekt.<\/p>\n<p>Die von zur\u00fcckgegebenen Koordinaten <code>XRFrame.getViewerPose ()<\/code> h\u00e4ngen davon ab, was angefordert wird<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XRReferenceSpace#Reference_space_types\">Referenzraumtyp<\/a>. Mehr dazu, wenn wir zur Frame-Schleife kommen. An dieser Stelle m\u00fcssen wir einen Referenztyp ausw\u00e4hlen, der f\u00fcr Augmented Reality geeignet ist. Auch dies nutzt meine Convenience-Eigenschaft.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><mark class=\"highlight-line highlight-line-active\"><span class=\"token keyword\">Lassen<\/span> refSpaceType<\/mark><br><span class=\"highlight-line\"><span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">onSessionStarted<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">xrSession<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'end'<\/span><span class=\"token punctuation\">,<\/span> onSessionEnded<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>Sitzung<span class=\"token punctuation\">.<\/span>isImmersive<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token function\">removeBackground<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">Lassen<\/span> canvas <span class=\"token operator\">=<\/span> Dokument<span class=\"token punctuation\">.<\/span><span class=\"token function\">createElement<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'canvas'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  gl <span class=\"token operator\">=<\/span> canvas<span class=\"token punctuation\">.<\/span><span class=\"token function\">getContext<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'webgl'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> xrCompatible<span class=\"token operator\">:<\/span> <span class=\"token boolean\">wahr<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">updateRenderState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    baseLayer<span class=\"token operator\">:<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">XRWebGLLayer<\/span><span class=\"token punctuation\">(<\/span>Sitzung<span class=\"token punctuation\">,<\/span> gl<span class=\"token punctuation\">)<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\"><\/mark><br><mark class=\"highlight-line highlight-line-active\">  refSpaceType <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>isImmersive <span class=\"token operator\">?<\/span> <span class=\"token string\">&#039;lokal&#039;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">'viewer'<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestReferenceSpace<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">refSpace<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Wenn Sie die besucht haben <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-ar-session.html\">Beispiel f\u00fcr eine immersive Augmented Reality-Sitzung<\/a><br \/>\nSie werden feststellen, dass die Szene anfangs statisch und nicht Augmented Reality ist. Sie k\u00f6nnen Ihren Finger ziehen und schieben, um sich in der Szene zu bewegen. Wenn Sie auf &quot;AR STARTEN&quot; klicken, verschwindet der Hintergrund und Sie k\u00f6nnen sich durch Bewegen des Ger\u00e4ts in der Szene bewegen. Die Modi verwenden verschiedene Arten von Referenzr\u00e4umen. Der hervorgehobene Text oben zeigt, wie er ausgew\u00e4hlt ist. Verwenden Sie die folgenden Referenztypen:<\/p>\n<p><code>lokal<\/code>  - Der native Ursprung befindet sich zum Zeitpunkt der Sitzungserstellung in der Position des Betrachters. Dies bedeutet, dass die Erfahrung nicht unbedingt einen genau definierten Boden hat und die genaue Position des Ursprungs je nach Plattform variieren kann. Obwohl es keine voreingestellten Grenzen f\u00fcr den Raum gibt, wird erwartet, dass der Inhalt ohne andere Bewegung als Drehung angezeigt werden kann. Wie Sie aus unserem eigenen AR-Beispiel sehen k\u00f6nnen, ist eine gewisse Bewegung im Raum m\u00f6glich.<\/p>\n<p><code>Zuschauer<\/code>  - Dieser Bereich wird am h\u00e4ufigsten f\u00fcr Inhalte verwendet, die online auf der Seite angezeigt werden. Er folgt dem Anzeigeger\u00e4t. Wenn es an getViewerPose \u00fcbergeben wird, bietet es keine Nachverfolgung und meldet daher immer eine Pose am Ursprung, es sei denn, die Anwendung \u00e4ndert sie mit <code>XRReferenceSpace.getOffsetReferenceSpace ()<\/code>. Das Beispiel verwendet dies, um das Touch-Panning der Kamera zu erm\u00f6glichen.<\/p>\n<h2 id=\"running-a-frame-loop\"><span class=\"ez-toc-section\" id=\"Ejecutando-un-bucle-de-cuadro\"><\/span>Ausf\u00fchren einer Frame-Schleife <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Konzeptionell \u00e4ndert sich nichts an dem, was ich in der in meinen vorherigen Artikeln beschriebenen Virtual-Reality-Sitzung getan habe. \u00dcbergeben Sie den Referenzraumtyp an <code>XRFrame.getViewerPose ()<\/code>. R\u00fcckkehr <code>XRViewerPose<\/code> wird f\u00fcr den aktuellen Referenzraumtyp sein. Verwenden von<br \/>\n<code>Zuschauer<\/code> Als Standardwert kann eine Seite Inhaltsvorschauen anzeigen, bevor die Zustimmung des Benutzers f\u00fcr AR oder VR angefordert wird. Dies zeigt einen wichtigen Punkt: Online-Inhalte verwenden dieselbe Frame-Schleife wie immersive Inhalte, wodurch die Menge an Code reduziert wird, die beibehalten werden muss.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">Funktion<\/span> <span class=\"token function\">onXRFrame<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">hrTime<span class=\"token punctuation\">,<\/span> xrFrame<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token keyword\">Lassen<\/span> xrSession <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span>Sitzung<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">  xrSession<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestAnimationFrame<\/span><span class=\"token punctuation\">(<\/span>onXRFrame<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">Lassen<\/span> xrViewerPose <span class=\"token operator\">=<\/span> xrFrame<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewerPose<\/span><span class=\"token punctuation\">(<\/span>refSpaceType<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <\/span><br><span class=\"highlight-line\">  <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Fazit <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Diese Artikelserie behandelt nur die Grundlagen der Implementierung immersiver Inhalte im Web. Die Immersive Web Working Group stellt viele weitere Funktionen und Anwendungsf\u00e4lle vor. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/\">Beispiele f\u00fcr WebXR-Ger\u00e4te-APIs<\/a>. Wir haben gerade einen Testerfolgsartikel ver\u00f6ffentlicht, in dem eine API zum Erkennen von Oberfl\u00e4chen und Platzieren virtueller Elemente in einer realen Kameraansicht erl\u00e4utert wird. Schauen Sie sich diese an und schauen Sie im web.dev-Blog nach weiteren Artikeln im kommenden Jahr.<\/p>\n<p>Foto von <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@davidgrdm\">David Grandmougin<\/a> im <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/\">Unsplash<\/a><\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Wenn Sie die WebXR-Ger\u00e4te-API bereits verwendet haben, haben Sie den gr\u00f6\u00dften Teil des Weges geschafft. 13. Februar 2020 WebXR Device API ausgeliefert am\u2026<\/p>","protected":false},"author":1,"featured_media":83844,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83843","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Puede que ya lo sepas - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Puede que ya lo sepas\" \/>\n<meta property=\"og:description\" content=\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-28T05:49:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Puede que ya lo sepas\",\"datePublished\":\"2022-09-28T05:49:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"},\"wordCount\":1355,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\",\"name\":\"Puede que ya lo sepas - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"datePublished\":\"2022-09-28T05:49:58+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/sie-konnen-bereits-wissen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero2-3532617.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero2-3532617-8674538-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Puede que ya lo sepas - R Marketing Digital","description":"Wenn Sie die WebXR-Ger\u00e4te-API bereits verwendet haben, haben Sie den gr\u00f6\u00dften Teil des Weges bereits zur\u00fcckgelegt. 13. Februar 2020 WebXR-Ger\u00e4te-API ausgeliefert am","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","og_locale":"de_DE","og_type":"article","og_title":"Puede que ya lo sepas","og_description":"Si ya ha utilizado la API de dispositivo WebXR, ya ha recorrido la mayor parte del camino. 13 de febrero de 2020 La API del dispositivo WebXR se envi\u00f3 el","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-28T05:49:58+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Puede que ya lo sepas","datePublished":"2022-09-28T05:49:58+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"},"wordCount":1355,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/","name":"Puede que ya lo sepas - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","datePublished":"2022-09-28T05:49:58+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Wenn Sie die WebXR-Ger\u00e4te-API bereits verwendet haben, haben Sie den gr\u00f6\u00dften Teil des Weges bereits zur\u00fcckgelegt. 13. Februar 2020 WebXR-Ger\u00e4te-API ausgeliefert am","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/sie-konnen-bereits-wissen\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero2-3532617.jpg","width":1200,"height":800,"caption":"hero2-3532617-8674538-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83843"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83843\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83844"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}