El desarrollador conocido como seveibar ha publicado simple-3d-svg, un renderizador 3D escrito en TypeScript sin dependencias que transforma objetos tridimensionales en SVG manteniendo un peso de archivo reducido. El proyecto nace como apoyo al renderizado de placas de circuito creadas en React con tscircuit, donde las imágenes SVG se incrustan en pull requests de GitHub para revisar cambios visualmente.
El reto técnico que aborda es relevante: SVG solo admite transformaciones afines (matrix(a,b,c,d,e,f) en CSS), pero no transformaciones de perspectiva. Para simular perspectiva sin rasterizar la imagen, el autor descarta opciones costosas como redibujar el contenido distorsionándolo o recurrir a ray tracing, y opta por subdividir la textura en fragmentos pequeños. Cada subdivisión se proyecta con la transformación afín localmente más correcta y se recorta mediante clip paths para encajar en la región visible. A mayor número de subdivisiones, el resultado se aproxima más a una proyección en perspectiva real.
Para demostrarlo, proyecta un patrón de damero sobre un cubo: con 2 subdivisiones la superficie muestra un abombamiento evidente; con 4 se aprecia rugosidad, y alrededor de 512 subdivisiones la diferencia respecto a una imagen plana resulta casi imperceptible. El truco reside en definir cada clip path dentro de la sección <defs> del SVG y reutilizar la misma textura base, lo que evita duplicar bytes y mantiene un tamaño de archivo contenido.
El artículo también señala una corrección posterior del algoritmo de subdivisión de triángulos aportada por un usuario de Hacker News (Masterjun). El código completo está disponible en el repositorio github.com/tscircuit/simple-3d-svg.