• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

WebVRはじめてみませんか?〜第1回 WebVRとは〜

2018年3月16日

  • このエントリーをはてなブックマークに追加

こんにちは!
デザイナーの伊東(@ALAKIWebVRAR1)です。

※TwitterでもWebARの事を中心に情報発信中!
よかったらフォローお願いしますm(_ _)m
Follow @ALAKIWebVRAR1

Web界隈のテクノロジーの進歩は凄まじく、日々新しいサービスや技術が生まれています。
“VR”という言葉もここ数年でよく耳にするようになりましたが、今回はWebVRという技術にスポットライトを当てたいと思います。
実は、ALAKIでは、数カ月前からWebVR案件の問い合わせを頂いており、WebVRの開発に着手しています。

なかなか深い内容なので、数回に分けてお届けします。
第一回目は”WebVR”のさわりの部分をご紹介できればと思いますので、最後までお付き合いよろしくお願いいたします。

この記事の目次

  • 1 WebVRとは
  • 2 WebGLについて少しだけ
  • 3 WebVRが動く環境
    • 3.1 PC環境
    • 3.2 スマホ環境
  • 4 WebVRを実装するためのフレームワーク
    • 4.1 WebVR Boilerplate
    • 4.2 A-Frame
    • 4.3 Vizor
  • 5 少しだけ触ってみる

WebVRとは

広義で”WebVR”とは、Webブラウザ上でVR(バーチャルリアリティ)体験を提供することを言います。
もっと具体的に、以下の仕様で作られたVRコンテンツのことを指す場合もあるようです。

  • HTML + Javascriptで作成
  • 3Dグラフィックを作成するために、WebGLを利用

WebGLについて少しだけ

ブラウザ上で3Dグラフィックを表示させるための標準仕様のことをさします。
このWebGLを比較的簡単に実装するためのJavascriptプラグインが”Three.js“です。
WebVRを実装するためには、基本的にThree.jsを使用して制作するのが主流です。
WebVRの技術は日々進歩しており、つい先日まで動いていたコードがバージョンアップにより動かない、なんてこともあり得るようです。新しい情報をしっかり追う必要があります。

WebVRが動く環境

現時点で、WebVRが動く環境は大きく分けて2つです。

PC環境

  • 端末
    PC + Oculus Rift / HTC vive
  • 対応ブラウザ
    Chromium / Firefox Nightly (現在この2種類)

スマホ環境

  • 端末
    iPhone / Android端末 + スマホ向けVRゴーグル
  • 対応ブラウザ
    なんでもOK

WebVRを実装するためのフレームワーク

先ほどThree.jsを使用してWebVRを実装するとご説明しましたが、Three.jsを簡単に記述できるようにしたフレームワークが存在します。
もちろん生のThree.jsのコードを書いてもいいのですが、フレームワークを使用することでもっと手軽に実装することができます。

WebVR Boilerplate

Three.jsを直書きするのに近い感覚でVR制作を行うことができます。Three.jsの記述に慣れている方にはおすすめかもしれません。下記のGitHubのURLからサンプルプロジェクトをダウンロードできます。

https://github.com/borismus/webvr-boilerplate

A-Frame

ブラウザのFireFoxなどで知られるMozilla社が開発しているフレームワークです。
その特徴は、HTMLのタグを記述するような感覚でWebVR開発を行える点です。
Webデザイナーの方が初めてWebVRに挑戦する、という場合にはとっつきやすいと思います。
下記のURLからソースコードをダウンロード可能です。

https://aframe.io/

Vizor

上記の2つがフレームワークなのに対し、このVizorは開発環境になっています。新規プロジェクトを作成すると、複数のオブジェクトがすでにセットされた状態で開発を進めることができます。
直感的に開発を進めることができるようですが、日本語で解説しているドキュメントは少ないです。

https://site.vizor.io/

少しだけ触ってみる

今回はWebVRの大まかな概要と、その実装方法や閲覧環境について書きました。
最後に、実際にWebVRがどういったものかというのを体験していただくため、サンプルをご用意しました。
先ほどご紹介したVizorを利用して実装しています。
※スマホでご確認ください!

https://vizor.io/itonao/alaki/

 

WebVRは、今後ますます注目される技術になると言われています。このブログで少しずつ記事を投稿しながらみなさんに情報を共有していきます!
次回もよろしく願いします。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2018-03-16 0.37.47

    WebVRはじめてみませんか?〜第4回 サンプルで学ぶA-Frameの使い方〜

    11 6月, 2018

  • スクリーンショット 2018-03-16 0.37.47

    WebVRはじめてみませんか?〜第2回 three.jsを使って3Dに触れる〜

    1 4月, 2018

  • スクリーンショット 2018-11-29 23.56.53

    blender2.8を使って3Dオブジェクトにアニメーションをつける方法〜part.1〜

    30 11月, 2018

デザイナー募集
  • Next story .gitignorがないのにファイルがコミットできないときの対処方法
  • Previous story Webサイトに動きを!グリッチエフェクトを実装する「CSS Glitch Effect」

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

弊社サービス

MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。 広報活動の課題を数字で可視化し、出願者数アップをお手伝いします クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

人気の記事

  • woman-desk

    未分類

    リモートワークでインタビュー動画を撮影する際の5つのコツ

    3 2月, 2022

  • main-visual

    AR

    実務で使うWebARのチェックポイント

    10 12月, 2021

  • 5050691_s

    未分類

    Web制作の現場から、JavascriptやPHPの「デバッグ」について考える

    14 9月, 2021

  • スクリーンショット 2021-07-10 9.04.44

    未分類

    AR(WebAR)の導入事例をご紹介!〜EC × AR〜

    10 7月, 2021

  • アセット 1@2x-100

    AR

    AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

    25 6月, 2021

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

アーカイブ

  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • リモートワークでインタビュー動画を撮影する際の5つのコツ
  • 実務で使うWebARのチェックポイント
  • Web制作の現場から、JavascriptやPHPの「デバッグ」について考える
  • AR(WebAR)の導入事例をご紹介!〜EC × AR〜
  • AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 色

検索

ALAKI株式会社 © 2022. All Rights Reserved.