2024年8月〜9月にPNGミュージアム x エンジニア集会 コラボハッカソンに参加しました！

この記事では、ハッカソンで作成した「アバター用QRコードジェネレーター」システムについて紹介をします。

PNGミュージアム × エンジニア集会 コラボハッカソンとは

このハッカソンは、PNGミュージアムとエンジニア集会がコラボして開催したVRChat上のハッカソンです。2024年8月2日~9月8日に行われました。

ハッカソンのテーマはPNGミュージアムにちなんで「展」でした。参加者はこれを「展示」、「展開」や「発展」などと自由に捉えて、VRとかけ合わせた作品作りに挑戦しました。

作成したもの

ハッカソンでは、VRChatのアバターから動的に生成出来るQRコードジェネレーターを作りました。ユーザがURLを入力することにより、そのURLを指すQRコードをアバターに表示出来るシステムです。

この作品のポイントは、アバターに表示出来るQRコードが固定されたものではなく、用途によって内容を変更出来る所です。VRChat上でフレンドとの会話中に、特定のウェブサイトをお勧めしたい時、該当するQRコードをその場で表示出来るようになります。

VRChatのQRコードジェネレーターの仕組み

VRChat用のOSCプログラムをPythonで作成しました。ユーザが入力するURLを受け付け、OSCでVRChatのアバターにパラメータの値を送信し、QRコードがアニメーションで生成されます。

QRコードは最小の21セル×21セルの441セルで構成され、441個のシェイプキーを操作する441個のアニメーションで操作しました。アニメーションで黒いセルを大きな白い板の裏から貫通させることによって、QRコード内の黒いセルを表現してみました。

・・・ですが、今回はこの441個のアニメーションを手動でUnityのAnimatorに設定するのにものすごく時間がかかってしまい、ハックタイム終了までには147個(QRコード7行分)までしか設定出来ませんでした。

OSCのプログラムでは、入力されたURLをpyqrcodeというライブラリでQRコード化し、さらにそのQRコードを0と1の情報に変換しました。0と1の情報を1文字ずつ読み込み、1が読み込まれる度にVRChat内のQRコードに対応する黒いセルを動かしました。例えば、左上からみて(0,3)の値が1だった場合、QRコード上の(0,3)の位置の黒セルのアニメーションを動かしてました。

QRコードジェネレータの制限

ここで紹介してるQRコードジェネレータはまだ未完成ですが、すべてのセルを動かせるようになったとしてもいくつか制限があることが見えてきました。

文字数の制限

このQRコードジェネレーターでは、含められる情報量が１番少ないバージョン1のQRコードを使用してます。URLで扱う文字を使用したい場合は17文字までの文字列しか表現が出来ません。そのうち先頭にhttps://が付くので付くので、これで8文字を使用してしまい、残り9文字しか活用出来ません。URLからはwww.や末尾の/を削除する処理を入れても https://yahoo.com , https://booth.pm や https://x.com といった短いURLのトップページしか表示できません。

なので、バージョン1を使用したQRコードジェネレーターだと実用性に乏しい性能といえます。

同期の制限

今回の実装ではアニメーションのWrite Defaultsの特性を活かして実装してるため、441個の黒マスの制御には実はintパラメータが二つしか必要ありません(intパラメータ1つで256の値が扱えるため)。(0,1)、(0,2)、(0,3)の黒いマスを表に出したい時は、1つのintパラメータの値を3種類送信してます。例として１、２，３の値を順番に送信してるイメージです。2の値が設定されたという事実が他プレイヤーに同期されなかった場合、そのプレイヤーには(0,1)と(0,3)の黒いマスしか表に表示されないケースが起こり得ます。自分のアバターでは(0,1)、(0,2)、(0,3)の黒いマスが表示されています。いわゆる、同期ズレです。

QRコードの表示スピード

QRコードの黒マスは0.4秒間隔で次々に表示させています。黒マスはVRChatが用意しているOSCのパラメータのインプットで操作してるのですが、送信間隔が短すぎると、VRChatが30秒ほどクールダウンモード(OSCからのインプットを受け付けない期間)になってしまうため、表示間隔を制御する必要がありました。

ハッカソンを終えて

色々と勉強になった有意義なハッカソンで、参加して良かったと思っています。QRコードの勉強はもちろんのこと、アニメーションのWrite Defaultsの挙動を実践で試すことにより、この機能への理解がより良く理解が出来ました。正直何も考えずに今までオフにしてたので・・・ (¬д¬。)

今回は色々と課題が見えてきましたが、改善に向けて動けるような内容だと思うので、今後はより良いQRコードジェネレーターの開発を目指したいと思います。

とりあえず、今のQRコードジェネレーターを完成させます！

Special Thanks

今回のQRコードジェネレーターに関して、下記2名の助力に感謝を申し上げます：

• どっこいさん
  Write defaults関連の情報を共有してくれたり、アニメーションに関する色々な相談に乗ってくれました！ありがとうございました m(_ _)m

• しんいちさん
  QRコードジェネレーターの動作確認に付き合ってくれたり、同期についてのアドバイスを頂けました！ありがとうございましたm(_ _)m

#VRChat #ハッカソン #PNGミュージアム #エンジニア集会  #エンジニア作業飲み集会 #QRコード