A collaboration with Poly University of Hong Kong Master of Arts in Fashion & Textile Design (Cohort 2023) that showcases the 3D scans of the designers morphing into each of their works.
π§ What is an βIβ?
An βIβ is comprised of both the conscious, the unconscious and the abstract, liminal space in between them.
This project visualizes that space through interactive, time-based 3D diagrams of eight PolyU 2023 Fashion MA graduates. Each βIβ exists as a parametric structure, defined by the axes x, y, and z, forming a digital cube that encapsulates the perpetually transforming human models.
π Time as a Fourth Axis
Time is crucial to the process.
Process is crucial to the concept.
The system introduces time (w) as a fourth dimension, a variable that governs not just animation, but revelation. Viewers experience each designerβs βIβ only through duration. The rendered models are initially obscured by semi-transparent volumetric meshes, whose opacity decreases progressively according to a time function defined by the designer.
This parameterization of time creates a temporal choreography. The cube acts as both container and mediator, synchronizing visual transitions across all eight datasets.

Notice the 3D scan of the designers evolving into their fashion works, encapsulated within a cuboid shape that is shaded with their photo memories
π§ Technical Process
The visual environment was built using Three.js (WebGL) and a modular TypeScript component system.
Each designerβs data is stored as a JSON object containing:
- Mesh geometry (GLTF model)
- Morph target parameters (source/target)
- Image sequence or texture atlas
- Time configuration (start delay, reveal speed, duration)
Key technical systems:
- Morph targets: implemented via Three.js MeshStandardMaterial with custom vertex shader blending between two vertex positions over time.
- Transparency logic: controlled by an interpolated uniform float uOpacity passed to fragment shaders.
- Texture transitions: achieved through a crossfade shader, sampling two textures simultaneously and linearly interpolating them based on elapsed time.
- Time control: a global clock synchronizes the reveal rate across all eight cubes using THREE.Clock and a shared requestAnimationFrame render loop.
Through these layers, the DOM becomes more than static structure β it acts as a gateway to WebGL canvases, handling state updates and user events while delegating the actual transformation logic to the GPU.
Each image layer projected onto the cube evolves dynamically, using an automated crossfade algorithm that blends personal documentation (daily life images) with generative abstractions of their conceptual source material. This creates a visual metaphor for the unconscious, data that is constantly transforming but never fully defined.

3D scan of the designer

The 3D object of the designer morphs into their fashion work's 3D scan

3D scan of the model wearing the fashion design
π§ Conceptual Layer
The x, y, z axes represent the spatial construct of identity, while w is the temporal dimension that forces the viewer into participation. The act of waiting becomes integral to perception: only through time does the βIβ come into focus.
By embedding conceptual ideas directly into computational logic, the project blurs the distinction between digital representation and psychological metaphor. The code doesnβt just display, it performs introspection.
Special thanks to Ryan Houlton and all the amazing graduates + models + assistants for making this magic happens π¦Ύπ¦Ώ
Elizabeth Kezia Widjaja Β© 2025 π