Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2015-01-25 WebGLでかっちょいいシンセできたよー

ちょうど3年前に当時出始めのWeb Audio APIを使ってウェブブラウザで動くシンセを作りました。その後ブラウザAPIもいろいろと進化したので、それに合わせてバージョンアップをしてみました。

 

f:id:aike:20150125064655p:image

 

http://aikelab.net/websynthv2/

https://github.com/aike/webaudiosynthv2

 

■新バージョンの特徴

WebGL(three.jsThreePiece.js)を使った3Dグラフィック

・Web Audio APIに追加されたオシレーターノードを使用してエイリアスノイズを排除

・Web Audio APIのオートメーション機能によるシンプルなGLIDEの実装

・Web MIDI APIMIDIキーボードから演奏可能

アスキーキーボードによる演奏

・デモ曲のロングバージョン

 

■実行環境

・最新版のChromeが推奨環境です

Safariでも動きますが少し重いかもしれません

FirefoxはWeb Audio APIのオートメーションが未実装のようでGLIDEが効きません

・ん、IE?なにそれ

 

■その他

DTMソフトウェアGUIは、これまでのような擬似3Dのものから、3DCGソフトで描いたリアルなものが少しずつ増えてきたようです。いまは事前にレンダリングした画像を使っているようですが、いずれリアルタイムレンダリングの3D GUIを使うようになると予想しています。

 

そんなわけで、実験的にリアルタイムレンダリングの3DCGでGUIを実装してみました。まだいろいろもっさりしていて使いにくさはあるものの、簡単に拡大縮小できたり、マウスオーバー時のエフェクトなど2Dにはない面白さも感じられると思います。

 

トラックバック - http://d.hatena.ne.jp/aike/20150125