Digitale 3D-avatarzang en dans bestuurd door gebruikers
Klik op de centrale ronde CLICK ME-knop om de muziek te starten.
De avatar begint te spelen 10 willekeurige bewegingen.
• U kunt het proberen met de cijfertoetsen van 1 tot 10 die u aan de linkerkant van het toetsenbord vindt (boven de letters) om de dansbewegingen te veranderen.
• Met de 4 centrale pijlen op het toetsenbord kunt u de positie van de avatar wijzigen.
• Met de + en – toets op het numerieke toetsenbord rechts van het toetsenbord, je kunt in- en uitzoomen op de avatar.
Genieten! 
Hoe u uw 3D NFT-avatar op muziek kunt laten dansen?
Ben je eenVerveelde aap? Misschien ben jij eenCryptoPunk? Nee? Misschien een beetje meerMeebit danGeest? Ongeacht je smaak van NFT-avatars, het is duidelijk dat er een nieuwe wereld aan het ontstaan is rond op persona gebaseerde kunst. Sommige van deze avatars zijn al 3D en andere vereisen de creativiteit van een bredere gemeenschap om er 3D-leven in te blazen. Maakt niet uit wat, hoewel, we zien dat de wereld van op personages gebaseerde kunst tot het uiterste wordt gedreven dankzij NFT's.
Vandaag, we gaan de limiet doorbreken en laten zien hoe je je 3D-avatars spannender kunt maken, leuker, en, hopelijk, meer virale gebruikPinata als ruggengraat van dit alles. Digitale ervaringen vereisen tegenwoordig de combinatie van meerdere mediabestanden. Een afbeelding is leuk, maar een beeld ingesteld op audio is een ervaring. Een video met tekstoverlay kan het hele gevoel veranderen. 3D-modellen bestaan al uit veel verschillende mediabestanden. Meshes, texturen, schaduwen, en meer. Wat als we animaties en audio in één uniforme ervaring zouden kunnen opnemen??
Laten we precies dat doen!
Aan de slag
U hoeft niet te weten hoe u moet coderen om deze tutorial te volgen (#TeamGeenCode). Maar je hebt een aantal dingen nodig om alles te laten werken.
- DownloadenBlender. Het is gratis, open-source desktopapplicatie die het werken met 3D-bestanden en animaties eenvoudig maakt.
- Schrijf je in voor eenMixamo rekening. Mixamo is een Adobe-product waarmee je 3D-modellen kunt manipuleren en animeren.
- Koop een 3D NFT-avatar (dit kan prijzig zijn, dus voel je vrij om gewoon een personagemodel van Mixamo of Sketchfab of een andere marktplaats met Creative Commons-licenties te pakken als je dat liever hebt). Ik ga een asset van Sketchfab gebruiken.
- Schrijf je in voor eenPinata-account.
Ongeacht hoe u uiteindelijk uw 3D-middel krijgt, u moet bepalen wat uw volgende stap zou moeten zijn. We willen het model in Mixamo optuigen, maar om dat te doen, we moeten ervoor zorgen dat het 3D-model het juiste bestandsformaat heeft.
In het belang van deze tutorial, Ik ga Sketchfab gebruiken. Ik zal zeker een model downloaden in een formaat dat moet worden geconverteerd, zodat u het proces kunt volgen.
Ons model verkrijgen
Opnieuw, Ik ga hiervoor Sketchfab gebruiken, maar u kunt dit gedeelte overslaan als u al een model heeft dat u wilt gebruiken. Sketchfab heeft een mooie zoekfunctie, en er zijn tal van modellen beschikbaar om te downloaden onder Creative Commons-licenties (zorg er wel voor dat u de originele kunstenaar toeschrijft).
Hier is de link die ik gebruik in mijn zoekopdracht. U kunt dit wijzigen voor elke gewenste zoekparameter. De beste modellen hiervoor zijn modellen in het t-pose-formaat, maar elk model dat mensachtig is en zijn ledematen vrij heeft van het lichaam (wat betekent niet gehecht aan andere objecten en niet, inspraak, in hun zak) zou moeten werken.
Ik heb een robot gevonden die ik leuk vind en terwijl het niet in een t-pose is, Ik hou van de manier waarop het eruit ziet, dus ik zal het voor mijn voorbeeld gebruiken.
Omdat Mixamo obj- en fbx-bestanden verwacht, Ik ga ervoor zorgen dat ik dit model download in een formaat dat het niet verwacht, zodat we het conversieproces in Blender kunnen doorlopen. Er staat een downloadlink op het model. Ik klik daar gewoon op. Natuurlijk, als je de conversiestap wilt omzeilen, pak dan gewoon het fbx- of obj-formaat en ga naar de Mixamo-sectie.
Dan, in de modale die verschijnt, Ik download het glTF-formaat.
Dat wordt in een zip-bestand naar mijn computer gedownload. Het enige wat ik nu moet doen is het uitpakken en Blender openen.
Bestanden converteren in Blender
Wanneer u Blender voor het eerst opent, Er wordt een voorbeeldscène voor u gemaakt. We willen de items onder de collectie in die scène verwijderen. Je kunt ze allemaal selecteren, klik met de rechtermuisknop, kies vervolgens Hiërarchie verwijderen.
Nu die voorbeelditems verdwenen zijn, we kunnen nu ons model importeren. Klik op het menu Bestand, kies vervolgens Importeren. Sinds ik het glTF-formaat download, dat is wat ik hier zal importeren.
Met het geïmporteerde model, we kunnen experimenteren met de camerazoom, maatvoering, en verlichting. Dat hoeft niet, maar ik wilde er zeker van zijn dat het model er goed uitzag. Dus, Ik zoomde uit, en ik heb voor nieuwe verlichting gekozen. Dit is wat ik nu zie:
Dit lijkt klaar om te exporteren! We gaan het model exporteren in obj-indeling, vergelijkbaar met hoe we het hebben geïmporteerd. In het menu Bestand, klik op Exporteren. Kies Golffront (dat is het obj-bestandstype):
Zorg ervoor dat je het ergens opslaat waar je het gemakkelijk kunt vinden, want we brengen deze man binnen een seconde naar Mixamo. Wanneer de export is voltooid, je krijgt eigenlijk twee bestanden: een obj-bestand en een mtl-bestand. Het mtl-bestand is het materiaal waardoor ons model er mooi uitziet. Om ervoor te zorgen dat er materiaal aan Mixamo wordt toegevoegd, we moeten beide bestanden selecteren en ze zippen.
Animatie in Mixamo
We hebben ons 3D-model genomen, gebruikte Blender om het te converteren naar een bestand dat we in Mixamo kunnen gebruiken, en nu is het tijd om wat animatie toe te voegen.
Als u dit nog niet heeft gedaan, meld u aan voor een account opMixamo hier. Zodra u zich heeft aangemeld, je zou een scherm als dit moeten zien:
Mogelijk wordt er al een model weergegeven in het voorbeeld. Hoe dan ook, we gaan het vervangen. Het enige dat u hoeft te doen, is op de knop Teken uploaden klikken.
In de modale die opent, u kunt een bestand op uw computer selecteren. Hier gaan we het zipbestand vinden dat we hebben gemaakt van het gecombineerde obj-model en het mtl-bestand. U moet wachten tot het uploaden is voltooid en de verwerking is voltooid.
Wanneer het klaar is, het is tijd om een voorbeeld van uw model te bekijken en het vervolgens op te tuigen. Rigging is eenvoudigweg het proces waarbij verbindingen aan uw model worden toegevoegd die voor animatiedoeleinden kunnen worden gebruikt. Mixamo heeft een eenvoudig tuigagesysteem. U kunt de punten zoals aangegeven naar uw model slepen. Als uw model niet in de t-pose staat, dan is het waarschijnlijk niet symmetrisch. Als dat het geval is, Schakel het selectievakje Symmetrie gebruiken onderaan uit.
Wanneer dit proces is voltooid, u ziet een voorbeeld van uw model met een basisanimatie. Dit zou moeten bewijzen dat alles werkt zoals verwacht voordat u op Volgende klikt en uw eigen animatie kunt toevoegen.
Maar wacht!
Voordat u een animatie toevoegt, je moet het opgetuigde model uit Mixamo halen. Zodra u dit scherm ziet, klikt u op Downloaden:
Kennisgeving, er zijn geen animaties geselecteerd. We hebben het opgetuigde model nodig zodat we de animatie eraan kunnen toevoegen in Blender. Zodra je het opgetuigde model hebt gedownload (in fbx-formaat), open een nieuw Blender-project, klik op Bestand, klik vervolgens op Importeren. Kies fbx als uw importtype en zoek het model dat u vanuit Mixamo hebt geëxporteerd.
Nu, Zet de blender opzij. We hebben wat animatie te doen in Mixamo.
Bovenaan de Mixamo-pagina, zorg ervoor dat het tabblad Animaties is aangevinkt en klik in het zoekvak linksboven. U kunt elk beschikbaar animatietype selecteren, maar ik ga Dans selecteren.
Selecteer een animatie die u leuk vindt en deze wordt automatisch op uw model toegepast. Sommige animaties zien er beter uit dan andere, afhankelijk van uw model. Kies dus de beste voor jouw situatie. Omdat mijn model armen heeft die langer zijn dan zijn lichaam, Ik wilde een animatie kiezen waarbij de armen zoveel mogelijk boven het hoofd bleven. Ik wil niet dat die armen door de vloer gaan.
Ik heb gekozen voor een van de vele ‘Hip Hop Dancing’-animaties:
Wanneer u uw animatie selecteert, u zult zien dat het onmiddellijk op uw model wordt toegepast. Best wel gaaf! U bent van een statisch 3D-model naar een dynamisch geanimeerd 3D-model gegaan.
Als je van animatie houdt, je moet het laten exporteren, zodat we het in Blender kunnen brengen.
Korte kanttekening over waarom we de dingen op deze manier moeten doen. Mixamo staat niet toe dat u het volledig opgetuigde en geanimeerde model exporteert. We kunnen elk van deze afzonderlijk exporteren en ze vervolgens in Blender combineren tot het eindproduct.
Net zoals je eerder deed, klik op de knop Downloaden in Mixamo. Deze keer, je ziet een andere reeks opties. We willen alleen de animatie, kies dus de optie Zonder skin:
Nu je zowel je animatie als je opgetuigde model hebt gedownload, het is tijd om wat werk te doen in Blender.
Animaties toevoegen in Blender
Je hebt het opgetuigde model eerder in Blender geïmporteerd. Nu, we moeten de animatie importeren. Klik op Bestand -> Importeren. Kies opnieuw fbx, en selecteer vervolgens het animatiebestand dat u van Mixamo hebt gedownload.
Wanneer u dat doet, je zou een soort skelet in je model moeten zien.
Dit is je animatie. Veel zal het nog niet doen, maar dat gaan we oplossen. In het rechterzijpaneel, klik op het model en hernoem het om het u gemakkelijker te maken. Ik heb de mijne zojuist hernoemd naar "Robot".
Doe hetzelfde voor je animatie. Vouw vervolgens de animatie uit en je ziet zoiets als dit:
U kunt de naam van dat geneste “Armature.001|mixamo...' item naar iets dat gemakkelijker te onthouden is, zoals 'animatie'.
Zodra je dat hebt gedaan, je wilt het Dope-blad openen. U kunt dit doen door uw hoofdlogicapaneeleditor over te schakelen naar Dope Sheet:
Met het Dopeblad open, je hebt nu extra opties. We gaan overstappen naar de Actie-editor:
In het rechterzijpaneel, klik op uw model. U weet dat het is geselecteerd wanneer het is gemarkeerd:
Volgende, terug in de Actie-editor, zoek de vervolgkeuzelijst met animaties en wijzig deze in uw geïmporteerde animatie (Onthoud dat je de naam hiervan hebt hernoemd, zodat je het gemakkelijker kunt vinden):
Wanneer u dat selecteert, je zou de pose van je model moeten zien veranderen. Dat betekent dat de animatie op het model is toegepast. We kunnen dit verifiëren door het Dope-blad te verlaten en terug te keren naar de tijdlijn.
Wanneer je overstapt, je ziet een afspeelknop. Klik daarop, en je model zou nu moeten dansen, net zoals in Mixamo!
Het afspelen kan wat traag zijn, maar maak je geen zorgen, zo zal het er niet uitzien als we het uploaden naar IPFS en afspelen via onze IPFS Gateway 3D Viewer.
We hebben de animatie in ons Blender-editorvenster eigenlijk niet langer nodig, dus u kunt er met de rechtermuisknop op klikken en vervolgens Hiërarchie verwijderen kiezen:
U houdt alleen uw model over. Voel je vrij om je Blender-scène nu op te slaan. Wanneer je dat hebt gedaan, het laatste dat we in Blender moeten doen, is ons model exporteren.
We gaan ons model exporteren in glTF-formaat. Klik op Bestand -> Exporteren, klik vervolgens op glFT. Geef uw bestand een naam en sla het op een plek op waar u er gemakkelijk bij kunt.
Breng uw model naar de Metaverse
Jouw model kwam vandaan (in een perfecte wereld) een NFT die u op een blockchain hebt gekocht. We zouden vergelijkbare technologie moeten gebruiken om onze nieuwe geanimeerde versie van dat model op te slaan en weer te geven.
We gaan gebruikenPinata om het geanimeerde model naar IPFS te uploaden. We gaan een speciale gateway maken om ervoor te zorgen dat iedereen die ons model bekijkt er snel toegang toe heeft en niet hoeft te wachten op de trage laadtijden van openbare IPFS-gateways. En we gaan een plug-in gebruiken die ook via de gateway wordt aangeboden om ons model weer te geven.
Als extra bonus, we gaan wat muziek aan de achtergrond toevoegen. Wanneer u zich heeft aangemeld voor uw Pinata-account, ga je gang en upgrade naar een betaald abonnement. Geloof me, het is het waard. Dit kan uw thuisbasis zijn voor het hosten van al uw inhoud en het distribueren ervan op een manier die volledig bij u past. Het plan begint bij slechts $ 20 per maand.
Zodra je dit hebt gedaan, u heeft nu toegang om een speciale IPFS-gateway te maken. Zie dit als uw eigen persoonlijke mediaplatform. We hebben hier een geweldige handleiding voor het instellen van uw speciale gateway:
Hoe u een speciale gateway instelt
Als u de gateway wilt voorzien van uw eigen aangepaste domein, jij kunt dat ook doen. Volg gewoon deze handleiding:
Hoe u een aangepast domein op uw gateway instelt
Zodra je dit hebt gedaan, je hebt nog maar een paar stappen voordat je geanimeerde 3D NFT-avatar live is en klaar om te delen. Ga naar de Pin Manager-pagina en upload het bestand glTF-bestand dat je vanuit Blender hebt geëxporteerd.
Zodra je dat hebt gedaan, het is tijd om wat muziek te vinden om op te dansen. Wij willen geen inbreuk maken op auteursrechten, dus laten we wat muziek uit het publieke domein zoeken.GratisPD is een geweldige plek om deze muziek te vinden. Als je eenmaal muziek hebt gevonden die je leuk vindt, download het. Dan, upload het naar uw Pinata-account op dezelfde manier waarop u het model heeft geüpload.
OK, dus je hebt het model geüpload en je hebt de muziek geüpload. Nu, u hoeft alleen maar gebruik te maken van een plug-in die we hebben gebouwd om geanimeerde modellen weer te geven via een IPFS-gateway. Dit zal gemakkelijk zijn.
Op uw Pin Manager-pagina, klik op Uploaden, kies dan voor CID:
U wordt gevraagd een CID op te geven die zich op het IPFS-netwerk bevindt. Pinata zal het bijbehorende bestand vinden en aan uw account vastmaken. Hier vindt u de CID die u moet gebruiken:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Geef het een naam die u zich zult herinneren. Nadat je dit hebt gedaan, Mogelijk moet u de pagina een paar keer vernieuwen voordat deze verschijnt. Pinata zal het snel op het netwerk vinden omdat dit een officiële plug-in is die we hebben gebouwd en vastgezet.
Wanneer het bestand verschijnt in uw Pin Manager, klik op de naam om deze via uw gateway te openen. U zult merken dat het met een fout wordt geladen. Dat komt omdat het niet weet welk 3D-model moet worden geladen.
Laten we dat oplossen!
Op de pagina die u zojuist hebt geopend, ga naar het einde van de URL en voeg het volgende toe:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
Je kan krijgenTHE_CID_FOR_YOUR_MODEL enTHE_CID_FOR_YOUR_MUSIC vanuit uw pinmanager. Klik op de kopieerknop naast elk ervan en voeg deze toe aan de URL. Wanneer u dit doet en de pagina opnieuw laadt, uw model moet worden geladen en u hoort de muziek onmiddellijk spelen, of je ziet rechtsboven een afspeelknop. Klik daarop, en je hebt een dansend 3D-model met audio op de achtergrond.
Hier is mijn robot:
Pinata IPFS 3D-lader
Snelle en lichtgewicht glTF 2.0 scèneviewer mogelijk gemaakt door de PlayCanvas WebGL-engine en Pinata
De verlichting is misschien niet perfect, maar je kunt het venster aan de linkerkant uitbreiden en aanpassingen maken aan de verlichting en andere dingen.
Afsluiten
Dit is het bewijs van het mogelijke. NFT's veranderen de manier waarop we over ervaringen denken, en we hebben technologie nodig om bij te blijven, vooral in Web3. Ik hoop dat je door deze tutorial een aantal nieuwe manieren hebt geleerd om je NFT's te verbeteren, gebruik IPFS, en breid uit wat mogelijk is dankzij speciale gateways en Pinata. Nu, aan de slag gaan met creëren.
Veel plezier met vastzetten en creëren!
Geschreven door Justin Hunter
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4
