1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

皆で作るVTuberとは

サイト - https://mbevtuber.web.app/
GitHub - https://github.com/tkyko13/MbEVTuber
protopedia - http://protopedia.net/prototype/2179

1.皆がそれぞれ顔のパーツを描く(画像ではGIMPで作成)

Image from Gyazo

2.今回自分が作成したサイトからアップロード

Image from Gyazo

3.もう一つ自分が作成したカメラから顔のパーツの位置に対して、アップロードした顔のパーツを配置するサイトでVTuberできる!(グロ注意)

Image from Gyazo

LTに登壇もしました!

さっそくYouTube埋め込みです

(ちなみに)

前回の自分の記事で埋め込み方を紹介しています。
再生時間指定もできました!

<iframe width="100%" height="400" src="https://www.youtube.com/embed/XMsWBgNbuU0?t=2778" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

使用技術

  • クラウドサービス
    • Firebase Cloud Storage
    • Firebase Hosting
  • 画像アップロードサイト
    • Vue
    • Bootstrap
  • VTuberサイト
    • p5js
    • ml5js - 顔検出

LINEで画像を受けったり、GyazoAPIを利用したりすると、透過画像じゃなくなってしまうので、今回はCloud Storageを利用してみました。

どうやってこの案が出たのか…

近年では、YouTubeライブなどのスパチャで配信者に投げ銭するような文化が増えている
→ 現実だとお金よりなんか物をあげたいっていうのもあるよなぁ(もらうほうはお金がいいっていうのはよくあるが)
→ 洋服とか帽子とか送って着てもらえたら最高なのかな?
→ VTuberなら描いた絵を送ると(贈ると)即反映できそう(贈られすぎて物が増えて困ることもないとか)
→ 開発中…顔の位置に帽子が…これ面白いかも!

開発実際にしてみて気づくことはありますね
なのでつくづく感じますが、今の自分ができる一番簡単な方法でまずは動かしてみようという気持ちが大事だとつくづく感じました

今後の発展

  • 他のパーツ対応
    • 現在顔と右目左目だけなので…
  • TwitterやLINEで画像受け取り
    • 普段絵かきの人とか絵をプレゼントする方法ってTwitterとかなのかな?
    • オープンのとこでやりとりすると卑猥な画像も減る?

3Dモデルを贈り合う世界になるのでは

amazonみたいな3Dモデルストアがあって、そこから贈ったりもできるようになるのかも
今も普通に3Dモデルストアはあると思うが、贈るってただただデータをコピーして"送る"イメージだけど、投げ銭の文化と融合させるとデータというよりかは物を"贈る"というイメージになるのかなと思う
そうすると、データが現実世界に近くなっていくようなものかと思います
「データの存在感」とかっていうワードは自分の好きなワードです

ちょっとそこのワードもnoteとかで深堀りしてみよ…

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?