Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
声の実体化体験 
HTML5でつくるデジタルインスタレーション 
面白法人カヤック本多大和
自己紹介 
本多大和 
ほんだやまと 
面白法人カヤック所属 
@calmbooks http://calmbooks.tumblr.com/
面白法人? 
鎌倉に本社を構え、面白いサービスをつくっているクリエイター集団。 
ゲーム、Web、スマホアプリ、イベント、デバイス、etc. 
http://www.kayac.com/
今回お話させていただく事例 
声の実態化体験 
http://create.kayac.com/edge/entityvoice/ 
音声認識+ 透明スクリーン+ 3Dビジュアライズで、 
発声した言葉の実体化を体験できるインスタレーション。 ...
Web Speech API 
・Google の音声認識エンジン 
・オフラインだと使えない 
・ユーザーによる許可はhttpsにすると1回で済む 
公式デモ→ https://www.google.com/intl/ja/chrome/de...
WebGLで3D文字(自前実装) 
エッジ検出、三角形分割などで、頑張った。 
なんとかできたけど、文字がカクカクになるなど、 
粗が目立つ結果に・・
Three.js のTextGeometry 
・ベベルをつけられるし質感◯ 
・日本語(ひらがな、カタカナ、漢字)も使える! 
(やや面倒なフローあり) 
まとめました。→ http://qiita.com/calmbooks/items/4...
透明スクリーン 
・会社にあった 
・ポリッドスクリーン(本来は農業用のビニールシート) 
くわしく→ 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/4900...
Thank you !!
Upcoming SlideShare
Loading in …5
×

声の実体化体験 - HTML5でつくるデジタルインスタレーション -

HTML5minutes!at 2014.8.22
にてお話しさせていただいた際の資料です。

声の実体化体験
http://create.kayac.com/edge/entityvoice/
の制作に用いた技術を中心に解説しています。

  • Be the first to comment

  • Be the first to like this

声の実体化体験 - HTML5でつくるデジタルインスタレーション -

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

×