Zpět do zážitku
Případová studie · 03

Obalero

3D obalová platforma · 2020—2025

Pětiletý greenfield vývoj 3D packaging platformy propojující okamžité náhledy v prohlížeči s produkčním renderováním.

Landing page Obalera: iMac na stole ateliéru ukazuje jednu plechovku jako holý drátový model vedle téže plechovky plně vyrenderované — celý slib platformy v jednom snímku.
Otevřít projekt
Přehled projektu

Přetavit ambiciózní greenfield nápad do fungující packaging platformy v situaci, kdy se produkt, priority i rozsah funkcí teprve za pochodu formovaly. Technická výzva sahala od browserového 3D přes produkční rendering a realtime komunikaci až po autentifikaci a Adobe tooling.

Rok
2020—2025
Délka realizace
5 let
Velikost týmu
4 core / 6 total
Model spolupráce
partner led
Výstupy
06
Řešení

Původní koncept jsem během několika dnů přetavil do funkční architektury a propojeného prototypu a následně pět let stavěl celou platformu v průběžně se měnícím rozsahu — realtime editor v Next.js/Three.js, shadery skla a materiálů, vlastní socketovou komunikaci, platby, Illustrator plugin, Maya automatizaci a cloudovou renderovací pipeline. Je nasazená a v pilotním provozu u průmyslového zákazníka.

Moje role

Technická architektura a product engineering napříč kompletním vývojem: frontend a WebGL, API integrace, autentifikace, caching, vlastní sockety, Maya scripting, renderovací automatizace a kompletní vývoj i nasazení Illustrator pluginu do storu; současně jsem zavedl standupy, Git flow a spolehlivější proces dodání.

Tým a spolupráce

Jádro produktu: Václav Štrobl jako technický architekt a frontend/3D lead, backend vývojář, 3D grafik a ředitel firmy; širší tým doplňoval projektový a obchodní management.

Omezení
  • Greenfield produkt vznikal za průběžně se měnících priorit, požadavků a rozsahu funkcí.
  • Architektura musela propojit browserové 3D, backendové služby, realtime komunikaci, Maya rendering a Illustrator plugin.
  • Během růstu produktu bylo nutné současně zavést technický workflow a vývojovou disciplínu.
Nabídka Obalera — „New platform for packaging design. By designers, for designers." — vedle fotorealistického renderu orosené 500ml plechovky.
Výstupy
  1. 013D konfigurátor obalů
  2. 02Realtime náhledová vrstva v prohlížeči
  3. 03Workflow pluginu pro Adobe Illustrator
  4. 04Realtime API / socket komunikace
  5. 05Maya scripting a komunikace s render serverem
  6. 06Automatizovaná render pipeline a tutorial web
Výsledky a důkazy
  • Živý produktový web
  • Archivní tutorial video
  • Screenshoty produktového rozhraní
Technologie
  • Next.js
  • React
  • Three.js
  • Node.js
  • WebGL
  • Firebase
  • WebSockets
  • Stripe
  • REST API
  • Adobe Illustrator SDK
  • Autodesk Maya
  • V-Ray / Chaos render pipeline
Vybrané ukázky
Přihlašovací obrazovka Obalera: plechovky, lahve a kelímky vyrenderované jako skupina, vedle karty přihlášení e-mailem, Googlem a Apple.
Samotný editor Obalera: 440ml plechovka v realtime 3D viewportu, vlevo panel textur a instalace pluginu do Adobe Illustratoru.