{"id":1290,"date":"2026-05-18T09:20:49","date_gmt":"2026-05-18T09:20:49","guid":{"rendered":"https:\/\/salvador.mata.com.mx\/blog\/?p=1290"},"modified":"2026-05-18T15:20:04","modified_gmt":"2026-05-18T15:20:04","slug":"webar-para-range","status":"publish","type":"post","link":"https:\/\/salvador.mata.com.mx\/blog\/2026\/05\/18\/webar-para-range\/","title":{"rendered":"WebAR para Range"},"content":{"rendered":"<p>Durante a\u00f1os, plataformas como <strong>8thWall<\/strong> demostraron que la realidad aumentada en navegador pod\u00eda ser una herramienta incre\u00edble para experiencias interactivas, marketing, visualizaci\u00f3n 3D y contenido educativo.<\/p>\n<p>Cuando 8thWall cerr\u00f3 operaciones como plataforma independiente y posteriormente liber\u00f3 parte de su tecnolog\u00eda, qued\u00f3 algo muy claro: todav\u00eda existe un enorme inter\u00e9s por crear experiencias WebAR accesibles, abiertas y controladas por los propios desarrolladores.<\/p>\n<p>Al mismo tiempo, muchas plataformas <strong>WebAR<\/strong> tradicionales obligaban a simplificar materiales, texturas y ciertos workflows 3D para asegurar compatibilidad y rendimiento en dispositivos m\u00f3viles. Parte de la idea detr\u00e1s de este proyecto fue precisamente ofrecer un pipeline m\u00e1s flexible y abierto para trabajar con escenas GLTF\/GLB modernas, materiales PBR y arquitecturas runtime m\u00e1s extensibles.<\/p>\n<p>Ah\u00ed es donde nace este proyecto.<\/p>\n<p><span class=\"shared-files-shortcode-admin-list shared-files-shortcode-admin-list-file shared-files-shortcode-1258\" title=\"&lt;div class=&quot;shared-files-embed-6a0c2c91b5edf shared-files-main-container&quot; data-elem-class=&quot;shared-files-embed-6a0c2c91b5edf&quot; data-search-type=&quot;0&quot; data-post-id=&quot;1290&quot;&gt;&lt;div class=&quot;shared-files-search&quot;&gt;&lt;ul class=&quot;shared-files-main-file-list&quot;&gt;&lt;li class=&quot;shared-files-card-1258&quot;&gt;&lt;div class=&quot;shared-files-main-elements&quot;&gt;&lt;div class=&quot;shared-files-main-elements-left&quot; style=&quot;background-image: url(https:\/\/salvador.mata.com.mx\/blog\/wp-content\/plugins\/shared-files\/img\/2020\/zip.svg);&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-main-elements-right&quot;&gt;&lt;a class=&quot;shared-files-file-title&quot;  data-file-type=&quot;&quot;  data-file-url=&quot;\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip&quot;  data-external-url=&quot;&quot;  data-image-url=&quot;&quot; href=&quot;\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip&quot; target=&quot;_blank&quot;&gt;WebAR exporter for RanGE&lt;\/a&gt;&lt;span class=&quot;shared-file-size&quot;&gt;208.22 KB&lt;\/span&gt;&lt;span class=&quot;shared-file-date&quot;&gt;May 17, 2026&lt;\/span&gt;&lt;div class=&quot;shared-files-download-counter&quot;&gt;&lt;span&gt;Downloads: 13&lt;\/span&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-download-button-container&quot;&gt;&lt;a href=&quot;\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip&amp;download=1&quot; class=&quot;shared-files-download-button&quot;  download&gt;Download&lt;\/a&gt;&lt;\/div&gt;&lt;div class=&quot;shared-files-edit-actions&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/div&gt;&lt;\/div&gt;\"><div class=\"shared-files-embed-6a0c2c91b6fe0 shared-files-main-container\" data-elem-class=\"shared-files-embed-6a0c2c91b6fe0\" data-search-type=\"0\" data-post-id=\"1258\"><div class=\"shared-files-search\"><ul class=\"shared-files-main-file-list\"><li class=\"shared-files-card-1258\"><div class=\"shared-files-main-elements\"><div class=\"shared-files-main-elements-left\" style=\"background-image: url(https:\/\/salvador.mata.com.mx\/blog\/wp-content\/plugins\/shared-files\/img\/2020\/zip.svg);\"><\/div><div class=\"shared-files-main-elements-right\"><a class=\"shared-files-file-title\"  data-file-type=\"\"  data-file-url=\"\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip\"  data-external-url=\"\"  data-image-url=\"\" href=\"\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip\" target=\"_blank\">WebAR exporter for RanGE<\/a><span class=\"shared-file-size\">208.22 KB<\/span><span class=\"shared-file-date\">May 17, 2026<\/span><div class=\"shared-files-download-counter\"><span>Downloads: 13<\/span><\/div><div class=\"shared-files-download-button-container\"><a href=\"\/blog\/uploads\/shared-files\/1258\/?range_webar_exporter-1.zip&download=1\" class=\"shared-files-download-button\"  download>Download<\/a><\/div><div class=\"shared-files-edit-actions\"><\/div><\/div><\/div><\/li><\/ul><\/div><\/div><\/span><\/p>\n<p class=\"isSelectedEnd\"><strong>Incluye:<\/strong><\/p>\n<ul data-spread=\"false\">\n<li><span style=\"color: #ff9900;\">instalaci\u00f3n<\/span><\/li>\n<li><span style=\"color: #ff9900;\">exportaci\u00f3n WebAR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">configuraci\u00f3n AR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">viewer mode<\/span><\/li>\n<li><span style=\"color: #ff9900;\">runtime systems<\/span><\/li>\n<li><span style=\"color: #ff9900;\">troubleshooting<\/span><\/li>\n<li><span style=\"color: #ff9900;\">flujo de trabajo recomendado<\/span><\/li>\n<\/ul>\n<h2 style=\"text-align: left;\">Documentaci\u00f3n<\/h2>\n<p class=\"isSelectedEnd\">\ud83d\udcd8 <strong>Gu\u00eda y documentaci\u00f3n del addon<\/strong>:<br \/>\n<a href=\"https:\/\/salvador.mata.com.mx\/blog\/webar-for-range-docs\/\" target=\"_blank\" rel=\"noopener\">WebAR For Range<\/a><\/p>\n<hr \/>\n<h2 style=\"text-align: center;\"><span style=\"color: #008000;\">\u00bfQu\u00e9 es Range WebAR Exporter?<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1273\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_2.jpg\" alt=\"\" width=\"1197\" height=\"659\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_2.jpg 1197w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_2-300x165.jpg 300w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_2-1024x564.jpg 1024w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_2-768x423.jpg 768w\" sizes=\"auto, (max-width: 1197px) 100vw, 1197px\" \/> Range <span style=\"color: #99cc00;\"><strong>WebAR Exporter<\/strong><\/span> es un <strong>addon<\/strong> para <a href=\"https:\/\/rangeengine.tech\/\"><strong>Range Engine<\/strong><\/a> enfocado en exportar escenas interactivas a experiencias <strong>WebAR<\/strong> modernas usando:<\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">Three.js<\/span><\/li>\n<li><span style=\"color: #ff9900;\">WebXR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">GLTF \/ GLB<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Runtime modular portable<\/span><\/li>\n<\/ul>\n<p>El objetivo no es solo \u201cexportar modelos 3D\u201d, sino crear una base flexible para experiencias interactivas en navegador con <strong><em>arquitectura extensible<\/em><\/strong> y orientada a <strong><em>runtime<\/em><\/strong>.<\/p>\n<hr \/>\n<h1 style=\"text-align: center;\"><span style=\"color: #008000;\">Caracter\u00edsticas actuales<\/span><\/h1>\n<ul>\n<li><span style=\"color: #ff9900;\">Exportaci\u00f3n directa a WebAR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Viewer Mode y AR Mode<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Hit-test placement<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Runtime modular<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Sistema de componentes y eventos<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Hotspots interactivos<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Animaciones runtime<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Overlay debug tools<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Arquitectura portable basada en SceneData<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Preparaci\u00f3n para integraci\u00f3n futura con sistemas visuales de nodos<\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1275\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/movilDevice.jpg\" alt=\"\" width=\"688\" height=\"759\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/movilDevice.jpg 688w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/movilDevice-272x300.jpg 272w\" sizes=\"auto, (max-width: 688px) 100vw, 688px\" \/><\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1304 alignnone\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience.png\" alt=\"\" width=\"260\" height=\"301\" \/>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1308 alignnone\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_3.png\" alt=\"\" width=\"260\" height=\"302\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_3.png 260w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/WebAR_Experience_3-258x300.png 258w\" sizes=\"auto, (max-width: 260px) 100vw, 260px\" \/><\/p>\n<p style=\"text-align: center;\"><span style=\"color: #ff6600;\"><strong>Usa el lector de QR en tu telefono y prueba los archivos de demostraci\u00f3n<\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 style=\"text-align: center;\"><span style=\"color: #008000;\">Requisitos para WebAR<\/span><\/h2>\n<p>Durante el uso dentro de <strong>Range Engine<\/strong>, el <em>addon<\/em> puede visualizar los proyectos utilizando un servidor local temporal generado autom\u00e1ticamente para pruebas r\u00e1pidas y desarrollo. Sin embargo, para publicar experiencias <em>WebAR<\/em> y utilizarlas correctamente en dispositivos m\u00f3viles, <em>es necesario usar un servidor con<\/em> <strong>HTTPS<\/strong>. Esto se debe a las restricciones actuales de <em>WebXR<\/em> y acceso a c\u00e1mara\/sensores en navegadores modernos. Abrir directamente el <code><strong>index.html<\/strong><\/code> desde el explorador de archivos (<code>file:\/\/<\/code>) <strong>no permitir\u00e1 utilizar correctamente:<\/strong><\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">acceso a c\u00e1mara<\/span><\/li>\n<li><span style=\"color: #ff9900;\">sesiones WebXR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">hit-test AR<\/span><\/li>\n<li><span style=\"color: #ff9900;\">tracking AR<\/span><\/li>\n<\/ul>\n<p><span style=\"color: #339966;\"><strong>Opciones recomendadas para publicaci\u00f3n:<\/strong><\/span><\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">Hosting HTTPS<\/span><\/li>\n<li><span style=\"color: #ff9900;\">GitHub Pages<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Netlify<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Vercel<\/span><\/li>\n<li><span style=\"color: #ff9900;\">Servidor HTTPS propio<\/span><\/li>\n<\/ul>\n<p>\u26a0\ufe0f Algunas funciones WebXR pueden variar dependiendo del navegador y dispositivo utilizado.<\/p>\n<hr \/>\n<h1 style=\"text-align: center;\"><span style=\"color: #008000;\">M\u00e1s que un exporter<\/span><\/h1>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1278\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01.jpg\" alt=\"\" width=\"1632\" height=\"656\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01.jpg 1632w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01-300x121.jpg 300w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01-1024x412.jpg 1024w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01-768x309.jpg 768w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/webar_01-1536x617.jpg 1536w\" sizes=\"auto, (max-width: 1632px) 100vw, 1632px\" \/><\/p>\n<p>Con el tiempo, el proyecto comenz\u00f3 a evolucionar m\u00e1s all\u00e1 de un simple exportador. Actualmente el runtime ya cuenta con:<\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">sistemas modulares<\/span><\/li>\n<li><span style=\"color: #ff9900;\">lifecycle management<\/span><\/li>\n<li><span style=\"color: #ff9900;\">component registries<\/span><\/li>\n<li><span style=\"color: #ff9900;\">event\/action architecture<\/span><\/li>\n<li><span style=\"color: #ff9900;\">SceneData abstraction layer<\/span><\/li>\n<\/ul>\n<p>La meta a largo plazo es construir un pipeline portable donde la l\u00f3gica visual pueda reutilizarse entre distintos backends y runtimes.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1280\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/RNC.jpg\" alt=\"\" width=\"980\" height=\"515\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/RNC.jpg 980w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/RNC-300x158.jpg 300w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/RNC-768x404.jpg 768w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/p>\n<hr \/>\n<h1 style=\"text-align: center;\"><span style=\"color: #008000;\">\u00bfPor qu\u00e9 hacerlo?<\/span><\/h1>\n<p>Porque <strong>WebAR<\/strong> sigue siendo una tecnolog\u00eda extremadamente poderosa. <strong>No<\/strong> requiere instalar apps. Funciona desde el navegador. Es ideal para:<\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">educaci\u00f3n<\/span><\/li>\n<li><span style=\"color: #ff9900;\">visualizaci\u00f3n de productos<\/span><\/li>\n<li><span style=\"color: #ff9900;\">museos<\/span><\/li>\n<li><span style=\"color: #ff9900;\">marketing<\/span><\/li>\n<li><span style=\"color: #ff9900;\">prototipos interactivos<\/span><\/li>\n<li><span style=\"color: #ff9900;\">experiencias inmersivas ligeras<\/span><\/li>\n<\/ul>\n<p>Y sobre todo: porque todav\u00eda hay espacio para herramientas abiertas, experimentales y hechas por desarrolladores independientes.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1281\" src=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/futureOfwebAR.jpg\" alt=\"\" width=\"1520\" height=\"704\" srcset=\"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/futureOfwebAR.jpg 1520w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/futureOfwebAR-300x139.jpg 300w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/futureOfwebAR-1024x474.jpg 1024w, https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/futureOfwebAR-768x356.jpg 768w\" sizes=\"auto, (max-width: 1520px) 100vw, 1520px\" \/><\/p>\n<hr \/>\n<h1 style=\"text-align: center;\"><span style=\"color: #008000;\">Estado del proyecto<\/span><\/h1>\n<p>El proyecto sigue en desarrollo activo y actualmente est\u00e1 enfocado en:<\/p>\n<ul>\n<li><span style=\"color: #ff9900;\">consolidar arquitectura runtime<\/span><\/li>\n<li><span style=\"color: #ff9900;\">SceneData como formato portable<\/span><\/li>\n<li><span style=\"color: #ff9900;\">modularidad<\/span><\/li>\n<li><span style=\"color: #ff9900;\">integraci\u00f3n futura con sistemas visuales tipo <span style=\"color: #ff6600;\"><strong>Range Node Core <span style=\"color: #ff9900;\">(<\/span><\/strong><em><span style=\"color: #ff9900;\">m\u00e1s informaci\u00f3n proximamente<\/span><\/em><strong><span style=\"color: #ff9900;\">)<\/span><\/strong><\/span><\/span><\/li>\n<\/ul>\n<p>Todav\u00eda hay mucho trabajo por delante, pero la base ya comienza a tomar forma.<\/p>\n<p>M\u00e1s avances pr\u00f3ximamente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante a\u00f1os, plataformas como 8thWall demostraron que la realidad aumentada en navegador pod\u00eda ser una herramienta incre\u00edble para experiencias interactivas, marketing, visualizaci\u00f3n 3D y contenido educativo. Cuando 8thWall cerr\u00f3 operaciones como plataforma independiente y posteriormente liber\u00f3 parte de su tecnolog\u00eda, qued\u00f3 algo muy claro: todav\u00eda existe un enorme inter\u00e9s por crear experiencias WebAR accesibles, abiertas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1245,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[183],"tags":[196,84],"class_list":["post-1290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-addons","tag-addons","tag-range"],"jetpack_featured_media_url":"https:\/\/salvador.mata.com.mx\/blog\/wp-content\/uploads\/2026\/05\/Range_WebAR.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1290"}],"version-history":[{"count":17,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1290\/revisions"}],"predecessor-version":[{"id":1316,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1290\/revisions\/1316"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/media\/1245"}],"wp:attachment":[{"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salvador.mata.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}