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