The digital design and web development community gathered in Paris for the annual Three.js Conference to witness a novel interactive experiment that merges typography with procedural 3D modeling. Created by the creative studio BL/S® under the direction of founder and independent art director Serhii Polyvanyi, the installation converts user-inputted names into complex, metal-textured digital architecture in real time. The project has drawn considerable attention from the global developer community for its innovative approach to WebGL rendering, vector manipulation, and procedural geometry within the Three.js ecosystem.
Background and Event Context
The Three.js Conference has steadily evolved into one of the premier international gatherings for WebGL professionals, creative technologists, and 3D web designers. As Three.js continues to power high-end immersive experiences, interactive installations presented at the conference often serve as technical benchmarks for the industry.
For the Paris conference, BL/S® sought to move away from conventional web interfaces, opting instead to build an experience that mimics an intricate piece of industrial machinery. The core concept was deceptively simple: prompt the user to type their name, and algorithmically transform those alphanumeric characters into a continuous, reflective metal structure. However, executing this concept required overcoming significant technical hurdles regarding vector tracing, vertex mapping, and shader optimization.
Technical Mechanics: From 2D Pixels to 3D Contours
At the heart of the BL/S® experiment is a sophisticated data-processing pipeline that translates standard typography into a unified 3D mesh. Typography is notoriously difficult to morph smoothly in real time due to varying vertex counts and topological discrepancies between different letters. To solve this, the studio established a strict geometric constraint: every letter is represented as a closed contour consisting of precisely 120 points.
While pre-designed logo letters rely on predefined point data, user-generated names require dynamic processing. When a user enters a custom name, the system renders each letter onto a hidden canvas, converts the output into a pixel mask, traces the vector contour, smooths the resulting curves, and resamples the data to fit the standardized 120-point structure. Crucially, internal negative spaces—such as the holes inside the letter ‘B’ or ‘O’—are preserved during the tracing process to maintain typographic integrity.
Once the points are standardized, the application employs a continuous interpolation system. Rather than executing an abrupt geometric morph, the program moves the contours along a curved Bézier path through three-dimensional space. As the letters travel along this trajectory, individual points twist, narrow, and tilt based on mathematical easing functions. This creates the visual impression of molten metal or structural framing being pulled through an invisible architectural tube.
Structural Engineering Metaphors and Shader Efficiency
The visual aesthetic of the final output draws heavy inspiration from industrial engineering feats, most notably the Eiffel Tower. Rather than rendering heavy, solid-surface geometries that would degrade browser performance, the creators opted for a lightweight structural framework. The resulting 3D models feature selected longitudinal lines, cross-braces, and diagonal supports, giving bulky typographic forms a sense of monumental lightness.
From a technical standpoint, the project showcases efficient rendering practices in Three.js. The intricate, high-end metallic appearance is not achieved through resource-heavy ray tracing or complex real-time reflections. Instead, BL/S® utilized a custom shader paired with a baked reflection map. This combination delivers a dynamic, high-fidelity metallic surface finish while keeping rendering overhead minimal, ensuring smooth 60 frames-per-second performance across a wide range of desktop and mobile devices.
Chronology of Development and Public Release
The project was developed specifically for the timeline of the Three.js Conference in Paris. Initial prototyping began months prior, focusing heavily on solving the topology constraints of morphing arbitrary typographic shapes. The primary engineering challenge centered on the vertex-blending loop, which had to simultaneously handle shape interpolation, curve positioning, and spatial deformation without causing performance bottlenecks.
In the weeks leading up to the conference, BL/S® finalized the user interface, allowing attendees and remote users alike to input custom strings, select different metallic finishes, and share their generated structural outputs. Following its live debut in Paris, the experiment was published online, quickly gaining traction across developer forums and social media channels as a prime example of advanced WebGL capabilities.
Industry Implications and Future of 3D Web Typography
The BL/S® Three.js experiment highlights a broader shift in web development toward procedural design and generative branding. As browser graphics engines become increasingly powerful, the boundary between traditional graphic design and real-time 3D simulation continues to blur.
Industry analysts and creative technologists point out that techniques demonstrated in projects like the Three.js Conference demo—such as uniform point resampling and efficient custom shader piping—pave the way for more dynamic, personalized brand identities. Instead of static logos or pre-rendered motion graphics, future web applications may utilize real-time WebGL pipelines to generate unique, interactive architectural assets on the fly.
By inviting the public to input their names and witness the instant transformation from flat text into industrial-grade digital structures, BL/S® has provided both a functional showcase of Three.js proficiency and an inspiring glimpse into the evolving landscape of interactive web typography.
