A-Frame を利用してキッチンの様子を VR モードで閲覧できるショーケース！デモ版は一般にも公開中

doxas : 2019-07-10 14:09:02

インタラクティブにオブジェクトに干渉も可能

今回ご紹介するのは、イギリスにある制作会社が作った WebVR に対応したキッチンの 3D ビューアです。

制作を行った Pikcells のサイトで公開されているもので、恐らくクライアントに納品したものとは別に、デモ版として一般にも公開しているものだろうと思います。

Oculus Go を使って実際に体験している様子がサイト内で動画として公開されていましたが、キッチンとかってテーブルの高さが少し変わっただけでも使い心地が変わってきそうですし、VR とは相性がいい題材かもしれませんね。

A-Frame という WebVR のためのフレームワークがありますが、今回のサイトはこれを利用して構築されているようですね。

A-Frame は XML のような、あるいは HTML のタグのような感じで、マークアップを行うとそのまま VR ビューができてしまうという非常に手軽なフレームワークですが……

一方で、しっかりとカスタマイズを行うこともできるようになっていて、今回の事例のようにちょっと手の込んだことも実現できるようになっています。

この、上の画像を一枚見せられただけでも、3DCG 慣れしているひとであれば、いろいろなことがわかるのではないでしょうか。

たとえば、3D 空間に浮いているアイコンの部分は DOM ではなく 3D のジオメトリとして空間に配置されていて、ポイントスプライトでもなく、普通に板ポリですね。

また、光源からの光、及び影はベイクされたもので、テクスチャにあらかじめ陰影が焼き付けられた状態のものを使っていると思います。

大量のテクスチャを使っている感じがしますが、それにしてはロードは比較的スムーズです。

また、操作もかなり直感的で、迷ってしまうようなことはほとんど無いのではないかなと思います。VR 作品として作られていることも、そのあたりは良い意味で作用しているのかもしれません。

一部の棚や引き出しには、クリック等の操作で変化を与えることもできるようになっています。

実際に引き出しが開いたときの通路の隙間は十分か……といったことも、VR 体験であれば直感的に把握できそうでよいですよね。

Oculus Go のようなスタンドアロンの VR 機器が徐々に浸透してきている昨今では、こういった形でショールーム的な、あるいはショーケース的なデモを制作したいという需要は結構ありそうな気がします。

A-Frame を使うことで、3D 描画を行う足回りの部分の実装工数を削減しつつ、コンテンツの中身に、より注力した形で制作を行うことができるので、自社で 3D モデルやテクスチャを準備できる企業であればこういった事例から学べるものが多くあるのではないでしょうか。

3DCG の品質としては、最先端のゲームやプロダクション映像と比較したら、お世辞にも品質が高いとは言えないかもしれませんが、WebGL の事例としては工夫が凝らされていてなかなかキレイに仕上がっていると思います。