Vývoj 3D hier s umelou inteligenciou — bez Unity
Basierend auf: Ditch Unity: How I Vibe Code 3D Games With AI - Full Tutorial · Chong-U — AI Oriented Dev
Úvod
Snívali ste niekedy o tom, že si vytvoríte vlastnú 3D hru — ale hneď ako ste si prečítali, že musíte ovládať Unity alebo Unreal Engine, vzdali ste to? To je celkom bežná reakcia. No dnes sa pozrieme na niečo, čo to celé mení.
Vývojár menom Chong-U vytvoril kompletnú 3D hru pomocou nástrojov umelej inteligencie — bez herného enginu, bez Blenderu, bez rokov štúdia. Iba s KI nástrojmi a knižnicou ThreeJS, ktorá beží priamo v prehliadači.
V tomto článku si ukážeme, ako celý postup funguje — krok po kroku, zrozumiteľne pre každého.
Výsledná hra — čo bolo vytvorené?
Na začiatku videa vidíme výsledok: point-and-click adventúra s plne animovanou 3D postavou, hudbou na pozadí, hlasovým výstupom a dokonca vstavaným editorom úrovní. Celá hra beží v prehliadači — aj na mobilnom telefóne.
Môžete meniť dialógy, nastavovať interaktívne body (hotspoty) a definovať oblasti, kde sa postava môže pohybovať — všetko bez priameho písania kódu. Celé to bolo vytvorené metódou vibe coding: vývojár povedal umelej inteligencii, čo chce, a ona napísala kód.
Kreslenie postavy pomocou KI
Prvý krok nebol 3D modelovanie — ale vytvorenie obrázka.
Bol použitý Gemini od Google a generatívny model Imagen 3 Pro. Výsledkom bol obrázok vtipnej pirátskej postavy — spredu, v tzv. T-póze (s roztiahnutými rukami ako strašiak).
Prečo T-póza? Pretože postava s roztiahnutými rukami a priamym pohľadom dopredu sa oveľa ľahšie prevádza do 3D. Je to technická podmienka pre ďalší krok.
Tip z videa: Pred generovaním obrázka nechajte KI naštudovať príručku promptov príslušného nástroja. Výrazne to zlepší kvalitu výsledku — namiesto priameho zadávania textu do nástroja nechajte KI najprv pochopiť, ako správne písať inštrukcie.
Z obrázka na 3D model pomocou Meshy
Keď máte obrázok, prichádza na rad Meshy — KI nástroj, ktorý z 2D obrázka vytvorí 3D model. Nahráte obrázok, kliknete na "Generate" a Meshy vygeneruje model. Potom kliknete na "Texture" a nástroj prenesie farby a detaily z vášho obrázka na sivý 3D model.
Dôležitý medzikrok: remeshing. Čerstvo vygenerovaný model má často 300 000 alebo viac polygónov (plošiek) — to je príliš veľa pre hru, najmä ak má bežať na mobile. Preto ho zredukujeme na asi 1 000 polygónov. Pre štýl low-poly, ako v tejto hre, je to úplne dostačujúce. Pri remeshingu vyberte topológiu "Triangle" — herné enginy pracujú s trojuholníkmi najefektívnejšie.
Rigging a animácie — postave vdýchneme život
Rigging znie odborne, ale princíp je jednoduchý: dáte svojej 3D postave kostru — podobne ako pri marionete. Až potom sa môže pohybovať.
Meshy to robí do veľkej miery automaticky: kliknete na "Rig", vyberiete "Humanoid" a nástroj automaticky umiestni kĺby — kolená, lakte, ramená, členky. Polohy môžete doladiť, ale väčšinou fungujú hneď po vygenerovaní.
A potom — animácie! Meshy má rozsiahlu knižnicu hotových animácií: chôdza, beh, idle (keď postava len stojí a mierne sa pohybuje). Vyberiete, čo potrebujete, a animácia sa priamo aplikuje na váš model.
Výsledok: plne animovaná 3D postava — bez Blenderu, bez rokov skúseností.
Export a súbory — čo budete potrebovať
Po dokončení exportujete postavu z Meshy ako GLB súbor — bežný formát pre 3D modely. Dostanete dva súbory: kostru a animácie.
Dôležitý krok navyše: nechajte KI vytvoriť index.json súbor. To je jednoduchý textový súbor, ktorý popisuje všetky animácie postavy — názov, trvanie, či sa opakujú. Bez neho KI neskôr mieša animácie (beh sa stane státím, idle sa stane behom). Tento súbor zabezpečí, že KI vždy vie, s čím pracuje.
ThreeJS — hra v prehliadači
Teraz prichádza vzrušujúca časť: 3D hra v prehliadači. Knižnica ThreeJS (knižnica = sada hotových nástrojov pre programátorov) umožňuje 3D grafiku priamo v prehliadači — a funguje aj na mobilných telefónoch.
Vývojár nepisal kód od nuly. Použil vopred pripravený ThreeJS Builder Skill — to je sada inštrukcií pre KI, ako má kód správne napísať. Predchádza bežným chybám: postava sa pozerá nesprávnym smerom, animácie nefungujú, ovládanie nefunguje na dotykových obrazovkách.
ThreeJS Builder Skill — prečo je dôležitý
Keď jednoducho poviete "vytvor mi 3D scénu s mojou postavou", KI robí chyby. Nie preto, že by bola zlá, ale preto, že ThreeJS je veľmi špecifický a má veľa nástrah pre začiatočníkov aj skúsených vývojárov.
Builder Skill obsahuje osvedčené riešenia pre najčastejšie problémy: osvetlenie, ovládanie kamery, správu animácií. Bol otestovaný mnohými ľuďmi a funguje spoľahlivo.
Postup je jednoduchý:
- Načítajte Skill v Codex alebo Claude Code
- Zadajte index.json ako referenčný súbor
- Napíšte prompt: "Vytvor mi ThreeJS scénu s orbit kamerou a tlačidlami pre animácie, s podporou dotykovej obrazovky"
- Zapnite plánovací režim pre komplexnejšie úlohy
- KI napíše kód
Capacitor: nasadenie na mobil
Keď hra funguje v prehliadači, chceme ju mať aj ako mobilnú aplikáciu. Na to slúži Capacitor — nástroj, ktorý z webovej aplikácie vytvorí natívnu mobilnú aplikáciu (teda aplikáciu, ktorá vyzerá a funguje ako "skutočná" app).
Vývojár na to vytvoril špeciálny Skill, ktorý všetko automaticky nastaví. Xcode (vývojový nástroj od Apple) nie je potrebné ani otvoriť — Capacitor to rieši cez príkazový riadok. Stačí povedať KI: "Nasaď to na iOS simulátor" — a ona to urobí.
Najdôležitejšie body
- Unity ani Blender nie sú potrebné — KI nástroje prevezmú to najťažšie
- Postup: Generovanie obrázka s Gemini → 3D model v Meshy → Rigging a animácie → ThreeJS scéna v prehliadači → nasadenie na mobil s Capacitor
- Skills sú kľúčové — Vopred pripravené inštrukcie pre KI zabraňujú typickým chybám
- Nezabudnite na index.json — Popisuje všetky assety a predchádza zmäteniu KI
- Capacitor premení webovú aplikáciu na skutočnú mobilnú aplikáciu — bez znalostí Xcode