SVGの背景を透過するサンプル jit.mgraphics × jit.gl.pix #maxmsp #jitter #gen

スクリーンショット 2014-10-17 11.57.59jit.mgraphicsで描画したSVGに透過色を持たせたい場合には、jit.gl.pixで特定の色を透過させる処理を書くと良さそうです。上の画像は、カメラのキャプチャにSVGの描画を載せたサンプル。棚がとっ散らかってますが、お気にせず・・・

jit.mgraphicsで背景黒にして描画

スクリーンショット 2014-10-17 11.56.39svgでピンクの丸を描画してます。ちなみにillustratorでSVGをつくりました。(左側に、ちょっと、余分なコードも入ってますがお気にせず。)

jit.gl.pix 黒を透過

スクリーンショット 2014-10-17 12.06.54厳密に言うと、黒に近いほど透過されるコードに成ってますが、とりあえず目的に適うのでオッケーです。

Code(シェーダ部分)


----------begin_max5_patcher----------
757.3oc0WssahCCD84juBK+LKxNAnj8s86.UgLItgoqwNxwbYaU+2WamKjvF
pnkVDqPJANy3wGe73gwuFFfWoNvKwnehVfBBdMLHvC4.Bp+c.dC6PpfU5cCK
46UqdFOpxjgev3geFLiyEiKfCn8fLSsuwimTRSI7B24EMZLoFVs0H3FyeJ3U
StK.KyEKcAbqliGgvXzi0NK2tAjV28LfdDrJHdznZzBlIcMHyWp4olpPGSlZ
mVTzL+qjI9ePFSZCuihR1FOSv+RCLQC4gLOlcA+C5Lb2ofqq0nZQxFEPv2w0
kfR1glAXVQQG3fNCworOq7AZ1nVHPVAQagz7cPy3SZQYZ6B0XWkN4xwxCymg
qL9VXyjeTEhnIN0GQmG6E.5CtWwSiNJD1s97TknZ5WfHiSF04AsuiBU5u4d4
gz.pJ3RPVn4kbogYpYbq4L9SrsByxgyH5a+IVJ+rCdv8p.btFxTRGI5MRGby
zs.Q8IAtmGWLdOjrhAFboccrsbES61AVI3cR0rI+Jknuo1Mc6YHlD1vLbCTQ
1HRaPgMEZPZ5MQbIyFi0koZkPzKTUV1MfkLadQJeOjYV6iUWoz5NTzrEfa0n
LHmWZ5iYX4k8Q5UTnaBa2hC8veuhD8KTTtGdAoyW003YxHFrNQaUgyVYXfpC
csLPEBJweXHwexX5zSKP79EINsPQTDtA+svvluL5qWI2.G9FDw3OqHNm30sI
d4axrqTDo2HQTvk41iO2eIizod8bR7UJjjajPtimhHUe9FTyIeV0Lt5zL0Kl
O7v0IlzjajXBRD8aPEIeVUzVYbpsYApukAxUJh2HMzt5tXQ7BO4RtjJfwj49
WWYt1jgjoi8rH.449KZOyb1GV+JUa0oMIK0+gksEudrz1+fAjssvsnsVxoNt
Fxx52xTUWFktdVp5N7h1s+nbldoTN5+OJ6bjdWP4nKkySteT4jOhLeev4ANW
8NbN5KfynGCOh3eVWa4zaq5n8I2R8jan9u2N8b2L0NOuE9W.Vv2VrA
-----------end_max5_patcher-----------

こういう微妙なコードをBlogに書いとくと、後で再利用しやすいのが良いですね。Max7だと、コードスニペット機能が充実するそうなので、楽しみですな〜。

jit.gl.pix @gen によるシェーダ切り替えで画面が一瞬止まる問題について #jitter #maxmsp

スクリーンショット 2014-08-07 02.45.33

シェーダ切り替え

jit.gl.pixにて@genによるシェーダの切り替えを行うと一瞬画面が止まってしまう事案が発生いたしました。この原因は2つ考えられるかなと思いまして

  1. jit.gl.pixが内部的に.jitgen → .jxs / GLSLに変換してシェーダを使うため、SSDやHDDとファイルのRead/Write処理が同期的に行われて止まる
  2. GPU上へシェーダを転送・コンパイルする時に止まる

検証はできてないですが、1の方が原因としては重たそう。というのも、jit.qt.movieでreadするとファイル読み込みで画面が止まってしまう現象と同じなためです。jit.qt.movieではasyncread使うことで再生中の動画を止めずに切り替える事が可能ですね。ただ、実はこれも問題があり、大量のjit.qt.movieに対してasyncreadを指示すると画面止まります。内部的にどうやってるかコード読んでみたい。(関係ないけど、Windows版のMaxの非同期読込もサポートしてほしいな・・・。)余談はさておき、jit.gl.pixには非同期読み込みをするメッセージを送れません!

対処方法

BiLmv_hCUAEVOcq.jpg-largeパッチをロードしたタイミングで使いたいシェーダの数だけjit.gl.pixをインスタンス化しておく。使おうと思った時にはメモリ上に載っているので画面が止まる事は無さそうです。スマートなやり方ではないですが、この方法しかないかな・・・?使いたいシェーダの数が増えるとメンテナンスが大変になりそうなので、jsオブジェクトなどを使ってメタプログラミングでオブジェクトの自動生成をすれば、メンテナンスも楽そうです。やりすぎるとGPUのメモリが足りなくなる事案も発生しそうですが。

ちなみに上記画像は遠藤一郎氏のライブペインティングでプログラムしたときに使ったパッチのキャプチャです。音声ファイルを400個近く読み込む必要があって、ライブ中にファイル読込で止まるのが嫌だったので、起動時に全部メモリ上にロードしておくプログラムをjavascriptで書きました。

jit.gl.pix における2次元平面のアンチエイリアス処理 #maxmsp #jitter

jit.gl.pixでトランジションエフェクト

あのタグの次期バージョンに入れるトランジションエフェクトを開発しています。例えば、中央から丸が出てきて画面全体に広がるようなエフェクトをつくろうとすると、丸を書いて2つのテクスチャを割当るだけで簡単そうです。しかし、単純につくるとエッジがギザギザしてしまいます。そこでjit.gl.pix(フラグメントシェーダ)におけるアンチエイリアスを実装してみます。

アンチエイリアス処理有り

スクリーンショット 2014-08-10 03.08.23

アンチエイリアス処理無し

スクリーンショット 2014-08-10 03.13.37中央の円のエッジがギザギザしており、VJなどで大画面に表示するともっと気になるかなと思います。

円トランジションjit.gl.pix

スクリーンショット 2014-08-10 03.25.40現在のピクセルの半径rと、トランジションする円の半径rとの距離をとって、その距離が短い場合に(0~0.005の距離)smoothstepで補間をしています。補完した値でmixする事でエッジをなだらかに繋ぐ事が可能です。ここを単純に書くと大なり小なりで比較して、0 or 1ピクセルの色を指定して、switchやif文でピクセル値を切り替えて出力したくなりますが、それではエッジがギザギザになってしまいます。

jit.gen vs jit.gl.pix Vetex Array 生成対決:#max6 #maxmsp #jitter #cycling74

スクリーンショット 2014-07-16 0.43.34

フォーラムに似たようなスレッドがありますがMaxにおけるGPUとCPUの対決です!球体のVertex Arrayをjit.gen / jit.gl.pix の両方で生成できるパッチをつくりました。それをjit.gl.meshへ入力し上記のような画像を生成します。

実装

スクリーンショット 2014-07-16 1.02.34
jit.gl.pixはGPU上の処理でVertexの配置を保持したテクスチャを生成しますが、そのままjit.gl.meshへの入力へは使えません。まずはjit.gl.pixの出力をjit.matrixに入力する事で、CPU側のメモリにGPU側のテクスチャを呼び戻します。jit.gl.pixはplane数が4に固定されています、ARGBですね。なので次にjit.genを使ってplane数を3に削減してjit.gl.meshに入力できるplane数に変更しています。ちなみにこのplane削減処理は、jit.unpackでも出来ますが、jit.genのswizを利用した方が多少早かったです。こうして、GPU計算したVertexをjit.gl.meshの描画に利用できます。

それではMaxにおけるCPU vs GPUの対決やいかに・・・!

結果

fps(@sync 0) : jit.gen 100fps / jit.gl.pix 70fps
CPU使用率 : jit.gen 140% / jit.gl.pix 60%
※アクティビティモニタで目測

jit.gl.pix(GPU)はfpsが伸びなかったです。代わりに、CPU使用率が下がっていますね。これはMSPと共存させるような方には良いかもしれません。ただ描画速度やパーティクル数を稼ぎたい場合は、jit.gen(CPU)を使う方が良いみたいです。というかjit.genは、シェーダーのように並列演算しやすい形で記述するので、裏でCPUの並列計算をするようになっているそうです。

TIPS

スクリーンショット 2014-07-16 0.45.17

  • jit.gl.pix dimの最大値 16384 か?それ以上の値になると表示がバグる
  • jit.gen / jit.gl.pix 内部で使えるプリミティブ(circle,sphere,torus等)楽しい

Sample Patch


----------begin_max5_patcher----------
2043.3oc6bssjahCD8Y6uBJp8wYmEIw08or09YLaJWXirsR3hWPdtjT40848
ab+RVcAvfMfkIXMdRlIULwR.p6S2p0oUqIec9LykYOiKLM9ciGLlM6qymMSz
DugYkeelYR3yqhCKD2l4prjDbJ07NYeT7yTQ6ehPueCN03wBCw+L99cjmM9q
zkuX7gDRddV9xrWpdpXRJdU19TwiBKajDIdQYK+zuhPU245rT55vUXdWnx1R
2mPRiwTg.AZbiEjuHtQn88VUMmuYIuIq5V1ERWskjtYQNdEUp4PeVuFPG9mH
fG+hK6AL93gALaOsZDsZLhogIhQz7OxIgwl7N91747OtSQ7jlsYSL1rCL.T0
nbrourCKEWSBG393PnQGJIJ.cuSkVBfA0W5QMO7pxYJIEmu.mFtLVHCViPQ6
yw4+9m+8O2FltAaT4B8aM7f5.Xf1lp5H.fWli.xCJvHaj.cbrD9E5xUX4dJM
KsKMF1qqvRFxc49BPeg4GU53eN0DLoJi0TqLHv0VYRwOwD89h40gRBb5UIYO
zhjPZN221v7LpaONyc45xPAlqKxVfBRG3APAX+dtMGCbdIpTBKrGfDieDmWP
XF2CB5Lyvc6Zz7rFOBGK+Tl3E4dWcSjTYSf5lxwORpddu5VCyYZJkol6ykB4
y9tlxNY1u4UOZsyfvw1U9okvWv1oALvrzaVkEKG6GXQCBtqwGf12Xb1pOiiZ
LQmYN2gSIo6xwErXYgzRwst6H75v8wzEca2Z2e0xZc1Ym1jYlaxIQYobgn0S
xatZ3dfE2RF8poxHtizvcc7vEL8XewxvbN7WFfGV0IMKKtcW0Vb1TlvTByUF
SIRgEZU+RII6xIx02qaSt9w1hU4YwwsdUxddridhXNEqvOQhnaaE8l2C61I6
pLAl0XTDYCtf1tMZ3lh1szh3SSu0lwBZ09PwDZGWn3IxWL3q2znyFAGbZ19I
wGpiHzaTgAhLzWzAGQHRG4zBmiiMz+p+Cs51rp3nkyEmdbjjZ.5ACAiECsFO
FJhl.rEK1X8VACYxSufns4UvSShRVRxzdJ.SVWLLcHrFOQhdlEKjMd+cieEY
6yWU4uTNqznsXxhvPIo0A4enFzN591RhhZGSUFFpfGTKplu7Ys0WpDCTThcl
HI13iyOzxzwfphLzojnPuVjnjjHcbFOIpIkwbvjS+Wleis80iw79jkLxicXT
cGLs16TRmt.KpU.2hVFO5rIzAGJo2I0Z2yDhcgelMW0pq8CnWbqGvBNZvR5W
bVvBLo.xFFqIlDA6ZBP+aER6o+kLNACAGco2.wzdnb4JTYtwiyIYhytruMAA
.GL13l3E72COmoqP7QXfUiMQ5mvrLAPWnH0R+2Sz78DMeESzbGatCdboHc2U
JUSnHHpmbanTg+O7FOUSG8mpoDCQtBLz98TMGBk.xB17iXplf2boZZeCjpYB
tnHbC9D9Tq2GGyhjiwoF+BnKVlNSBCaz4qznsmy8PGTfk6cF9Rm3.Mwxt2xM
Bcm1xMVponCZJT07Itx7p2YvVPuKDvaLoYacw9.LVhNsQFaAYRHXL9.usqVi
Sip0XKIQ6a8N2324FqHaD4bjd3b3qDmiNicI4bAsObtPfNJyrn5jNHTU8P8p
.GaTG+5j.aCRfUDaa3jAfimhlDIAR1YmVU5a0zA9L9kQkUU4VXd5kqRVBkfK
vpr3dNmEbsuMH.CUjNo+aNBvvol.b456EgOhiVvFAl0eQHklSVtmJMGMWu+6
cosyuz4EDuuSgXfAuuAkQAXYXbICm5msikUtJkm5IRZT1SFkW9v5BVr88rUi
Yl4OvkVNwEVp5rusLKOBma.32TXHu+127Koq5bm8A9CS7bJ2AWIsbGKuZxmN
.jVKyE24cOoCXv18Ry+5xUe.nLArC5OP45bvkbYk5DFZyIEV3tZq2UroSnAp
X8OlDmCjkvgvW.KHGM4VLbQPX4zusdJX3dZFiwKYEepFMOLsXcVdxBd5.TdS
EIYYzsKJ1FFwzO9TO9SrPra7E06PU6CgLpiok1eekeN3xweawwOE4KYb5Aq1
C0WaKPZFo.afLVGmERQPlKhE+ucEKCn8Z1aUR7Q37Bbc0ZzrK9jgFna7ozop
rlc9veRKYW.BJKtqy6Ur68ck31rhcAuNUrq7H6I8M9gnjcduVmNTuxvJuWxt
Ac0bQu0JYWvatSGpmhRbvs8oCkQ9OGmxyqth9eu4Qq8zngtxh24ZeKv4jZrT
7GbdXQWU3y6rvywWkuoIFyjaptm2YfLac.Y+cBllmYzU0fsGSw.giDT.xcx0
0Qqm3xdqEry0nTv.anZm1X8TEXVlrQR+748sE+i53VewldKmpeei0nou2MgS
C6AmmeiM4XD69VTd3SKRxhvl5ARf9WeLo5jWKO1bvytkrmBJjD0fCwKrMyHI
5bL+hRLZXlP8UEDqV2zIDJNkLwIFqoTb.1ZSb7UAczlz3ofz3qUoA8cJMIjn
cYrUgJcdCbj+eZP0usYUe4vnLoRO7bV1fKS78buG3x9wlK1vJl.H1O1c2D.I
oZFH1SOw2tBpp6s0bJGEDG8IM1JgN5aVksBhim1jFDPk.f.8IOpHN5yXAUZ4
J8AOP+aL4QkUrft5SdTYxNzQexiysUvGnJS2Czq3.NG7nO9W.UbeP2dhC31Q
bf5y6AnxjKH71RdzHOLfJKlBzWvvilH2i7nwoWJy8QSyuTPbFq0RtMBGUaet
fbTM8Opd9mVK+9piOab917+GE2s8X
-----------end_max5_patcher-----------

jit.gl.pix を使ったテクスチャパーティクルの描画:#jitter #max6 #cycling74

jit.gl.multiple が重いのでは?という仮定の元、jit.gl.pixを使ったパーティクルの描画を前回試してみました。今回は、その続きでテクスチャ付きの画像をjit.gl.pixで描画してみました。jit.genで生成したパーティクルの位置をテクスチャとしてjit.gl.pixに入力。ピクセルシェーダーが位置テクスチャを全捜査して、自分が描画対象だったら画像テクスチャからその色を取得し出力。位置テクスチャを全捜査しないで描画する方法があれば良いけど思いつかなかったです。 スクリーンショット 2014-07-15 1.35.50 パフォーマンス的には、解像度720×360 / パーティクル数500 / 20fps 程度という事で大した事無い気もします。アクティビティモニタでMaxを見るとCPU使用率が20%だったのですが、jit.gl.multipleとの比較はしてないので、そのうちやってみたいです。

続きを読む jit.gl.pix を使ったテクスチャパーティクルの描画:#jitter #max6 #cycling74