WebAR Hiperrealista: Tutorial de Gaussian Splatting

Durante años, la Realidad Aumentada en la web (WebAR) ha tenido un límite claro: el realismo. Los modelos 3D tradicionales a menudo se ven como «dibujos animados» o plásticos. Pero la llegada del Gaussian Splatting ha cambiado las reglas del juego, permitiéndonos traer objetos escaneados con calidad fotográfica (reflejos, transparencias y detalles finos) directamente al navegador.

En este tutorial, aprenderemos a integrar capturas de Luma AI en WebAR usando MindAR y A-Frame.

WebAR Hiperrealista: El Santo Grial del Gaussian Splatting

¿Vale la pena?

Iniciemos hablando de estos dos archivos. PLY y SPLAT

La Diferencia Técnica: ¿PLY o SPLAT?

Cuando empiezas en este mundo, encontrarás dos tipos de archivos. Es crucial entender la diferencia para no «colgar» el navegador de tus usuarios:

El archivo .PLY (La Fuente): Imagina que esto es un archivo de audio .WAV sin comprimir. Contiene toda la información matemática cruda del escaneo. Pesan muchísimo (300MB – 1GB) y no deben usarse en WebAR, ya que tardarían una eternidad en cargar.

El archivo .SPLAT (El Producto): Este es tu .MP3. Es una versión comprimida, optimizada y ordenada específicamente para que los navegadores web puedan dibujarla rápido. Pesa mucho menos (5MB – 20MB) y es el formato que usaremos hoy.

Pasemos ahora al tutorial de cómo poner archivo SPLAT en realidad aumentada, fácil y desde cero.

Tutorial: Tu Primer Objeto WebAR y fotorealista SPLAT (Sin Fondo)

Uno de los grandes problemas de los escaneos 3D es que suelen incluir todos los elementos que se encuentran en la escena y esto trae consigo muchos problemas de visualización y ángulos. Muchos ángulos de los objetos no llegan a ser vistos en totalidad así que quedan vacíos y se llenan con un efecto de (aguja) o blur y esto no se ve para nada bien en realidad aumentada.

¿Qué ocurre cuando queremos visualizar estos archivos Splat en realidad aumentada WebAR?

Como las escenas de escaneo 3D son tan grandes o incompletas debido a su complejidad y cantidad de elementos al tratar de visualizarlas en Realidad Aumentada WebAR la escena ocuparia toda la pantalla consiguiendo que se pierda el efecto de realidad aumentada y lo que obtendríamos sería casi como ver un archivo splat en una web normal. Mira aqui un ejemplo: Armory Knight – Created by @alex with Luma

Podríamos editar el archivo utilizando algún software de edición 3D, pero eso llevaría a un gasto de tiempo enorme.

En lugar de editar el modelo manualmente, usaremos una función avanzada de Luma llamada LumaSplatsSemantics. Con una sola línea de código, le diremos a la IA que detecte el objeto principal (FOREGROUND) y borre todo lo demás.

<script type="module">
import { LumaSplatsThree, LumaSplatsSemantics } from "@lumaai/luma-web";
import * as THREE from "three";

AFRAME.registerComponent('luma-model', {
schema: {
src: {type: 'string'},
scale: {type: 'number', default: 1},
position: {type: 'vec3', default: {x: 0, y: 0, z: 0}},
rotation: {type: 'vec3', default: {x: 0, y: 0, z: 0}}
},
init: function () {

this.splat = new LumaSplatsThree({
source: this.data.src,
enableThreeShaderIntegration: false
});

this.splat.semanticsMask = LumaSplatsSemantics.FOREGROUND;

this.el.object3D.add(this.splat);

this.splat.scale.set(this.data.scale, this.data.scale, this.data.scale);
this.splat.position.set(this.data.position.x, this.data.position.y, this.data.position.z);

this.splat.rotation.set(
THREE.MathUtils.degToRad(this.data.rotation.x),
THREE.MathUtils.degToRad(this.data.rotation.y),
THREE.MathUtils.degToRad(this.data.rotation.z)
);
}
});
</script>

Mira el ejemplo con el que tome la fotografía para este post y como limpie toda la escena para realidad aumentada con el código que te compartí aquí arriba: Robodog unitree GO1 – Created by @SupaSayanov with Luma

¿Vale la pena usar Splats en AR?

✅ SÍ, úsalo cuando:

Necesites fotorrealismo absoluto (comida, joyas, calzado).

El objeto tiene transparencias o reflejos complejos que un modelo 3D normal no logra captar.

❌ NO, mejor usa GLB cuando:

Necesitas interacción física (juegos, colisiones).

Tu audiencia tiene dispositivos de gama baja.

La Alternativa Sólida: Fotogrametría Clásica (.GLB)

Si necesitas estabilidad total, exporta tu escaneo como .GLB. Aunque pierde los reflejos dinámicos, funciona en el 100% de los dispositivos y carga instantáneamente. Es la opción segura para proyectos comerciales masivos.

DESCARGA el archivo fuente en mi patreon. Puedes ser miembro desde 1 Dolar al mes. – Gracias por tu apoyo.

Que incluye: 

• Archivo fuente comentado linea por linea para que entiendas cómo funciona el ejemplo y puedas hacer tus propios ejemplos.
• Archivos fuentes de imagenes.
• Marcador.mind

CLIC aquí para ir al post donde encontraras los archivos fuentes y mi patreon: DESCARGAR