WebVRコンテンツ制作入門

@2017.01.14 比留間和也
WebVR
コンテンツ制作入門

比留間和也
@edo_m18 @edom18

WebVRについての記事書きました

マックスむらいのVRホラーダンジョン

https://www.youtube.com/watch?v=PhwSsKcZthU
Another Planets

https://youtu.be/yKwo-_hDrpI
Dragon Breaker Z

WebVRで
コンテンツ作ってみよ
！

って思う人が増えること

WebVRとは？
俺の考える

昨年はVR元年と呼ばれた

様々なHMDが発表、
発売されまさにVR戦国時代

やがてその流れはWebにも
WebVRの概要についてはMoziilaの清水さんの
話しの通りなので仕様などの詳細は割愛

今後、VRは流行るのか？

VRの成功・活性化は
Webが鍵
あくまで個人的考えですが

ガチVRに比べて、少しだけ
VRを使うこともできる
ちょこっとVR

ECサイトの
商品紹介をVRにする

https://shopifyvr.myshopify.com/pages/virtual-reality
Shopify

「経験」を検索して
「体験」する

WebVRコンテンツ制作入門

記事: グーグルのVR注力から予測する、「経験」を検索できる未来

WebにもVR活用の
ネタはたくさんある

むしろ、VRは
Webでこそ活きる

WebVRコンテンツ同士を
HyperLinkでつなぐなんて話も

https://blog.mozvr.com/connecting-virtual-worlds-hyperlinks-in-webvr/

WebVRとネイティブVRは
対立関係ではなく補完関係にある
と思ってます

そろそろ興味出てきたでしょ？

簡単に作るための
フレームワークも色々出てき
た

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

基本はWebGLでレンダリング

WebVR APIの出番はあまり多くない

VRコントローラは
Gamepad APIを使う

今回はThree.jsでやってみます

let width = window.innerWidth;
let height = window.innerHeight;
let renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

let aspect = width / height;
let camera =
new THREE.PerspectiveCamera(75, aspect, 0.1, 100);
let scene = new THREE.Scene();

let skysphereLoader = new THREE.TextureLoader();
skysphereLoader.load('img/bg_skyplane.png', (texture)
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(4, 4);
let geometry =
new THREE.SphereGeometry(5000, 128, 128);
let material =
new THREE.MeshBasicMaterial({
map: texture,
color: 0xffffff,
side: THREE.BackSide
});
let skysphere = new THREE.Mesh(geometry, material);
skysphere.position.z = 0;
scene.add(skysphere);
});

let earth = new THREE.Object3D();
let earthLoader = new THREE.TextureLoader();
earthLoader.load(‘img/earth.jpg',
(texture) => {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
let geometry =
new THREE.SphereGeometry(0.3, 32, 32);
let material =
new THREE.MeshLambertMaterial({
map: texture,
color: 0xffffff
});
earth = new THREE.Mesh(geometry, material);
earth.position.z = -1;
scene.add(earth);
});

let light = new THREE.DirectionalLight(0xffffff);
light.position.set(1, 1, 1);
scene.add(light);

let lastRender = 0;
const animate = (timestamp) => {
var delta = Math.min(timestamp - lastRender, 500);
lastRender = timestamp;
earth.rotation.x += delta * 0.000015;
earth.rotation.y += delta * 0.000025;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};

animate(performance ? performance.now() : Date.now())
document.getElementById(‘VRBtn').addEventListener('cl
(e) => {
vreffect.requestPresent(
[{source: renderer.domElement}]
);
}, false);

シーンセットアップ完了

Three.jsの場合はプラグインで対応

WebVR対応するための
コードを足してみる

let width = window.innerWidth;
let height = window.innerHeight;
let renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
let vreffect = new THREE.VREffect(renderer);
vreffect.setSize(width, height);

let aspect = width / height;
let camera =
new THREE.PerspectiveCamera(75, aspect, 0.1, 100);
let vrcontrols = new THREE.VRControls(camera);
let scene = new THREE.Scene();

Three.jsの場合はたったこれだけ

さぁ、WebでVRをやろう！

ご清聴ありがとうございました

WebVRコンテンツ制作入門

More Related Content

WebVRコンテンツ制作入門