ピクセルシェーダ jit.gl.pix による光るリングの描画 : #jitter #maxmsp

スクリーンショット 2014-05-20 19.25.52 jit.gl.pix を使ったシェーダーによる画像描画や処理を少しづつ学んで行こうと思います。今回は以下の参考サイトにあったコードを参考に光る輪っかを描画してみました。

コード

スクリーンショット 2014-05-20 19.26.28

  • snormで -1 ~ 1 に正規化した座標を取得
  • length によって原点からの距離に変換
  • !- 0.5 とabs により半径0.5の円周上の最も近い点から座標との距離に変換
  • !/ 0.02 により、座標における光の量を決定(半径0.5の円に近い点ほど、数値が高くなるため光が強くなる)
  • out 1 に光の強さを送る。自動的に vec 4 (R G B A)に変換されている

参考サイト

wgld.org – 時間経過とマウスカーソル座標

jit.gl.lua 内でjit.qt.mov + jit.gl.videoplane を使ってテクスチャを描画 : #maxmsp #jitter #max6

スクリーンショット 2014-05-12 17.55.48

 

Lua内でJitterのオブジェクトを使ってテクスチャ描画しよう!Lua以外は、jit.gl.* 系 で使ういつものパターンです。

結果

スクリーンショット 2014-05-12 17.54.52

解説

[javascript]

local mov = jit.new("jit.qt.movie");
local plane = jit.new("jit.gl.videoplane",this.drawto)

[/javascript]

jitterのオブジェクトをインスタンス化します。jit.qt.movieは、pngを読み込みテクスチャに変換できます。jit.gl.videoplaneは、テクスチャを使って描画をしてくれます。

[javascript]

mov.adapt = 1
mov:read("cobalt_logo_sun.png")

[/javascript]

ここではファイル名を指定して画像を読み込んでいます。luaにおけるオブジェクトのメソッド呼び出しは、 :(コロン)でプロパティは.(ドット)のようです。

 

[javascript]

local frame = jit.matrix(4,"char");
mov:matrixcalc(frame.name, frame.name)

plane:jit_matrix(frame.name);

[/javascript]

jit.gl.videoplane へ jit.qt.movieのテクスチャの流し込み方になります。直接テクスチャを渡せれば良かったのですが出来なくて、一旦、jit.matrixへテクスチャを描画 (mov:matrixcalc(frame.name,frame.name)し、それをplaneへマッピングしています。jitter系のオブジェクトの受け渡しは、名前でやってるのが理解できます。(内部的にはポインタ渡してるのかな?)

コード

[javascript]
autogarbage = 1
autowatch = 1
gc = 1

local mov = jit.new("jit.qt.movie");
local plane = jit.new("jit.gl.videoplane",this.drawto)

function scriptload()

mov.adapt = 1
mov:read("cobalt_logo_sun.png");

local frame = jit.matrix(4,"char");
mov:matrixcalc(frame.name, frame.name)

plane:jit_matrix(frame.name);
plane.blend_enable = 1;
plane.blend = "alphablend";

end

local rotate = 0;

function draw()

plane.rotate = {rotate,0,0,1};
rotate = rotate + 2;

end

[/javascript]

jit.gl.lua の勉強は参考文献が少なくて中々はかどりませんが、jitterオブジェクトをガンガン使えるようになると、また世界が広がりそうです。(テキストのコーディングが増えたら、oFとかUnity使ったら良いんじゃないかという話にもなりそうw)

jit.qt.movie & jit.gl.videoplane で透過PNG/MOVを扱う時のメモ : #maxmsp #max6 #jitter

スクリーンショット 2014-05-09 23.01.50

jit.qt.movie

  • jit.gl.videoplane へ マトリクスを送るときに @adapt 1 としておくと元の解像度で出る

jit.gl.videoplane

  • @blend_enable 1 @blend alphablend  @depth_enable 0 :鉄板の設定
  • @automatic 0 : jit.gl.*は描画順が謎なので、bangで直接指定する。

透過MOV

  • Hapというコーデックがアツいらしい

jit.gl.lua の出力に jit.gl.pix をかける : #maxmsp #max6 #jitter

スクリーンショット 2014-05-08 23.44.12

jit.gl オブジェクトのTIPSです。表題の通り、jit.gl.luaの出力にjit.gl.pixのエフェクトをかけたかったので、やってみました。jit.gl.luaのテクスチャ出力をゲットするのが少し難しかったです。

やり方

  1. 一旦 jit.gl.node へ jit.gl.luaを描画。※ jit.gl.luaの出力から青線( gpu上のtexture? ) を直接取得できなかったためです。他にやり方はありそうですが・・・
  2. jit.gl.node のアトリビュート @capture 1 にしておくと、第1outletからtexture出力(青い線)
  3. jit.gl.pix でテクスチャに画像処理
  4. jit.gl.videoplane にテクスチャを貼り付け
  5. jit.gl.render で jit.gl.window へ描画

補足 – Syphonを使う場合

jit.gl.*の描画をSyphonへ送る場合も、テクスチャかマトリクスをjit.gl.syphonserver送る必要があるため、上記の方法でluaで描画したtexture取得すると良さそうでした。jit.gl.renderから直接@matrixout 1 / @capture 1などしてマトリクスかテクスチャ取得出来た気がするけど、何故か上手くいかなかったです。

jit.gl.videoplane 透過PNGを扱ってみる

スクリーンショット 2014-03-19 12.35.26

Jitter の  jit.gl.videoplaneで透過PNGを使うときのポイントです。上図では、2つのjit.gl.videoplaneを利用し同一平面上に透過PNGを重ねて表示しています。

ポイント

  • blend_enableをチェック。チェックをしないと透過されない。またblend は alpha blend に設定。
  • 透過PNG同士を重ねたりしたい場合は、depth_clear をチェック。

blend_enabled 例

スクリーンショット 2014-03-19 12.35.36

左側は blend_enabled をチェック。右側はblend_enableをOFFにしています。右側は透過処理が出来ていない事が確認できます。

depth_clear 例

スクリーンショット 2014-03-19 12.43.32

depth_clear をオフにした状態です。上手く重なり部分の表示が出来ていない事が確認できます。重なり合う2つのjit.gl.videoplaneに対して depth_clearを指定して置いた方が良さそう。

サンプルパッチ

スクリーンショット 2014-03-19 12.35.41

このような設定はOpenGLが分かって人にとっては基本的な事のようですが、いきなりJitterのglから入ると謎すぎる!jit.gl系扱う時はOpenGL1.0~2.0のテキストで一旦 OpenGLのお作法を学習した方が理解が早そうです。