Skip to content
mediba+

mediba+

メディーバをもっと知る

  • ホーム
  • ヒト
  • カイシャ
  • シゴト
  • ホカニモ

About Me

John Cena

Hello word I am dashy Guy

シゴト

【VR内定式】新卒3年目デザイナーのVRワールド奮戦記

2020年12月25日2021年4月13日

先日行われた弊社の2020年内定式。この舞台となった「VR 8cafe」は、新卒3年目のデザイナー・高橋が、 VR制作未経験ながらゼロから創り上げました。

VR内定式の舞台裏についてでしたが、今回は制作現場にフォーカス。制作に必要なツールのインストールから完成まで、高橋の悩みや気づきも含めた制作過程のすべてを紹介します。これから盛り上がるであろうVRの制作に役立つものがあるはずです。

きっかけはCXO藤原の思いつき

プライベートでxR分野のUI/UXを研究していたCXOの藤原は、かねてよりリアル世界と情報の融合であるAR(拡張現実)が先行して浸透すると考えていましたが、「コロナ禍の社会ではVR(仮想現実)世界の需要が先に増加しそうだ」と感じたそうです。

そこで、「medibaのシンボル的存在だった8cafeをVRで再現したら、『新しい働き方』や『新サービスのアイディア』を試す場になって面白いのでは」という思いつきを発信。そのまま有志社員を募り、「VR 8cafe プロジェクト」が発足しました。

プロジェクト発足 でも……

藤原の呼びかけにいち早く手を挙げた3年目のUIデザイナー高橋のほか、総勢6名の有志社員が集まり、プロジェクトが動き始めました。

ただここで1つ問題が。集まったメンバーは、企画系職種の社員達がメインだったため、VR 8cafeの開発はデザイナーである高橋1人の手に委ねられたのです。

そんな状態のなか、「内定式をVRで……」という提案を受け、VR 8cafeイベントの第1弾は会社のビッグイベントも背負うことになったのです。

高橋悪戦苦闘の記録

VR 8cafeの開発から完成、試験運用までは、約1カ月かかっています。高橋の稼働時間は週に15~20時間程度。ここからはいよいよ、その制作過程を高橋自らの言葉と当時のメモをまとめた形でご覧いただきます。

基礎習得の1〜2週目

  1. Unity(ゲームエンジン)インストール
  2. blenderの制作物をUnityに移行
  3. 8cafe図面でオブジェクトの寸法合わせ
  4. Blenderでスケール調整(寸法合わせ)
  5. UnityでVR上に仮8cafeをアップし確認
  6. blenderでモデリングを進める

最初の2週間は、基礎の基礎から箱を創るところまでという感じでした。とにかくUnityやblenderを触って書き出しや読み込みを試していくだけでも気づきがいろいろとありましたね。

例えば、Unity内で組み上げるのではなく、Blender内でつくった大枠を「.FBX」で書き出し、一気にUnityに移動すると効率的なことや、空間ごと移動させるとアップロードに時間がかかる(5~6時間ほど!)ので、オブジェクトは1つずつ移動させるほうが早いことなど。

それから、PCはcorei7 メモリ16GBでも処理が重くなります!

そのため、画像は容量を圧縮したり、ローポリにしたりして作業をしたほうがいいですね。

わかっている人には基本的なことかもしれませんが、プレイヤーを確実に出現させるためには、SpawnPoint(プレイヤーの出現ポイント)、DespawnHeight(プレイヤーが消滅する高さ)、Collider(衝突可能なオブジェクト)の設定が不可欠だとわかったことは大きな収穫でした。

この時点で空間の大枠ができあがったので、次は8cafeの写真を見ながらテーブルなどオブジェクトをモデリングしていきます。

本格的にクリエイト開始の3週目

  1. blenderでモデリング
  2. シャドウの設定(シェードも)
  3. VR関連の Discordコミュニティに参加
  4. 8cafeを再アップ

オブジェクトに手を付け始めましたが悩みも増えた3週目……。

滑り出しの「天井」はスムーズに進行し、あと少し整えるだけで完成というところまできました。机の関節の歪みが気になりましたが、これはblender内でのメッシュの乱れが原因。

悩んだのは、オブジェクトを美しく、リアルに見せるシャドウ(影)の表現。いくつか方法があって、ざっくり言うと、動的にシャドウをつける(リアルタイム)か、静的にシャドウをつける(ベイク)か両方かの3つ。

このうちのベイクはできたのですが、オブジェクトが増えるとどうシャドウがつくのかまだわからなくて、調べる必要があると感じました。

…と思っていたところで参加したコミュニティが大活躍。質問板でいろいろと情報を入手できました。ググっても出ない知識を得られるのはありがたかったですね。

そしてこの週最後の問題!

植物なのか、テクスチャなのか、ライティングなのか、メッシュコライダーなのか……。

どれが原因かはわかりませんが容量が一気に3倍(100MBくらい)に増えました。植物モデリングは簡素化しないといけないのかなあ。

軽量化を目指す4週目

  1. いろいろな軽量化の方法を調べる
  2. blenderでモデルの軽量化
  3. テクスチャを圧縮して軽量化
  4. PDF投影機能設置
  5. 容量削減した8cafeを再々アップ

ワールドの軽量化に専心した週でした。

一度ワールドをバラし、「少し継ぎ足して再アップ」を繰り返して容量が大幅に増えてしまうポイントを探ったりもしましたが、ここでも活躍してくれたのはコミュニティや、外部の有識者さんたち。

Twitterでワールドを創っている人にコツを教えてもらうこともしましたし、コミュニティのライトニングトークを観覧して、そのあとのバーチャル懇親会で情報収集する、なんてこともやりました。

そうして得た知識で実際に試したのがこのあたりです。

  • 机、椅子、植物などメッシュ密度の高いところの量を減らす(ここは結構大きかった)
  • 外部ツールとUnity内部での圧縮を試す(これはUnity内部の圧縮だけでも大丈夫そうでした)
  • スクリーンがデフォルトで入っているシーンを削除

これで最終的に容量を95.5%程度削減できました。ただ、テクスチャ、PostProcessing、リッチなライティングは犠牲にせざるを得なかったのは悔しいところでした。

調整&調整の5週目

  1. テクスチャのサイズ調整
  2. コライダー調整
  3. モデリング微修正

容量、完成度共にβ版として試験運用可能なレベルになったと感じたので、あとはもう各所の調整に終始しました。実際の8cafeにもあるX字のテーブルや、カウンターの後ろの流し台、植物、壁などもいい感じにまとまったなと思います。

また、軽量化の結果としてWindowsサイズは36.97MB、ローディングは5秒程度(最初は15秒くらい!)まで落ち着きました。

VR 8cafeが生むつぎの夢

VR内定式のおかげで、内定者から経営幹部まで、幅広いユーザー層でVR空間を試すことができました。プロジェクトとしては第一段階クリアしたと言っていいでしょう。

プロジェクト発起人の藤原は、「このVR 8cafeを「VRラボ」のような場所にしたい」と言います。

「mediba内でVR空間のチューターやファシリテートができる人材を育成したり、ワークスタイルを試したり、実際に仕事をしている場所や職場での役割に関係なく、コミュニケーションや出会いが生まれる場所にしていきたいですね」

……と、夢はまたさらに広がったようです。

medibaの創造推進ユニットでは、VR 8cafeをはじめ、様々な有志のプロジェクトで日々新しい挑戦をしています。

************

medibaの環境に興味がある!一緒に働いてみたい!という方はぜひ一度こちらを見にきてください。

mediba採用情報

Tags: 8cafeVR

投稿ナビゲーション

Previous: 箱根駅伝、占い、ポイント還元キャンペーン! mediba運営サービスが提供する年末年始特別コンテンツを要チェック!【2020-2021】
Next: 1年目編集部員とキーワードで振り返る!2020年のニュース

関連記事

新卒社員が研修での学びを記事にしました!

オフィス勤務×テレワークのハイブリッドワークを推進!社員がイキイキと働ける環境を提案する「ワークスタイルガイドライン」とは?

ヤフーに聞くデザイナー育成 カギは「幅」と「深さ」

最近の投稿

  • 社員の行動指針“Value”ってどんなもの?10名のエピソードから紐解く!
  • 購入総額100万円以上!? UIデザイナーが愛用する、オーダーメイドのベースとこだわりの機材たち【マイレコVol.9】
  • 【猫の日】2月22日は「にゃんにゃんにゃんデー」! 集まれmediba社員の猫たち part2
  • medibaを詠む。社内で川柳大会を実施しました!
  • 80人以上の社員が参加!制度を活用した「社内サークル」を全紹介!

タグ

#デジタルを贈ろう 8cafe au Webポータル auゲーム au占い Daily Habits mediba Designers SDGs UI UIデザイナー UIデザイン UX UXデザイナー UXデザイン Vision イベント インタビュー エンジニア オフィス テレワーク デザイナー データアナリスト バックオフィス ビジネス ホンレコ ワークショップ 人事 働き方 六一ランチ 六本木一丁目 内定式 採用 新卒 江幡 研修 社内イベント 社員インタビュー 社員紹介 社外インタビュー 福利厚生 移転 総務 編集者 考え方 趣味
  • medibaコーポレートサイト
  • seasorizeカンパニー

関連リンク

  • mediba Creator × Engineer Blog
  • seasorize ブログ
  • mediba編集部 note

© 2012 mediba inc.