Turning Names Into Digital Architecture: Inside BL/S®’s Interactive Three.js Paris Experiment
The intersection of generative typography, structural engineering, and real-time computer graphics reached a new milestone with the release of a specialized interactive web experiment developed by creative studio BL/S® for the inaugural Three.js Conference in Paris. Designed to translate user-inputted text into complex, three-dimensional metallic structures, the project bridges the gap between abstract web design and industrial architecture. This initiative highlights how modern WebGL frameworks are expanding beyond traditional user interfaces to deliver generative art pieces that respond dynamically to user input.
Background Context of the Event and Studio Involvement
The Three.js Conference in Paris has rapidly established itself as a premier global gathering for developers, creative technologists, and 3D web designers who specialize in using the Three.js JavaScript library. As WebGL capabilities mature within modern web browsers, events of this scale demand experiential showcases that push the technical boundaries of what is possible on the client side.
Recognizing this environment, BL/S®—led by founder and creative director Serhii Polyvanyi—sought to create an exhibit that felt less like a conventional promotional webpage and more like an operational piece of digital machinery. The resulting project, hosted as an interactive web demo, was engineered to celebrate the architectural aesthetic of Paris while demonstrating the profound performance capabilities of Three.js. By conceptualizing names as physical entities rather than flat typographic characters, the studio successfully demonstrated how data-driven geometry can create personalized, industrial-grade art objects directly within the browser window.
Technical Execution and Chronology of the Transformation Process
The creation of the digital architecture relies on a meticulous, multi-step computational pipeline. The technical execution begins with how individual letters are mapped into coordinate space. Every letter processed by the system is represented as a closed mathematical contour constructed from precisely 120 distinct points.
For predefined corporate or event logotypes, the system utilizes pre-calculated point data. However, for user-generated names typed dynamically into the web interface, a more sophisticated workflow takes place behind the scenes:
- Rasterization: The user’s input is rendered onto a hidden HTML5 canvas element.
- Masking and Tracing: The application converts the rendered text into a high-resolution pixel mask, traces the outer and inner contours, and smooths the resulting vector paths.
- Normalization: The extracted contours are programmatically normalized to fit the mandatory 120-point structural framework.
Crucially, the system accounts for internal negative space—commonly referred to as counters or holes—ensuring that characters like "B" or "A" retain their structural integrity rather than collapsing into solid geometric blocks. This standardized point count is the foundational requirement that enables the subsequent morphing sequence.
Once the initial contours are established, the application initiates a continuous spatial transition. Each point on a starting letter corresponds directly to a designated point on the subsequent letter. Rather than executing a rudimentary fade or linear shape interpolation, the algorithm propels the contours along a curved Bézier path through three-dimensional space.
As the geometry travels along this trajectory, it undergoes simultaneous deformation. The mathematical loop calculates position, trajectory, scaling factors, and torsional roll parameters concurrently. Points are systematically twisted, narrowed, and tilted relative to their progress along the curve. This creates the illusion that a flat typographic character is being physically extruded and pulled through an invisible metal tube, resulting in a continuous, flowing construction rather than a series of disjointed frames.
Structural Design Inspired by Engineering Landmarks
In defining the visual language of the output, BL/S® drew conceptual inspiration from iconic industrial architecture, most notably the Eiffel Tower. Traditional 3D web rendering often relies on solid meshes or heavy ray-tracing algorithms to simulate metal, which can severely impact browser performance. To circumvent this, the studio engineered a lightweight structural system.
Instead of rendering dense, solid tubes, the application constructs a transparent framework composed of selected longitudinal lines, cross-braces, and diagonal supports. This approach mirrors the structural logic of large-scale iron lattice towers, where material efficiency and weight reduction are balanced against mechanical stability.
The entire construction is rendered in real time using native Three.js line geometry driven by a custom shader. To achieve a convincing metallic aesthetic without the computational overhead of real-time ray tracing, the developers implemented a pre-baked reflection map. This technique simulates environmental lighting and reflections across the moving metallic framework, providing a dynamic, high-fidelity finish while maintaining optimal frame rates across desktop and mobile devices.
User Interaction and Customization Workflow
Beyond its technical architecture, the experiment functions as a personalized engagement tool for conference attendees and online visitors. The interface invites users to input any name, immediately triggering the algorithmic transformation into digital architecture.
Once the generation process is complete, users are presented with various surface finishes and rendering options to customize their metallic structure. The final output can be saved, captured, and shared across digital platforms. Creators and conference organizers have encouraged participants to share their generated structures online, creating an organic community archive of personalized typographic models.
Broader Impact and Industry Implications
The release of BL/S®’s Three.js Paris experiment underscores a broader shift in digital design, where the boundaries between typography, industrial engineering, and real-time graphics continue to dissolve. As web browsers become increasingly powerful computational environments, creative studios are moving beyond flat graphic design into generative, spatial experiences.
Industry analysts note that projects of this caliber serve multiple functions within the digital ecosystem. Technically, they demonstrate advanced proficiency in mathematics, shader programming, and geometry management within WebGL. Culturally, they provide interactive touchpoints that foster community engagement around major technical conventions like the Three.js Conference.
By converting standard textual data into complex, structurally sound digital monuments, BL/S® has highlighted the untapped potential of browser-based 3D applications. The experiment proves that with precise algorithmic design and efficient rendering strategies, the web can successfully host complex industrial simulations that are both visually striking and computationally lightweight.
