WebVR Tokyo Meetup vol2

WebVRWebGL Tokyo Meetup #2

自己紹介

面白法人カヤック 技術部／比留間 和也

WebVRって 知ってますか？

そう

Oculus Rift

これが普通のWebサイト で実現できちゃいます

ぶっちゃけ やってることは

ふたつのカメラで 撮影して（視差）

【1】

画面分割して描画

【2】

レンズ補正用に 歪ませる

【3】

たったこれだけ

シェーダがいじれる WebGLならもちろん可能

よく見るやつ

右のを重ねるとちょっと違う

右のを重ねるとちょっと違う

仕組み

レンズ補正

レンズ補正http://game.watch.impress.co.jp/docs/series/vrgaming/20150601_704716.html

要はよく見るこういうやつのすごい版

How can I do it?

Use Three.js

Let’s do it!

// Screen size var SCREEN_WIDTH = window.innerWidth; var SCREEN_HEIGHT = window.innerHeight;

// Create a renderer var renderer = new THREE.WebGLRenderer({antialias: true});

// Create a camera var fov = 75; var near = 0.1; var far = 1000; var aspect = SCREEN_WIDTH / SCREEN_HEIGHT; var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

// Setting up VR controller and effect var controls = new THREE.VRControls(camera); var effect = new THREE.VREffect(renderer); effect.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

セットアップはこれだけ

これが

こうなるhttps://www.youtube.com/watch?v=sZvQ_RslvuE&feature=youtu.be

実機DEMO

One More Thing

Oculus Rift製品版 2016年初旬 発売

http://www.4gamer.net/games/195/G019528/20150506001/

推奨スペック

http://www.gizmodo.jp/2015/05/oculus_rift10.html

http://www.gizmodo.jp/2015/05/oculus_rift10.html

• NVIDIA GTX 970／AMD 290以上

• Corei5-4590以上

• RAM 8GB以上

• HDMI 1.3ビデオ端子対応

• USB 3.0ポート x2

• Windows 7 SP1、またはそれ以上

ちょっとお高い( ;́Д`)

でも少し希望が

http://game.watch.impress.co.jp/docs/series/vrgaming/20150601_704716.html

GameWorks VR

VR用にGPUのドライバレベルで最適化する手法

多少安価なPCでも 動作するかも

製品版Oculus Rift楽しみ！

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