← Zurück03 — 06
Web2025 – 2026·Fallstudie
BioDraft ist der Schnittmuster-Editor für die BioCloth-Pipeline. Bezier-Pattern entstehen direkt im Browser, Nähte werden parametrisch entlang einzelner Kantenstücke gesetzt, und das Ergebnis fällt live als Kleidungsstück auf einen 3D-Avatar.
Rolle
Team von 2
Status
Aktiv
Jahr
2025 – 2026
Stack
TS
React 19 + TS
UI + Editor-Shell
2D
Konva
Bezier-Canvas + Hit-Testing
Three.js
Live-Drape-Preview
Z
Zustand
Slice-State + Persistence
Kern des Projekts
Pattern als Vertrag
BioDraft ist kein Zeichen-Spielzeug. Jeder Bezier-Punkt wird später ein echtes Vertex in BioCloth, jede Naht ein echter Constraint im Solver. Sobald eine Kante doppelte Samples liefert, eine Naht ins Leere zeigt oder das DXF die Seam-Topologie verliert, ist das ganze Asset im nächsten Schritt unbrauchbar.
DXF
ASTM/AAMA-Export mit SEAM_META-Topologie
Teilnähte
Kantenabschnitte lassen sich präzise verbinden
1 store
2D-Editor und 3D-Preview teilen State
Blender
externer Render-Server für Front/Back-Shots
Problem
Was daran schwierig war
Problem
Schnittmuster entstehen in der Industrie überwiegend in alten DXF-/CAD-Tools ohne 3D-Vorschau. Wer wissen will, wie ein Muster fällt, muss drucken, schneiden, nähen. Eine Vorschau im Editor klingt einfach, ist es aber nicht: zwei Pattern-Teile brauchen Nähte, die nur Teile einer Kante verbinden, der Bezier-Editor muss interaktiv sein ohne pro Drag das 3D-Bild abzuwürgen, und das Ergebnis muss am Ende wieder als sauberes DXF rauskommen, das ein industrieller CAD-Workflow akzeptiert.
Ansatz
BioDraft trennt die Verantwortungen scharf. Konva trägt den 2D-Canvas mit Bezier-Punkten, Handles, Snap und Rulers. Zustand-Slices (Paths, Points, Seams, Textures) halten den State, persistieren auf LocalStorage und werden direkt von der 3D-Szene gelesen. Three.js drapiert das Mesh live ohne separate Sync-Layer. Teilnähte werden als Abschnitte entlang einer Bezier-Kante gespeichert, damit ein Naht-Constraint nur den richtigen Bereich verbindet. Texturen werden interaktiv auf geschlossene Shapes positioniert. Beim Export schreibt der DXF-Writer SPLINE/LINE-Entities und packt die Seam-Topologie in SEAM_META-Kommentare, sodass der Re-Import die Naht-Beziehungen wieder rekonstruieren kann. Für Marketing-Renders übernimmt ein kleiner Express-Server in Node Jobs, ruft die externe biomesh-API für vermessene Avatare, lässt Blender via Python das Pattern + den Avatar rendern und liefert Front/Back-Orthoshots zurück.
Pipeline
Pattern zu drapierbarem Kleidungsstück
Jeder Schritt hat einen engen Vertrag: saubere Bezier-Paths zeichnen, Nähte auf Kanten parametrisieren, einen State halten, live drapieren und ein DXF schreiben, das den CAD-Round-Trip übersteht.
Zeichnen
Bezier-Punkte, sharp/smooth-Handles, Snap
Naht
Teilnähte auf Kantenabschnitten
State
Zustand-Slices, persistiert in LocalStorage
Drapieren
Three.js liest live aus demselben Store
Export
DXF + SEAM_META, JSON, Blender-Rendering
Was sich geändert hat
Was es praxistauglicher gemacht hat
Partielle Nähte brauchen parametrische Kanten
Hit-Overlays halten dünne Linien greifbar
Render-Server als saubere Grenze
Technische Entscheidungen
Warum so gebaut
Editor
- +Konva trägt Grid, Paths, Seams, Points und UI-Overlays als getrennte Layer. Hit-Testing und Z-Order sind dadurch explizit statt implizit.
- +Jeder Bezier-Punkt kann zwischen Sharp und Smooth wechseln; Smooth spiegelt Handles automatisch, Sharp bricht sie.
State
- +Zustand-Slices (Paths, Points, Seams, Textures) isolieren Mutationen und lassen sich einzeln testen.
- +Persistence schreibt genau die Form, die der Runtime liest. Reload stellt den Editor exakt wieder her.
Export
- +DXF-SPLINE-Entities erhalten Bezier-Kurven in Grad 3; SEAM_META-Kommentare retten die Seam-Topologie durch Round-Trips.
- +JSON dumpt den vollen Zustand für native Saves; der Blender-Server liefert Front- und Back-Orthos zurück.
Runtime
Ein State, zwei Views, echter Export
BioDraft behandelt den Browser als Authoring-Fläche und das DXF als Deliverable. Die 3D-Vorschau liest nur aus demselben Store; der Blender-Server läuft separat, wenn wirklich ein Marketing-Render gebraucht wird.
Pipeline-Asset
BioDraft liefert echtes DXF mit Seam-Topologie, nicht nur einen Screenshot. Genau dadurch ist es Input für BioCloth und industrielle CAD-Workflows.
Reaktive Sync
Two views, one store. Jede Änderung am Bezier-Punkt landet ohne Adapter im 3D-Drape. Kein eigener Diff-Layer, kein manuelles Re-Render.
Render-Server
Express + Blender via Python rendert vermessene Avatare mit dem Pattern. Browser bleibt schnell, Marketing-Bilder kommen aus einem echten Path-Tracer.
Was daraus rauskam
Gut / nicht gut
Hat gut funktioniert
- +Ein einziger Zustand-Store für 2D und 3D hat jede einzelne Zeile handgeschriebenen Sync-Codes überflüssig gemacht.
- +Seams als Kantenabschnitte zu parametrisieren passt genau zu der Art, wie Schnittmacher partielle Kanten denken.
- +SEAM_META in DXF-Kommentaren überlebt Round-Trips durch industrielle CAD-Tools, ohne die Naht-Beziehungen zu verlieren.
Hat nicht funktioniert
- -Erster Versuch mit handgebautem Bezier-Canvas hat Wochen nur am Hit-Testing verbrannt; Konva ersetzt das in zwei Tagen.
- -Die 3D-Preview in eigenem State zu halten erzeugte Drift bei schnellen Drags. Lösung war ausschließlich derselbe Store.
- -Live-Hochqualitäts-Renderings im Browser waren nicht realistisch; die Arbeit ist auf einen Blender-Server gewandert.
Nächste Baustellen
Klare Verträge zwischen Editor, State und Export
DXF-Roundtrips gegen mehr industrielle CAD-Tools härten, damit SEAM_META unverändert bleibt
BioCloth direkt aus dem BioDraft-State füttern statt über einen Export-Schritt
Texture-Pipeline um Material-Presets und Nahtzugaben-Visuals erweitern
Galerie
02
Nächstes Projekt
Banking DB Assistant
→Du arbeitest an
ähnlichen Themen?
Schreib mir kurz, worum es geht — ich melde mich.
Timo Wilde© 2026