Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@fubuky35

花譜ちゃんのゲシュタルトダンスARをSTYLYで15分作る！

Posted at

はじめに

バーチャルシンガー花譜ちゃんのMV「ゲシュタルト」のダンス動画（素材）が公式より配布されました！

ぜひみなさんの好きな場所で花譜を踊らせてください。

とのことなので、早速STYLYでARシーンを作って踊ってもらいました！

この記事について

この記事では、:point_up:の花譜ちゃんのゲシュタルトダンスARをSTYLYで作成する手順を紹介します。
15分（～30分）くらいで出来て、特別なスキル不要、とても簡単なのでみんなもやってみよう！

この記事では動画の素材としてのSTYLY ARシーンを作成する方法を紹介します。

想定読者

花譜ちゃんにゲシュタルトダンスARを作ってみたいけどやり方がわからない:sob:という初心者の方向けです。
やることはSTYLY StudioのAsset: Chroma Key Composite Videoを使って、グリーンバックの公式ダンス動画をARシーン配置（してクロマキー合成）するだけです。
これを聞いて手順が想像できる方は記事を読まなくとも大丈夫と思います。

必要機材、ソフト

  • PC (Windows or Mac)
    • 特に高スペックである必要はありません
  • 動画編集ソフト（手段）
    • 公式ダンス動画がSTYLYにアップできる最大サイズの100MBを超えているため、サイズを減らすために使用します
    • サイズを100MB以下にできれば手段は何でもいいです
    • スマホの動画編集機能や変換サイトでも大丈夫です
    • この記事で紹介する手順ではMicrosoft clipchamp(無料)を使っています
  • Google Chrome ブラウザ (STYLY Studioの推奨環境)

作業概要

  1. 公式からゲシュタルトダンスのダンス動画をダウンロード
  2. ダンス動画を100MB以下になるように変換（手段は問わない）
  3. STYLY Studio（Webブラウザツール）上で、ダンス動画をChroma Key Composite VideoとしてARシーンに追加
  4. お好みのエフェクトなどを追加して完成！

では、各手順を詳しく紹介します。

公式ダンス動画をダウンロード

YouTubeの「ゲシュタルトMV」の概要欄のリンクから公式ダンス動画をダウンロードします。
ダウンロードする前に感謝を込めてMVを1回は通しで視聴しましょう。これは必要な手順です。

image.png
image.png

以下の"xxx_green.mp4"をダウンロードします。A、Bはダンスの切り抜き範囲が違います。好みの方を使ってください。
MOVの方は背景透過のダンス動画です。サイズが大きすぎるので(1～2GBなので)今回は使いません。
また、"花譜とゲシュタルトダンス.txt"（Readme）もダウンロードして熟読しておきましょう。

image.png

以下のようなグリーンバックのダンス動画がダウンロード出来たら成功です。
はい、もう可愛い！

image.png

動画を100MB以下に変換

STYLYにアップロード可能な動画サイズが100MBなので、100MB以下に変換していきます。
解像度orクリップで動画のサイズをダウンできればいいので変換ソフトは何でもいいです。

ここではWindows11に標準でインストールされているMicrosoft Clipchamp(無料)を使います。
インストールされていない場合は、Microsoft Storeからインストールしましょう。

まず、動画を右クリックし[プログラムから開く > Microsoft Clipchamp]でアプリを起動します。
起動したら、元動画に合わせてサイズを9:16に変更します。
image.png

720pでエクスポートします。元動画が1080pなので2/3程度にサイズダウンとなります。
ARコンテンツでは元動画が画面に占める割合がそれほど高くないので（全身を映そうとすると画面占有率1/4くらいになるので）、多少解像度を落としてもそれほど気になりません。

image.png

STYLYのARシーン作成

新規シーンの作成

準備ができたらSTYLYのARシーンを作っていきます。
STYLYアカウントが必要ですので、まだの方は以下を参考にアカウントを作成しましょう。

ブラウザでSTYLYのWebサイトにアクセスします。ブラウザはGoogle Chrome推奨です。

ログインした状態で[新規シーン]をクリックします。
image.png

ギャラリーに移動するのでまた[新規シーン]をクリックします。
image.png

シーンタイトルを入力して[AR Scene Template]が選択されていることを確認したら、[シーンを作成]をクリックします。
image.png

STYLY Studioが立ち上がったら新規シーン作成は完了です。
image.png

ダンス動画の追加

画面左上のAssetの追加ボタンをクリックします。
image.png
[My uploads > Video > Chroma Key Composite Video]を選択します。
image.png
image.png
image.png

100MB以下に変換したダンス動画をドラッグ＆ドロップします。（この時ブラウザでの動画再生が実行されてしまうことがあるので注意です。）
image.png

また、[Background color for composition]（グリーンバックの色）には#00FF01を指定します。
image.png
私が変換した結果の動画から調べた色なので、うまくコンポジットされない場合は各自ご確認いただければと思います。
image.png

[ADD TO SCENE]ボタンをクリックしてシーンに追加します。
image.png

マウスホイールでカメラを初期位置から少し後ろに移動し、ダンス動画が追加されていることを確認します。
位置やサイズの調整が必要なので[Chroma Key Composite Video]をクリックして、モードが[move]になっていることを確認してから、緑の矢印をドラッグして花譜ちゃんを上に移動します。
image.png

また、動画アスペクト比も1:1になっているので、元動画に合わせて9:16に変更します。
まず、右側のmoveを2回クリックしてscaleにします。
image.png
↓
image.png

Xをクリックして0.9と入力します。次にYをクリックして1.6と入力します。
これでアスペクト比の調整はOKです。
image.png

あとはお好みのサイズに花譜ちゃんを調整します。
Scaleモードで画像の白いボックスをドラッグすることでアスペクト比を保ったまま拡縮できます。
Your Positionの青いワイヤーフレームの人が大体1.7mなのでこれを参考に調整します。
また、画像では足の接地がわかりやすいよう一時的に床を追加しています。
image.png

1/1スケールなら位置(X=0, Y=0.96, Z=0)、拡縮(X=1.33, Y=2.37, Z=1)くらいがいいんじゃないかと思います。
image.png

これでシーンの作成は完了です！　次にSTYLY Studioを閉じてモバイルで作成したシーンを再生します。

左側の地球マークからシーンを公開(publishing)できますが、再配布っぽくて心配なので今回は公開しないで下書きのまま動画の素材としてARシーンを使用します。"花譜とゲシュタルトダンス.txt"（Readme）にはこの辺りに記載がないので、念のため。(動画サイトへの投稿は推奨とあります。)おそらくあまり細かく規約を記載して制限したりはせず、ユーザーの良心に任せるという公式方針だと思います。
そのためARシーンは個人で楽しむため、また動画の素材としてのみ利用します。

ARシーンの再生

以下マニュアルに従いモバイル版STYLTアプリをインストールし、ログインします。

下書き状態のシーンもモバイルアプリの右下のマイページから再生できます。

image.png
image.png

STYLYシーン作成、補足

動画を再生しているだけなので、ARシーン再生中に移動するとペラペラに見えることがあります。

お好みでModifierの[Look at you]を追加してみてください。常に動画がカメラの正面を向くようになります。
image.png
image.png
image.png

また、Particleから好きなエフェクトを追加してARシーンを盛り上げることもできます！
image.png
image.png

最後に

みんなもSTYLTで花譜ちゃんARを作って見よう！

参考記事：

3
5
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
Sign upLogin
3
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?