hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

トップ > WebVRで作品を作って展示しよう

WebVRで作品を作って展示しよう 

プレゼンモード
再生
← / →で移動
fでフルスクリーン
escでおわる

こんにちは，id:hitode909です．YAPC::Tokyo 2019において，「WebVRで作品を作って展示しよう」というお題で発表しています．この記事は，その発表資料です．

WebVRで作品を作って展示しよう

YAPC::Tokyo 2019
株式会社はてな hitode909

この発表

アジェンダ

  • WebVRについて、フレームワークや開発方法について
  • 普通のウェブ空間から連続的にVR空間に向かうためのアプローチ
  • デバイスを安定して展示するためのノウハウ
  • 物理的な展示におけるグロースハック

ゴール

  • WebVRを使ったVR作品を今すぐ作れるようになる
  • WebVRを使ったVR作品をイベントで展示できるようになる

🖐

  • 開発経験
    • Web
    • VR
    • WebVR
  • 便利さ
    • 役立つアプリケーション
    • 役に立たないアプリケーション
    • 両方

自己紹介(1)

  • hitode909
  • 株式会社はてな アプリケーションエンジニア
    • ブログチーム→マンガチーム、CTO室
  • 便利なものを作るのが好き

自己紹介(2)

  • おもしろいもの(=作品)を作るのが好き
    • 役に立たないプログラム、絵が出るプログラム、音が出るプログラム
  • 完成した先に便利さが待っていないソフトウェアの開発
  • ジェネラティブ・アート
    • [普及版]ジェネラティブ・アート―Processingによる実践ガイド
    • コードを書いて生成的にお絵かきする
  • Processingの学習

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20171012/20171012155011.png

https://blog.sushi.money/entry/2012/12/29/175658
  • Processing.jsで年賀状

f:id:hitode909:20190116210611p:plain

https://hitode909.appspot.com/2013/
  • はてなインターンのJavaScriptの講義でマウスストーカーを作る課題を出した

日本の伝統的アプリケーション「マウスストーカー」を作れ

マウスストーカーとは

  • ホームページに配置してホームページを楽しくするアプリケーション
https://github.com/hatena/Hatena-Textbook/blob/public2014/javascript-event-driven.md#課題2

今日は、完成した先に便利さが待っていない、人の暮らしを楽しくする作品の話をします

なぜVR

  • 近年、VR元年が続いている
    • ゾンビのゲーム、ジェットコースター、VTuberの台頭
      • ふだんゲームしないので敷居が高い
  • 2017年8月、WebVRの存在を知る
  • ちょっとしたものを作り始める
  • 2018年11月、本の販売イベントでWebVRを使った展示
  • 2019年1月、皆様に面白さを伝えている

WebVRについて

f:id:hitode909:20190116213132p:plain

WebVR API | MDN
  • ブラウザ上でVRコンテンツを表示できる
  • 立体映像との違い=首の動きに応じて映像が変わる
    • カメラで首の向きを取得する手法や、ヘッドマウントディスプレイにセンサーを入れる手法
  • 最近のスマホなら動く、Oculus Goなど専用デバイス(ヘッドセット)があるとより楽しい
  • 直接実装する場合、WebGLを使っていく
  • 簡単に実装するためのライブラリがある
    • 主にこっちの話

デバイス

PC、スマホ
  • スマホ単体では立体には見えない
Google Cardboard

f:id:hitode909:20190117002355p:plain

Google Cardboard – Google VR
  • お手元のスマホを差し込んで使う
  • 立体感はそれなり、遊びには十分
Oculus Go

f:id:hitode909:20190117002827p:plain

https://www.oculus.com/go/
  • 2万円で買える、中身はAndroidベース
  • ちゃんと立体に見えて感動する
  • アプリ作るか、ブラウザで表示する

簡単にWebVRを使うためのグッズ

  • React 360
  • AWS Sumerian
  • A-Frame

React 360

  • Facebook製、旧称 React VR
  • Reactの世界観で3D世界を作れる
  • react-360 init Hello360するとプロジェクトの雛形ができる、npm startでサーバー起動
  • なんでもJSXで書きたい人にはおすすめだけど、気軽に遊びに使うには重厚
render() {
  return (
    <View style={styles.panel}>
      <View style={styles.greetingBox}>
        <Text style={styles.greeting}>
          {`Count: ${this.state.count}`}
        </Text>
      </View>
    </View>
  );
}

https://facebook.github.io/react-360/docs/explore-code.html

  • 同僚の部屋をVR空間上に構築

Amazon Sumerian

  • Amazon製のブラウザで動くUnityみたいなサービス リッチなGUIの開発環境
  • 自立して動くキャラクターを作るための機能が充実している
    • キャラクターの状態遷移を作る
    • 対話ロジックをAWS Lambaで書いて、Amazon Pollyで喋らせる
  • キャラクターが登場するような、会社紹介とか、採用ページとかVRで作りたいならおすすめ
  • これも同僚の部屋を作って満足

A-Frame

  • Mozilla製、とにかく簡単
  • CDNからscriptタグでロード、ペライチHTMLで実装
    • a-sceneタグでシーンを作る、a-boxで箱が出る
    • Custom Elementsで実装されている
      • HTMLなのでビルド不要
  • 手早く作るのにオススメ
    • 今日は主にこれ
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

A-Frame 練習

f:id:hitode909:20190116235141p:plain

できること

  • 3D空間にオブジェクトや画像を配置
  • アニメーション
    • 自分でループを書かなくて済む
    • 毎フレーム計算したいような場合は自分でJSを書く
  • DOM操作
    • JSからappendChildするとオブジェクトが表示される
  • HTMLを描画する
  • ポインティングデバイスの利用
    • VRお絵かきアプリとか作れる

A-Frame ローカル開発、デプロイ

  • 単なるHTMLなので普通にファイルを置く
  • ローカルでポートを立てて起動
  • 外部と通信するため、ngrokも立てておくと便利
    • お手元のスマホやヘッドマウントディスプレイからアクセスして確認できる
python -m SimpleHTTPServer 3100 & ngrok http 3100

WebからWebVRへ

  • 普通のウェブ開発と同じこと、違うこと、アプローチ

Webから引き継げる

  • 絵を出せる
    • 音だけの世界に行くよりは敷居が低い
  • ポインティングデバイス
    • ボタンをクリックとかUIを作れる
  • imgでの画像読み込み
    • これまで親しんだ画像ファイルを使える
  • HTMLのレンダリング
    • canvasを経由して文字も出せる
  • ブラウザAPI
    • 現在位置と対応したコンテンツ
    • カメラの入力をVR空間に表示するとか
    • デスクトップ通知も送れる(使いみちは不明)
  • デベロッパツール
    • このリソースが重いとかキャッシュ効いてないとか勘所は変化なし
  • fetch、XHRを使った外部APIとの通信
    • 無限の可能性
    • VRからWebVRに入る場合と比べると、インターネットとつながっている既存のAPIに慣れ親しんでいることは強み
  • 開発フロー
    • GitHubを使ったコード管理、デプロイ、CDN通す、facebook OGP対応、とか

WebVRで獲得できる

  • 3D空間
    • 2Dのウェブページにはない世界
    • 世界をすべて作れる、フチがない、終わりがない
  • メートル法
  • 急に身体性が増す
    • 「ファーストビュー」「スクロールすると」から「上を見ると」「見回すと」に変わる
    • カメラの高さをどこに置くか 失敗するとすごく背が高くなったように感じたり
  • パノラマ写真を活用できる
    • RICOH THETA、スマホのパノラマモード、などで撮った写真を背景に貼れる
    • パノラマ写真にPANORELLA以来の使い道ができた
      • f:id:hitode909:20190117003348p:plain:w200 f:id:hitode909:20190117003400p:plain:w200
    • flickrのパノラマ写真が集まるグループ

アプローチ

安直に考えると

  • 機能から考える
    • 例：VRプレゼンツール、VRカレンダー、VR天気予報、VR YAPCタイムテーブル、…
  • せっかく世界を作れるので、場所から考えてみる
    • 同僚の部屋を作る→VR MASAWADA HOUSE

あなたもWebVRコンテンツを作れるようになりました(ここまでで13分、15:43くらいの想定)

  • 展示しようとすると別の苦労がある
  • 昨年やったイベントの展示の実例をご紹介

TRANS BOOKS 2018

ボツ案

VR本屋
f:id:hitode909:20190117004948p:plain

豆本夢日記

  • ブログに7年間、200日分くらい夢の記録を書いていたので、製本することにした
  • 夢なので、布団にはさまって寝ているという世界観

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20181117/20181117132731.jpg
https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20181117/20181117132727.jpg

VR夢日記

  • https://yume.sushi.money/
  • VR空間上でひたすら夢日記を読める作品
    • せっかくのVRなのに文字を読まされる
  • がんばって文字を読んでいると、布団に入って就寝している男性がカメラに向かって飛んでくる
    • ペラペラのオブジェクトと衝突して突き抜ける体験
  • 背景はflickrで探してきたフリー素材の空間
    • ライセンスを書く場所がない問題
  • 本のしおりにURLとQRコードが書かれていて、スマホで遊べる

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20181127/20181127140104.gif

構成

  • A-Frame
  • S3+CloudFront
  • 夢日記データはブログのフィードをXHRで取得
    • 200記事あるので無限に読める
  • １文字ずつcanvasに書き出し→画像に読み込んで表示
  • 寝てる男性は敷布団、枕、男性、掛け布団、の4枚の画像で構成し、a-animationで動かす
    • entityで囲って、a-animationを置くと、まとめて動かせる。HTML感
<a-entity>
  <a-image src="#bed1" width="1.704" height="2.612" opacity="1.0" position="0 -0.8 0.0" rotation="90 180 0"></a-image>
  <a-image src="#bed2" width="0.941" height="0.471" opacity="1.0" position="0 -0.5 -0.9" rotation="90 180 0"></a-image>
  <a-image src="#bed3" width="0.791" height="0.945" opacity="1.0" position="0 -0.2 -0.6" rotation="90 180 0"></a-image>
  <a-image src="#bed4" width="1.517" height="1.935" opacity="1.0" position="0 -0.0 0.3" rotation="90 180 0"></a-image>
  <a-animation attribute="position"
    dur="20000"
    fill="forwards"
    from="0 -15 0"
    to="0 15 0"
    direction="alternate"
    repeat="indefinite"
    ease="eases-in-out"
    ></a-animation>
</a-entity>

パフォーマンス

  • 意図した動きになるまではPCでデバッガを見つつ開発
    • 当然快適に動く
  • 動いたら、ngrokでスマホで見たり、Oculus Goで見たりして確認
    • canvasの解像度を下げたり、画面内に飛ばす文字数を調整したり
  • 自分でJSを書く場合は60FPS出てるか確認

ソフトウェアができた

  • あとは展示に向けて動いていく
  • ベータテスト
  • 展示にあたっての工夫
  • 会期中のグロースハック

ベータテスト

  • 会社で昼休みに展示
  • 反応を伺う
  • 展示に使うデバイスの選定

Cardboard

  • 電源さしっぱなしにしてもバッテリ使い切ってしまう
  • セロテープでの固定がチープで破損する
  • きれいに立体に見えない
  • ただのダンボール箱なので戸惑う

Oculus Go

  • きれいに見える
  • ダンボールと違って使い方が明らか
  • こちらを本番用に採用

展示前日

  • 周りが本を持ち込む中、デバイスの設営

展示当日

f:id:hitode909:20190117113734j:plain
f:id:hitode909:20190117113754j:plain
f:id:hitode909:20190117113834j:plain
f:id:hitode909:20190117113845j:plain
f:id:hitode909:20190117114145j:plain
f:id:hitode909:20190117114303j:plain

事前の工夫

安定して動かすために

  • 充電ケーブルつなぎっぱなしに
    • 会期中に電池が切れると困るので給電し続ける
  • リモコン使わないので隠しておく
    • 遠くすぎると「コントローラが見つかりません」が出るので机の裏にテープで貼っておいた
  • オフタイマーを切る
    • 一度スリープするとコントローラでの操作が必要になるので、絶対に避けなければならない
    • Oculus Goの設定じゃなくてスマホのOculusアプリ側に設定があるので難しい

使いやすさのために

  • 電源ケーブルの長さ
  • バンドを外しておく
    • 紐の長さ調整するのは手間なので、紐を外しておく
    • 手で持って見てもらう形

会期中のグロースハック 安定稼働編

  • 2日間会場に立って、来た人と話したり、様子を観察したりして調整
  • 顔センサーにシールを貼る
  • 使わないボタンを隠すためにふせんを貼る
    • 上部に電源ボタンがあり、押すとスリープしてしまう
    • 「VR夢日記やってます」といいうふせんを上部に貼ることでスイッチが有るのをわからないように

f:id:hitode909:20190117114400j:plain

ちょっとした調整で安定度アップ

  • 初日は電源ボタン押してしまったりして、1時間に1回くらい止まってた
  • 2日目は誤操作がなくなって、ほぼ無停止で稼働できた

グロースハック 認知編

  • 安定稼働した次は、使ってもらえない、覗いてもらえない、という問題になった
  • ノートPCにしおりを貼っておく
    • QRコードを読めばスマホで見えることから関心を持ってもらう
  • 本の「はじめに」を拡大印刷して置いておく
    • いきなりVR空間に行くと意味不明なので、コンセプトを理解してから体験してもらう

f:id:hitode909:20190117114451j:plain

KPI上昇

  • 当日の改善によってKPIが上昇
    • ヘッドセットを覗いてもらえる確率
    • 覗き始めてから外すまでの時間
    • (売上への関与は不明)
  • 普通のウェブの開発での改善手法がそのまま役立つ
    • 安定してソフトウェアを動かす→SRE的な動き
    • 画面を常時光らせておく→ シグニファイア、インタラクション可能性
    • 置かないボタンにふせんを貼る→不要な情報を隠す
    • 解説を置く→初訪問者へのおもてなし、チュートリアル
    • ユーザー行動を観察する→ユーザーテスト

まとめ

  • 役に立たないソフトウェアを作ることで、人を楽しませたり、笑顔にしたりできる
  • WebVRはWebエンジニアが簡単に歩み寄れるプラットフォーム
  • 新たな表現手段を身につけることで、既存の技術との掛け算でいろんなことができる
  • 現実世界のイベントならではの工夫

今年もWebVR元年をやっていくぞ

PR

  • 本持ってきてるので見たい人、ほしい人いたら声かけてください
    • 700円

https://cdn-ak.f.st-hatena.com/images/fotolife/h/hitode909/20181117/20181117132727.jpg