声の実体化体験 - html5でつくるデジタルインスタレーション -
DESCRIPTION
HTML5minutes!at 2014.8.22 にてお話しさせていただいた際の資料です。 声の実体化体験 http://create.kayac.com/edge/entityvoice/ の制作に用いた技術を中心に解説しています。TRANSCRIPT
面白法人カヤック 本多大和
声の実体化体験HTML5 でつくるデジタルインスタレーション
本多大和ほんだ やまと
面白法人カヤック所属
@calmbooks http://calmbooks.tumblr.com/
自己紹介
鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。ゲーム、 Web 、スマホアプリ、イベント、デバイス、 etc.
http://www.kayac.com/
面白法人?
今回お話させていただく事例
声の実態化体験http://create.kayac.com/edge/entityvoice/
音声認識 + 透明スクリーン + 3D ビジュアライズで、発声した言葉の実体化を体験できるインスタレーション。
音声認識は Web Speech API 、 3D 描画は WebGL 。
・ Google の 音声認識エンジン・オフラインだと使えない・ユーザーによる許可は https にすると 1 回で済む
Web Speech API
公式デモ → https://www.google.com/intl/ja/chrome/demos/speech.html
エッジ検出、三角形分割などで、頑張った。なんとかできたけど、文字がカクカクになるなど、粗が目立つ結果に・・
WebGL で 3D 文字(自前実装)
・ベベルをつけられるし 質感◯・日本語(ひらがな、カタカナ、漢字)も使える!(やや面倒なフローあり)
Three.js の TextGeometry
まとめました。 → http://qiita.com/calmbooks/items/4fe8b891950f5a227290
・会社にあった・ポリッドスクリーン(本来は農業用のビニールシート)
透明スクリーン
くわしく → http://goo.gl/CkF5Rn
・ RICOH IPSiO PJ WX4130N
・ 2,500lm 床置き便利(ユーザーの影が写らない)
プロジェクター
・ Web Speech API 、 WebGL 、 MIDI API ・・ etc.
・ブラウザとネイティブの差がなくなってきている
・環境依存を考えると、 Web サイトでは実用が難しい
→ Web サイト以外で試すのが面白い!
まとめ
プロジェクション・ハナビング
・ 8/5 の横浜花火大会・カヤックオフィス 30F から・窓ガラスにアミッドスクリーンを貼って実施
面白法人カヤック主催の交流会10/11@ 横浜 BUKATSUDO
https://www.facebook.com/events/592749480837491/
or
http://peatix.com/event/49002
宣伝!
Thank you !!