緋狐小屋

プログラミングとかの備忘録とかMtGとかのことを書ければ(別にもふもふはしない)

[VRChat] [SDK3]サーバに置いた任意の画像を表示させる(1)

俺もVRChatでよく見るポスターみたいなの作りたい！！！！

って思って作ったので簡単にまとめておきます

以下諸注意

  • あまり自分がVRC/Unityに精通していないため最適な手順ではない可能性があります
  • ワールドSDK3が対象です
    • 今回の手順では「ALLOW UNTRUSTED URLS」にチェックがついてないと表示されません

f:id:aki_lua87:20210208020101p:plain

  • AWSを利用しております
    • 登録手順などは解説しておりません
    • 従量課金サービスになりますのでご利用の際は注意を

サーバ側手順1

  • とりあえず静的に画像を置いてそれを表示だけさせます
    • プログラム処理は(2)で開設予定

1.公開用S3バケットを作成

  • コンソール->S3よりバケットの作成を選択
  • バケット名を入力
    • 世界で一意の名前を付ける必要があります
  • アクセスコントロールを編集
    • 今回はパブリックにアクセスさせる必要があるためパブリック設定にします
  • 「バケットを作成」をクリック

f:id:aki_lua87:20210208015034p:plain
s3-1

2.S3の設定変更

  • 作成されたバケットを選択
  • プロパティタブへ移動

f:id:aki_lua87:20210208015445p:plain

f:id:aki_lua87:20210208015458p:plain

  • 静的ウェブサイトホスティングを有効にします
  • インデックスドキュメントに値を入れます、正直ここでは何でもいいのですが index.html としておきます

f:id:aki_lua87:20210208015821p:plain

  • 変更の保存を選択

f:id:aki_lua87:20210208015846p:plain

  • アクセス許可タブよりバケットポリシーを編集します
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名に変更]/*"
        }
    ]
}

f:id:aki_lua87:20210208021926p:plain

3.S3に配置

  • テキトーな画像を用意します

f:id:aki_lua87:20210208020234p:plain

  • なんらかの手段を使って1フレームの動画を作成してください

    • プログラムでの変換手順は2回目で解説します

  • 作成した動画をオブジェクトタブにドラッグアンドドロップします

f:id:aki_lua87:20210208021421p:plain

  • ポップアップが出るのでアップロードを選択

  • アクセスを確認します

    • http://[バケット名].s3-website-ap-northeast-1.amazonaws.com/[ファイル名]でアクセスできるはずです

http://aki-lua87-kakuninyou-bucket.s3-website-ap-northeast-1.amazonaws.com/aaaaaaa.mp4

Unity側手順1

  • Quadオブジェクトを作成します

f:id:aki_lua87:20210208022330p:plain

  • いい感じに変形します
    • 今回はそのまま使います

f:id:aki_lua87:20210208022553p:plain

f:id:aki_lua87:20210208022705p:plain

  • コンポーネントの設定を変更します
    • Loopのチェックを外します
    • Video URL に先ほどの動画のURLを貼り付けます
    • Rebder Mode を Material Override に変更
    • Target Material Render に自身のオブジェクトをD&D
    • Target Material Propertyに_MainTexを入力

f:id:aki_lua87:20210208043547p:plain

  • ワールドをアップロードして確認します

f:id:aki_lua87:20210208043430p:plain