面白法人カヤック 本多大和

声の実体化体験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 !!