ＷｅｂＶＲコンテンツ制作入門とか

１月１４日、
シン・Web VRとか文化祭
https://html5j-webplat.connpass.com/event/47239/
に午前中行ってきたので、その内容をメモメモ
（途中からなので、始め抜けている）

---

■【基調講演】WebVR とそれを支える技術

（途中から）

ＷｅｂＶＲ
　Ｗｅｂの特長を生かしたＶＲプラットフォーム
　　a-painter,
　　そのうち、シューティングゲームも

基盤技術：ＷｅｂＶＲ　ＡＰＩ
　表示、センサーの抽象化などの抽象化（オキュラスでもなんでも。。）
→それ以外にも必要
　ゲームパッドＡＰＩ
　ＷｅｂＧＬ：ＯｐｅｎＧＬのラッパー　ＷｅｂＧＬ３
　出力系：ＷｅｂＡｕｄｉｏＡＰＩ→空間音響

ＷｅｂＶＲ
２つやらないといけないこと
　・ヘッドセットの取得（ＨＭＤの取得）ナビゲーションの下にある関数で配列で取れる
　・アニメーションループ
　　６０fpsだと遅い（酔う）、１２０fpsで動かさないと→ちがった形で描画
Ｇｅｔポーズで、どこ向いてるかとかが取れる

関数呼んでワンショットでとる：最新の値をとるため
リンクトラバーサル：違うページにとばせる
　　Windowsオブジェクトのロケーションで飛べる→コレ使っている
　　ＶＲコンテンツによって、ロケーション先がきりかわらないといけない

モバイル用：

なにかつかう
　・Ｕｎｉｔｙ
　・playキャンバス
　・Ａ－フレーム：タグでＶＲコンテンツが作れる

　Ａフレーム：コンポーネントベース
　→エンティティが基本：特徴を付けていく

　コンポーネントの作成
　→コンポーネントレジストリ（Ｕｎｉｔｙのアセットスターみたいなもん）

　インスペクター
　すらっくがある
　Ａフレームのサイトにいくと今週面白いものみたいなのがある

まとめ
　YouTubeみたいなＶＲ→リンクを人に渡せば見れる

---

■ＷｅｂＶＲコンテンツ制作入門

・自己紹介
　JSだけでＶＲができる
　制作したコンテンツ

・今日のゴール
　ＷｅｂＶＲでコンテンツ作ってみよ！
　　→つくったことあるひと　５人

・俺の考えるＷｅｂＶＲとは
　昨年は、ＶＲ元年と呼ばれた：ＷｅｂＶＲもくる？
　→今年は幻滅期？
　ＶＲの成功・活性化はＷｅｂがかぎ
　がちＶＲに比べて、少しだけＶＲを使うことも出来る
　　ちょこっとＶＲ
　→ＥＣサイトの商品紹介をＶＲにする
　　Ａｍａｚｏｎ：ＶＲの人採用
　経験を検索して体験する　Ｇｏｏｇｌｅ

　ＶＲはＷｅｂでこそ活きる

　ハイパーリンクの仕組み

　ＷｅｂＶＲとネイティブＶＲは補完関係
　　映画館とＹｏｕＴｕｂｅ

・簡単に作るためのフレームワーク
　WebVR Boilerplate
　　モバイルにも対応してくれる three.jsしらない人（１、２人）
　A-Frame
　　タグを書くだけで出来る。ベースはthree.js
　Vizor
　　playキャンバスににているけど、３Ｄ専用
　　いきなりＵｎｉｔｙみたいな編集画面　ＶＲ向け

・ＷｅｂでＶＲやろう！
　基本はＷｅｂＧＬでレンダリング
　ＷｅｂＶＲ　ＡＰＩの出番はあまり多くない
　　頭の位置をとってくる→カメラの回転に与える：それだけ
　　表示する
　ＶＲコントローラーはＧａｍｅｐａｄ　ＡＰＩを使う

・ＷｅｂＶＲ制作入門
　今回はthree.js。ブラウザはＶＲモードを搭載していない
　　→ＷｅｂＶＲエミュレーター　ＧｅｔＶＲＤｉｓｐｌａｙｓ

app.js-----ここから、めもしきれていない----

(function(THREE){
'use strict';
let width=window.innerWidth;
let height = window.innerHeight;

しーんつくる
　let seane = new Three.Scene();
ぁめらつくる
let camera=new THREE.PersrectiveCamera(75,width/height)

scene.add(camera)

let renderer = new THree.webGLRenderer();
renderere.setSize(wirdth,heihght);
document body.appChile(きゃんばすつくる）

let loader = new Three,てくすちゃれんだらー
oader.load(・・・・あ);

let geo = じおめとり
let mat= まてりある

let sky = new

scene.add(sky)


function animate(){
　れんだらー。れんだー
　りくえすとあにめーしょんふれーむ
}

-----ここまで、めもしきれていない---

VRのことをしていない→カメラの位置

・これのＶＲ対応
　カメラのＶＲ化
　　let vrcontrolls

　アニメーションのところで
　　vrcontrolls.update();

　　vreffect→アニメーションのところのレンダらーを変える

・基本的にＷｅｂＧＬ（Ｔｈｒｅｅ．ｊｓ）でコンテンツを作る

---

■展示紹介
・テレビ朝日メディアぷれっくす
　試作品：ライトセーバー体験
・ＨＴＣ　ばいぶ
・ＴＭＣＭ　ほろれんず（らいしゅう）のかわりにきねくと
・ＨＴＭＬ５ｊ　たんごのじっき、とらんすこすもすさんのなんか
・ひるまさま　Ｕｎｉｔｙのパズルゲーム
・ＧＭＯクラウド　ホスティング
・どすぱら　ＷｅｂＶＲでも　Ａ　ｐａｉｎｔｅｒ