VR空間での作品展示：誘導と設計編

VRやメタバースには様々なイベントが生まれてきています
おそらくVRで一番メジャーなVket6というイベントに僕も今回、ブースを出展しました
ブースの設計などはあまり情報が無く、ワールド系の技術に馴染みのない人や、VRのことをよく知らないけど出してみたいという人も居ると思います
作成時に何を考えていたかメモを取りながら進めていたので、その中から役に立ちそうな情報をまとめて共有したいと思います

設計面はnoteに、技術面はQiitaに置いてありますので興味がある方をどうぞ

・VR空間での作品展示：誘導と設計編（この記事）
・VR空間での作品展示：タイリングとshaderで容量を節約

実物を見たい人へ

この記事にはブースのネタバレが含まれます
実際の出店ブースはラグーナフィオーレの１２番になりますのでネタバレの前に見たい場合は先にどうぞ

VR機器なしでPCの画面から無料で見に行けますので、VRChatをまだ遊んでいない人はこの機会に遊んでみてください
Steamさえインストールされていれば、ライブラリから「VRChat」と検索してゲームをインストールすれば、こちらのリンクからすぐ見に行くことができます

出展の経緯

今回のブースは前回のVket5に出そうとしていたものでした
しかし直前にVRCのアップデートが入り、一部のギミックシェーダーが壊れてしまい、撤去扱いになってしまいました
Vketに限った話ではなく他のワールドにも発生していて、再納品もできないタイミングだったため運が悪かったという感じです・・・
Vket6にはリベンジで出しました！

このnoteにかかれている内容はVRChat及びVket6の条件上での話になります
他のVRSNSや未来のVketに適用できる話もあれば、そうでない話もあると思うのでご注意ください

最終成果物全体

この記事で説明する設計を先にすべてまとめるとこんな感じになります

方針を決める

ブースなので展示物あるいは目標を考えます
今回は僕の自作シェーダーであるTowelCloudを展示物にすることにしました
無限遠の空を描画する無料シェーダーです

無料なので販売につながるわけではなく、半分くらいは好奇心から出店を目的に出店しているという側面があります

配置の基本

4x4m（高さ5m）というVketのサイズは、企業展示会で言えば2小間程度の面積、デザフェスで言うとMブース４つ分で、アトリウムより大きいです
カウンターだけを置くような単純な展示よりも大きくなる一方で、内部に通路を持つ個展等と比較すると小さめということになります
そのため導線が必要になりつつパターンは比較的単純なものに限られます
現実の導線理論を応用することができますが、違う点が以下

・客同士が衝突しないので出口導線が無くても良い
・外周に人が溜まっても怒られない
・安全性を心配せずに２階を設置できる

というわけでU字やS字が最も展示物を置くことができ、例えば１階をS字、外周と両方配置し、２階をU字などにする、といった形にすると、実面積で5x6m+4x4m程度の展示を行うことができます

ただし展示が少なければ結局はスカスカになったり、コンセプトがバラけてしまいます
僕の場合はそれほど置くものがあるわけではないのでこのような最大化したデザインは採用せず、単純なU字にしました

また、これも現実と同じですが、ギリギリの範囲に直角の壁を置くのは単純なデザインになってしまい、むしろ難易度が跳ね上がるのでデザインパワーに自信がある場合以外、なるべく避けます

結果少し斜めの壁と変木（木そのままの形の柱のこと）を入れ込んでこんな間取りにまとまりました

導線を設計する

ワールドの形状は一本道の場合と、ループしている場合、複数のループが組み合わさっている場合などがあるので、どの方向から人が来るかよく考えて設計します
今回の配置はこの図の12番です

この形だと、お客さんはブースを横から見ていく形になるので、ブースの入り口は正面ではなく、斜め方向のほうが有利になります
最終的にはこのように、斜め方向から窓枠に入った空が見え、興味を引っ張りつつ内部に誘導する形にまとまりました

現実と同じく、高い場所に動くものがあると非常に強い誘導効果があるので、大きな窓が遠方からも見えるように置き、中に一番お気に入りの夕闇の空を配置しました

また、一見してすべての内容が見えてしまうと、お客さんが遠巻きに確認した上で近づかずに次に進んでしまうことがあります（人間は、すべて見えるものへの興味があまり持続しないという話があります）
一見してアピールできる作品を作る場合はそれでも良いですが、近づいてきてほしい場合は奥行きのある展示を心がけましょう

（なおVket5のときと導線方向が逆になったのですべてのモデルを反転したりしてます）

雰囲気を決める

ワールドの風景と反発してしまうと、目立ちはしますが悪目立ちになりやすく、クオリティが低いと判断されて飛ばされてしまいます
ワールドの風景と反発しても良いのは、そこに世界観を作れるだけのデザインやモデリングに自信がある場合のみです
現実世界の企業展示会でもどぎつい色を使って目立とうとするブースがあるのですが、あまり効果的にはなりません
ワールドに対してブースは面積あたりの割り当て容量が多いので、テクスチャやポリゴン密度で差別化できます

僕も、設計などはしたことがあるのですが、実際にモデリングをするのは今回が初なので（Blenderにはじめて触りました）冒険はせず、ワールドに寄り添います

Vket5に出店する時点では会場はメテコレプカでした
コンセプトイラストの段階では、かなり明るいかな？屋外で下は土になるのかな？と思ってましたが、実際には屋内だったため、テーマに沿って木を多用しつつ、無印良品のようなモダンデザインと絵画展のような雰囲気を出すことにしました

ところがVket6のラグーナでは屋外になってしまいましたし、木の壁が浮いてしまう場所になりました
最終案ではテクスチャを変更し、木の素材を一部石や壁紙の素材にし、ライトをヨーロッパ風にすることで辻褄を合わせました

明暗による誘導

古典的ですが、現実のイベントブースがそうであるように「光と影は範囲をはみ出しても良い」のでこれを最大限利用すると有利になります
もちろん光で隣のブースに迷惑をかけないように遠くに光を出す場合は正面のみで

今回は光がはみ出しすぎないよう横側はほとんど壁にしておき、暗くします（ここが暗くなるかどうかは隣のブース次第ですが）
正面は柵型の壁にすることで光が漏れるようにします
できればハードな影が出てほしかったのですが、実際にはライトマップの関係上あまりきれいな影にはなりませんでした
ライトマップの位置関係ではきれいな線が出ることもあります
ブースのライト関係はどうしても運要素があるので、いくつか種を蒔いておいて芽が出たらいいなみたいな感覚で

結果の話ですが、光による誘導はあまり成功しませんでした
配置場所は日陰になってしまったためです
暗い場所そのものは、どちらかというとライトで目立たせることができるのでチャンスなのですが、影はギリギリブースの範囲のみにかかっており、通路は明るい・・・光による誘導はすべて実らず、これはちょっとアンラッキー

一応入り口の壁の内側を通路に見せてそこを照らすという明誘導だけは効果があったと思っています

展示物と世界観

展示物は飾ってある窓の中の空です
様々な窓にそれぞれ違う空が映し出されています（実際には７つの窓に５種類）
窓のほとんどはBlenderのArchipackプラグインでさくっと作っています

魔導書はuniuniさんのものを使わせてもらいました
余談ですがもともとこの本の展示のあったuniuniさんのvket3ブースでは、僕が天井の「夕焼けの見える天窓」を担当していて、世界観が繋がっているつもりです
あっちは転移魔法を応用して上空にあるポータルが１日をかけて夕焼けを追い続けるという仕組みなのですが、このお店に置いてあるのは専用のインクの中に空を作り出すことでもうちょっと簡易的に使えるようになったものです（という設定です）

お客さんの求めによってはその場で好みの空を調合します
売れ筋はもちろん「柔らかな夕刻」
店主は「明るさのある曇天」も好きなのですが、あまり売れない様子

展示物説明は机の上の小さいメニュー表に書かれています
展示物の特性上、ここですぐ購入に紐付ける必要はなく、そういうshaderがあったなという記憶さえ残れば良いので、表示は控えめです

QRコードや販売リンクを使わずに、検索ワードを書く形にしています
配布URLは変わる可能性がありますし、個人的に地味にこの方法が一番効果的なのではと思っています

特別品の項目が気になった人は、物語性のある体験、の項目へどうぞ

目線の高さ

VRCでは身長に大きな差があるので注意が必要です
100cmから200cmに幅広く分布し、平均身長は140cm程度と言われています
そのため一般的な展示棚の考えかたである小物台100cm～、大物台80cm～は、マイナス20cmほどに置き換えて考える必要があります

身長の小さい人も、ジャンプ力があるので高いところに手は届きますが、台の上に固定商品を置く場合はじっくり見てもらえないことがあるため、近くに踏み台を置いたり、台の上を傾けるようにすることで見てもらえる可能性が増えます

もし机の上に持てるものを置く場合は、机のコライダーは消しましょう
身長の差があるVR空間では、腕の長さの差が大きく、背の低いキャラクターの手が届かない場合があります（机にめり込みながら拾う不思議な図にはなりますが）
ジャンプで乗れる高さであれば、机の上に乗って近づく形でも問題ないです

なおVRユーザーの部屋には大抵椅子があるので、身長の大きな人が屈むことによる負担は現実より少なく考えられます

平均身長が低いなら全ての建築のスケールを小さくするべきではと思いがちですが、VR住人は低い身長で通常サイズの物体を見ることに慣れているので、小さくした家具などは相応に小さく見えてしまうのです、ちょっとややこしいですよね

なお、10cm程度のアバターを使う知り合いが居ますが、そこまで小さな人だと背の高いアバターを別に持っていたりと、それなりに対策しているのでそこまで考慮はしなくて良いと思います

物語性のある体験

ここまでブースに入ってもらう設計と展示物の設計をしましたが、これだけではブースを印象に残すことができません
現実の展示でも重要視されますが、ブースの中では物語性のある体験を提供する必要があります

ここで言う物語性というのは、小説があるとかではなく、客に小さな発見や驚き、冒険を提供するということです
別に難しい話ではなく、過去のVketでも非常に参考になるものがたくさんあります

・アニメーションでキャラクターが動く
・中に入ると全く違う風景が広がる
・ブース全体をよく観察するとストーリー性がある
・複数のブースでヒントを集めて解くパズル
・友達の頭に乗せて写真を楽しむ帽子やアクセサリー

素晴らしいブースがたくさんあるので今度別のnoteでまとめたいくらいです

ちなみに、用意している物語性は全員にすべて体験させる必要はありません
特に商品に興味を持たない層は対象とせず、興味を持った人間に強くフォーカスすするようにします（ペルソナと言います）
また、物語性のどこでドロップアウトしても、それがオチや発見に見えるようにします

物語性：初期

すべての窓がインタラクト（クリック）できるようになっています
インタラクトすると中の空が飛び出し、持って自由な方向を眺めることができます

１つでもこういった簡単なギミックがあると、このブースはギミックがあるタイプだなと判断して、他の要素も探索してくれるようになります

持ち運べるものは他のユーザーと同期できるほうが物語性が生まれます
今回のブースでは内部的にpickupオブジェクトを使いまわしているので同期ナシになっています
こういう事情がない限りは、オブジェクトの同期はしたほうが良いです

補助的な出口展示として、入り口横に大きめの窓を置いてあります

これは、ブースに入ったはいいが中央に置かれた窓のインタラクトにも気づかずに回れ右して帰るユーザーに対して注意を引くためのものです
帰ろうとするとトリガーが反応し、インタラクトできることに気づかせます（向く方向によっては失敗します）
これにより、窓にはギミックがある、ということに気づく確率を上げています

物語性：中間

ブースの奥に入ると空の色の入った瓶が並んでいます
これは視線を左に誘導するために置かれてあり、その奥の窓に僕のアバターが居ます

人間はこちらを見る目線に強く反応しますし、動物（？）は、食べ物・赤ん坊に並ぶ非常に強い誘引要素を持っているのでその効果も狙えます

このアバター、ステンシルギミックが入っているので、この窓を通してでないと見ることができません
ブースの外から見ていたときは居なかったアバターが急に出現しているように見えるというわけですね
このアバターの位置で、窓の外を見に行かせるのが目的で、探索要素に繋がります

ちなみにですがこのカラフルな瓶、VRで見るとちょっとジラジラして、あんまり良くなかったなと反省しています・・・
色収差が入っているのですが、もうちょっと控えめな数値にするべきでした

物語性：探索要素

小さいブースでも冒険感を出すのは非常に重要です

僕のアバターを見つけた後、外側に回り込むと誰も見えず、代わりにハシゴを発見することができます
ハシゴは登ることができ、壁上に到達できます
そのまま横の支えを通って屋根の上に登れます

VRユーザーが楽しむもののひとつに、高いところに登るというのがあります
高いところに登れるだけで大喜びなので、こういうところには真面目にコライダーを設定して登れるようにしてあげると大きな印象を残せます

別ルートとして、本棚に登る探索ルートも用意しています
窓にインタラクトが入ってることに気づいた人が上の窓もインタラクトしようとして、高いところに登ろうとすると本棚の横に足場があることに気づきます
ここから階段状の本棚、壁の窓のヒサシを伝って、壁の上に乗れます

中間要素を経由せず最初にハシゴを見つけるのでも問題ありません
いろいろなルートを用意しておいて、どれかのルートに乗っかればそれが物語性のある体験となります
押し付けでなく、ある程度自由度を持ちつつ、なるべく誘導するには複数のルートを想定してあげます

コライダーのコツ

VRChatのコライダーは自動的に乗り上げる段差は52～54cmまで、グリグリすると56～58cm程度になります
左右に移動したりすると条件が変わってきて、斜め移動中やコライダの角ではもっと乗り上げます
ハシゴも含めてかなり検討してコライダーを置きました

コライダーを置くのは地味に面倒なのですが、壁や床は探索要素の基本ですのでぜひしっかり入れましょう

物語性：終点要素

物語性には最終的な結果、いわゆるオチが必要です
現実のブースでは最後にもらえる記念品がこれにあたりますが、トロフィー感のあるものがふさわしいです

屋根までたどり着くと光る玉に入った特別な空のオブジェクトが置かれています

この中に入っているピックアップオブジェクトは、一見不可視なのですが、それを通してワールドを見ると、ワールドの天候と時間を書き換える（ように見える）効果があります

つまり、これを使うと夕暮れのラグーナとか、夜のラグーナとかを楽しめるし、カメラを中に入れれば特別なエモい写真も取れちゃうというわけです
その上で、ワールドにおける空の大事さなんかも体験してくれればいいな～と思うわけです！

このギミックはぜひ実際に体験して、エモいポートレートを作ってみてください

ブース制作は苦しいけど楽しい

今回、はじめてモデリングをしてみましたが、結果としては「なんとかなったかな・・・」という感じです
締め切り近くはとても苦しかったですし、出来上がったブースには大量の後悔と反省点ばかりです
ブースを見て感想をくれる人が居ると嬉しいですし、色々と学べたという実感があります
Vketという目標や締切が無ければ、この成長は得られなかったと思います

正直このnoteも間違ったことを書いてないかなとドキドキしていますが、技術の共有なくして成長はありえない！と思うので書き連ねました

また展示するものを作ったら出展したいなと思いますし、まだ出展したことのない人は、ぜひ検討してみてはどうでしょうか

技術的な記事

テクスチャのタイリングとAOを使って、繰り返し感を抑えつつも低容量で高解像度のテクスチャを使う方法をQiitaでVket２日目に公開する予定です
そちらも興味あればぜひ見てください

VR空間での作品展示：タイリングとshaderで容量を節約 - Qiita