HTML5minutes！at 2014.8.22 にてお話しさせていただいた際の資料です。 声の実体化体験 http://create.kayac.com/edge/entityvoice/ の制作に用いた技術を中心に解説しています。

1. 声の実体化体験
HTML5でつくるデジタルインスタレーション
面白法人カヤック本多大和

2. 自己紹介
本多大和
ほんだやまと
面白法人カヤック所属
@calmbooks http://calmbooks.tumblr.com/

3. 面白法人？
鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。
ゲーム、Web、スマホアプリ、イベント、デバイス、etc.
http://www.kayac.com/

4. 今回お話させていただく事例
声の実態化体験
http://create.kayac.com/edge/entityvoice/
音声認識+ 透明スクリーン+ 3Dビジュアライズで、
発声した言葉の実体化を体験できるインスタレーション。
音声認識はWeb Speech API、3D描画はWebGL。

5. Web Speech API
・Google の音声認識エンジン
・オフラインだと使えない
・ユーザーによる許可はhttpsにすると1回で済む
公式デモ→ https://www.google.com/intl/ja/chrome/demos/speech.html

6. WebGLで3D文字（自前実装）
エッジ検出、三角形分割などで、頑張った。
なんとかできたけど、文字がカクカクになるなど、
粗が目立つ結果に・・

7. Three.js のTextGeometry
・ベベルをつけられるし質感◯
・日本語（ひらがな、カタカナ、漢字）も使える！
（やや面倒なフローあり）
まとめました。→ http://qiita.com/calmbooks/items/4fe8b891950f5a227290

8. 透明スクリーン
・会社にあった
・ポリッドスクリーン（本来は農業用のビニールシート）
くわしく→ http://goo.gl/CkF5Rn

9. プロジェクター
・RICOH IPSiO PJ WX4130N
・2,500lm 床置き便利（ユーザーの影が写らない）

10. まとめ
・Web Speech API、WebGL、MIDI API・・etc.
・ブラウザとネイティブの差がなくなってきている
・環境依存を考えると、Webサイトでは実用が難しい
→ Webサイト以外で試すのが面白い！

11. プロジェクション・ハナビング
・8/5の横浜花火大会
・カヤックオフィス30Fから
・窓ガラスにアミッドスクリーンを貼って実施

12. 宣伝！
面白法人カヤック主催の交流会
10/11@横浜BUKATSUDO
https://www.facebook.com/events/592749480837491/
or
http://peatix.com/event/49002

13. Thank you !!