00. Studio Topbar, Master Toolbar & Viewport HUD (11 Core Features & Options)

GLOBAL TOOLS & CONTROLS

The Studio Topbar and Viewport HUD manage global state synchronization, diagnostic camera projections, ray-cast rendering engines, and precision spatial calipers:

1. Master Specimen Reset:

Flushes GPU texture caches, clears placed graphic decals, resets aging washes, and restores base PBR parameters to factory defaults.

2. 4K Clean Ray-Cast Render:

Executes an ultra-high-definition 3840×2160 ray-cast render pass with anti-aliasing (MSAA 4x) and transparent alpha PNG export.

3. 360° Turntable Auto-Rotation ([Space]):

Engages smooth continuous yaw axis rotation at calibrated angular velocity (0.5x to 5.0x) for full 360-degree apparel inspection.

4. Diagnostic Polygon Wireframe ([W]):

Toggles polygon wireframe rendering across all meshes to inspect quad topology density, seam boundaries, and UV seams.

5. 2D UV Projection Box Modal ([O]):

Opens the 2D unwrapped UV coordinate map modal, allowing exact millimeter positioning of prints across front, back, and sleeve panels.

6. Camera View Presets ([1] - [5], [D]):

Instantly transitions the viewport camera to Front (`[1]`), Rear (`[2]`), Left (`[3]`), Right (`[4]`), 3/4 Isometric (`[5]`), or Detail (`[D]`).

7. Move & Orbit Viewport Tool ([V]):

Primary spatial navigation tool. Left-click drag orbits camera, right-click drag pans, scroll wheel zooms with damping inertia.

8. Ray-Cast Decal Placement Tool ([T]):

Ray-casts mouse clicks onto 3D mesh surface to drop graphic badges, typography decals, or uploaded artwork with UV translation.

9. Eyedropper Color Sampler ([I]):

Samples exact RGB hex values from active UV texture maps or fabric meshes for color matching and theme coordination.

10. Measure Tape Caliper ([M]):

Computes Euclidean millimeter distance between two clicked 3D surface vertices to verify pattern dimensions and print sizing.

11. Viewport Diagnostic Metrics HUD:

Displays real-time FPS counter, WebGL draw call monitor, canvas resolution scaler, and live 3D cursor ray-cast XYZ coordinates.

01. Garment Item Base Models, Sizing & 3D Silhouettes (10 Features & Options)

TAB: 01. ITEM

The Customizer supports 11 base parametric silhouettes (*Signature T-Shirt, Heavyweight Oversized Tee, Tailored Cargo Pants, Classic Button-Down Shirt, Pique Collar Polo, Executive Formal Suit Set, Oversized Street Hoodie, Pullover Heavy Hoodie, Girls Summer A-Line Dress, Elegance Evening Gown, Streetwear Snapback Cap*). Use the interactive sizing matrix below:

Garment Silhouette & Sizing Matrix Simulator

Select 3D garment base models, fit profiles, and fabric weight (GSM) to inspect dimensional grading, fabric yield, and physical drape volume:

3D BASE MODEL MESH (11 SILHOUETTES):

FIT & SILHOUETTE PROFILE:

FACTORY SIZE GRADING:

Fabric Density (Weight): 280 GSM

200-310 GSM: Medium-to-heavy structural drape (Luxury Boxy Tee)

FACTORY MEASUREMENT SPECIFICATIONGRADE: L · FIT: BOXY

Garment Model:	tshirt
Chest Half-Width:	60 cm (23.6")
Total Body Length:	74 cm (29.1")
Shoulder Cross:	54 cm (21.3")
Sleeve Length:	23.5 cm (9.3")
Pattern Yield:	1.45 m
Drape Profile:	Boxy Drop Shoulder

Mesh Dossier: Signature T-Shirt: Standard crewneck drape, calibrated armholes, twin-needle sleeve & bottom hem.

Tab 01 Technical Options & Specifications Breakdown

1. Garment Base Model Mesh: Selection between 11 parametric 3D silhouettes with pre-calibrated UV unwraps and mesh topologies.

2. Fit & Silhouette Profile: Tailored Slim (-4cm chest ease), Classic Regular (+0cm), Boxy Drop-Shoulder (+6cm), Extreme Oversized (+12cm).

3. Factory Size Grading Matrix: Standard industrial grading `S`, `M`, `L`, `XL`, `XXL` with exact millimeter dimensional tolerances.

4. Fabric Density & GSM Slider: Calibrate material density from `160 GSM` (summer jersey) up to `500+ GSM` (heavy Melton wool & canvas).

5. Chest Half-Width Calibration: Exact pit-to-pit half circumference grading (e.g. Size L = 60cm / 23.6").

6. Total Body Length Grading: Shoulder high point to bottom hem measurement (e.g. Size L = 74cm / 29.1").

7. Shoulder Cross & Drop Seam: Armhole seam placement from natural anatomical shoulder to 3cm boxy drop shoulder.

8. Sleeve Length & Armhole Grading: Shoulder seam to cuff measurement (e.g. Size L = 23.5cm / 9.3").

9. Pattern Consumption Yield: Automated raw fabric consumption calculation (1.25m for Size S to 1.75m for Size XXL).

10. Physical Drape Volume Simulation: Simulates fabric fold resistance, gravity fall, and structural crease memory in 3D space.

02. Materials, PBR Physics, Fabrics, Patterns & Saved Looks (12 Features & Options)

TAB: 02. MATERIAL

The PBR rendering engine computes micro-facet light scattering using Cook-Torrance specular distribution. Below is the Live Interactive 3D PBR Torus Sandbox:

Interactive PBR Light Scattering Simulator

Interact with real-time Cook-Torrance microfacet shaders. Adjust roughness, metallic reflectance, grazing-angle sheen, and clearcoat lacquer directly to inspect physical specular distribution:

Roughness: 0.85

Metalness: 0.05

Sheen Luster: 0.20

Clearcoat Gloss: 0.00

LIVE 3D PBR TORUS · DRAG TO ROTATE

Tab 02 Technical Options & Shading Breakdown

1. Fabric Base Selector: 40+ curated fabrics across 7 categories (Wool, Denim, Linen, Lycra, Cotton, Luxury Silk & Leather, Technical Weatherproof).

2. Roughness Parameter (0.0 – 1.0): Controls microfacet normal scatter. Low = sharp specular highlights (silk, leather); High = diffuse scatter (cotton, wool).

3. Metalness Parameter (0.0 – 1.0): Dielectric non-metal (0.0) vs Vacuum-metalized gold foil conductor (1.0).

4. Sheen Luster & Sheen Color: Glancing-angle retro-reflection simulating velvet, cashmere, and brushed mohair.

5. Clearcoat Gloss & Roughness: Secondary protective gloss lacquer layer for leather, patent vinyl, and waxed canvas.

6. 12 3D Tactile Normal Finishes: Normal map displacement including *Heavy Cotton, Slub Linen, Corduroy Rib, Raw Denim, Waffle Knit, Terry Cloth, Leather Grain, Canvas Duck, Wool Tweed, Micro-Mesh, Silk Satin, None*.

7. Normal Map Scale Slider (0.0 – 3.0): Controls tangent-space depth height relief of the textile weave.

8. 30+ Procedural Repeat Patterns: Procedural patterns including *Gold Obsidian Wave, Damask Jacquard, Tie-Dye, Marble Vein, Cyber Grid, Houndstooth, Seigaiha, Paisley, Camouflage, Stripes*.

9. Zone-Locked Pattern Engine: Restricts repeat patterns to `full`, `chest`, `back`, `sleeveL`, or `sleeveR` panels.

10. Multi-Zone Color Blocking: Independent color pickers for Master Base Tint, Torso, Left Sleeve, Right Sleeve, and Collar/Trims.

11. Aging & Distress Engine:Three parametric passes: Sun Fade (UV bleaching), Stone Wash (pigment desaturation), Wear & Tear (micro-abrasions) with 4 quick presets.

12. Saved Material Looks ("Looks") Library: Save complete material configurations into browser storage or export/import JSON dossiers.

03. Graphic Decals, Typography, Badges & Specialty Inks (11 Features & Options)

TAB: 03. GRAPHICS

The decal canvas compositor allows multi-layer graphic placement on 3D meshes with blend modes, 24K gold foil masks, 3D raised puff gel, tactile emboss relief, and cyber neon bloom:

Decal Canvas Compositor & Specialty Ink Simulator

Test multi-layer artwork placement, canvas layer blend modes, and specialty printing techniques directly:

SPECIALTY INK FORMULATION:

BLEND MODE:

Layer Opacity: 100%

COMPOSITED GRAPHIC SPECIMEN

Tab 03 Technical Options & Specialty Inks Breakdown

1. Multi-Layer Decal Hierarchy: Stack multiple artwork overlays with layer reordering, visibility toggling, and deletion.

2. Canvas Blend Modes: Normal (`source-over`), Multiply (dye sublimation), Screen (discharge printing), Overlay (contrast weave).

3. Flat Screenprint Finish: Standard high-pigment opaque plastisol ink with smooth finish.

4. 3D Raised Puff Gel (1.5mm): Heat-expanded raised 3D plastisol with baked normal map displacement.

5. Tactile Emboss / Deboss Stamping: Heat-stamped bevel relief creating tactile sunken or raised edges.

6. 24K Mirrored Gold Foil Stamp: 100% metallic mirror mask with specular scene reflection.

7. Cyber Neon Emissive Bloom: High-voltage glow channel paired with real-time `UnrealBloomPass` post-processing shader.

8. Custom Typography Engine: Live text generator with custom font selection, font size, fill color, and stroke outline.

9. Curved / Arched Text Geometry: Mathematical arc wrapping for vintage collegiate chest lettering.

10. Graphic Badge Synthesizer: 20+ preset atelier crests, heraldic shields, streetwear logos, and geometric insignias.

11. Precision Decal Alignment Tools: Snap to Front Chest, Snap to Back Panel, Snap to Left Chest / Pocket, Horizontal Mirror (`flipX`), Duplicate (+2% offset), Quick Scale Presets (25%, 50%, 75%, 100%), and Arrow-Key fine nudging (±0.005 UV units).

04. Garment Hardware, Tailoring & Seam Studio (11 Features & Options)

TAB: 04. DETAILS

Tab 04 governs fine garment construction, seam stitch geometries, metallic hardware trims, and branding tags:

Interactive Seam Studio & Stitch Pen Simulator

Inspect the structural geometry of 8 industrial seam stitch types, adjust thread thickness, and test thread color contrast on textile joins:

STITCH CONSTRUCTION PATTERN:

THREAD TINT:

Thread Gauge: 3px

SEAM JOIN MICROSCOPY · FLATLOCK

Tab 04 Technical Options & Construction Breakdown

1. 8 Dynamic Seam Stitch Types: Double Flatlock, Chain Stitch, Overlock Serger, Denim Topstitch, Running Stitch, Reinforced Zigzag, French Seam, Blind Hem.

2. Interactive Seam Stitch Pen ([S]): Freehand or anchor-point clicking directly on 3D panels to draft custom seam lines.

3. Thread Gauge & Thickness Slider: Calibrates stitch thread diameter from `0.5px` (delicate fine silk) to `10.0px` (heavy industrial rope stitch).

4. PANTONE Thread Color Picker: High-contrast or tonal thread color matching across all seam paths.

5. Fastener Button Materials: Brushed Antique Brass, Genuine Buffalo Horn, Iridescent Mother-of-Pearl, Matte Black Oxide.

6. Button Placket Configurations: Single-button, 2-button polo placket, 5-button shirt placket, dual-row military placket.

7. Zipper Construction Types: Exposed Brass Teeth, Molded Nylon Sport Zip, Concealed Invisible Seam Zip.

8. Collar & Neckline Tailoring: 1x1 Heavy Ribbed Crewneck, Bound Neck Tape, Raw Distressed Cut, Double-Needle Hems.

9. Branding Woven Damask Labels: Internal neck brand tags with custom brand name and size indicator.

10. Laser-Cut Hangtags & Patches: Eco kraft paper retail hangtags with metal eyelets, embroidered chest and sleeve patches.

11. Hood Drawstrings & Aglets: Tubular cotton drawstrings with metallic brass, chrome, or matte black aglet tips.

05. Scene Studio, 3-Point Rigs & Floor Reflector (10 Features & Options)

TAB: 05. SCENE

Calibrate Key, Fill, and Rim lighting rigs with real-time shadow casting, HDRI environment maps, and ground floor reflections:

Studio 3-Point Lighting Rig & Exposure Simulator

Simulates Key, Fill, and Rim light vectors with dynamic shadow falloff and grazing specular edge separation:

Key Light Intensity: 3.0x

Fill Light Intensity: 1.0x

3-POINT RAY-CAST SPHERE

Tab 05 Technical Options & Lighting Breakdown

1. Key Light Intensity (0.5x – 6.0x): Primary directional illumination vector with elevation and yaw angle controls.

2. Key Light Color Spectrum: Warm tungsten (3200K), daylight neutral (5500K), or cool studio white (6500K).

3. Fill Light Ambient Bounce (0.0x – 3.0x): Soft shadow-filling secondary light with sky-blue diffuse tint.

4. Rim / Back Light Silhouette (0.5x – 5.0x): High-contrast grazing back light for rim edge separation.

5. Rim Light Color Customization: Gold accent, cyan neon, or crisp white silhouette highlights.

6. 5 HDRI Environment Maps: Studio Neutral, Golden Sunset Warmth, High-Contrast Editorial, Cyberpunk Neon City, Clean Minimal White.

7. Ground Contact Shadow: Real-time shadow map projection anchoring the garment in 3D physical space.

8. Ground Floor Mirror Reflector: Dynamic floor reflectivity simulating polished atelier epoxy showroom floors.

9. Camera Field of View (FOV): Adjustable from technical orthographic telephoto (`15°`) to dramatic wide-angle perspective (`75°`).

10. ACES Filmic Tone Mapping: Exposure compensation for high dynamic range lighting and specular highlights.

06. Procedural Motion, Wind Waves & Virtual Runway (10 Features & Options)

TAB: 06. ANIMATIONS

1. Procedural Wind Speed (0 – 60 km/h): Calibrated velocity oscillating fabric vertex waves across garment panels.

2. Wind Yaw Direction (0° – 360°): Rotates incoming wind vector relative to garment orientation.

3. Wind Turbulence Noise (0.0 – 1.0): Stochastic Perlin noise perturbation generating natural fabric fluttering.

4. Gust Pulse Frequency (0.1 – 2.0 Hz): Sinusoidal burst cadence simulating changing atmospheric airflow.

5. Cloth Stiffness Resistance: Modulates drape rigidity from fluid silk to stiff denim and canvas.

6. Cloth Damping Inertia: Absorbs kinetic energy to simulate heavy wool and fleece motion decay.

7. 360° Turntable Runway Mode: Continuous camera orbit simulating e-commerce catwalk product presentations.

8. Idle Subtle Breathing Mode: Gentle sinusoidal expansion and contraction simulating mannequin display.

9. Weather Particle Generator: Particle atmospheric effects (*Clear Studio, Gentle Rain Mist, Falling Snow Flurry, Haze*).

10. Time-of-Day Celestial Simulator: Studio Day, Golden Hour Sunset, Blue Hour Twilight, Midnight Moody lighting presets.

07. Automated Factory Tech Pack, BOM Cost Matrix & AR Exports (12 Features & Options)

TAB: 07. TECH PACK & AR

Generates vector PDF tech packs with millimeter dimension callouts, exact PANTONE TCX color codes, Bill of Materials (BOM) cost ledgers, and 3D AR exports:

Automated BOM & Unit Cost Matrix Calculator

Calculates cut-make-trim (CMT) manufacturing budgets, raw textile consumption yield, finishing passes, and retail profit margins:

Batch Production Volume: 100 Units

TEXTILE GRADE & GSM:

Decal Print Hits:

24K Gold Foil Stamp (+$2.50)

BILL OF MATERIALS (BOM)BATCH: 100 UNITS

Raw Fabric Yield (1.4m):	$12.50
Print & Foil Embellishment:	$6.10
Cut-Make-Trim (CMT) Labor:	$5.00
Landed Factory Unit Cost:	$23.60
Suggested Retail MSRP:	$89.68 (74% Margin)
Total Batch Estimate:	$2,360

Tab 07 Technical Factory & AR Breakdown

1. Automated Vector PDF Tech Pack: Factory-ready downloadable PDF with dimensional CAD drawings and callouts.

2. Dimensioned Flat CAD Drawings: 2D front and rear technical orthographic flats with seam and print callouts.

3. Material Specification Ledger: Fiber composition, yarn count, weave type, and fabric GSM breakdown.

4. PANTONE TCX Color Matching: Exact Hex and PANTONE TCX color matching for base fabrics, trims, stitches, and graphics.

5. Graphic Decal Placement Dossier: Precise UV coordinate bounding boxes, print dimensions in cm/inches, and ink formulations.

6. Raw Fabric Yield Calculator: Millimeter pattern cut consumption (1.25m to 1.75m per garment) according to size grade.

7. Cut-Make-Trim (CMT) Labor Rate: Configurable labor cost per unit based on seam construction complexity.

8. Embellishment Hit Cost Ledger: Cost breakdown for screenprint hits, 3D puff gel passes, and 24K gold foil stamps.

9. Dynamic Batch Volume Discount Curve: Production tier pricing from 20 units to 10,000+ units with economies of scale.

10. Retail MSRP & Gross Margin Analysis: Landed factory unit cost vs recommended retail MSRP with profit margin percentage.

11. 3D Binary GLB Mesh Export: Optimized binary 3D model with embedded PBR textures for web and game engines.

12. Apple iOS USDZ QuickLook AR: One-click augmented reality preview for iPhone and iPad to project life-sized apparel in physical space.

08. 2D UV Texture Map Unwrapped Coordinate Editor Modal ([O]) (10 Features & Options)

UV MAPPING & COORDINATES

The 2D UV Coordinate Editor allows designers to inspect unrolled mesh islands, align graphic decals across panel seams with sub-millimeter precision, and inspect printable area bounding boxes:

2D UV Coordinate Map & Island Projection Sandbox

The 2D UV Editor unrolls 3D manifold mesh geometry onto a 2048×2048 pixel canvas. Select a UV island to inspect coordinate bounds and print zone constraints:

Front Body Panel (2048² UV Projection)

BOUNDS: U: [0.10, 0.45] · V: [0.15, 0.85]

Primary graphic print zone. Maximum printable canvas: 35cm × 45cm.

FRONT PANEL

REAR PANEL

SLEEVE L

SLEEVE R

2D UV UNWRAP (MODAL: [O])

Tab 08 Technical UV Coordinate Options

1. Unrolled 2048² UV Coordinate Canvas: High-resolution 2048×2048 pixel canvas mapping flat pattern pieces to 3D manifold geometry.

2. Multi-Island UV Layout: Front Body Panel, Rear Body Panel, Left Sleeve, Right Sleeve, Collar, Ribbing, and Cuffs.

3. Coordinate Space [0.0, 1.0] Mapping: Exact mathematical normalization projecting 2D canvas pixels to 3D surface vertices.

4. Millimeter Grid & Ruler Overlay: Precision measurement guides for artwork placement.

5. Printable Area Boundary Guidelines: Bounding boxes demarcating maximum printable artwork dimensions per panel.

6. Synchronous Real-Time Texture Baking: Live WebGL texture re-baking without viewport lag or stutter.

7. Interactive Graphic Drag & Scale: Direct canvas gizmo manipulation of decal position, rotation, and dimensions.

8. Decal Layer Stack Selector: Clickable layer list inside the UV modal for fast switching between stacked graphics.

9. Zone Clipping Mask Visualizer: Outlines boundaries for front chest, rear back, and sleeve locked zones.

10. High-Resolution PNG UV Map Export: Download 2048² composite diffuse, normal, and metalness texture maps.

09. Cloud Project Library, Authentication & REST API Architecture

BACKEND ARCHITECTURE

The Junglans Specimen Atelier connects frontend Next.js clients to a FastAPI / PostgreSQL backend for synchronized project storage, asset streaming, and automated server-side PDF generation:

GET /api/catalog

Returns complete metadata for all 11 3D garment models, 40+ fabrics, and 30+ procedural patterns.

GET / POST /api/projects

Fetches and persists complete design state dossiers (materials, decals, stitches, lighting, aging).

POST /api/projects/:id/export-techpack

Generates vector PDF factory specification dossiers with dimensions and PANTONE color breakdowns.

GET /api/models/:filename

Streams optimized binary GLB 3D apparel meshes with HTTP range support and browser cache headers.

10. Master Diagnostic Controls & Keyboard Shortcuts

[Space]Toggle 360° Turntable Auto-Rotate

[W]Toggle Diagnostic Polygon Wireframe Mode

[O]Toggle 2D UV Projection Box Modal

[1] - [5]Camera Views: Front [1], Rear [2], Left [3], Right [4], 3/4 [5]

[D]Focus Camera on Active Decal Detail Close-Up

[Delete] / [Backspace]Delete Currently Selected Graphic Decal

[Ctrl + S] / [Cmd + S]Save Specimen Dossier to Local & Cloud Archive

[Arrow Keys]Nudge Active Decal Position by ±0.005 UV Precision Units

[Shift + Arrow Keys]Coarse Nudge Active Decal Position by ±0.02 UV Units

[V]Select Move / Orbit Viewport Tool

[T]Select Ray-Cast Decal Placement Tool

[S]Select Seam Studio Stitch Pen Tool

[I]Select Eyedropper Color Sampler Tool

[M]Select Millimeter Distance Measure Tape Caliper

[Esc]Deselect Active Decal or Close Open Modals

Complete Field Guide: Every Tab, Tool, Shader & Option