[ポートフォリオ]クリエイティブテクノロジープログラム無しでもWebVRが実現出来る!試してみよう「A-Frame」プログラム無しでもWebVRが実現出来る!試してみよう「A-Frame」2016年10月24日2018年1月17日テクノロジーmatsudaTwitterFacebookはてブPocket今年のVRの盛り上がりは留まるところを知らず、連日のニュースや新聞でも様々な業種やビジネスでのVRの話題が数多く飛び交っております。ハードウェア・ソフトウェア共に将来性の期待できる商品が生まれてきており、今後もますますVRの進化が進んでいくことが予測されます。これだけ注目をされているVRですが、Web制作業界ではWebVRという言葉がようやくちらほら使われ始めてきたものの、まだまだWebサイト上でVRコンテンツが有効活用されるような魅力的な事例も少なく、業界としてVRの活用はこれからに期待といったところでしょう。これまでWebGLやThree.JSなどHTML5を活用したフレームワークは出てきていたもの、Web上でVRコンテンツを作る場合ためには、3Dプログラミングなどの専門的な知識が必要となるため、Web制作を専門に制作している人達にとっては導入に当たって一つの障壁になっておりました。VRチームから発表されたA-Frameでは、HTMLタグベースでWeb上に3Dコンテンツを配置できるフレームワークを提供しており、専門的なスキルが無くても容易にWebVRコンテンツを作成することが可能となりました。Three.jsをベースとしているため、速度面やクオリティについても信頼できる性能をもっており、今後のWebVR用ツールのデファクトスタンダードとしてWebVR制作を先導していくでしょう。Webサイト今回は、このA-Frameを実際に使って、超簡単にプログラミングレスWebVRコンテンツを作ってみましょう。A-Frameのライブラリをダウンロードします。A-Frameのサイト(https://aframe.io/)からGitHub上のjsファイル(aframe-v0.3.0.min.js)をダウンロードしましょう。次にVR背景に利用する360度パノラマ画像を用意します。amanaimages.comの写真・イラスト素材(http://amanaimages.com/photo/)から「VRパノラマ」と検索してみましょう。いくつかのVRパノラマ画像が表示されますので、その中から気に入った作品を選択して、作品の詳細画面のカンプデータをダウンロードしましょう。必要な素材はこれだけです。後は、以下のHTMLを書きますが、たったこれだけです。なんとこれだけで、VRコンテンツとして使えるようになるのです。/amanaimages次に、3DモデルデータもVRコンテンツに掲載してみましょう。3Dモデル素材の無料サンプルは下記の記事を参考にしてみてください。好きなサンプル素材をダウンロードしてみましょう。A-Frameで利用できるモデルデータはOBJ形式となります。A-Frameで利用できるテクスチャデータはPNGなどのブラウザで表示できる画像のみとなります。先ほどのHTMLにモデルデータの宣言を追加してみましょう。なんとこれだけのタグを記載するだけで先ほどの風景の中に3Dモデルデータを表示することができました。/amanaimages今回は、A-Frameを使ってプログラムなしでWeb上にVRコンテンツを作成してみました。VRコンテンツは様々な分野で広がりを見せておりますが、どうしても作成するのに特別なスキルを必要としていました。A-Frameのようなツールを活用することで、WebVRの実現が容易になります。今回はA-Frameのさわりだけをご紹介しましたが、A-Frameは今回以外にも様々な機能が備わっております。皆さんのWeb制作における表現方法の一つとして活用してみてはいかがでしょうか。オンラインコミュニケーション事業部アマナイメージズのシステム担当として、様々なサイトやシステムの開発をしたり、ビールを飲んだりしている。最近ではベトナムにオフショア開発体制を構築し、現地エンジニアと新たなシステム開発の促進と、ビールを飲んだりしている。amanaimages」は、日本最大級のストックフォト・動画素材販売サービス「アマナイメージズ」がお届けするクリエイター向けWebマガジンです。クリエイティブに役立つ情報やクリエイターインタビューなどのコンテンツを配信しています。下記お問い合わせページよりご連絡ください。