{"id":83826,"date":"2022-09-27T13:13:03","date_gmt":"2022-09-27T11:13:03","guid":{"rendered":"https:\/\/rmarketingdigital.com\/la-realidad-virtual-llega-a-la-web-parte-ii\/"},"modified":"2021-07-06T09:58:31","modified_gmt":"2021-07-06T07:58:31","slug":"la-realidad-virtual-llega-a-la-web-parte-ii","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/","title":{"rendered":"Virtuelle Realit\u00e4t kommt ins Web, Teil II"},"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\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Que-no-es-este-articulo\" >Was ist dieser Artikel nicht?<\/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\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Los-jugadores-y-el-juego\" >Die Spieler und das Spiel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Los-jugadores\" >Spieler<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#XRViewerPose\" >XRViewerPose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#XRView\" >XRView<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#XRWebGLLayer\" >XRWebGLLayer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#WebGLFramebuffer\" >WebGLFramebuffer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#XRViewport\" >XRViewport<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#WebGLRenderingContext\" >WebGLRenderingContext<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#El-juego\" >Das Spiel<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Obten-la-pose-del-espectador\" >Holen Sie sich die Pose des Zuschauers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Un-pequeno-desvio\" >Ein kleiner Umweg<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Pase-%E2%80%98vincular-el-WebGLFramebuffer\" >\u00dcbergeben Sie den WebGLFramebuffer (&#039;binden&#039;)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Iterar-sobre-cada-objeto-XRView\" >Durchlaufen Sie jedes XRView-Objekt<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Pase-el-objeto-XRViewport-al-WebGLRenderingContext\" >\u00dcbergeben Sie das XRViewport-Objekt an den WebGLRenderingContext<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#El-webGLRenContext\" >Der webGLRenContext<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#Dibuja-algo-en-el-framebuffer\" >Zeichne etwas in den Framebuffer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/la-realidad-virtual-llega-a-la-web-parte-ii\/#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>          Alles \u00fcber die Frame-Schleife\n        <\/p>\n<p>\n          <time>13. Februar 2020<\/time><\/p>\n<\/header>\n<p>Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s de la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebXR_Device_API\">WebXR-Ger\u00e4te-API<\/a>.  Adem\u00e1s proporcion\u00e9 instrucciones para solicitar, acceder y culminar una sesi\u00f3n de XR.<\/p>\n<p>Este post describe el bucle de tramas, que es un bucle infinito controlado por el usuario-agente en el que el contenido se dibuja repetidamente en la pantalla.  El contenido se dibuja en bloques discretos llamados marcos.  La sucesi\u00f3n de fotogramas crea la ilusi\u00f3n de movimiento.<\/p>\n<h2 id=\"what-this-article-is-not\"><span class=\"ez-toc-section\" id=\"Que-no-es-este-articulo\"><\/span>Was ist dieser Artikel nicht? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WebGL y WebGL2 son los \u00fanicos medios para representar contenido durante un bucle de cuadro en una aplicaci\u00f3n WebXR.  Por suerte, muchos marcos proporcionan una capa de abstracci\u00f3n al mismo tiempo de WebGL y WebGL2.  Dichos marcos incluyen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/threejs.org\/\">three.js<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.babylonjs.com\/\">babylonjs<\/a>y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/playcanvas.com\/\">Playcanvas<\/a>, W\u00e4hrend <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/aframe.io\/\">Ein Rahmen<\/a> y<br \/>\nReaccionar 360 est\u00e1n dise\u00f1ados para interactuar con WebXR.<\/p>\n<p>Este post no es un tutorial de WebGL ni de framework.  Explica los conceptos b\u00e1sicos de un bucle de fotogramas usando la muestra de sesi\u00f3n de realidad virtual inmersiva del Grupo de trabajo web inmersivo (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/immersive-web.github.io\/webxr-samples\/immersive-vr-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>).  Si desea sumergirse en WebGL o en uno de los marcos, Internet proporciona una lista creciente de posts.<\/p>\n<h2 id=\"the-players-and-the-game\"><span class=\"ez-toc-section\" id=\"Los-jugadores-y-el-juego\"><\/span>Die Spieler und das Spiel <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cuando trataba de comprender el bucle de cuadros, segu\u00eda perdi\u00e9ndome en los detalles.  Hay muchos objetos en juego, y algunos de ellos solo se nombran por propiedades de referencia en otros objetos.  Para ayudarte a mantenerlo claro, describir\u00e9 los objetos, a los que llamo \u00abjugadores\u00bb.  Posteriormente describir\u00e9 c\u00f3mo interact\u00faan, a lo que llamo \u00abel juego\u00bb.<\/p>\n<h2 id=\"the-players\"><span class=\"ez-toc-section\" id=\"Los-jugadores\"><\/span>Spieler <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"xrviewerpose\"><span class=\"ez-toc-section\" id=\"XRViewerPose\"><\/span>XRViewerPose <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una pose es la posici\u00f3n y orientaci\u00f3n de algo en el espacio 3D.  Tanto los espectadores como los dispositivos de entrada disponen una pose, pero lo que nos preocupa aqu\u00ed es la pose del espectador.  Ambas poses de visor y dispositivo de entrada disponen <code>verwandeln<\/code> Attribut, das seine Position als Vektor und seine Ausrichtung als Quaternion relativ zum Ursprung beschreibt. Der Ursprung wird basierend auf der Art des Referenzierungsbereichs angegeben, der beim Aufruf angefordert wird <code>XRSession.requestReferenceSpace ()<\/code>.<\/p>\n<p>Los espacios de referencia tardan un poco en explicarse.  Los cubro en profundidad en realidad aumentada.  La muestra que estoy utilizando como base para este post utiliza un <code>&#039;lokal&#039;<\/code> Referenzraum, dh der Ursprung befindet sich zum Zeitpunkt der Sitzungserstellung ohne genau definierten Boden in der Position des Betrachters, und seine genaue Position kann je nach Plattform variieren.<\/p>\n<h3 id=\"xrview\"><span class=\"ez-toc-section\" id=\"XRView\"><\/span>XRView <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Una vista corresponde a una c\u00e1mara que visualiza la escena virtual.  Una vista adem\u00e1s cuenta con una<br \/>\n<code>verwandeln<\/code> atributo que describe su posici\u00f3n como vector y su orientaci\u00f3n.  Estos se proporcionan como un par de vector \/ cuaterni\u00f3n y como una matriz id\u00e9ntico, puede utilizar cualquiera de las representaciones dependiendo de cu\u00e1l se ajuste mejor a su c\u00f3digo.  Cada vista corresponde a una pantalla o una parte de una pantalla utilizada por un dispositivo para presentar im\u00e1genes al espectador. <code>XRView<\/code> Objekte werden in einem Array von der zur\u00fcckgegeben <code>XRViewerPose<\/code> objeto.  El n\u00famero de vistas de la matriz var\u00eda.  En los dispositivos m\u00f3viles, una escena de RA cuenta con una vista, que puede o no cubrir la pantalla del dispositivo.  Los auriculares suelen tener dos vistas, una para cada ojo.<\/p>\n<h3 id=\"xrwebgllayer\"><span class=\"ez-toc-section\" id=\"XRWebGLLayer\"><\/span>XRWebGLLayer <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ebenen bieten eine Quelle f\u00fcr Bitmap-Bilder und Beschreibungen, wie diese Bilder auf dem Ger\u00e4t gerendert werden sollen. Diese Beschreibung erfasst nicht, was dieser Player tut. Ich habe es mir als Vermittler zwischen einem Ger\u00e4t und einem Ger\u00e4t vorgestellt<br \/>\n<code>WebGLRenderingContext<\/code>. MDN vertritt den gleichen Standpunkt und erkl\u00e4rt, dass es eine &quot;Verbindung&quot; zwischen beiden herstellt. Als solches bietet es Zugriff auf die anderen Spieler.<\/p>\n<p>Im Allgemeinen speichern WebGL-Objekte Statusinformationen zum Rendern von 2D- und 3D-Grafiken.<\/p>\n<h3 id=\"webglframebuffer\"><span class=\"ez-toc-section\" id=\"WebGLFramebuffer\"><\/span>WebGLFramebuffer <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ein Framebuffer liefert Bilddaten an die <code>WebGLRenderingContext<\/code>.  Posteriormente de recuperarlo del <code>XRWebGLLayer<\/code>, b\u00e1sicamente p\u00e1salo a la corriente<br \/>\n<code>WebGLRenderingContext<\/code>. Abgesehen von einem Anruf <code>bindFramebuffer ()<\/code> (m\u00e1s sobre eso m\u00e1s adelante) nunca acceder\u00e1 a este objeto de forma directa.  B\u00e1sicamente lo pasar\u00e1 del <code>XRWebGLLayer<\/code> zum WebGLRenderingContext.<\/p>\n<h3 id=\"xrviewport\"><span class=\"ez-toc-section\" id=\"XRViewport\"><\/span>XRViewport <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ein Grafikfenster liefert die Koordinaten und Abmessungen eines rechteckigen Bereichs in der <code>WebGLFramebuffer<\/code>.<\/p>\n<h3 id=\"webglrenderingcontext\"><span class=\"ez-toc-section\" id=\"WebGLRenderingContext\"><\/span>WebGLRenderingContext <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Un contexto de representaci\u00f3n es un punto de acceso program\u00e1tico para un lienzo (el espacio en el que estamos dibujando).  Para hacer esto, requiere un <code>WebGLFramebuffer<\/code> und ein XRViewport.<\/p>\n<p>Note la vinculaci\u00f3n entre <code>XRWebGLLayer<\/code> y <code>WebGLRenderingContext<\/code>. Einer entspricht dem Ger\u00e4t des Betrachters und der andere der Webseite.<br \/>\n<code>WebGLFramebuffer<\/code> y <code>XRViewport<\/code> Sie gehen von der ersten zur zweiten.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Spieler-2246022' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/players-2246022.png' style=\"max-width: 100%;\"><figcaption class=\"w-figcaption w-figcaption--fullbleed\">\n<p>    La vinculaci\u00f3n entre <code>XRWebGLLayer<\/code> y <code>WebGLRenderingContext<\/code><br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"the-game\"><span class=\"ez-toc-section\" id=\"El-juego\"><\/span>Das Spiel <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ahora que sabemos qui\u00e9nes son los jugadores, veamos el juego que juegan.  Es un juego que comienza de nuevo con cada fotograma.  Recuerde que los fotogramas son parte de un bucle de fotogramas que surge a una velocidad que depende del hardware subyacente.  Para las aplicaciones de realidad virtual, los fps pueden oscilar entre 60 y 144. AR para Android se ejecuta a 30 fps.  Su c\u00f3digo no debe hacerse cargo ninguna velocidad de fotogramas en particular.<\/p>\n<p>El procedimiento b\u00e1sico para el bucle de cuadro se ve as\u00ed:<\/p>\n<ol>\n<li>Anruf <code>XRSession.requestAnimationFrame ()<\/code>. Als Antwort ruft der Benutzeragent das auf <code>XRFrameRequestCallback<\/code>, que usted establece.<\/li>\n<li>Innerhalb Ihrer R\u00fcckruffunktion:\n<ol>\n<li>Anruf <code>XRSession.requestAnimationFrame ()<\/code> nochmal.<\/li>\n<li>Holen Sie sich die Pose des Betrachters.<\/li>\n<li>Pass (&#039;Link&#039;) die <code>WebGLFramebuffer<\/code> von dem <code>XRWebGLLayer<\/code> zum <code>WebGLRenderingContext<\/code>.<\/li>\n<li>Iterieren Sie \u00fcber jeden <code>XRView<\/code> Objekt, Abrufen seiner <code>XRViewport<\/code> von dem <code>XRWebGLLayer<\/code> und weitergeben an <code>WebGLRenderingContext<\/code>.<\/li>\n<li>Zeichne etwas in den Framebuffer.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Como los pasos 1 y 2a se trataron en el post anterior, comenzar\u00e9 en el paso 2b.<\/p>\n<h3 id=\"get-the-viewer's-pose\"><span class=\"ez-toc-section\" id=\"Obten-la-pose-del-espectador\"><\/span>Holen Sie sich die Pose des Zuschauers <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Probablemente no es necesario decirlo.  Para dibujar cualquier cosa en AR o VR, necesito saber d\u00f3nde est\u00e1 el espectador y hacia d\u00f3nde est\u00e1 mirando.  La posici\u00f3n y la orientaci\u00f3n del espectador son proporcionadas por un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/XRViewerPose\">XRViewerPose-Objekt<\/a>. Ich bekomme die Pose des Zuschauers, der anruft <code>XRFrame.getViewerPose ()<\/code> im aktuellen Animationsrahmen. Ich \u00fcbergebe Ihnen den Referenzraum, den ich beim Einrichten der Sitzung erworben habe. Die von diesem Objekt zur\u00fcckgegebenen Werte beziehen sich immer auf den Referenzbereich, den ich beim Betreten der aktuellen Sitzung angefordert habe. Wie Sie sich vielleicht erinnern, muss ich den aktuellen Referenzraum \u00fcbergeben, wenn ich die Pose anfordere.<\/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>xrRefSpace<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token keyword\">wenn<\/span> <span class=\"token punctuation\">(<\/span>xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><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<p>Hay una pose del espectador que representa la posici\u00f3n general del usuario, dicho de otra forma, la cabeza del espectador o la c\u00e1mara del tel\u00e9fono en el caso de un tel\u00e9fono inteligente.  La pose le dice a su aplicaci\u00f3n d\u00f3nde est\u00e1 el espectador.  Usos reales de renderizado de im\u00e1genes<br \/>\n<code>XRView<\/code> Objekte, zu denen ich gleich komme.<\/p>\n<p>Antes de continuar, pruebo si la pose del espectador fue devuelta en caso de que el sistema pierda el seguimiento o bloquee la pose por razones de privacidad.  El seguimiento es la capacidad del dispositivo XR para comprender d\u00f3nde est\u00e1 y \/ o sus dispositivos de entrada en vinculaci\u00f3n con el entorno.  El seguimiento se puede perder de varias formas y var\u00eda seg\u00fan el m\u00e9todo utilizado para realizar el seguimiento.  A modo de ejemplo, si se usan c\u00e1maras en los auriculares o en el tel\u00e9fono para rastrear, el dispositivo puede perder su capacidad para establecer d\u00f3nde se encuentra en situaciones con poca luz o sin luz, o si las c\u00e1maras est\u00e1n cubiertas.<\/p>\n<p>Un ejemplo de bloqueo de la pose por motivos de privacidad es que si el auricular muestra un cuadro de di\u00e1logo de seguridad, como una solicitud de permiso, el navegador puede dejar de proporcionar poses a la aplicaci\u00f3n mientras esto ocurre.  Pero ya llam\u00e9<br \/>\n<code>XRSession.requestAnimationFrame ()<\/code> de modo que si el sistema puede recuperarse, el bucle de tramas continuar\u00e1.  Caso contrario, el agente de usuario finalizar\u00e1 la sesi\u00f3n y llamar\u00e1 al<br \/>\n<code>Ende<\/code> Event-Handler.<\/p>\n<h3 id=\"a-short-detour\"><span class=\"ez-toc-section\" id=\"Un-pequeno-desvio\"><\/span>Ein kleiner Umweg <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El paso siguiente necesita objetos creados durante la configuraci\u00f3n de la sesi\u00f3n.  Recuerde que cre\u00e9 un lienzo y le indiqu\u00e9 que creara un contexto de representaci\u00f3n Web GL compatible con XR, que obtuve llamando <code>canvas.getContext ()<\/code>.  Todo el dibujo se realiza a trav\u00e9s de la API de WebGL, la API de WebGL2 o un marco basado en WebGL como Three.js.  Este contexto se pas\u00f3 al objeto de sesi\u00f3n a trav\u00e9s de <code>updateRenderState ()<\/code>zusammen mit einer neuen Instanz von <code>XRWebGLLayer<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><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><span class=\"token keyword\">Lassen<\/span> webGLRenContext <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><br>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>xrSession<span class=\"token punctuation\">,<\/span> webGLRenContext<span class=\"token punctuation\">)<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"pass-('bind')-the-webglframebuffer\"><span class=\"ez-toc-section\" id=\"Pase-%E2%80%98vincular-el-WebGLFramebuffer\"><\/span>\u00dcbergeben Sie den WebGLFramebuffer (&#039;binden&#039;) <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>das <code>XRWebGLLayer<\/code> stellt einen Framebuffer f\u00fcr die bereit <code>WebGLRenderingContext<\/code><br \/>\nWird speziell f\u00fcr die Verwendung mit WebXR bereitgestellt und \u00fcberschreibt den Standard-Framebuffer zum Rendern von Kontexten. Dies wird in der Sprache von WebGL als &quot;Bindung&quot; bezeichnet.<\/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><span class=\"highlight-line\">  <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>xrRefSpace<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>xrViewerPose<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> glLayer <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>renderState<span class=\"token punctuation\">.<\/span>baseLayer<span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">    webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token function\">bindFramebuffer<\/span><span class=\"token punctuation\">(<\/span>webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token constant\">FRAMEBUFFER<\/span><span class=\"token punctuation\">,<\/span> glLayer<span class=\"token punctuation\">.<\/span>framebuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><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<h3 id=\"iterate-over-each-xrview-object\"><span class=\"ez-toc-section\" id=\"Iterar-sobre-cada-objeto-XRView\"><\/span>Durchlaufen Sie jedes XRView-Objekt <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Posteriormente de conseguir la pose y vincular el framebuffer, es hora de conseguir las ventanas gr\u00e1ficas.  los <code>XRViewerPose<\/code> enth\u00e4lt ein Array von XRView-Schnittstellen, von denen jede einen Bildschirm oder einen Teil eines Bildschirms darstellt. Sie enthalten Informationen, die zum Rendern von Inhalten erforderlich sind, die f\u00fcr das Ger\u00e4t und den Betrachter korrekt positioniert sind, z. B. Sichtfeld, Augenbewegung und andere optische Eigenschaften. Als Zwei-Augen-Zeichnung habe ich zwei Ansichten, die ich durchschleife und f\u00fcr jede ein eigenes Bild zeichne.<\/p>\n<p>Al poner en pr\u00e1ctica para la realidad aumentada basada en tel\u00e9fonos, solo tendr\u00eda una vista, pero todav\u00eda usar\u00eda un bucle.  A\u00fan cuando puede parecer in\u00fatil iterar a trav\u00e9s de una vista, hacerlo le posibilita tener una \u00fanica ruta de renderizado para un espectro de experiencias inmersivas.  Esta es una diferencia importante entre WebXR y otros sistemas inmersivos.<\/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><span class=\"highlight-line\">  <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>xrRefSpace<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>xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">Lassen<\/span> glLayer <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>renderState<span class=\"token punctuation\">.<\/span>baseLayer<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token function\">bindFramebuffer<\/span><span class=\"token punctuation\">(<\/span>webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token constant\">FRAMEBUFFER<\/span><span class=\"token punctuation\">,<\/span> glLayer<span class=\"token punctuation\">.<\/span>framebuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token keyword\">zum<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">Lassen<\/span> xrView <span class=\"token keyword\">of<\/span> xrViewerPose<span class=\"token punctuation\">.<\/span>views<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      <\/mark><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token punctuation\">}<\/span><\/mark><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=\"pass-the-xrviewport-object-to-the-webglrenderingcontext\"><span class=\"ez-toc-section\" id=\"Pase-el-objeto-XRViewport-al-WebGLRenderingContext\"><\/span>\u00dcbergeben Sie das XRViewport-Objekt an den WebGLRenderingContext <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>EIN <code>XRView<\/code> objeto se refiere a lo que se puede observar en una pantalla.  Pero para dibujar en esa vista, necesito coordenadas y dimensiones que sean espec\u00edficas de mi dispositivo.  Del mismo modo que con el framebuffer, los solicito al <code>XRWebGLLayer<\/code> und gib sie weiter<br \/>\n<code>WebGLRenderingContext<\/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\">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><span class=\"highlight-line\">  <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>xrRefSpace<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>xrViewerPose<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">Lassen<\/span> glLayer <span class=\"token operator\">=<\/span> xrSession<span class=\"token punctuation\">.<\/span>renderState<span class=\"token punctuation\">.<\/span>baseLayer<span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token function\">bindFramebuffer<\/span><span class=\"token punctuation\">(<\/span>webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token constant\">FRAMEBUFFER<\/span><span class=\"token punctuation\">,<\/span> glLayer<span class=\"token punctuation\">.<\/span>framebuffer<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token keyword\">zum<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">Lassen<\/span> xrView <span class=\"token keyword\">of<\/span> xrViewerPose<span class=\"token punctuation\">.<\/span>views<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      <span class=\"token keyword\">Lassen<\/span> viewport <span class=\"token operator\">=<\/span> glLayer<span class=\"token punctuation\">.<\/span><span class=\"token function\">getViewport<\/span><span class=\"token punctuation\">(<\/span>xrView<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      webGLRenContext<span class=\"token punctuation\">.<\/span><span class=\"token function\">viewport<\/span><span class=\"token punctuation\">(<\/span>viewport<span class=\"token punctuation\">.<\/span>x<span class=\"token punctuation\">,<\/span> viewport<span class=\"token punctuation\">.<\/span>y<span class=\"token punctuation\">,<\/span> viewport<span class=\"token punctuation\">.<\/span>Breite<span class=\"token punctuation\">,<\/span> viewport<span class=\"token punctuation\">.<\/span>H\u00f6he<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><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><br><span class=\"highlight-line\"><span class=\"token punctuation\">}<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"the-webglrencontext\"><span class=\"ez-toc-section\" id=\"El-webGLRenContext\"><\/span>Der webGLRenContext <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Al escribir este post, tuve un debate con algunos colegas sobre el nombre del <code>webGLRenContext<\/code> objeto.  Los scripts de muestra y la mayor\u00eda del c\u00f3digo WebXR b\u00e1sicamente llaman a esta variable <code>gl<\/code>.  Cuando estaba trabajando para saber las muestras, segu\u00eda olvidando lo que <code>gl<\/code> bezogen auf. ich nannte es <code>webGLRenContext<\/code> um Sie daran zu erinnern, wie Sie erfahren, dass dies ein Beispiel f\u00fcr ist <code>WebGLRenderingContext<\/code>.<\/p>\n<p>La raz\u00f3n es que utilizar <code>gl<\/code> posibilita que los nombres de los m\u00e9todos se parezcan a sus contrapartes en la API de OpenGL ES 2.0, que se usa para crear realidad virtual en lenguajes compilados.  Este hecho es obvio si ha escrito aplicaciones de realidad virtual utilizando OpenGL, pero confuso si es absolutamente nuevo en esta tecnolog\u00eda.<\/p>\n<h3 id=\"draw-something-to-the-framebuffer\"><span class=\"ez-toc-section\" id=\"Dibuja-algo-en-el-framebuffer\"><\/span>Zeichne etwas in den Framebuffer <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si se siente verdaderamente ambicioso, puede utilizar WebGL de forma directa, pero no lo recomiendo.  Es mucho m\u00e1s sencillo usar uno de los marcos enumerados en la parte superior.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Fazit <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Este no es el final de las actualizaciones o posts de WebXR.  Puedes hallar un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebXR_Device_API\">Referenz f\u00fcr alle Schnittstellen und Mitglieder von WebXR<\/a><br \/>\nin MDN. Befolgen Sie f\u00fcr bevorstehende Verbesserungen der Benutzeroberfl\u00e4che die einzelnen Funktionen unter <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromestatus.com\/features#WebXR\">Chrome-Status<\/a>.<\/p>\n<p>Foto von <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@jeshoots\">JESHOOTS.COM<\/a> im <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/\">Unsplash<\/a><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Alles \u00fcber Frame Loop 13. Februar 2020 Ich habe k\u00fcrzlich VR Hits the Web ver\u00f6ffentlicht, einen Beitrag, der die Grundlagen hinter der VR-API vorstellt\u2026<\/p>","protected":false},"author":1,"featured_media":83827,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83826","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>La realidad virtual llega a la web, parte II - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s\" \/>\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\/realite-virtuelle-arrive-sur-le-web-partie-ii\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La realidad virtual llega a la web, parte II\" \/>\n<meta property=\"og:description\" content=\"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-27T11:13:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.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\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"La realidad virtual llega a la web, parte II\",\"datePublished\":\"2022-09-27T11:13:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/\"},\"wordCount\":1869,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1507979.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/\",\"name\":\"La realidad virtual llega a la web, parte II - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1507979.jpg\",\"datePublished\":\"2022-09-27T11:13:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/realite-virtuelle-arrive-sur-le-web-partie-ii\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1507979.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1507979.jpg\",\"width\":1200,\"height\":800,\"caption\":\"hero-1507979-9570088-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":"La realidad virtual llega a la web, parte II - R Marketing Digital","description":"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s","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\/realite-virtuelle-arrive-sur-le-web-partie-ii\/","og_locale":"de_DE","og_type":"article","og_title":"La realidad virtual llega a la web, parte II","og_description":"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-27T11:13:03+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.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\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"La realidad virtual llega a la web, parte II","datePublished":"2022-09-27T11:13:03+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/"},"wordCount":1869,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/","name":"La realidad virtual llega a la web, parte II - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.jpg","datePublished":"2022-09-27T11:13:03+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Todo sobre el frame loop 13 de febrero de 2020 Recientemente, publiqu\u00e9 la realidad virtual llega a la web, un post que presenta conceptos b\u00e1sicos detr\u00e1s","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/realite-virtuelle-arrive-sur-le-web-partie-ii\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1507979.jpg","width":1200,"height":800,"caption":"hero-1507979-9570088-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\/83826","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=83826"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83826\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83827"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}