3D Avatarın Kullanıcılar Tarafından Kontrol Edilen Şarkı Söylemesi ve Dans Etmesi

Paylaşmak

Kullanıcılar tarafından kontrol edilen dijital 3D avatar şarkı söyleme ve dans etme

Müziği başlatmak için ortadaki yuvarlak TIKLAYIN düğmesine tıklayın.
Avatar oynamaya başlayacak 10 rastgele hareketler.
• Sayı tuşlarını kullanarak deneyebilirsiniz. 1 ile 10 klavyenin sol tarafında sıralanmış olarak bulduğunuz (harflerin üstünde) dans hareketlerini değiştirmek için.
• İle 4 klavyedeki merkezi oklarla avatarın konumunu değiştirebilirsiniz.
• İle + ve – klavyenin sağındaki sayısal tuş takımında bulunan tuş, avatarı yakınlaştırıp uzaklaştırabilirsiniz.

Eğlence! 💃


3D NFT Avatarınızı Müzikle Dans Etme?

Sen birSıkılmış Maymun? Belki senKriptoPunk? HAYIR? Belki biraz dahaMeebit hariçCin? NFT avatarlarının tadı ne olursa olsun, Kişiye dayalı sanatın etrafında yeni bir dünyanın ortaya çıktığı açık. Bu avatarlardan bazıları zaten 3 boyutludur ve diğerleri onlara 3 boyutlu bir hayat katmak için daha geniş bir topluluğun yaratıcılığını gerektirir.. Ne olursa olsun, Yine de, NFT'ler sayesinde kişilik temelli sanat dünyasının sınırlarının zorlandığını görüyoruz.

Bugün, sınırı aşacağız ve size 3D avatarlarınızı nasıl daha heyecanlı hale getireceğinizi göstereceğiz, Daha eğlenceli, Ve, umutla, daha viral kullanımPinata her şeyin omurgası olarak. Günümüzde dijital deneyimler birden fazla medya dosyasının birleşimini gerektiriyor. Bir görüntü eğlencelidir, ancak sese ayarlanmış bir görüntü bir deneyimdir. Metin kaplamalı bir video tüm duyguyu değiştirebilir. 3D modelleri zaten birçok farklı medya dosyasından oluşuyor. Kafesler, dokular, gölgelendiriciler, ve dahası. Animasyonları ve sesi tek bir birleşik deneyime dahil edebilseydik ne olurdu??

Tam olarak bunu yapalım!

Başlarken

Bu öğreticiyi takip etmek için nasıl kod yazacağınızı bilmenize gerek yok (#TakımNoCode). Ama her şeyin işe yaraması için bazı şeylere ihtiyacın olacak.

  1. İndirmekkarıştırıcı. Bu ücretsiz, 3D dosyalar ve animasyonlarla çalışmayı kolaylaştıran açık kaynaklı masaüstü uygulaması.
  2. Kayıt olMixamo hesap. Mixamo, 3D modelleri donatmanıza ve bunlara animasyon uygulamanıza olanak tanıyan bir Adobe ürünüdür.
  3. Kendinize bir 3D NFT avatarı edinin (bu pahalı olabilir, bu nedenle isterseniz Mixamo, Sketchfab veya yaratıcı ortak lisansa sahip başka herhangi bir pazar yerinden bir karakter modeli almaktan çekinmeyin). Sketchfab'den bir varlık kullanacağım.
  4. Kayıt olPinata hesabı.

3D varlığınızı nihai olarak nasıl elde ettiğinize bakılmaksızın, bir sonraki adımınızın ne olması gerektiğini belirlemeniz gerekecek. Modele Mixamo'da hile yapmak istiyoruz, ama bunu yapmak, 3D modelin uygun dosya formatında olduğundan emin olmamız gerekiyor.

Bu eğitimin uğruna, Sketchfab'i kullanacağım. Süreci takip edebilmeniz için dönüştürülmesi gereken formatta bir model indireceğimden emin olacağım..

Modelimizi Alma

Tekrar, Bunun için Sketchfab kullanacağım, ancak zaten kullanmak istediğiniz bir modeliniz varsa bu bölümü atlayabilirsiniz.. Sketchfab'in güzel bir arama özelliği var, ve Creative Commons lisansları altında indirilebilecek çok sayıda model var (orijinal sanatçıya atıfta bulunduğunuzdan emin olun).

İşte aramamda kullandığım bağlantı. Bunu istediğiniz arama parametreleri için değiştirebilirsiniz. Bunun için en iyi modeller t-poz formatındaki modellerdir, ancak insansı olan ve uzuvları vücuttan ayrı olan herhangi bir model (diğer nesnelere bağlı olmayan ve, söylemek, onların cebinde) çalışmalı.

Bir robot buldum hoşuma gitti ve T-pozunda değilken, Görünüşü hoşuma gitti, bu yüzden bunu örneğim için kullanacağım.

Mixamo obj ve fbx dosyalarını beklediğinden, Blender'da dönüştürme sürecini yürütebilmemiz için bu modeli beklemediği bir formatta indirdiğinizden emin olacağım.. Model üzerinde indirme linki bulunmaktadır.. Sadece buna tıklayacağım. Elbette, dönüştürme adımını atlamak istiyorsanız fbx veya obj formatını alın ve Mixamo bölümüne geçin.

Daha sonra, açılan modalda, glTF formatını indireceğim.

Bu, bilgisayarıma zip dosyası olarak indirilecek. Şimdi tek yapmam gereken zip dosyasını açıp Blender'ı açmak.

Blender'da Dosyaları Dönüştürme

Blender'ı ilk açtığınızda, sizin için örnek bir sahne oluşturulacak. O sahnede koleksiyonun altındaki eşyaları silmek istiyoruz. Hepsini seçebilirsiniz, sağ tık, ardından Hiyerarşiyi Sil'i seçin.

Bu örnek öğeler gittiğinde, artık modelimizi içe aktarabiliriz. Dosya menüsünü tıklayın, ardından İçe Aktar'ı seçin. glTF formatını indirdiğimden beri, buraya aktaracağım şey bu.

İçe aktarılan modelle, kamera yakınlaştırmasını deneyebiliriz, boyutlandırma, ve aydınlatma. Bunu yapmak zorunda değilsin, ama modelin iyi göründüğünden emin olmak istedim. Bu yüzden, uzaklaştırdım, ve yeni aydınlatmayı seçtim. Şimdi gördüğüm bu:

Bu dışa aktarmaya hazır görünüyor! Modeli, içe aktardığımıza çok benzer şekilde obj formatında dışa aktaracağız.. Dosya menüsünde, Dışa aktar'ı tıklayın. Wavefront'u seçin (obj dosya türü hangisidir):

Kolayca bulabileceğiniz bir yere kaydettiğinizden emin olun çünkü bu adamı bir saniye içinde Mixamo'ya getireceğiz.. Dışa aktarma tamamlandığında, aslında iki dosya alacaksınız: bir obj dosyası ve bir mtl dosyası. Modelimizin güzel görünmesini sağlayan malzeme mtl dosyasıdır.. Mixamo'ya malzemenin eklenmesini sağlamak için, her iki dosyayı da seçip ziplememiz gerekiyor.

Mixamo'da Animasyon

3 boyutlu modelimizi aldık, Mixamo'da kullanabileceğimiz bir dosyaya dönüştürmek için Blender'ı kullandık, ve şimdi biraz animasyon ekleme zamanı.

Henüz yapmadıysanız, üzerinde bir hesaba kaydolunMixamo burada. Kaydolduktan sonra, böyle bir ekran görmelisiniz:

Zaten önizlemede gösterilen bir modeliniz olabilir veya olmayabilir. Öyle ya da böyle, onu değiştireceğiz. Tek yapmanız gereken Karakter Yükle butonuna tıklamak.

Açılan modda, bilgisayarınızdan bir dosya seçebileceksiniz. Obj modeli ve mtl dosyasının birleşiminden oluşturduğumuz zip dosyasını burada bulacağız.. Yüklemenin tamamlanmasını ve işlemin tamamlanmasını beklemeniz gerekecek.

Tamamlandığında, modelinizin ön izlemesini yapma ve ardından onu donatma zamanı gelecek. Arma, modelinize animasyon amacıyla kullanılabilecek eklemler ekleme işlemidir. Mixamo'nun basit bir donanım sistemi var. Noktaları belirtildiği gibi modelinize sürükleyebilirsiniz.. Modeliniz T-pozunda değilse, o zaman muhtemelen simetrik değildir. Eğer durum buysa, alttaki Simetri Kullan onay kutusunun işaretini kaldırın.

Bu süreç tamamlandığında, temel bir animasyonla modelinizin bir önizlemesini göreceksiniz. Bu, İleri'ye tıklayıp kendi animasyonunuzu ekleyebilmeniz için işlerin beklendiği gibi çalıştığını kanıtlayacaktır..

Fakat bekle!

Animasyon eklemeden önce, hileli modeli Mixamo'dan çıkarmalısın. Bu ekranı görür görmez İndir'e tıklayacaksınız:

Fark etme, hiçbir animasyon seçilmedi. Blender'da animasyonu ekleyebilmemiz için hileli modele ihtiyacımız var.. Hileli modeli indirdikten sonra (fbx formatında), yeni bir Blender projesi aç, Dosya'yı tıklayın, ardından İçe Aktar'a tıklayın. İçe aktarma türünüz için fbx'i seçin ve Mixamo'dan dışa aktardığınız modeli bulun.

Şimdi, Blender'ı bir kenara koy. Mixamo'da yapmamız gereken bazı animasyonlar var.

Mixamo sayfasının üst kısmında, Animasyonlar sekmesinin işaretli olduğundan emin olun ve sol üstteki arama kutusuna tıklayın. Mevcut herhangi bir animasyon türünü seçebilirsiniz, ama Dans'ı seçeceğim.

Beğendiğiniz bir animasyonu seçin; otomatik olarak modelinize uygulanacaktır.. Modelinize bağlı olarak bazı animasyonlar diğerlerinden daha iyi görünecektir. O halde durumunuza en uygun olanı seçin. Çünkü modelimin kolları vücudundan daha uzun, Kolların mümkün olduğunca başın üstünde kaldığı bir animasyon seçmek istedim. Bu kolların yerden geçmesini istemiyorum.

Birçok “Hip Hop Dansı” animasyonundan birini seçtim:

Animasyonunuzu seçtiğinizde, modelinize hemen uygulandığını göreceksiniz. Oldukça havalı! Statik bir 3B modelden dinamik olarak animasyonlu bir 3B modele geçtiniz.

Animasyonu beğendiyseniz, Blender'a getirebilmemiz için dışa aktarmanız gerekecek.

İşleri neden bu şekilde yapmamız gerektiğine dair kısa bir yan not. Mixamo, tamamen hileli ve animasyonlu modeli dışa aktarmanıza izin vermiyor. Bunların her birini ayrı ayrı dışa aktarabilir ve daha sonra bunları Blender'da birleştirip nihai ürüne dönüştürebiliriz..

Tıpkı daha önce yaptığın gibi, Mixamo'daki İndir düğmesine tıklayın. Bu zaman, farklı seçenekler göreceksiniz. Sadece animasyon istiyoruz, bu yüzden Derisiz seçeneğini seçin:

Artık hem animasyonunuzu hem de hileli modelinizi indirdiğinize göre, Blender'da biraz çalışma zamanı.

Blender'a Animasyon Ekleme

Daha önce hileli modeli Blender'a aktardınız. Şimdi, animasyonu içe aktarmamız gerekiyor. Dosya'yı tıklayın -> İçe aktarmak. Tekrar fbx'i seç, ve ardından Mixamo'dan indirdiğiniz animasyon dosyasını seçin.

Bunu yaptığında, modelinizin içinde bir çeşit iskelet görmelisiniz.

Bu sizin animasyonunuz. Henüz pek bir işe yaramayacak, ama bunu düzelteceğiz. Sağ taraftaki panelde, modele tıklayın ve işleri kolaylaştırmak için yeniden adlandırın. Benimkinin adını az önce “Robot” olarak değiştirdim.

Animasyonunuz için de aynı şeyi yapın. Daha sonra animasyonu genişletin ve buna benzer bir şey göreceksiniz:

İç içe geçmiş olan “Armatür”ün adını değiştirebilirsiniz..001|mixamo…” öğesini “animasyon” gibi hatırlanması daha kolay bir şeye dönüştürün.

Bunu yaptıktan sonra, Uyuşturucu Sayfasını açmak isteyeceksiniz. Bunu ana mantık paneli düzenleyicinizi Dope Sheet'e değiştirerek yapabilirsiniz.:

Uyuşturucu Sayfası açıkken, artık ekstra seçenekleriniz var. Eylem Düzenleyiciye geçeceğiz:

Sağ taraftaki panelde, modelinize tıklayın. Vurgulandığında seçildiğini anlayacaksınız:

Sonraki, Eylem Düzenleyiciye geri dön, Animasyon açılır menüsünü bulun ve içe aktardığınız animasyonla değiştirin (bulmayı kolaylaştırmak için bunu yeniden adlandırdığınızı unutmayın):

Bunu seçtiğinizde, modelinizin poz değişimini görmelisiniz. Bu, animasyonun modele uygulandığı anlamına gelir. Uyuşturucu Sayfasından çıkıp Zaman Çizelgesine geri dönerek bunu doğrulayabiliriz..

Geçiş yaptığınızda, bir oynat düğmesi göreceksiniz. Şuna tıkla, ve modeliniz artık tıpkı Mixamo'daki gibi dans ediyor olmalı!

Biraz yavaş oynatılabilir, ama endişelenme, IPFS'ye yüklediğimizde ve IPFS Ağ Geçidi 3D Görüntüleyicimiz aracılığıyla oynattığımızda bu şekilde görünmeyecek.

Aslında artık Blender düzenleyici penceremizdeki animasyona ihtiyacımız yok, böylece buna sağ tıklayıp Hiyerarşiyi Sil'i seçebilirsiniz.:

Yalnızca modelinizle kalacaksınız. Şimdi Blender sahnenizi kaydetmekten çekinmeyin. Bunu yaptığında, Blender'da yapmamız gereken son şey modelimizi dışa aktarmak.

Modelimizi glTF formatında dışa aktaracağız. Dosya'yı tıklayın -> İhracat, ardından glFT'ye tıklayın. Dosyanıza bir ad verin ve kolayca erişebileceğiniz bir yere kaydedin.

Modelinizi Metaevrene Getirme

Modeliniz geldi (mükemmel bir dünyada) Blockchain üzerinden satın aldığınız bir NFT. Bu modelin yeni animasyonlu yinelemesini depolamak ve görüntülemek için benzer teknolojiyi kullanmalıyız..

KullanacağızPinata animasyonlu modeli IPFS'ye yüklemek için. Modelimizi görüntüleyen herkesin modelimize hızlı bir şekilde erişebilmesini ve genel IPFS ağ geçitlerinin yavaş yükleme sürelerini beklemek zorunda kalmamasını sağlamak için özel bir ağ geçidi oluşturacağız.. Modelimizi görüntülemek için ağ geçidi aracılığıyla da sunulan bir eklenti kullanacağız..

Ek bir bonus olarak, arka plana biraz müzik ekleyeceğiz. Pinata hesabınıza kaydolduğunuzda, devam edin ve ücretli bir plana geçin. Güven bana, Buna değer. Burası, tüm içeriğinizi barındıracağınız ve tamamen size ait olacak şekilde dağıtacağınız eviniz olabilir.. Plan ayda sadece 20$'dan başlıyor.

Bunu yaptıktan sonra, artık özel bir IPFS ağ geçidi oluşturma erişimine sahip olacaksınız. Bunu kendi kişisel medya platformunuz olarak düşünün. Burada özel ağ geçidinizi kurma konusunda harika bir rehberimiz var:

Özel Bir Ağ Geçidi Nasıl Kurulur

Ağ geçidini kendi özel alanınızla markalamak istiyorsanız, sen de bunu yapabilirsin. Bu kılavuzu takip etmeniz yeterli:

Ağ Geçidinizde Özel Alan Adı Nasıl Kurulur

Bunu yaptıktan sonra, animasyonlu 3D NFT avatarınızın yayınlanıp paylaşıma hazır hale gelmesine yalnızca birkaç adım kaldı. Pin Yöneticisi sayfasına gidin ve Blender'dan dışa aktardığınız glTF dosyasını yükleyin.

Bunu yaptıktan sonra, dansı ayarlayacak müzik bulmanın zamanı geldi. Herhangi bir telif hakkını ihlal etmek istemiyoruz, o halde hadi biraz kamuya açık müzik bulalım.ÜcretsizPD bu müziği bulmak için harika bir yer. Hoşunuza giden bir müzik bulduğunuzda, indir. Daha sonra, modeli yüklediğiniz gibi Pinata hesabınıza yükleyin.

Tamam, yani modeli yüklediniz ve müziği yüklediniz. Şimdi, IPFS ağ geçidi aracılığıyla animasyonlu modellerin görüntülenmesine yardımcı olmak için oluşturduğumuz bir eklentiyi kullanmanız yeterlidir.. Bu kolay olacak.

Pin Yöneticisi sayfanızda, Yükle'ye tıklayın, ardından CID'yi seçin:

IPFS ağında bulunan bir CID sağlamanız istenecektir. Pinata ilgili dosyayı bulacak ve hesabınıza sabitleyecektir. İşte kullanılacak CID:

QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn

Hatırlayacağınız bir isim verin. Bunu yaptıktan sonra, görünmeden önce sayfayı birkaç kez yenilemeniz gerekebilir. Pinata onu ağda hızlı bir şekilde bulacaktır çünkü bu bizim oluşturup sabitlediğimiz resmi bir eklentidir..

Dosya Pin Yöneticinizde göründüğünde, Ağ geçidiniz aracılığıyla açmak için isme tıklayın. Bir hatayla yüklendiğini fark edeceksiniz. Bunun nedeni hangi 3D modelin yükleneceğini bilmemesidir.

Hadi bunu düzeltelim!

Yeni açtığınız sayfada, URL'nin sonuna gidin ve aşağıdakini ekleyin:

?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC

AlabilirsinizTHE_CID_FOR_YOUR_MODEL VeTHE_CID_FOR_YOUR_MUSIC Pin Yöneticinizden. Her birinin yanındaki kopyala düğmesini tıklayın ve URL'ye ekleyin. Bunu yaptığınızda ve sayfayı yeniden yüklediğinizde, modeliniz yüklenmeli ve müziğin çalındığını hemen duyacaksınız, veya sağ üstte bir oynat düğmesi göreceksiniz. Şuna tıkla, ve arka planda sesin olduğu dans eden bir 3D modele sahip olacaksınız.

İşte benim robotum:

Pinata IPFS 3D Yükleyici

Hızlı ve hafif glTF 2.0 PlayCanvas WebGL motoru ve Pinata tarafından desteklenen sahne görüntüleyici

pinnie.mypinata.cloud

Aydınlatma mükemmel olmayabilir, ancak soldaki pencereyi genişletebilir ve aydınlatma ve diğer şeylerde ayarlamalar yapabilirsiniz..

Kapanış

Bu mümkün olduğunun kanıtı. NFT'ler deneyimler hakkındaki düşüncelerimizi değiştiriyor, ve buna ayak uydurmak için teknolojiye ihtiyacımız var, özellikle Web3'te. Umarım bu eğitim aracılığıyla NFT'lerinizi geliştirmenin bazı yeni yollarını öğrenmişsinizdir, IPFS'yi kullan, ve özel ağ geçitleri ve Pinata sayesinde mümkün olanın kapsamını genişletin. Şimdi, yaratmaya başla.

Mutlu sabitleme ve yaratma!


Nft

3D

IPF'ler

Eskiz fab

karıştırıcı


Justin Hunter'ın yazdığı

https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4


Paylaşmak