カテゴリー: Jitter

ビネットエフェクト #jitter #maxmsp

山田尚子監督作品でも多用される画像エフェクトの一つである周辺減光処理こと、ビネットを平ハウス物語のVJ向けにjit.gl.pixで実装したので残しておきます。

処理としては物凄く簡単なのでピクセルシェーダー / ポストエフェクト初心者の方にもおすすめです。

jit.gl.pix

画像の右側が主にビネット処理の内容です。パラメーターは3つ

  • radian – ビネットの円のサイズ。円の外側が暗くなります
  • range – 円のエッジ幅。円のエッジ付近で黒くなるまでの係り具合・勾配を調整します。
  • aspect_ratio – 円の縦横比を調整できた方が都合が良かったのでつくりました。真円にしたり引き伸ばしたりで使えます。（またjit.gl.pixでdimの値が上手く取れなかったのも原因の一つ）

アルゴリズムを簡単に解説すると、snormで取得した座標系からlengthを取り中心からの距離を取得、scaleで0~1の範囲に調整を行い smoothstepにて円のエッジをなめらかに繋ぐ処理をしています。

jit.gl.pixはexportcodeすればGLSLのコードにもなるので、Max以外の環境の方もご参考ください。

Codebox

----------begin_max5_patcher----------
1790.3oc2aszbaaCD9r7uBVdr0VCA3CQ0Socl9CnMY5kLYz.IBKgDJ.NjP1x
IS9uW7fjBTVTDJTTlMGr83Eu18C6K.h8a2MwcIaOtv042c9nyjIe6tISTjjD
lT9+Sb2h1uJEUn5l6J11sXJ28dcab7dth9+RVSw7Z5Oxn7GQqvx1.kzxP7Ua
Hz0Kxwq350LDL06dm.n529yj+IzapmymJGBIQM4rke9Afm4bWP9pZt8iDiQS
ltaKglh4ElqoruTzVUec+ikhlYTm2inEN+IKMw8vPY63Ui0SR762cm7W2aIr
f377cjp4SOY7WxvZwz0sVhNAH.7BjBNLVAFf4JX.BOMLD6dNwUxFZ9oHSL+K
xQbBysdoyEHAGmu.SQBnPIqmDA.uQHPvbKPfY1g.4H5Z7sQzo3mEL1qLI9Lg
Occ5zLxdmO7Wu+CNuSpH57jxPoUbRLnEqSWHmjc4B9uCjSa.4qLCb.Q9mC3h
NKv0DFflKINuT3KkdgYEIE+DNufvnFyg.8yxLHOwXHRH6yL0DEeeMIBUSJrl
TN9IR03CpohxEBNWH0RLQJO6iBbOLMrDbNUn7Us+o17JYI01jD4KxJ8Go2Xv
zpIv0PQD.U.5rPsJHXVrBXgQwGvTg5v5T1pufSLTiDakYXJglkiKD9Gk1czF
MmfeDsKkuvz6E.N8jsW447jMdvcVNAkVKDqyIILpjIZriHIWsbB4KTINglBi
pGTT1IFrPqQ.MszXgPH2UrDkK2vJsofUMxYrzlMUOtT7i7xlyHT5QnHmk0di
4j0aNyXWxDMt8byspkhE6n5VWHzM3KJPO0Ds4nzzRa5lS+dDkrEwwbhdK.5U
2n1uxlhU4rzzFxqtkmNQKIBc8U3mII7MpExTYPzcRVkRja8tbBYMtf2jFGst
nIkB9KZP2fztkk1xBeKayRERQyNHrRHE7hMrmKJ6XkhlI.bHYASaaSGjMneN
GkMcV9KO379+9e9.zrw1Chzp6vR61XUfjv4G6N7XWhvPy06T9EaKDwjpvDkd
at9HxC8CJ78U159PMHLeZXGPQPqPA7sFJ9sdBEQQRo2dn.NdgBUlLNpjaDNL
.NuSvbNdh+f16.5owSzbCXBL2qSqGPq3j2XAmRHHpSSX5J5mITmvkNr5YgJu
wNTYdhAGvzFHVOQqfHkpDvqDsh6BslMdAqhsLFeSAGmccbOqSvbFnKHIrcaM
+2ZL4W6GT.BzlOd15dd9308begBOskRTfcPQn23EJdBuR3+vqmlIw5CfUdQQ
y5xLI.7SqtQ.HxzKZm5F9iXyjhmIe04kdhG57TBUlJAc5.0Od7lpuBN12WKk
nKBNhFwvwJTpH6VchZhj2tN9PfZeH.Pm40BBGuVNoX5Z9lqiSU88rZgth2HV
Wgxx2dUrbfFeKhyl9g+3M6zMEov70K64ga7zWbf1SRmIqClOxcr9x0ImLfuc
VKfexCzD1.N5LiLvrwKbTlhZeCvnQD3bkASX2HRz38nbJEjudUNOm8FLAiWM
DgyTnvo50P+PeazV3O0e7BGhUr4sL1d3C8c9324Mi8ibC7d2FokP68Up5cHy
BX267WoDKN7s8RIz19hMJtU19ownB1t7UUxY4cx4zjySvEbBs9Kc9wCG6Tjy
9mrZK5RYB48cXEWH8wNXbgLBuUbQE6NLXA3R3BPiNxxSzeTevfvZJc.aXM40
0LXaS9wWhJ6PsM4asJa3.xEUSd2JKxcD3.wEPaUYkeAt1TY8diYsfas0DzVM
H3PpAACuD.x6lBPgWhZk2MUsJ3Rr6Fr8N3kvEf25.Vv42ZqePvkvZClSZaiT
3OjLgusbQvs1XxdVaV6rF7Ml0hu0dGUoBaEqMn51ytjL2GLtv1DSGzHo1pq3
GcyijZMqEeyijN+RTfFpLX8itjS1LTZPA1Fovu8CfVRTS458f2elkmlT9d20
u7U4qu5wTlf0nqquOkS+v22h34j8xG89RDcssO98YAlOejVd769Wvie2+G.R
jxdVJ5kTRA2RYT9SBYkbKCk+hERJPea6fxaXqkBko5wZ4lxXYlBofcx1wqKs
.iRfHIG8LmY9dfOMLsJkjsAKeD15W+bcs2Xe8U3WsjHN53pJPN8sbaUnkErz
cbr.a1nun5cTgR0y37oayLt+XUkIT+B4OWm9BgpwrsrmHXIEiNTBm6l4E3EG
Oy7swdLrpXbFkio7ExmDeK1v0ixJGBuRbSHEavESE7ZaxZq8vJAMzG5EABM+
x2Cff1GeN8o9hp9x+llOs4nHvtxKRIl+uovpJq6iyWXU.aKrJ4apsextZ4ad
6zZn33Hgk.xqh.1HLbaA+ND66UPtsqSrEqSzUXclciVGvMZcf2n0Ivh0A9p0
Qq9cTwpIWhiJRsiJPsWWbZsWXZGWTZpBR6TEilz3+tue2+AaVVrN
-----------end_max5_patcher-----------

jit.gl.environment & jit.gl.skyboxで全天球画像（360度画像）表示 #jitter #maxmsp

Blocade Labsすごい〜

Jitter / jit.gl はUnity/UEのようにモデルを色々置いて〜というのが作業効率の観点で結構厳しいので背景は全天球画像に任せちゃうのもありかなと思っていたとこに、 Blocade LabsというAIで全天球画像生成を行えるサービスをSNSで見かけました。

利用してみると単語入力だけで簡単に全天球画像(jpg)を生成してくれたので、それをjit.gl.environmentで利用してみました。

パッチ

jit.gl.environmentは横長の全天球画像を読み込んでjit.gl.skyboxに合う形式でテクスチャ出力してくれるので、繋げているだけです。

Code

<pre><code>
----------begin_max5_patcher----------
550.3ocuU00aiBCD7Y3WgEOmCg4iPy8T9eTUgbH6w4bfAYaRSUU+ue1qCI20
lTPMz7PRj2rlwyryXd02KXS6APEP9I4Qhm2q9ddXIaAuiq8BZXGJqYJrs.A7
b6lcAKb+kFNnwx635Plf2DtUx2Cj087hZtRCBBcn2Nlt72bQUgDJ0NHyRVEF
sfDSSr+PWRwUwgQjmNtIQeSautFzH5wGq5JoeoCbOmffElOm1DeKdlLmyePO
Au4IwECOHps1a991uVb6LupNrj0.R1D35Jjj4IeUpZvqnptvheuDtJwyuS7V
8mWra+57NOO0R0jTjw4y+Hd48foO2Jq2RVCB1lZfPIq+khwFwamFlY3cbN5s
yVMBwS9rAdCSK4GrRvFln5pRQ7cZnCh8bYqnADZx5JVSCqnrUZ4Nu8yS7Ctg
nHmbj9MGClu3OSqk87woVbdjafGMB0nW0oeZCVLQveuFGbAlFe9rIMWFoAYg
ytZaIZtjgFPoXUvGbF1K+MhgBzieGHMGyDOjc6Jz+J.IWbVG+cLqGtL28Fq4
cVWCBUgIkWCWZJmdSSYDsfZt38uzG4ns9+qJp1dY4vY8XdhbljaAklKXni7b
OKc8bQcex3DOAfnyAPoS.n74.H58BnjoHceT6bdCVW2dPpN1MBhIarqE8lOr
.WxEtkY3RIrmOzeJVgIM4EsIrXuY15bOrzYaCZZ2BRgIZ47kF5YfDycBiYV0
wbLAim9u4+W.RkTgPC
-----------end_max5_patcher-----------
</code></pre>

※全天球画像データは入ってないので、ご自身で生成やRicoh Thetaなどで用意してください

jit.gl のレンダリングパイプライン（簡易）まとめ #jitter #maxmsp

今月は今まで謎の存在だったjit.gl系の調査とCG系の勉強をしていました。ざっくり全体像が見えてきた気がしたのでjit.glで絵が出るまでの流れを一枚の絵にまとめてみました。

  • まずは”３Dモデル”ありき。読み込む、プログラムで作る
  • jit.genをVertex Shaderとして使うなら、上でつくった3Dモデルから頂点座標をテクスチャとして出力し利用する
  • モデルの表面に貼り付ける画像を読み込む、GPUで使う行列テクスチャをjitter系オブジェクトで計算しておく
  • 3Dモデルをどのようにカメラで撮影するかCameraやLightingの調整する
  • （上記の情報をDrawing Contextで統合）ShadingではGPU上のプログラマブルシェーダー（GLSL)を通して3Dモデルがどのように色になるのかを計算する
  • Post Processingでは画面全体のレンダリング画像に対してポストエフェクトを掛ける
  • jit.world でウィンドウに画面表示

実際は柔軟にパイプラインを組めるので上記に縛られる必要は無いのですが、jit.gl系はフラットにオブジェクトが並びすぎていてシンプルなレンダリングの流れがそもそも分かりにくいので整理しておきました。こちらの資料をもとに深めていただければと思います。（誰が・・・？）

おまけ：OpenGL 4系の勉強に役立った書籍達

GLSLのピクセルシェーダーで絵を描いて楽しいし上に、数学的な深みもかなりある良書
Jit.gl (gl-core) の裏で動いてるOpenGLへの理解の助けになります。またシェーダーはjit.gl.slabやjit.gl.shaderでそのまま参考になります。
HLSLとGLSLとは違う言語ですが、アルゴリズムが色々載ってて参考になる。ポストエフェクトはjit.gl.pixでも参考にしやすいです。
10年くらい前のゲームで使われているシェーダー技術がわかりやすく網羅・解説されています。CG業界は謎の英語専門用語が飛び交う世界で一見なんなのか分からない事も多くとても助かりました。コードは載って無いですが、頑張れば擬似的に真似できるかも？
ハードウェアアーキテクチャよりの話しが多めですがGPUについて理解が深まりました。低レイヤー・電気系の話は自分には結構むずい。
鈍器みたいな本、とりあえず買って家に置いとくと気合いが入る一冊（まだ一章しか読んでないけど、きっと凄いだろう・・・）

色1つの画面を作るのに、データ（画像・モデル）を別のソフトから持ってくるか数学的に演算で作成しておき、GPU上にテクスチャとして転送した上で、あらゆる数学的な計算しまくると絵がでる。ひたすら行列演算の話をしているんだなという事に気がつきました。

多分いまをときめくUnityやUnreal EngineでもGPUというハードウェア上でやれる事はそんなに変わらないと思うので、気合いと根性と数学力があればMax / openFrameworks / processing / touch designer 等のクリエイティブコーディング的な環境でも論理的には同じような絵は出せるんだろうなという気づきが得られて良かったです。でもむしろ３Dモデルの配置や制御だったり、アセットの購入やライブラリの充実などIDEとしての完成度や効率は段違いなんでしょうね・・・リアルタイムレンダリングはやはりゲーム業界が先頭に立っているんだろうな。

という訳で、また面白そうなトピックがあったらディグって行きたいと思います。ありがとうございました。

jit.gl.pass を深掘りする #jitter #maxmsp

はじめに

jit.gl系の画面出力にポストプロセスのエフェクトをかけられるjit.gl.passですが、ビジュアルプログラミングであるMaxにおいて、ほとんどパッチングをしないで高度な処理が走ってしまうため理解が難しい存在だと思いました。そんなjit.gl.passについて調べた結果をまとめておきます。

jit.gl.pass に対する様々な疑問点

便利なんだけど謎が多そう

jit.worldのコンテキストを設定するだけで、なぜレンダリング結果に対してポストエフェクトを掛けられるのか？

ソースは見つけられないのですが、GLSLの機能であるFBO(Frame Buffer Object)を使って一度ポストエフェクトを掛けない状態で3Dモデルやライティングを考慮したレンダリングした結果に対し、ポストエフェクトを掛けているんでしょう。（ソースが無いけど）そういうオブジェクトだから・・・みたいに理解しておきました。

DOFで深度を使えるの？

jit.gl系を触っていて3DモデルのZバッファや深度情報を直接取得する方法は見かけた事がなかったのですが、jit.gl.passのfxサンプルの中には被写界深度エフェクトのように明らかに奥行き情報を使わないと掛けられないエフェクトが入っています。どうやってるのでしょうか。

ここはjit.gl.passのリファレンスを見ると、受け渡しできるテクスチャ NORMALS のなかに アルファチャンネルにdepth画像が入れられるよと書いてあります。3Dモデルなどを一度レンダリングして画面全体の絵をつくり、その時に利用した深度マップもポストプロセスに出力してくれるという事でしょう。

DoF(Depth of Field) jxpをみてみよう

jit.gl.pass のプリセットエフェクトである dof.jxp のXML定義を見ると

最終段階の mrt.dof.jxs にNORMALSテクスチャを渡しています。

さらにmrt.dof.jxsを見てみると

受け渡されたnormal テクスチャの 4番目 wチャンネルを参照して被写界深度エフェクトを掛けています。

ポストプロセスにおける Vertex Shader について

上記の jxp ファイルを見ると一つのDoFを実現するためにも複数のエフェクト(.jxs)を重ねがけしているように見えます。このエフェクトは画面全体のフラグメントシェーダー上の操作ではあります。ただここで .jxs ってVertex Shader も含まれてなかったっけ？という疑問が湧きました。

.jxsのソースをみると sh.passthru.xform.vp.glsl というVertex Shaderを参照しています。つまりjxpで複数のjxsを通過する際に毎回 vertex shaderも通っているということですね。

sh.passthru.xform.vp.glsl のコードを見てみると

ほとんど何もしないようなシェーダーになっており、受け渡しているだけです。

こういったパススルーするVertex Shaderを利用していればほとんど意識しないでフラグメントシェーダーの事だけ考えれば良いと言えそうです。

少し余談ですが jit.gl.slabも似たようなフラグメントシェーダーのみを対象としたシェーダーオブジェクトです。こちらもjxpと同様に何もしないVertexShaderのGLSL330 versionが書いてあるので新しいgl-coreの場合はこちらの方が参考になります。

genjit を読み込んで使えるらしい？

jit.gl.passのリファレンスを読むと、genjitも読める？的な事が書いてあり、色々試してみたんですが、genjitファイルをそのままは読めませんでした。jit.gl.pixから一旦.jxsを生成したら読み込むことはできました

  1. jit.gl.pixをexportcodeして.jxsを生成
  2. .jxpにfile=***.jxsのsubpassを追記
  3. jit.gl.passで.jxpを読み込み

paramも.jxsで定義してあれば、jit.gl.passに通ります。上記の画像は edge抽出シェーダーの後にjit.gl.pixで書いた四分割シェーダーをjit.gl.passで書いてみたサンプル画像です。

まとめ

jit.gl系オブジェクトの中で一番難解だと個人的に感じたjit.gl.passへの理解が深まり、Jitterにおけるレンダリングパイプラインの概要が掴めたような気がします。次回の記事ではその辺りをまとめてみたいと思います。

jit.gen を用いた 頂点モーションブラーアニメーション メモ #jitter #maxmsp

jit.genがvertex shaderの代わりになりそうという事で、モデル移動方向と反対側の頂点が遅れて付いてくる頂点処理を実装してみました。高fspだと擬似的なモーションブラーに、低fpsで使うとディレイアニメーション的な表現になります。

頂点アニメーション

ポイント

  • jit.gl.model から @outputmatrix 1
  • jit.unpack でポジションテクスチャを取得
  • jit.gen で ポジションテクスチャを処理（後述）
  • jit.gl.mesh で移動（現在値・過去値）・回転情報を取得し、jit.genにparamで戻す
  • 回転処理については以下のツイートに注意
jit.gl系のクオータニオンは計算で求めよう

jit.gen コード

三次元的にどの向きに移動しても破綻ないように作ってみたつもりです・・・クオータニオンや内積などのベクトル計算は大学以来初めてまともに扱いましたが、使い道がわかると楽しいですね。