{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"96c4d80a-9bd7-527a-a593-6c037913609f","html":"

\n \n \n \n \n \n \n \nWebVRのサンプル集

\n

まずは、手軽に体験できるWeb上のVR作品のリンクを紹介します。
\n※インタラクティブなコンテンツの場合はVRデバイスが必要です。

\n

\n \n \n \n \n \n \n \nSueprMedium

\n

SuperMeidumはMozillaの元エンジニアが作成したVRブラウザです。
\nOculusStoreやSteamStoreで無料でインストールできるVRアプリです。
\nURLを直に入力してサイトを試すこともできますが、あらかじめホーム画面に厳選されたサイトが並んでおり、クリックすると実行できます。
\nコンテンツをやめたい場合は、右コントローラーのスティックを下方向にしばらく押し込むとホームに戻れます。

\n

\n \n \n \n \n \n \n \nWebVR Direcctory

\n

WebVR Directoryというサイトでは、様々なVRサイトが一覧で表示されます。私は、Oculus RiftでバーチャルデスクトップごしのFirefoxからアクセスしました。各ページへ移動し、CardoboardアイコンをクリックするとVRモードに切り替わります。
\nコンテンツによっては終了ボタンがないので、Oculusボタンを長押しして無理やり起動中のアプリを終了することで抜け出すことができました。
\nSuperMediumから見れるようですが、URLを入力してもなかなか表示されなかったので断念しました。

\n

\n \n \n \n \n \n \n \nVRコンテンツの正体

\n

コンテンツ制作の前にVRの正体について話しておきます。\nVRコンテンツとは以下の特徴を持ったコンテンツのことを言います。

\n\n

VirtualReality(仮想現実)というと大げさに聞こえますが、その実態は、左右の目それぞれからみた視点の異なる映像をVRデバイスに出力しているだけです。
\n２つの映像を脳が処理し一つの映像のように見せることで遠近感、立体感が増します。

\n

そして、顔の傾き体の動き、手や指の動作をセンサーが検知し、体を動かせば視点が変わり、腕を振れば映像の中のモデルも腕をふるようにつくることで、あたかも仮想現実の中にいるように錯覚します。

\n

リアルタイムで3Dコンテンツを処理するデバイスの能力、自分と周囲の状況を把握するセンサーの技術の発達により、近年どんどん没入感がますようになってきています。
\n今後はより解像度や、デバイスの小型化が進み、発達していく分野でしょう。

\n

\n \n \n \n \n \n \n \nWebにおけるVRコンテンツの制作について

\n

WebでVRコンテンツを作る簡単な方法はライブラリを使用することです。
\nライブラリが前項の2画面出力やデバイス情報の取得を補ってくれて、製作者は3D空間上のコンテンツ制作にのみ集中することができます。

\n\n

Three.js(Gihubスター数55156)の対抗馬としてBablylon.js(スター数10212)が、A-Frame(スター数10542)にはReact 360(7576)があります。
\n2019年10月現在では、Githubのスター数や実績の多さからみて、Three.js、A-Frameが代表的なライブラリと言えるでしょう。

\n

\n \n \n \n \n \n \n \nThree.js

\n

Three.jsはそのままではVR対応できませんが、たった数行で対応することができます。
\nやり方は、公式サイトのVRページにかかれています。
\nこちらの方がカスタマイズ性や自由度が高そうですが、3Dの基礎を理解していないと敷居が高いかと思います。
\nライト、ジオメトリ、マテリアル、メッシュ、カメラ、マッピング、このあたりのワードが理解できる方は簡単に始めれるでしょう。

\n

\n \n \n \n \n \n \n \nA-Frame

\n

redditのWebVRに関する質問でもどのフレームワークがいいか質問が上がっていますね、A-Frameに軍配が人気のようです(MozillaのVRチームもGoogleのA-Frame使っているそうです)。

\n

まだ、さらっとドキュメントを見ただけですが、Introductionのページに以下のHTMLがあります。

\n
<html>\n  <head>\n    <script src=\"https://aframe.io/releases/0.9.2/aframe.min.js\"></script>\n  </head>\n  <body>\n    <a-scene>\n      <a-box position=\"-1 0.5 -3\" rotation=\"0 45 0\" color=\"#4CC3D9\"></a-box>\n      <a-sphere position=\"0 1.25 -5\" radius=\"1.25\" color=\"#EF2D5E\"></a-sphere>\n      <a-cylinder position=\"1 0.75 -3\" radius=\"0.5\" height=\"1.5\" color=\"#FFC65D\"></a-cylinder>\n      <a-plane position=\"0 0 -4\" rotation=\"-90 0 0\" width=\"4\" height=\"4\" color=\"#7BC8A4\"></a-plane>\n      <a-sky color=\"#ECECEC\"></a-sky>\n    </a-scene>\n  </body>\n</html>
\n

HTMLとしてみても、非常にわかりやすくとても使いやすそうです。
\n面白そうなので、次回記事にしたいと思います。

","fields":{"slug":"/2019-10-09_WebにおけるVRコンテンツ制作について/"},"tableOfContents":"","frontmatter":{"date":"2019.10.09","title":"WebにおけるVRコンテンツ制作について","cover":"","category":"Coding","excerpt":"WebにおけるVRコンテンツの正体とサンプルサイト、VRのJavaScriptライブラリを紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"96c4d80a-9bd7-527a-a593-6c037913609f","next":{"path":"/2019-09-29_vrの雑感とwebエンジニアリング目線のvr/","title":"VRの雑感とWebエンジニアリング目線のVR","category":"Coding"},"prev":null,"relatedPosts":[{"id":"7c296716-643d-52a9-9ff4-a82894e50453","fields":{"slug":"/2019-09-29_vrの雑感とwebエンジニアリング目線のvr/"},"frontmatter":{"title":"VRの雑感とWebエンジニアリング目線のVR","date":"2019-09-29T00:00:00.000Z","excerpt":"最近Oculus Rift Sを購入したので、VRについて、特に酔うということに関して、そしてWebエンジニアリングという観点でもろもろ感じた感想を紹介します。","templateKey":"post","category":"Coding","propertags":null,"commontags":["vr","webvr"]}}]}}