Configurador de ventanas en 3D y realidad aumentada: el cliente ve la ventana en su propia casa

El reto

Vender ventanas es vender algo que el cliente no ve hasta que está instalado. El comercial dibuja un croquis, da una cifra, y el cliente tiene que fiarse de que la ventana en arco sobre la puerta quedará bien y de que el precio incluye lo que pidió.

El objetivo era dar a las empresas de ventanas una sola herramienta para toda su gama - ventanas, puertas balconeras y de entrada, tabiques de vidrio, pérgolas - en la que el cliente diseña el producto, ve cómo cambia el precio con cada decisión y puede mirarlo en 3D y en su propia casa antes de que nadie vaya a medir.

Nuestro caso de Estimia trata del sitio para el consumidor construido alrededor de este configurador; este se centra en el configurador en sí.

El editor 2D

El cliente parte de una plantilla - un fijo, una ventana de dos o tres hojas, con montante, una puerta balconera, una corredera o una plegable - y la modifica directamente sobre el dibujo. Al pulsar un vidrio aparece una pequeña barra de herramientas: dividirlo en horizontal o en vertical, eliminarlo o elegir cómo abre (fijo, practicable, oscilobatiente, abatible arriba o abajo, puerta de dos hojas). Si arrastra un parteluz, las hojas se ajustan y las medidas en milímetros se actualizan en los bordes.

Desde el panel lateral añade el resto: junquillos decorativos (entre vidrios, superficiales o sobre la hoja), vierteaguas y alféizares interiores, persianas, mosquiteras, ampliaciones de marco y aireadores. Los colores se agrupan en estándar y RAL especiales, con color distinto por fuera y por dentro y foliados imitación madera. Cada acción se puede deshacer, en todas las ventanas del pedido, paso a paso hasta el principio.

El precio se calcula mientras el cliente trabaja, y sale del catálogo de la propia empresa, no de una media nacional. El motor de precios lee la configuración de la empresa y suma las piezas reales de la ventana: perfil por metro de marco y hoja, vidrio por metro cuadrado con tarifas por tramos, herrajes por hoja practicable, parteluces, junquillos, juntas, refuerzo de acero, mano de obra, el recargo por color y, al final, el margen de la empresa y el IVA.

Ventanas especiales calculadas por su geometría real

Arcos, medios arcos, triángulos, trapecios y círculos son el punto en el que la mayoría de calculadoras se rinden y cobran el rectángulo que los envuelve. Aquí cada ventana no rectangular es un contorno real: una lista de vértices con lados rectos o curvos. El cliente puede elegir una forma, arrastrar sus vértices y curvar sus lados, o dibujar un contorno libre sobre una cuadrícula. Las divisiones dentro de la forma se convierten en vidrios reales, cada uno con su tipo de apertura; una ventana en arco puede tener debajo del arranque una composición normal de hojas y divisiones.

El precio sigue la forma real. La longitud del marco se mide a lo largo del contorno, arcos incluidos; la superficie de vidrio y el tamaño de cada hoja salen de los vidrios reales; los parteluces se miden ya recortados por la forma. Encima, la empresa puede fijar su propio recargo por forma especial - un multiplicador, una cantidad fija o ambos - por el corte de vidrio, el curvado y el montaje adicionales.

Puertas y tabiques

Las puertas usan el mismo editor con sus propias reglas. Una puerta balconera o de entrada lleva un umbral bajo en lugar del travesaño inferior del marco, la hoja se calcula como hoja de puerta, más pesada, y el umbral se cobra por metro de ancho. Los conjuntos de balcón - puerta acoplada a una ventana - se montan como una sola pieza en la que el perfil compartido se cuenta una vez.

Los tabiques interiores de vidrio son paredes fijas: de una, dos o tres secciones, o con puerta central. El editor oculta las opciones de apertura en las secciones fijas, porque un panel de tabique no abre.

Pérgolas con cubierta y cerramientos laterales

Las pérgolas tienen sus propias opciones: exenta, alargada o adosada a la pared; ancho, fondo y altura, con la parte trasera más baja si la cubierta tiene pendiente. La cubierta puede ser de lamas orientables, vidrio fijo o corredero, policarbonato, panel sándwich o toldo retráctil. Cada lado abierto - frente, izquierda, derecha - puede quedarse libre o cerrarse con screen, vidrio corredero o fijo (transparente, tintado u opaco) o una pared de lamas de aluminio. En una pérgola con pendiente se pueden cerrar también los triángulos entre la cubierta y los laterales.

El dibujo es una perspectiva desde la esquina delantera, a la altura de los ojos, de modo que el cliente ve la cubierta desde abajo, como la vería en su jardín. El precio se construye con las tarifas de la empresa: un precio base y un precio por metro cuadrado de planta, recargos de cubierta por metro cuadrado, cerramientos según la superficie de cada lado, triángulos según su área y recargos de color para la estructura y las lamas.

3D a partir de la misma geometría, y después realidad aumentada

Un interruptor convierte el dibujo en un modelo 3D. No es un diseño aparte que pueda dejar de coincidir con el dibujo: se construye a partir de la misma geometría calculada que dibuja la vista 2D, así que cada división, hoja, arco y unidad acoplada coincide exactamente. El marco y la hoja se extruyen a lo largo del contorno a partir de una sección de perfil real, el color exterior y el interior se reparten a lo largo de la profundidad del perfil, los foliados muestran su textura real, y los junquillos, mosquiteras, vierteaguas y persianas aparecen donde se configuraron. Un control deslizante “Abrir” gira las hojas sobre sus bisagras, desliza las correderas y pliega las plegables. En una pérgola, el mismo control inclina las lamas.

Después el cliente pulsa “Ver en AR”. En el ordenador el configurador muestra un código QR; en el móvil se abre directamente. El modelo se exporta en dos formatos - uno para Android y otro para iPhone, se sube bajo un enlace aleatorio y se abre en el visor de realidad aumentada del propio teléfono a escala real: las ventanas se colocan en la pared y las pérgolas en el suelo. Los enlaces caducan a las 48 horas y los archivos se borran; las subidas tienen límite de tamaño, se comprueban por su contenido y están limitadas por visitante.

El motor 3D solo se carga cuando el cliente activa el 3D, así que el configurador sigue siendo rápido para quien nunca lo usa.

Ahorro energético e IRPF en el presupuesto

El resumen del presupuesto responde a la siguiente pregunta del cliente: ¿qué recupero? Para cada ventana muestra una estimación del ahorro anual en calefacción y en aire acondicionado, el plazo de amortización en años y la posible deducción en el IRPF por obras de mejora de la eficiencia energética. El ahorro compara la transmitancia de la ventana nueva y el factor solar del vidrio con los de una ventana antigua de vidrio simple, usando precios medios nacionales de la energía y datos por zona climática.

Son estimaciones y la interfaz lo dice: “aproximadamente” y “hasta”, nunca una promesa. El ahorro real depende de la vivienda, de su orientación y de su certificado energético, y la deducción depende de la mejora que acredite ese certificado. Si el catálogo no indica el factor solar del vidrio, esa parte del ahorro se omite en lugar de inventarla.

Stack tecnológico

- Configurador: React 19 + TypeScript, Tailwind CSS
- Motor geométrico: Paper.js (árboles rectangulares, contornos poligonales con arcos, conjuntos acoplados)
- Precios: motor basado en configuración, con el catálogo y los márgenes de cada empresa
- 3D: three.js, cargado bajo demanda en un paquete propio
- Realidad aumentada: exportación GLB y USDZ, Google model-viewer (WebXR, Scene Viewer, AR Quick Look)
- Backend: Laravel (subida de modelos AR, enlaces con token, caducidad y limpieza)
- Almacenamiento de archivos: Cloudflare R2
- Deshacer/rehacer: historial de todo el pedido con instantáneas serializables
- Idiomas: español, inglés, ruso

Resultado

Una empresa de ventanas tiene un único configurador para ventanas, formas especiales, puertas, tabiques y pérgolas, con precios de su propio catálogo hasta el metro de perfil y el metro cuadrado de vidrio. El cliente diseña el producto, ve cómo cambia el precio con cada decisión, lo gira en 3D, abre las hojas y lo coloca a tamaño real en su propia pared antes de que llegue el medidor. El presupuesto ya incluye una estimación del ahorro anual y de la posible deducción fiscal, y la conversación pasa de “cuánto cuesta” a “cuál elijo”.