[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


Products : Gembox Synth 販売中

ゼムクリップの容器に入ったコンパクトなシンセサイザー「Gembox Synth」を販売中です。

DTMステーション様で紹介していただきました
クリップ箱に収まった4,500円のミニシンセ、Gembox Synthが誕生

詳細はこちら : Gembox Synth


2014/10/17

MIDIappy Images

Twitter Google+ Facebook

みでゃっぴー(MIDIappy) のバリエーションを描いてます。

ここにまとめておきます⇒http://www.g200kg.com/images/midiappy/
ライセンスは一応CC-BYという事にしてありますが、Web MIDI APIのキャラクターとして使っていただける分には特に細かい事は気にしないで構わないです。

Posted by g200kg : 4:44 PM : PermaLink

2014/09/21

WebGLで音声信号処理してみる

Twitter Google+ Facebook

WebGLのシェーダープログラムで音声処理をしてみるというのを数日前から試してみたりしているのですが、結論から言えば今のところたいして良い結果は得られていません。それなりのGPUを積んだPCならJavaScriptで書いたよりは速い程度で動くのですが、グラフィックチップが非力なノートなんかでは酷い事になったりします。

まあせっかくなので、メモ代わりに一応公開しておきます。
https://github.com/g200kg/WebGL-Audio-processing

これは、平面上の波の伝播の物理シミュレーションをWebGLでやってそこに音信号を通してみるという実験で、プレートリバーブの物理モデリングみたいなものです。浮動小数テクスチャーを使ってRGBの各面をそれぞれ点の変位、点の速度、出力バッファとして使うというような事をやっています。残念ながらサンプル単位で順次処理が必要な関係でGPUの並列処理能力をあまり活かせない感じです。ウインドウを切ったブロック内で完結する処理なんかをうまく書ければかなり良い結果が出そうな気はするのですが。

追記(2014/09/22):
 パフォーマンスが上がらない原因を調べると、GPUからCPUにデータを受け渡すのに使用しているreadPixels()が問題のようです。実行時間のかなりの部分をこのreadPixels()に費やしているように見えます。ただし、転送するデータ量だけでなく、また単なる関数の呼び出しオーバーヘッドでもなさそうな挙動があります。推測ですがGPUが描画可能な状態とデータ転送可能な状態をスイッチするのが遅いのではないかと思われます。環境にもよると思いますが、44.1kHzで1024サンプル(=23mSec程度)毎にreadPixels()する実装でオーディオを通そうとするとマウスの動きなどによる描画処理などが入るだけで間に合わなくなったりします。オーディオ処理のようなタイムクリチカル処理をここに入れるのはそう簡単ではなさそうです。

Posted by g200kg : 7:06 AM : PermaLink

2014/09/17

WebGLでシェーダープログラム書こうぜ!

Twitter Google+ Facebook

LiveBeatsでビジュアルエフェクトを幾つか作ってみたりしているんですが、さすがにJavaScriptのCanvas上で画像のピクセル単位の処理をごにょごにょしたりしているとパフォーマンスが厳しくなってきます。

まだもう少しはCanvasだけでも頑張れるかなぁと思いつつも、これに関してはもう進むべき道ははっきりしていてるんですよね。WebGLですよ、やっぱり。とは言え、GPUの性能をフルに引き出すにはシェーダープログラムをGLSLなる言語で書く必要がある所が結構な障壁になっています。という事でとっつきやすいTHREE.jsあたりを使って取りあえずJavaScriptでコントロールするだけでも今までとは一味違う表現ができるんですが...

それでも満足できなくなったらこっち、GLSL Sandbox。GLSLでがしがし書いて即テストできるサイトで、ビジュアライザー系にそのまま使えそうなサンプルがてんこ盛りです。素晴らしい。このサンプルを見てると(THREE.jsとかのライブラリを使うにせよ)GLSLで書くモチベーションが湧いてきますね。

ただし、GLSL Sandboxでは入力となるパラメータが時間とマウス座標くらいしかないので、音のビジュアライザーにするにはちょっと物足りない所もあります。やっぱり生のWebGLの全貌をちゃんと理解しないといかんなぁ、となったらこっち、wgld.org。物凄く丁寧にWegGLを解説されていますので、みっちり読めばWebGLマスターになれそうです。

という事で、LiveBeatsで処理が重くてこの先不安な感じがあったカメラ画像で動きを検出したりエフェクトを掛けたりする部分をなんとかGLSLで書いてみました。Webカメラから画像を取り込んで、色々エフェクトをかけつつ、動きの激しい部分の座標を追いかけます。Canvasオンリーで書いてた時はかなり重かったんですが、GLSL化で古いMBAでもほぼ60FPSで安定して動作するようになりました。


ShaderTest

これは、カメラ画像のフレーム差分から動きを検出する部分と画像にエフェクトを掛けつつ表示する部分で2つのシェーダープログラムを使用しています。ポイントとしてはGPU側で行った動き検出の結果をCPUで使いたかったのでそのあたりの受け渡しをどうすれば良いのかちょっと悩みましたが、シェーダーでオフスクリーンバッファに書き込んでCPUでreadPixelsするという感じで行ける模様です。この辺のボトルネックがどの程度なのかまだ感じが掴めてないんですけど、音声信号もGPUに送ってシェーダーで処理するなんて事も頑張ればできそうです。その内試してみるかも。


Posted by g200kg : 7:28 PM : PermaLink

g200kg