El configurador de iluminación funciona como un expositor interactivo de todas las opciones del producto. Se puede utilizar durante la fase de concepto y como herramienta de ventas en la web. Mostrar las variantes con la luz encendida y apagada es fundamental para destacar las sombras, un detalle que podría resultar difícil de apreciar en una tienda física. Gracias a las funciones de realidad aumentada, los clientes pueden previsualizar el diseño de la lámpara antes de hacer el pedido.
El objetivo de este configurador de iluminación era mostrar diferentes muestras de una gama de productos y cambiar entre ellas de forma fluida. Cada versión cuenta con:
La variante final también debe previsualizarse en realidad aumentada (AR) para verla en un entorno físico real.
El modelo se creó en Rhino y luego se importado importó en Vectary como archivo .fbx. Rhino utiliza geometrías NURBS, mientras que Vectary admite geometrías de malla, por lo que es fundamental verificar la conversión entre estos formatos. En este caso, las superficies del modelo eran relativamente sencillas, por lo que no se necesitaron ajustes especiales en la geometría para mantener la fluidez general de la escena dentro de Vectary.
Dado el papel clave de la iluminación, el primer paso consiste en ajustar la intensidad de la luz en los ajustes de entorno para priorizar el impacto de las luces colocadas manualmente. Por lo general, una luz rectangular ofrece una iluminación y proyección de sombras precisas, pero para este proyecto, que busca simular una bombilla, la mejor opción es una luz puntual.
Se crearon dos luces puntuales: una de gran intensidad, que se muestra al seleccionar el botón "Light on", y otra de intensidad suave y sutil para el estado "Light off".
En cuanto a los materiales, el objetivo era lograr una estética neutra con texturas sencillas como el plástico rugoso y los paneles metálicos. Se prestó especial atención a la bombilla (cristal). En la vida real, cuando la luz está encendida, la bombilla parece esmerilada. Cuando está apagada, el cristal se vuelve transparente, revelando los filamentos de su interior.
Replicar este estado de encendido y apagado en 3D implicó crear dos materiales para la parte de cristal de la bombilla:
Un material esmerilado y emisivo visible cuando se selecciona el botón "Lights on".Un material transparente con ligeros arañazos visible cuando se selecciona el botón "Lights off".
La interacción comienza al encender y apagar la luz. Para lograr este efecto, se necesitan puntos de activación, representados por dos botones creados a través de Floating UI. Se configuran dos interacciones: una para encender la luz y otra para apagarla.
Encender la luz implica hacer visible "point light 1" (el brillante y emisivo) y ocultar "point light 2". Además, el material del cristal de la bombilla se cambia al esmerilado y emisivo. Apagar la luz sigue un proceso similar, pero esta vez se muestra "point light 2" y el material del cristal de la bombilla se cambia al transparente.
Una vez establecida la funcionalidad de encendido y apagado de la luz, pasamos a cambiar la pantalla. Primero, se configura una variante con las tres opciones de pantalla diferentes. Luego, se crea otra Floating UI con tres botones para controlar la pantalla visible (al hacer clic en el botón o en el nombre 1 se mostrará la pantalla 1, y replica esta interacción para las otras 2 pantallas).
Por último, el proyecto consiste en mostrar animaciones para cada pantalla para demostrar diversos efectos de iluminación y sombras. Se preparan seis estados, que incluyen los estados de abierto/desplegado y cerrado/plegado para cada pantalla. Cada pantalla tendrá dos Floating UI con gráficos dedicados para activar las animaciones correspondientes. Después, solo tienes que usar la función de visibilidad para asegurarte de que el gráfico correcto (que activa su animación correspondiente) se muestre en el momento adecuado.
Una vez finalizadas todas las interacciones y cuando el proyecto esté listo para compartir, hay un último paso que mejora la experiencia general: la Realidad Aumentada (AR). Activar esta función permite a los usuarios ver el proyecto en su propio espacio. En este caso concreto, la AR es útil para comprobar si la lámpara encaja en un diseño de interiores concreto y para visualizar cómo se anima de "abierta" a "cerrada" (ya que Vectary admite animaciones en AR).
