Home

概要

vrchat-time-shadersはVRChatに時間に関係するちょっとしたオブジェクトを追加するパッケージです。

サンプル

ここから動作確認ができます (要VRChat) 。

使用方法

1. unity-packages/vrchat-time-shaders.unitypackageをプロジェクトにインポートします。
   • 事前にVRCSDKフォルダがAssets直下にあることを確認してください。
2. vrchat-time-shaders/Prefabs/VTSWPプレハブをワールドに追加します。
   • プレハブはプレイヤーに見えない・かつ遠すぎない箇所 (床の下や天井の上など) に配置してください。
   • プレハブ内のカメラとWebPanelの間に何か遮蔽物が入るとシェーダの動作が乱れるため、他のオブジェクトがめり込んでくるほうな場所は避けてください。
3. 後述のお好きなプレハブをワールドに追加します。

実装済みプレハブ

• Prefabs/VTSWP: WebPanelの出力をRender Textureに伝えるためのオブジェクト
  • 必ずワールド中に1つ存在する必要あり
• Prefabs/VTSAnalogClock: アナログ時計
  • Materials/VTSAnalogClockのテクスチャ (正方形) を変更することで文字盤・時針・分針・秒針をカスタマイズ可能
    • 針のテクスチャは12時方向を向いた透過画像、テクスチャに内接するような円の外側は描画されない
• Prefabs/VTSDigitalClock: デジタル時計
  • Materials/VTSDigitalClockのテクスチャを変更することで文字をカスタマイズ可能
    • 横2:縦1の比率で上段左から0,1,…,7、下段左から8,9,コロン(消灯),コロン(点灯)
• Prefabs/VTSMoon: 満ち欠けする月
  • Materials/VTSMoonのテクスチャを変更することでカスタマイズ可能
    • 横8:縦1の比率で上段左から新月…上弦…満月 (計8枚)、下段左から満月…下弦…新月 (計8枚)
• Materials/VTSSkybox: 実時間が反映された空模様
  • テクスチャを変更することでカスタマイズ可能
    • Noon: 昼
    • Night: 夜
    • Sunset: 夕焼け・朝焼け

動作原理

以下のようにVRC_WebPanel → カメラ → Render Texture → シェーダと時間情報を伝達して表示に反映します。

1. VRC_WebPanel経由で前述の格子画像をワールドに表示
2. カメラで格子画像を撮影してRender Textureにコピー
3. 各種シェーダでRender Textureをサンプリング・計算することで時間情報をデコード

API

エンドポイント: https://y23586.github.io/vrchat-time-shaders/api/v1/

• エンドポイントは幅・高さが100%の8x8格子画像 (正確には<div>の集合) を返す
• 格子画像はrequestAnimationFrameによって定期的に更新される
  • requestAnimationFrameの更新フレームレートは実装・環境依存
  • 目視で確認する限り、VR環境では少なくとも30 fps程度は出てると思われる
• 各マス目はRGBのそれぞれが0x00か0xFFかどうかで計3 bitの情報を含む
  • 例: 黒=0b000, 赤=0b001, 緑=b010, …, 白=0b111
• 複数のマス目で1つの数値を表現する場合は左のマス目から下位に連結される
  • 例: 左のマス目が黒、右のマス目が緑=0b010000
• マス目の内容 (左からi個目、上からj個目を(i, j)で表記):

格子画像の内容

内容	値	マス目
時	0-23	(1,1),(2,1)
分	0-59	(3,1),(4,1)
秒	0-59	(5,1),(6,1)
ミリ秒	0-64 (ミリ秒の64/1000倍)	(7,1),(8,1)
年	1900年から起算	(1,2),(2,2),(3,2)
月	0-11	(4,2),(5,2)
日	0-30	(6,2),(7,2)
曜日	0(日)-6(土)	(8,2)
月齢	0-29	(1,3),(2,3)

その他の機能

• GETパラメータtimezoneを変更することで日本以外のタイムゾーンを指定できます (配布パッケージ中のデフォルト値は+9)　。
• GETパラメータdemoを1にすることでデモ動作が有効になります (現在時刻に関係なく高速に時間が経過するようになります) 。
• Shaders/VTSGenericShaderでシェーダから取得できる全情報のサンプルを確認できます。
• Shaders/Examples以下でVTSGenericShaderの改造例を確認できます。
  • Shaders/Examples/VTSNoonNight: 昼と夜でテクスチャを切り替えるシェーダ