Journal

From 2D logo to 3D monogram

From vector curve exploration in Affinity Designer to an interactive glass object in Three.js: backstage decisions and technical trade-offs.

When setting up the foundations for this portfolio, I wanted a strong, compact visual emblem. Not just a flat logo pinned to the header, but a digital craftsmanship piece anchoring the entire brand identity, from navigation pill to interactive 3D scenes.

1. The 2D spark: blending Citadium and Awwwards in Affinity

For the overall geometry, I drew from two clear inspirations: Citadium's circular badge for its sturdy urban balance, and the distinctive "W." lettering spotted on Awwwards for its sharp typographic character.

I fired up Affinity Designer to craft the pure vector curves. The challenge was finding harmony between the circular boundary and the letterforms, ensuring the mark stays razor-sharp at 24px in a favicon while having enough mass to support 3D bevels later on.

Once the SVG curves were dialed in, I tested contrast against electric cobalt blue and deep mineral dark backgrounds, particularly for the site's OpenGraph sharing card.

Vector exploration in Affinity Designer: blending badge roundness with bold "W." typography.

2. The first 3D pass in Blender… and scrapping it

With the 2D vector locked, I moved into Blender to extrude the geometry and introduce depth. That's where things got tricky.

My very first test used volumetric cobalt glass with slight surface bump mapping. The outcome was rough: an unwanted "orange peel" texture that looked messy, and tinted translucency that choked incoming light instead of scattering it. The monogram felt like heavy resin plastic rather than refined glass.

Back to the drawing board. Looking through open Blender shader studies, I pivoted towards a "Dispersed Glass" approach: pristine crystal clarity paired with chromatic dispersion that splits light into spectral colors along beveled edges like a prism.

Tuning the shader node graph in Blender: high-clarity optical glass, dialed IOR, and prismatic dispersion.

3. Bringing it to the web: Three.js and interactive tilt

A raytraced beauty shot in Blender Cycles is great, but the end goal was having this glass object live directly in the web browser at silky 60 FPS.

I exported an optimized low-poly mesh with precise normals and built a custom Three.js shader reproducing refraction and dispersion in real time. On the About page, I hooked it to cursor physics: as you move your mouse, the monogram smoothly tilts and highlights glide across the glass facets.

Real-time Three.js render with reactive mouse tilt on the About page.

4. Mobile trade-offs and brand coherence

When building creative 3D on the web, it's tempting to push WebGL everywhere. But running real-time ray-marched shaders on mobile devices drains battery and heats up hardware for little tangible benefit.

The pragmatic answer: detect device tier and serve a pre-rendered high-res WebP fallback on mobile. Instant load times, tiny asset weight (under 40KB), and identical visual polish.

Today, this monogram anchors the portfolio: in the floating navigation pill with scroll ring progress, across social profiles, and on all Journal article covers.

Official William Ulses 3D Liquid Glass monogram — The official portfolio 3D monogram: crystal glass clarity, Liquid Glass bevels and seamless integration.

This case study captures what I love most: jumping between 2D vector craft, 3D experimentation, discarding failed passes, and engineering a lightweight, responsive web experience.