[ 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/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

2014/09/14

Web Music Hackathon #3 が開催されました

Twitter Google+ Facebook


2014年9月13日@Google東京オフィスにてWeb Music Hackathon#3 が開催され、無事終了しました。回を追う毎に参加者が増えてきています。右はMIDIコントローラを中心に色々準備されている機材。


という事でハック開始。昼食はサンドイッチです。


チューターの方々は、ローランドVDrumからDONTATA君をドライブしたり、ギター持ち込みでブラウザをエフェクターにしてみたり。ちなみに私は相変わらずLiveBeatsでごにょごにょしてます。


日本のインターネットの父、村井純先生登壇。打ち上げは北京ダックで。

と、こんな感じだったのですが、実は私としてはとても気になったニュースが、ヤマハからさらっと紹介された「Web Music DAW Connector」というものです。これは何かというと、下の図のようにDAW、CubaseのVST pluginインターフェースの所にブラウザのWeb Audio APIを接続するものなんですね。
これを使うといよいよブラウザでの信号処理を本格的なDAWに接続して使う事が可能になります。WebSocketで繋がりますので、DAWが走っているPCからリモートのタブレットで信号処理して戻す、なんて事も可能です。アイデア次第で今までになかったDAWの使い方とかも出てくるかも知れません。
詳細はこちら⇒Web Music DAW Connector




Posted by g200kg : 12:52 AM : PermaLink

2014/09/07

Web Music ハッカソン#3

Twitter Google+ Facebook

今度の土曜日、9月13日はWeb Musicハッカソン#3が開催されます。

場所:Google東京オフィス
日時:2014年9月13日 10:00-18:00
主催:Web Music Developers JP、Google
協賛:AMEI

もう3回目ですね。AMEI協賛で各社機材が豊富に準備されるので、触れてみるいい機会でもあります。
今回もチューター役やらさせていただきます。自分のネタとしてはLiveBeatsをもうちょっとなんとかしたいと思っているんですがどうしましょうか。


http://googledevjp.blogspot.jp/2014/08/web-music-3.html

Posted by g200kg : 4:11 PM : PermaLink

2014/09/02

映像効果のvjプラグイン仕様を考えてみた

Twitter Google+ Facebook


LiveBeatsのビジュアライザーを分離してプラグイン化しました。デフォルトで波形/スペクトラム表示プラグインとマトリックス風エフェクトを読み込むようになっていますが、基本的にはただのJSファイルで描画部分の関数だけを書いたものです。これをカスタムしてLiveBeatsにドロップすると読み込めます。

DOMエレメントを作って描画する部分だけの関数になっていますので、ホストアプリ側で必要な場所にエレメントを貼り付ける構造です。何か共通規格的なものにできれば良いんですが。

//-- vj_simplewave.js --
vj_simplewave=function(param) {
	this.w=param.w;
	this.h=param.h;
	this.n=param.n;
	this.wavedat=param.wavedat;
	this.freqdat=param.freqdat;
	this.elem=document.createElement("canvas");
	this.elem.width=this.w;
	this.elem.height=this.h;
	this.ctx=this.elem.getContext("2d");
	this.ctx.lineJoin="round";
	this.anim=function(timestamp) {
		this.ctx.strokeStyle=this.param.col.value;
		this.ctx.lineWidth=this.param.line.value;
		this.ctx.clearRect(0,0,this.w,this.h);
		this.ctx.beginPath();
		this.ctx.moveTo(0,this.h/2-(this.wavedat[0]-128)*this.h/512);
		for(var i=1;i<this.n;i+=2) {
			var x=this.w*i/this.n;
			var y=this.h/2-(this.wavedat[i]-128)*this.h/512;
			this.ctx.lineTo(x,y);
		}
		this.ctx.stroke();
	};
	this.param={
	"line":{"value":3,"type":"double","min":1,"max":10},
	"col":{"value":"#f00","type":"string"},
	};
}

vjプラグイン仕様
ちょっと色々やりすぎてMBAだと厳しくなってきました。たまにひっかかる。

Posted by g200kg : 3:39 AM : PermaLink

2014/08/30

Firefox32のWebAudioEditor

Twitter Google+ Facebook

Firefoxも今では一通りWeb Audio APIに対応していますので、Firefoxでオーディオ系Webアプリが動く、はずなのですがそこはそれ、そう簡単ではないですね。結構なAPI規模だし、挙動に微妙な違いがあると音にしてみるとまるで違ったりしますので、完全に安心して使える共通プラットフォームになるにはなかなか高いハードルがありそうです。

という事で私もFirefoxをそれほどガシガシ使っている訳でもないのですが、今度のFirefox32に搭載される「Web Audio Editor」、これはなかなか注目です。今日現在、Firefoxのリリース版は31ですので、もうすぐリリース版でも有効になりますね。取りあえず試したいという場合はFirefoxのBETA以上を入れてください。そして[F12]でWeb開発ツールを開くと、タブの右端に[Web Audio]の文字が!
(リリース版31でもabout:configにはWeb Audio Editor有効化のフラグがあるのですが、まだ一部しか実装されていないようです)

これを選択してWeb Audioを使っているページにアクセスするとこんな感じでWeb Audio のノードの接続図が出てきます。

マウスでノードを選択するとプロパティの一覧が表示されて編集も可能です。これは面白いですね。
まあ経験的に言えば自分が書いたプログラムでノードの接続がどうなってるかわからなくなって困るという事はそれほどないんですが、人の書いたプログラムを覗いたりするのは楽しいかも。見られる方は恥ずかしいけど。

今のところ接続を切り替えたりはできないようですが、将来的には対応したいという事になっているようです。
(まあ何より細部のチューニングを進めてChromeでもFirefoxでも同じ音が出るようになって欲しいというのは第一にあるんですが)

Posted by g200kg : 5:36 AM : PermaLink

2014/08/27

Web Music Developers JP Meetup#1

Twitter Google+ Facebook

さて、8/25は「Web Music Developers JP Meetup #1」が開催されました。ざくっとご紹介。

準備中の様子。場所は渋谷21Cafe、IT・Web業界向けの無料のイベントスペースです。こういう場所があるのは素晴らしいですね。


まずはGoogleとよしまさんより、ChromeへのWeb MIDI APIの実装状況の説明。ブラウザ上での音楽環境が一般的なものになるかどうかに関してはどちらかと言えばMSさんの動向とかが気になったりはするのだけど、着実に進化しています。


ブラウザVJのラスボス、サスカッチ渡辺さんから簡単にクールなVJを作る方法のレクチャー。一昔前ならネイティブでゴリゴリ書かないといけなかったものがJavaScriptでサクサク書けちゃう。ブラウザも進歩したもんだと本当に思う。


ヤマハのかわいさんよりWeb Musicの更なる広がりを目指して、「Web Music Platform」の紹介。良い感じの写真を撮ってなかったけど、これはyamaha-webmusic名義でGitHubにも公開されています。WebMusicPlatform。これは要するにオーディオやMIDIのプレーヤー、エフェクトなどの各機能をWebComponentを使ってモジュール化して、簡単に接続を試したりできるようにする環境です。


ここまでがメインセッションで、この後はライトニングトーク。プログラミング環境、Scratchの紹介とか、Webアプリとして実装したマリオシーケンサ+ポケミクの連動とか、WebMusicハッカソンの雰囲気の紹介とか。そして私からはパフォーマンスツール、LiveBeatsの紹介をしてきました。


そんなこんなで終了。打ち上げは焼き鳥メインで。という事で、9/13のWebMusicハッカソンに繋がって行きます。

Posted by g200kg : 10:24 PM : PermaLink

2014/08/13

WebMusic関連のイベント

Twitter Google+ Facebook

8月25日は「Web Music Developers JP Meetup #1」、そして9月13日は「Web Music ハッカソン#3」です。MeetupではLTでとりあえず先日作った「LiveBeats」の話なんかをしようと思っています。

先日、藤本健氏の「DTMステーション」でも本格的なDAW、Soundtrapが紹介されていましたけど、WebMusic / ブラウザDTMの世界もそろそろ実用的なツールとしてどうなのかという視点で見るべき段階に入りつつあるんじゃないですかねぇ。

2年くらい前「Javascriptで音が出たぜすげえ!」と言ってた頃から既に世の中はだいぶん進んでいます。一方で音楽制作はアナログな古い技術が重宝される世界でもありますから、ネットワークでビンテージみたいな新旧ごちゃまぜのカオスな世界になったりするのかもね。それもまたよし。まあ裾野を広げるためにもっとカジュアルなアプリも必要だと思いますが。

Web Music Developers JP Meetup #1



Web Music ハッカソン#3



Posted by g200kg : 6:29 PM : PermaLink

2014/08/10

LiveBeats

Twitter Google+ Facebook

8月9日は「oto asobi -オトアソビ- 一回目」というイベントに参加してきたのですが、その時に使ったライブパフォーマンス用のWebアプリを公開します。イベントではフリスクシンセも使いましたが、MIDI I/Fやシンセが無くてもブラウザがあれば使えます(Chrome推奨)。

LiveBeats : http://www.g200kg.com/demo/livebeats/

ひたすらコマンドを打ち込んでいって演奏するというスタイルのもので、使い方がわかってないとどうにもならないと思いますが、イベントの時にやった事の一部をなんとなく再現したサンプルビデオを用意しました。

基本的に自分用で色々と場当たり的に決め打ちで作っていますのでとても汎用的なツールとは言えないのですが、取りあえず、「list」と打ち込むとコマンドで操作できるオブジェクトの一覧が出て、それぞれのオブジェクトに対してlistコマンドを使うと(例えば「list o1」)操作可能なパラメータが一覧できます。

構造は下の図のような感じです。

Posted by g200kg : 11:58 PM : PermaLink

g200kg