AR es la abreviatura de realidad aumentada, que puede superponer información adicional a la imagen del mundo real para mejorar la capacidad de expresar la realidad. Una de las aplicaciones AR más famosas es Pokémon. Los jugadores usan sus teléfonos móviles para capturar Pokémon en el mundo real.
Generalmente, las aplicaciones AR pueden procesar imágenes del mundo real de diferentes maneras y luego generar información AR. Por ejemplo, juzgar imágenes o juzgar en función de la información de ubicación del GPS para ver si se debe presentar contenido AR. Para obtener un buen efecto AR, existen ciertos requisitos para el hardware del teléfono móvil, porque el teléfono móvil debe estar calibrado para que pueda identificar con precisión la superficie del objeto y colocar mejor el modelo AR. Por ejemplo, los teléfonos móviles de Google solo pueden ofrecer mejores capacidades de AR si han obtenido la certificación AR.
También hay muchos software para crear aplicaciones AR, como la base AR de Unity, que integra AR Core de Google y el kit AR de Apple, lo que facilita la creación de aplicaciones AR multiplataforma. También intenté usar Unity para crear AR, pero descubrí que necesito un teléfono móvil adecuado que admita AR para probar el efecto. Aunque los dos teléfonos móviles Xiaomi que tengo son modelos certificados por Google, los efectos son muy diferentes. Es demasiado grande. , así que solo puedo dejar de usar Unity. Después de buscar en Internet, descubrí que en realidad existe otra forma más conveniente de crear rápidamente aplicaciones AR para teléfonos móviles, es decir, el método Web AR. Existen muchos marcos de desarrollo que admiten este método, como AR.js, webar -rocks, etc., elegí AR.js para el desarrollo.
AR.js integra varios marcos como ARToolkit, A-Frame, Three.js, etc. ARToolkit proporciona funciones relacionadas con el motor AR, como detectar gráficos, medir la distancia entre la cámara y los objetos, etc. A-Frame y Three.js son dos marcos que brindan capacidades de renderizado WebGL. La introducción en el sitio web oficial también es muy concisa y fácil de entender, puede consultar la documentación de AR.js.
Aquí presentaré cómo crear una aplicación AR usando AR.js. AR.js admite métodos de activación de AR, como el seguimiento de imágenes, el reconocimiento de marcadores y el posicionamiento en exteriores. Aquí construyo una aplicación AR para interiores basada en el seguimiento de imágenes.
Primero, seleccione varias ubicaciones interiores para colocar contenido AR y tomar fotografías de estas ubicaciones. Cabe señalar que cuanto más complejo sea el contenido de la imagen, mejor, porque luego procesaremos las imágenes y extraeremos las características de las imágenes. Cuanto más compleja es la imagen, más ricos son los contornos que contiene, como líneas rectas, esquinas, arcos, etc., para que pueda posicionarse con mayor precisión. Además, cuantos más píxeles contenga la imagen, mejor, por eso intentamos No disparar con teléfonos móviles, ya que la resolución de la imagen es reducida. Posteriormente podremos subir la imagen a este sitio web NFT-Creator-Web para extraer las características de la imagen, este sitio web generará tres archivos para cada imagen, incluyendo las características de la imagen. Guarde estos archivos generados.
Luego tenemos que crear contenido AR. Aquí encontré un buen sitio web con muchos hermosos modelos 3D gratuitos para descargar, Explore 3D Models - Sketchfab . Aquí intentamos elegir el formato GLTF al descargar el modelo, porque AR.js también se recomienda. para utilizar este formato.
Finalmente, podemos crear un archivo HTML en el servidor web con el siguiente contenido:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script src="https://raw.githack.com/fcor/arjs-gestures/master/dist/gestures.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait ...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
gesture-detector
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="marker/marker"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-entity
gltf-model="/models/medieval/scene.gltf"
scale="5 5 5"
position="150 -100 -150"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
>
</a-entity>
</a-nft>
<a-nft
type="nft"
url="ntf/location/location_1"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-entity
gltf-model="/models/rocket/scene.gltf"
scale="1 1 1"
position="50 -100 -50"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>
Para explicarlo brevemente, las primeras tres etiquetas Script introducen archivos JS relacionados y la tercera se usa para el reconocimiento de gestos. Las dos últimas direcciones Sricpt aquí requieren que un agente externo acceda a ellas. Se recomienda descargarlas localmente primero. Luego, la etiqueta <a-scene> se usa para crear una escena AR. Debido a que tenemos dos seguimientos de imágenes en esta escena, incluye dos etiquetas <a-nft>. En <a-nft> debemos definir la URL, que es la ruta al archivo de características de imagen que guardamos antes. En la etiqueta <a-entity> debemos especificar la ruta del modelo 3D que queremos cargar.
Después de iniciar el servidor web, acceda a este html para probar la aplicación AR. Tenga en cuenta que aquí es necesario acceder al servidor web a través de https porque la cámara debe estar encendida. Según la configuración de Google, solo los sitios web llamados a través de https pueden encender la cámara.