Inspiration

Fountain pens are far more than mere writing instruments—they are heirloom artifacts, expressions of personal identity, and masterworks of precision engineering passed down through generations. However, designing bespoke fountain pens—from selecting rare materials and balancing PBR reflectivity to hand-painting urushi lacquer and gold leaf—traditionally requires prohibitively expensive physical prototyping, lathe trial runs, and custom tooling.

Inspired by the timeless heritage of traditional pen ateliers and the power of modern 3D graphics, we created Penamization Atelier & Brand Guild: a luxury virtual workshop where artisans, nibsmiths, and pen collectors can design, paint, analyze, and visualize bespoke fountain pens in real-time 3D.

What it does

Penamization is an all-in-one digital atelier and material engineering suite designed specifically for fountain pen artisans and enthusiasts. Its key features include:

  1. 3D Bespoke Pen Customizer: Inspect fountain pens in an interactive 3D WebGL environment. Customize individual parts (Cap, Nib, Barrel, Clip, Feed, Finial) with realistic metallic PBR materials (Aged Champagne Gold, Oxblood Burgundy, British Racing Green, Damascened Steel, Sterling Silver).
  2. 3D Exploded Assembly View: Trigger a vector-calibrated explosion animation that floats all core components smoothly in 3D space above an ornate marble & brass pedestal to inspect internal mechanics.
  3. Airbrush & Decal Custom Workstation:
    • Fluid Stroke Rendering: Draw smooth, natural lacquer strokes with quadratic Bezier curve interpolation and speed-tapered stroke dynamics.
    • Customizable Canvas Resolutions: Switch dynamically between multiple resolutions (768x384, 1024x512, 1536x384, 512x512).
    • 3-Tier Multi-Layer System: Manage Base Grid, Airbrush Paint, and Gold Leaf & Stencils layers with independent visibility toggles and real-time live texture projection onto the 3D pen barrel.
  4. Scratch Material Lab: A dedicated PBR physical testing chamber featuring a 3D rotating material orb and a physical property matrix evaluating Material Density ($g/cm^3$), Tensile Rigidity ($GPa$), Mohs Hardness, and CNC Lathe Feasibility for materials like Ebonite, Titanium, Cellulose Acetate, and Urushi Lacquer.
  5. Alchemy Ink Mixing Studio: Formulate custom inks by adjusting pigment ratios, sheen intensity, shimmer particles, and fluid viscosity to generate printable swatch cards.
  6. Manufacturing Specification Exporter: Generate detailed technical spec sheets and high-resolution renders ready for custom orders and master nibsmiths.

How we built it

  • Core 3D Engine: Built with Three.js and HTML5 WebGL, utilizing MeshStandardMaterial for realistic PBR shading, environment map reflections (PMREMGenerator), and dynamic bump maps.
  • 2D Fluid Painting Engine: Developed a custom HTML5 2D Canvas drawing system utilizing quadratic Bezier curve interpolation (quadraticCurveTo), velocity-aware brush dynamics, off-screen layer compositing, and live WebGL CanvasTexture streaming.
  • Exploded Vector Mathematics: Designed linear interpolation matrix transformations to explode nested 3D meshes along vertical vectors while ensuring component elevation remains strictly above the pedestal plate ($Y \ge -2.6$).
  • Physics Matrix Calculation: Formulated real-time material calculations in JavaScript to calculate tensile rigidity and lathe feasibility based on Mohs hardness and density metrics.
  • Old Money UI & Visual Identity: Designed a custom luxury interface incorporating British Racing Green (#07120D), Aged Champagne Gold (#D4AF37), Oxblood Burgundy (#800020), and Warm Parchment Cream typography.

Challenges we ran into

  • 3D Exploded Animation Elevation: Initial exploded view vector offsets caused lower pen components to clip through the pedestal plate. We re-engineered the transform target vectors so all 6 exploded components ascend cleanly along positive vertical trajectories.
  • HUD Pointer Event Propagation: The WebGL canvas overlay initially intercepted mouse click events, making HUD UI buttons unclickable. We resolved this by restructuring the CSS stacking context (z-index: 1000–1002 for controls, z-index: 1 for WebGL canvas with explicit pointer-event rules).
  • Seamless 2D-to-3D Live Texture Projection: Mapping multi-layered 2D canvas airbrush drawings onto a rotating 3D cylindrical pen barrel without UV distortion or performance lag required building an asynchronous off-screen texture compositing pipeline.
  • Tab Dimensions & WebGL Resize: Hidden tab containers caused WebGL canvas aspect ratio distortion upon switching tabs; solved by attaching dynamic resize handlers to active tab visibility state changes.

Accomplishments that we're proud of

  • Fluid 3D Airbrush Engine: Enabling users to paint custom lacquer art and gold leaf decals on 2D layers and see them immediately wrap around the 3D rotating pen in real time.
  • Bespoke Old Money Aesthetic: Crafting an authentic, dignified luxury atmosphere inspired by classic European pen workshops rather than a generic software dashboard.
  • Scientific Scratch Material Lab: Integrating genuine PBR physics metrics (density, tensile rigidity, Mohs hardness) to bridge the gap between creative design and manufacturing feasibility.
  • 100% Free & Open Access: Creating a complete, uncompromised creative suite for the global fountain pen community.

What we learned

  • Advanced Three.js WebGL texture streaming and real-time canvas texture compositing techniques.
  • Principles of PBR physical material simulation ($GPa$ tensile strength math and surface roughness mapping).
  • Effective multi-layered canvas architectures with non-destructive undo/redo and layer visibility toggles.
  • The importance of intentional visual design and color palettes in crafting immersive, branded user experiences.

What's next for penamization

  • AR (Augmented Reality) Quick Look: Allow collectors to project their customized 3D pens onto their physical desk or notebook using WebXR/ARKit.
  • Artisan Guild Community Hub: An open exchange platform where nibsmiths and artists can publish, trade, and download custom airbrush decal packs, ink formulas, and 3D pen designs.
  • Direct 3D Lathe & CAD Export: Exporting customized pen component geometries directly into .STL / .STEP files ready for 3D printing and CNC lathe machining.
  • Physical Nib Flex & Ink Flow Simulator: Simulating nib flex line variation and ink capillary flow based on paper texture and nib tip materials (14K Gold, Iridium, Titanium).

Built With

  • 3d-rendering
  • bezier-curves
  • canvas-api
  • css3
  • customizer
  • design-tool
  • html5
  • interactive-design
  • javascript
  • material-lab
  • orbit-controls
  • pbr-materials
  • three.js
  • ui-design
  • vector-graphics
  • webgl
  • webgl-shaders
Share this project:

Updates

Submission history