Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

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

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

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

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

Vues

Nombre de vues

2 939

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

183

Actions

Téléchargements

2

Partages

0

Commentaires

0

Mentions J'aime

0

×