WebVR - 雪を降らせてみた

14484 ワード
JavaScript WebVR VR JavaScript テキストリンク

この記事は J2complexed Advent Calendar 2016 の8日目です。
（いつもどおり遅れていますすみません）

クリスマスに雪が降ると雰囲気がありますよね。
でも、寒いのイヤじゃないですか。なので、WebVRで雪を振らせてみようと思います。
WebVRなら雪が降っているのも共有できるし、なによりJavaScriptなら怖くないですね！

Web Boilerplateを準備

最近は開発をするときにはボイラープレートを検索するようにしてます。楽がしたいので！
やっぱり、ありましたよ。
WebVR Boilerplate
さくっと準備しましょう。

$ git clone https://github.com/borismus/webvr-boilerplate.git
$ cd webvr-boilerplate/
$ npm init
$ npm i lite-server

Web Boilerplateが動くか確認

まず、動くか確認するためにlite-serverを入れます。静的ページを動かせれば、なんでもいいですよ。最近はlite-serverを使ってるので、これで説明しますね。

$ npm init
$ npm i lite-server

package.jsonに以下を書き込んでください。

  "scripts": {
    "start": "lite-server"
  },

それから、設定のファイルを用意します。

bs-config.json
{
  "port": 8000,
  "files": ["./webvr-boilerplate/**/*.{html,htm,css,js}"],
  "server": { "baseDir": "./webvr-boilerplate" }
}

あとは、以下のコマンドを打てば、ブラウザが起動します。

$ npm run start

こんな感じで箱がぐるぐるしてます。でましたか？

ソースを確認

index.htmlを見てみましょう。なんてことはありません。three.jsで書いてるんですね。
WebVRとか、難しそうとか思ってたけど、three.jsなら怖くないですね。

scriptタグの中身を順に見ていくと、こんな記述を見つけると思います。

var controls = new THREE.VRControls(camera);
controls.standing = true;
controls.standing = true;

// Apply VR stereo rendering to renderer.
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

VRとか変数についていたりするのは、触らずにそっとしておきましょう。
まとめたり、整理整頓したりすると、こんな感じでしょうか。

// レンダラをつくる
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// Sceneをつくる
var scene = new THREE.Scene();
// Cameraをつくる
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 10, 30000);

// VR用のコントローラをつくる
var controls = new THREE.VRControls(camera);
controls.standing = true;
controls.standing = true;
// VR用のエフェクトをつくる
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

var vrDisplay;

// VRマネージャをつくる
var params = {
  hideButton: false,
  isUndistorted: false
};
var manager = new WebVRManager(renderer, effect, params);

// このなかでマテリアルをつくったりする
setupStage();

window.addEventListener('resize', onResize, true);
window.addEventListener('vrdisplaypresentchange', onResize, true);

// このなかでアニメーションさせる
function animate(timestamp) {
  controls.update();
  manager.render(scene, camera, timestamp);
  effect.render(scene, camera);

  vrDisplay.requestAnimationFrame(animate);
}

function onResize(e) {
  effect.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
}

function setupStage() {
  navigator.getVRDisplays().then(function(displays) {
    if (displays.length > 0) {
      vrDisplay = displays[0];
      vrDisplay.requestAnimationFrame(animate);
    }
  });
}

あとは雪が降るアニメーションをつくるだけなので、省略します。

公開作業

Herokuにアップして公開をしたいと思います。Herokuに静的ページをアップする方法はそこらで説明されていると思うので、簡単な説明のみにしておきます。
まず、以下をダウンロードします。

$ git clone https://github.com/nulltask/heroku-static-provider.git webvr-snow

その次に、Herokuのappを作っておきます。そしたら、Herokuにログインしてください。

$ heroku login

あとは、Herokuに載っているとおりにコマンドを入力します。

$ cd my-project/
$ git init
$ heroku git:remote -a webvr-snow
$ git add .
$ git commit -am "make it better"
$ git push heroku master

できました！

WebVR Snow
※ スマホで見てほしいです

雪の結晶はこちらから頂きました。ありがとうございます！
雪の結晶素材 ｜ シルエットデザイン

まとめ

いかがでしょうか、これでロマンチックなクリスマスを迎えられるのではないでしょうか。（VRだけどね）