ハツェの真時代傾向璋

興味を持ったことを書いていく鱗片的な場所から先の未来の場

ダウンロードした画像をuGUIで表示してみよう

U# Udon VRChat

こんばんは。ハツェです。
約一年ぶりですね。最近は面白いUdonのアップデートが無くて退屈していました。
今回は、URLの画像をVRChat上に表示してみようという記事です。
動作環境は、Unity : 2019.4.31f1、VCC : 1.0.6、SDK - Worlds : 3.1.11、U# : 1.1.7です。

目次


今回の概要

Web上にある画像をVRChatに落として表示する方法について解説します。
いわゆるVideoPlayerの画像バージョンと言ったところですね。
あくまでもU#での実装方法について話しますので、UdonGraphでの実装は公式ドキュメントをご参照ください。

前提知識

サンプルを紹介する前に、幾つか必要となる知識についてご紹介します。

VRCImageDownloader

画像をWebからダウンロードしてくれるクラスです。
VRCImageDownloader.DownloadImage()を呼ぶことで、Webからダウンロードを実行してくれます。
ただし、このクラスはIDisposableを実装しているため、使い終わったらしっかりと破棄する必要があります。
また、この関数には5秒に一回のみという秒数制限が付いており、これより多くの回数ダウンロードしようとすると、意図しない挙動になることがあります。

ダウンロードした画像をマテリアルに反映する方法

VRCImageDownloader.DownloadImage()関数は、四つの引数が指定出来ます。

url: ダウンロードする画像のURLを指定します。
material: ダウンロードした画像を割り当てるマテリアルを指定します。
udonBehaviour: ダウンロード後にイベントを実行するUdonBehaviourを指定します。
textureInfo: ダウンロードする画像の詳細設定を記述したものを指定します。テクスチャの割り当て先もここで指定します。(_MainTextみたいな）

urlを指定しないと、ダウンロードが開始されません。
materialを指定すると、ダウンロード後にtextureInfo.MaterialPropertyで指定したシェーダー変数へ自動的にダウンロードテクスチャを割り当てます。nullでも問題はありません。
udonBehaviourがnullの場合、ダウンロード後に一切イベント関数が呼ばれなくなります。ただし、これがnullの場合、内部的にエラーが出るため、基本的には自身のudonを参照しておくのが良いです。

また、DownloadImage()関数はIVRCImageDownloadを返します。いわゆるTaskみたいなものです。
これにダウンロード状況や、ダウンロードしたテクスチャ等が格納されます。詳しくはこちら。

ダウンロード時に実行されるイベント関数

UdonBehaviourには、OnImageLoadSuccess(result)とOnImageLoadError(result)の二つのイベント関数が追加されています。
OnImageLoadSuccessはダウンロード成功時、OnImageLoadErrorはダウンロード失敗時にそれぞれ呼ばれます。
今回はこのイベント関数を使用して、Imageコンポーネントにダウンロードした画像を割り当てます。

実際にサンプルを作成してみる

ここからは、VRChat上でURLを指定してCubeをインタラクトすると、画像をダウンロードし、その後表示するというサンプルを作っていきます。
表示させる対象がRawImageであるため、今回はDownloadImage()の自動反映処理を使わず、ダウンロード後の動作を自作していきます。
また、今回作成するサンプルは全てローカルで動作するものであるため、同期させる場合はURLを同期しておくと良いと思います。

完成図

画像を表示するImageとURLを指定するVRCInputField、及びダウンロードを実行させるインタラクトCubeで構成します。

サンプルコード

部分解説

ダウンロードする部分

実際にダウンロードを実行している部分は、以下の部分です。

// ダウンロード実行
_task = _imageDownloader.DownloadImage(_urlInputfield.GetUrl(), null, targetUdon, info);

URLの指定はVRCUrlを渡せば良いので、VRCInputFieldからURLを取得して渡しています。
これで、VRChat上からURLを指定出来るようになります。
反対に、URLを固定したい場合はVRCUrlを宣言すれば良いでしょう。

テクスチャの割り当て

該当部分は以下の通りです。（見やすいように記述を変更しています）

// ダウンロード成功時
public override void OnImageLoadSuccess(IVRCImageDownload result)
{
...
    // テクスチャ反映
    _target.texture = result.Result;
...
}

ダウンロードしたテクスチャの割り当ては、OnImageLoadSuccessイベントで行っています。
OnImageLoadSuccessイベントは、VRCImageDownloader.DownloadImage()の第三引数に自身のudonを設定しておかないと呼ばれないため、注意が必要です。
サンプルコードでは、ついでにサイズをダウンロードした画像の解像度に合わせています。

ロード状況の可視化

該当部分は以下の通りです。（見やすいように記述を変更しています）

private void Update()
{
...
    // ロードバーを動かす
    _loadingBar.value = _task.Progress;
...
}

ダウンロード開始するタイミングで、IVRCImageDownloadを受け取っておくことでダウンロード進行状況を取得出来ます。
でも、現時点だと0と1でしか取得出来てないです...。バグなのかダウンロード速度が高速なのかは不明です...。

実行

あとがき

今回は指定したURLから、画像をダウンロードする方法について紹介しました。
画像と同じ方法で文字列も取得できるようになっています。こちら
文字列が外部から取得できるようになったので、天気予報とかをログイン時に表示出来たりしそうで面白いですね。
色々面白い使い方を模索して頂ければと思います。

2021年もお疲れ様でした

日記

こんばんは。ハツェです。
2021年は人生における大きなイベントと共に、心身共々疲弊しきった年だったなと実感しております。
という訳で、今年一年私が何をしていたかを振り返っていけたらと思います。

目次


今年の創作等の振り返り

年明け～三月

一月
新年の抱負

今年は、新年の抱負から始まったような気がします。

この当時は就活が始まるぞという時期だったので、ぼんやり思っていたのを筆に起こしてみました。
その結果ですが、三月の終わり頃には内定を頂けたので、とても早い段階で就活に区切りをつけることが出来ました。良かったです。

性格診断

その就活の行動の一つとして、性格診断をやっていました。

この診断は、何かの理論に基づいた診断だったので、しっかりした結果が返ってきました。とても参考になりました。

体調不良の兆し

実は去年末に風邪を引いていたのですが、これが今年を大きく狂わせる要因の一つになることを、この時はまだ知りませんでした。


VFXGraph

一月は、VFXGraphにハマっていた期間でもありました。

かなりParticleSystemよりも色々出来て面白いのですが、アイデア勝負なところもあるので私は厳しいですね。

Vtuberごっこ

後は、LeapMotionを使ってVTuberごっとをしてみたりとかもしましたね。

この時は3teneとLeapmotionを使って遊んでいました。

ShaderGraphとAudioSpectrum

オーディオ解析とShaderGraphを掛け合わせたら面白いかなと思って、少し挑戦していました。


ChilloutVR探訪

この頃はChilloutVRがリリースされていたので、少し遊びに行ったりしてましたね。


NEOKET

NEOKETもこの時期に初回開催だったので、興味本位で遊びに行ったりしました。

1月はかなり結構濃厚な期間でした。

二月

二月は打って変わって何も記録することがなかったです。
正直、就活の面談と体調の終わりが再骨頂だったので、Twitterにすらあまり出没しなかったんだと思います。
唯一上げるとするならば、DeepBlueに当時はハマっていたということぐらいですかね。



三月

時は流れ三月。まだ就活で忙しくしていた時期です。

Space

この頃にTwitterでスペース機能がちらほら見え始めていたので、スペースを使って遊んでいました。

なんか分からないんですけど、スペースで喋ってると体調が必ずと言っていいほど悪くなるんですよね。なんででしょう。

Resonark手元動画

就活の休憩として、Resonarkの手元動画を撮っていたりもしました。

今だとCtrl+Dコマンドで視点変更できるので、カメラを綺麗に置かずとも撮れるのでいいですよね。

シン・エヴァンゲリオン

シンエヴァがこの頃に"ようやく"公開されたので見てきたのですが、「生きててよかった～」っていう気持ちになっていました。

死ぬ前にエヴァの完結が見れてよかった。未だにあの感動は忘れられないですね。

誕生日

今年も誕生日を沢山の方に祝って頂きました。

ただ今年はとても嬉しいことがありまして。前から関わっていたバチャコレのメンバー達にサプライズでお祝いしてもらいました。これには流石に嬉しさが感極まって泣いていました。この日この瞬間だけは本当に幸せでした。
そこで頂いたケーキとサムネイルは今も家に飾っております。


四月～六月

四月
写真

この頃からVRChatで"写真"を撮り始めるようになりました。写真を撮る楽しさに気づいちゃったんです。


VRChat公式アプデ配信

後、この頃にVRChatの公式配信があって今後のアプデが紹介されていて盛り上がったりしていました。


記事ネタ集め

他には、12月に書いたLate-Joinerの記事の情報集めをTwitterとDiscordで集めていました。懐かしい。

ここで集めたやつをまとめて、12月に記事化しました。
hatuxes.hatenablog.jp

五月
縦画像

Twitterに縦画像が認識されるようになった年ですね。とてもいいですね。


Skeb

この時初めて依頼したSkebイラストが届いて興奮してました。自分のアバターのイラストめっちゃ良いですよね。テンション上がります。


Udon入門記事更新

Udonの大きいアップデート（通称"UnU"）が来たので、それに対応する入門記事を書き直したのも覚えています。

かなりこの記事大事な情報が揃っていることもあり、現在このブログで最も読まれている記事になっています。ありがとうございます。
hatuxes.hatenablog.jp

パロディイラスト

おまけですが、私含むフレンドのアバターを描いてもらったパロディイラストもこの時期だったので、一緒に載せておきます🤣



六月
lJUS pre-open

この頃から新しく"lJUS"の制作に関わるようになりました。今では大切な創作場所の一つです。

まだこの頃はプレオープンでしたが、多くの方に興味を持っていただいてありがたく思っております。

BattleField

なんかこの頃から、BFのお誘いを受けて始めたりしていました。丁度PrimeGamingか何かで無料配布されていたんですよね。

今ではなんだかんだBF2042も買って遊んでおります。

カメラ改変

カメラを自分好みのカラーリングにしてみたりとかしましたね。モチーフカラーです。



七月～九月

七月
lJUS1

七月最初のイベントは"lJUS"の正式オープンイベントでした。この時沢山の人が来てくださったのと同時に物凄い熱狂だったのを今でも覚えています。


CustomRenderTextureの勉強

今更CustomRenderTextureについて勉強していたりもしました。シェーダーから情報を読み取るの、ちゃんとやったことないんですよね。


On Instances.公開一周年

他には、私のPublicワールド"On Instances."が公開一周年を迎えたので、これに関する話を記事化したりもしました。
hatuxes.hatenablog.jp 私にとっては大切な場所です。

オリンピック

この時日本で開催されたオリンピックも見ていたりしました。かなり見ごたえありましたね。


手術

最後にですが、7月の末ぐらいから喉の手術を受けるために入院していたりもしました。

コロナ渦での入院は本当に辛かったです。人生の大イベントの一つの入院ですが、コロナ渦だと一切の外出が出来なかったのでずっと暇だったのと、喉の手術だったのでご飯が信じられないぐらい痛かったのを今でも覚えています。本当に激痛でした。ずっと一人でのどの痛みと戦ってたので何度も心が折れそうになりました。ですが、手術したおかげで体調は前より安定するようになりました。


八月
lJUS2

八月は"lJUS"の二回目のオープンでした。この二回目もとても盛り上がっていましたね。


lJUS2アフタートーク

盛り上がりの後、lJUSについてインタビューを受けたりもしていました。テキトーに進めつつも大事なことをチラホラ言っていたりします。

2ndライブアフタートーク！lJUSの制作メンバーにインタビューしました！ | BUSSANのYOROZUブログ ｜ あなたの趣味と遊び心をくすぐるブログ

Re:collection

この頃は、合同写真展示ワールドである"Re:collection"の発表日でもありました。

"Re:collection"は今年の人生狂わされたランキングでも上位に入ってきますね。それこそ"lJUS"に匹敵します。

はつぇにうむ缶

八月には、良くわからない缶が作られています。


VRMF

後は、VR音楽イベントVRMFを見に行ってました。

www.youtube.com 配信共々、見ごたえありましたね～。

CyanTriggerお試し

CyanTriggerを試してみました。コードを書かない人にとってはかなり便利みたいです。


赤髮のともさん事件

その日は突然。ともさんがVRChatに来ててかなりテンション上がっていました。

ともさんは私が唯一好きなYoutuberさんです。


九月
Re:collection冊子

八月の"Re:collection"の冊子が届いて満足していたりしました。

これはRe:collection初回参加者に向けて送られています。国立国会図書館にも寄贈されているので、気になるという人はそこからでも借りることが出来ます。（既に借りてる人もいるみたいです。）
VRのものが実物になって帰ってくるの、すごく興奮しますよね。とても良かったです。

Skebイラスト

他には、Skebで依頼していた二枚目のイラストが届いてテンション上がっていたりしました。


Udon記事投稿

後は一本記事を投稿しましたね。
hatuxes.hatenablog.jp

TGSアプリ

他だとTokyoGameShowのバーチャルアプリを試したりもしていました。


写真月間

後、九月はかなり写真撮っていましたね。


夏

九月ラストは"夏"を壊したことで締めくくろうと思います。

とても面白かったですね。VRの強みが多く活かされていてとても良かったです。


十月～十二月

十月
lJUS3

十月は"lJUS"の三回目のオープンがありました。
過去三回lJUSはオープンしていますが、正直この三回目が一番出来が良かったと思います。演者の入れ替わりまで演出込みだったので、最後までたっぷり見ごたえがありました。三回目のラストを飾って頂いたよっとさんのアーカイブだけ残っているので、まだlJUSを見たことないよという方は是非見てみてください。

www.youtube.com

十一月
ノナちゃん

11月はノナちゃんを買いました。

booth.pm とても可愛いのと、うつつさんのアバターは体とのフィット感が素晴らしいので、とても愛用しています。

再起動で起動しないPCを治す

他だと、長年悩み続けていたOSの起動がちゃんと治ったこととかですかね。100%の確率で起動してくれるようになったことには感動です。


Vtuberごっこ2

後は、VSeeFaceというカメラトラッキングアプリをDiscordで試していたりしました。かなり便利なのでおすすめです。



十二月
ShaderFes2021

12月はShaderFesの展示報告をしましたね。

会場がとても良かったので、もうちょっとガッツリ展示物を作ればよかったかなと若干の後悔があります。

lJUS DIG

もう一つ、"lJUS"の新しい形でのイベントがありました。

海外勢のテンションの高さに驚かされたりしました。

Enter.

後もう一つ、柚葉さんの合同写真展示企画にも参加して、私からも幾つか写真にて参加していました。

噂によると、中央にある柱は飛び移ることが出来るみたいです。いつか登頂したいですね。

AfterEffect勉強会

他だと、AfterEffectの使い方を教わっていたりしました。

映像を作るのちょっと面白いですけど、Unityライクでもあるなぁと思いました。根性が要りますね。

サンリオフェス

後は、サンリオフェスに参加してテンション上がっていたりしました。


オフ会

他には、今年関わりのあった人とオフ会をしました。

面白かったですが、テンション上げ過ぎて案の定終わった後に体調を崩しました。相変わらず学ばないですよね。私。

あかがみんメンバー

後、あかがみんメンバーの方たちのアバターとツーショットを撮りました。とても満足しております。



今年の総括

今年は「就活・入院・卒論」という人生の大イベントを一気に味わいました。
良く言えば一年中ずっと"リア充"みたいなものでしたね。とても忙しかったです。この記事を書いている今も卒論に追われているんですけどね。 今年は上記の"リア充"のせいで、VRChatでは色々は出来なかったですね。そこまでして創作したいというモチベーションが無かったです。
反対に、誰かに頼まれたからやるというモチベーションはとても私の中で高かったので、lJUS一本で色々作らせていただきました。ああいう感情揺さぶるイベントに関われるというのはいいものですね～。制作最中は結構忙しいですけど、振り返ったときに良いものになっているというのは創作者にとって嬉しいことです。これは他でも言えることだと思いますが。
そうなるようにこれからもlJUSを育てていければと思います。
さて、去年挙げた抱負を振り返っていきましょう。

内定先を獲得する

これはなんとか叶えることが出来ました！良かったです。
これが一番去年心配していたことだったので、内定の連絡を受け取ったときはとても喜んだことを覚えています。
これまで頑張ってきたことを無駄にしないためにも、これから先も卒論頑張ろうと思います。

自分の身体を第一に考えて行動する

この一年は常にこのことを意識しながらの生活でした。
去年末に体を壊してから、手術するまで常に熱が出る状態だったので、如何にして体力をつけていくかを考えていました。
ウォーキングから始まり、ランニングや縄跳びなと、やれることは色々やってみました。
ですが、すぐには強くなれないものですね。ちょいちょい体調崩す機会がありました。これは不幸中の幸いですが、高熱になることとかが今年は無かったので、少しは成果が出たかなと思います。
今年の最大の敵は「夜更かし」でした。夜更かしをすると自律神経が徐々に崩壊していくので、体の様々な部位に異変が生じていきます。例えば、肺の神経が痛くなったりとか。
特に睡眠時間よりも睡眠サイクルと食事サイクルのズレが厄介で、そこがズレると色々壊れていきます。
なので、今年は如何にして夜更かしをせずに寝るかについてずっと考えていました。時には人を巻き込んだりして。
結果12月ぐらになると安定して日付が変わることぐらいには寝れるようになりましたね。でも、これは働き始めたら自ずと寝なきゃいけなくなると思うので、時間が解決してくれるような気がします。

ゲーム作りに専念する

これは全くしなかったです。
これにはハッキリとした理由がありました。
内定を頂く前は頑張って制作しようと思っていたんですが、就活の最終面接のときに「残りの学生生活を楽しんでください」という言葉をかけていただきまして。この言葉が刺さりました。
仕事をしたらゲームを満足に遊べなくなるかもしれないから、今のうちに遊べるだけ遊んでおこう。そう思うようになったんです。
なので、急遽路線変更をして、今年はゲームを遊び尽くす年にしました。
今のうちに遊んでおくことで仕事に役立つと思ったからです。


未来の話

最後に来年の抱負について、以下の四つを掲げようと思います。

  1. 就職先に馴染めるようにする
  2. よりゲームエンジニアとしての経験を積む
  3. 2021年よりも健康でいる
  4. lJUSの開発基盤を安定させる


一つはなるべく早く会社の雰囲気に馴染めたらなと思っています。
何をするにもまずは人と仲良くなるところから始まるかなと今のところ私は思っているので、社員の方たちと仲良くしたいですね。全員と仲良くできるとは思っていないですけどね。
後は、なんだかんだ今年も体調不良に追われた年だったので、来年は心も身体も豊かな一年にしたいなと思っています。
最後は、lJUSについてですね。正直、VRChatの創作はもうlJUSだけにしようかなと思っています。もし、まだ来年も関わっていたら開発基盤を安定させていきたいなと。
現状走り出しからものづくりだけをやってきたので、そろそろプロジェクトデータがグチャグチャになってきているんですよね。
なので、そこの整理を少し私の方でも進めていけたらいいかなと思っていたりします。
そんなところですね。




以上で今年の振り返りを終わりたいと思います。


今年もありがとうございました。


良いお年をお迎えください。


ハツェ