Filippo 3D v2.1

Filippo 3D nació en 2006 como proyecto final para la clase de Interactive Image de Golan Levin en Carnegie Mellon. La idea era simple: transferir trazos de lápiz a un espacio tridimensional. Estaba hecho en Processing, corría con Java y requería tarjeta gráfica con OpenGL. Veinte años después, corre en el navegador.

Pizarra + Filippo

En paralelo existía Pizarra, un programa que hice para resolver un problema cotidiano de profesor: cuando proyectas en la sala oscura, no puedes ir a la pizarra a dibujar. Pizarra ponía una superficie de dibujo encima de todo, para esquematizar en vivo sin salir de la presentación. También estaba hecha en Processing.

La nueva versión de Filippo fusiona ambas ideas. Es una herramienta de dibujo a mano alzada en 3D que corre directo en el navegador, sin instalación, sin dependencias. Sirve para dibujar en clase, para bocetar un volumen, para pensar con la mano.

Lo que cambió

El modelo matemático sigue siendo el mismo: cada trazo se deposita en el plano de la pantalla (z=0) y se traduce al espacio 3D mediante la inversa de la matriz de transformación del modelo. Lo que cambia es todo lo demás.

La profundidad es ahora un material. En la versión original uno dibujaba siempre sobre el plano de la pantalla y luego rotaba el modelo para depositar trazos en otra orientación. Ahora, con la rueda del mouse, puedes empujar o traer el dibujo completo respecto al plano de dibujo. En términos relativos, estás moviendo el plano Z: acercándolo o alejándolo de ti. La tecla D muestra los puntos donde las líneas existentes cruzan ese plano, de modo que puedes ver exactamente dónde estás depositando los nuevos trazos en relación con lo que ya existe. La pantalla de vidrio sigue siendo la superficie de dibujo, pero ahora puedes decidir a qué profundidad queda cada trazo.

Web nativa. Todo corre en JavaScript vanilla con Canvas 2D. No hay Three.js, no hay WebGL, no hay frameworks. Las transformaciones 3D se resuelven con las mismas matrices de rotación y traslación del post original¹, pero calculadas en el cliente, sin aceleración gráfica. Lo que en 2006 requería OpenGL y una tarjeta dedicada, hoy lo hace el navegador sin despeinarse.

Soporte para stylus. La herramienta detecta lápices digitales y responde a la presión, lo que permite variar el grosor del trazo con el gesto de la mano. No es obligatorio, funciona igual con mouse, pero con un stylus el dibujo recupera algo de la soltura del papel.

Exporta PNG y guarda/carga dibujos. Lo que en la versión original era una limitación grave (solo PDF y DXF, sin poder guardar ni cargar), ahora está resuelto: se puede guardar el estado completo del dibujo en JSON y retomarlo después.

Para qué sirve

Filippo 3D no compite con herramientas de modelado. No tiene superficies, no tiene render, no tiene capas. Es una herramienta de pensamiento: sirve para lo que sirve el croquis, pero en tres dimensiones. Para bocetar una estructura, explicar un volumen en clase, pensar un espacio con la mano antes de pasarlo a un programa serio.

La silla de la imagen no es un modelo; es un dibujo boceteado. Con SHIFT las líneas son rectas.

Links

• Probar Filippo 3D
• Código fuente en GitHub
• Post original (2006)
• Pizarra (2012)