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

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

  • まずは”3Dモデル”ありき。読み込む、プログラムで作る
  • 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 等のクリエイティブコーディング的な環境でも論理的には同じような絵は出せるんだろうなという気づきが得られて良かったです。でもむしろ3Dモデルの配置や制御だったり、アセットの購入やライブラリの充実などIDEとしての完成度や効率は段違いなんでしょうね・・・リアルタイムレンダリングはやはりゲーム業界が先頭に立っているんだろうな。

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

jit.gl.gridshape @matrixoutput 1 で出力されるmatrixの仕様と jit.gl.mesh に入力するためのjit.unpackの使い方 #jitter

jit.gl.gridshapeで出力される難解なmatrixの仕様が見つからない日々が続きましたが(過去にもjit.genでなんとか頑張ろうとしたのですが、)仕様を見つけました。さらにjit.unpackで綺麗に書く方法を見つけたので書いておきます。

[jit.unpack 4 @jump 3 2 3 4 @offset 0 3 5 8]

jumpってなんなんplanesとかplanenumとかでいいじゃん。jitterは行列演算なので数式さえわかればmax以外の環境とそこまで遜色ない事ができるとは思うんですがhelpパッチも含めて仕様把握するのがむず過ぎると思います。

outputmatrix 1 で出力されるmatrixの仕様

やっと見つけたよ・・・

  • plane 0: x coordinate of vertex
  • plane 1: y coordinate of vertex
  • plane 2: z coordinate of vertex
  • plane 3: s coordinate of texture at vertex, if textured
  • plane 4: t coordinate of texture at vertex, if textured
  • plane 5: x component of lighting normal at vertex
  • plane 6: y component of lighting normal at vertex
  • plane 7: z component of lighting normal at vertex
  • plane 8: red component of vertex color
  • plane 9: green component of vertex color
  • plane 10: blue component of vertex color
  • plane 11: alpha component of vertex color
  • plane 12: edge flag for connection to next vertex: if = 0, no line is drawn.

出典:https://docs.cycling74.com/max8/tutorials/jitterchapter99_appendixb

これを適切にjit.gl.meshに入れればモデルが表示されますし、jit.genで任意のmatrixを変形させればインタラクティブにモデルがいじれます。

jit.gl.gridshape の matrixoutput についてのメモ #max8

このような音に反応するPatchをつくる際に、jit.gl.gridshape のアトリビュートに対して @matrixoutput 1 として、3Dデータを行列に分解して出力するのですが、その時に出力される matrix が 12 plane あります(多い)。planeにはvertexやnormalなどの行列が入ってるはずですが、それぞれの意味する所・種類がわからないと適切な処理ができません。

Reference や Help などを読んでもイマイチ何を指しているかわからなかったので調べました

matrixoutput

上の画像の通りです。11番目のplaneは謎でした。とりあえず触って楽しいのはvertexかcolorくらいでしょうか。

おまけ:音に反応させるpatch

動作デモ

上で調べた結果から、vertexに対して波形を掛ける事で動かしています。CPU上で擬似的に行うvertex shaderといった感じです。

追記

サンプリングした波形の値が両端で揃っていないので、円形にマッピングした場合にアーティファクト(ずれ)が出てしまいます。

右下がアーティファクト

そこを良い感じに補完というか誤魔化す処理をgenで書いてみました。

波形を反転して、x = 1 付近では反転した波形を利用し繋げる
変なアーティファクトは無くなりました

Max Patch


----------begin_max5_patcher----------
2793.3oc6c0riiiaD9r6mBAebSuMDIEojBPR5ja4bNNXggZa01Zhrjfjb28r
K1AY2q6sEHmxsMGywbNOMC1.j2hPQRYKYqennMksFLXlo+gTVrpupXwhjUUy
2c2r4OE+le1bieqw6LlM66ta1LVSEMLS76ylu06skgdYrGa9x3sa8ixmeOuu
b+2xYs+mix8SShC8xChiJ6MXEqu3md+WCgkMl3kubSPz5Eo9Ky4CM1x8Ay6M
rA1EeCfMK9Fj9UiuQ7gh1sMHJzOmQDfCMFuKurUyhF+96tq3K2KI2D4+Jk3N
gYBi8V8jWz5xN3iR9GR74z6bVm6ItJrIvoC1z1zhyXL9C6v9E3v3RvkiKeeP
9Cq8iZkIo8uXqWdZvayu2XdyrKnC1kf.UjpV.UXWX0WuepfIEb4r4OGD5+he
ZVgN2g2wr4dIIUZdVkORAz79X1Kx498MEDwaBsuoT+WBN90ReuoTlLmxg6RY
nz72HVyO7ZhW4mFsKXubhIjDjDSbD4s0OKwaoeCBfhwbOzQXpH.S17B.fP3+
J19.7Qk5qCiW9W8YhCyxFiS7iBhRR8ynSS4yFq18J+m81Elu343n7rfukQH.
pPoo9eVPnM1YAqv3h+XZfW3ddXcZvp3nBhnl.on4xg6czY3744UYF1SD4kzv
GlpoQQlV5Lixj6xdxKsPd8TneEsFptdbbX8t1+4B8eNWzcRPTzQnXdbR6clF
rdSGe1mhoctsq2MqmrE6h38tfpZjuHy6k5nctWXnXpa8W+adQAzIl94AbQ.0
fRYm9QdTFcS1xz3vvZ7KumWZnmUTU8k9uFrJeCafppLPe7fjRkn46kxqBV6m
kWusbu0Y0aIK+CbPuRS6dRLUdQt+1D5xEG8.zIIAY4YaheMS7fkJZUAfCqYU
cpcU6f0ZuK6g0sItsvX2g1Owl3dqfmXIzs5mqo03L4VAYlAsLO1X3oFDQ063
30.lUtNfvLykGKRhe0.oHZ3zCZ.sXl.Pb6bV18CGfqMb7UFeMPQzvrGz.A39
BH7OXJfFYuF7sFePM7nuoJHwxcHTyNNbqBGJZ5voWsCvTCNntSsUMvvVNvvV
X9nerv7ZiEu3uzvzvTM3fzGbv8PDZQj0NJ7pqa36kV37fR3AtG7.3xTOP.95
JtS.7HHxP00UjxkC9TEnyDXpBcDqiEUXVK47uhKxQ3ywHoYCb6gMpDFD0l6m
Lxpn+lggr3coKKkpBK+F0oPpG24AQ62116N3N0QOXb5J91gkSzLTJCHMoQWL
2.Z7M5gJbkjJr3OmdHhgfDipPBODJCbkgGb6nioVHLx.HLsANlRRDDMp.K8T
YywVD4N.zQWhHaIoA2wFbjkvF3ZCBXj2x.OH41N7e1AYF9.6H713k3a7oe7m
+u+6e4W+O+xm9g+0+6u8O+0e5u+oef92+wm9wepg6F.r+tApdpjVNkGDUiN5
Yxbnwg42qCjs0HhUkCWt9YT9Dcs83Hi+hWTlweJNb0b8duBOGFSeIGNa7TJg
j6mtfeHbU70hRloa8X7Dosygu3z2a8BGr63.3cfhCahARXSkN.9K3spDrM3i
sdaCYAqi7BajGQt8eoJXt9.xZrtTkBc9mSxVuKnpx6QGYdyBylYRmllDb3n4
aj2sYRVW9l.cLKc8skIAUNndcI5kCUJtnjJGw4PPI6giRN1L3gXadqfRLiAs
OUfZ8nvjPSrOoqYBbkeLoBeBP2JyDJk4VCWlaovLCW7MlLuEihoF6RVUbKHs
BKMBInNu2Ul9NluweLpaKhl59ZlyLVk58ZCK6i5Jj.rgLp2w1husdULqadIY
h5hoprQW2AtsqaE1.iGK1nXNYxqAQqhe8bteeHo+UdsK3GpkFB7ALk4.UXtr
ODs7H9ZDmZUfAKKH6OdVPPyq3f5z5CGYHPqR2Ro.C5ZZ8wKOOsa6yc4jpbFk
1qqTLXb2fKdkLHavPnCBxgPP0PB5LvvUAYIgdenbYnK2xeiAz5bBzx3CUQUr
K5BgpmO7oruPPq48t9OxAMt9Bs1KH5iyUQtK1+SqlgP8aIFYxsDyitfhqDpa
1c6tv7fka7hh7CewiJqixa2i.Ur5jGudcnuRvQPTKRcfDAXmXWf6+5UJ.67V
sr286dem67Ez8Ne4tSPZ4JOtM1i2v82GPFt+9.De6+t12396eIB5R77dOWLD
VpftD9kftrRLIg3ygvrSdjZFUD2ElDyuD0keIpK+RTWddQcY8KOntUw+vb0B
MJaWQD06V4nNLub25uFhwgeihABDruHeQ3LuMGDbYaF+1NxW9JEgBTePA2.N
D3NYfBE0Jv8EtbtbkBhym6JE39hTNGgNg0zAITNfi6Sq.XZIxuD6IS.G+6+c
pFCk8YtvkXyuq.liynoQzFS4B0Pi9VGw0gmyQH9FHfSjDU.9fhKlXI4bEt5w
oWDwMn5QRwynlUz9huVWwIGR.Mea62fnQPjATMzvpWKGN3RONukhv1t7ztHx
7Orww1hAg1yLC98ohtsb2tKFl9CKiiSW0FKa2alJIbbfowKbj5FmmWFGFm1F
C22B.XwsTZwioJ7TfgewOk9ysvwPGoBcbfHsrmBahjktQ.E8ND12RdhvoSrq
ZKmoR9WATzAQXe14INtUlRHSVkba.HtJhG8YhfvS2nR7.NUvCGEwi9RzFB+h
2lb3gsh3Qe4yJluXoCbZAGDMk52V78NL0fCrlx8aK94xM0fCKEgCa47otb01
ICdnZoAn+TZ0ZRhGJtISP+ozJrh6oSG7P0jZ0RtK5XxgGZJCvEW3+TBNDYDe
S+QSYEdYPQP36gWhpuB3y37BGTKWY9bOwvEbqUoNvjHyvkNois5H6+Lut4Cc
GY7q60kxHsSYNWWJytcJy95RYcjloja17tGeUoLXGITs00kx.sSYnqKkAamx
fWWJCM5EgCYoLqwN2zACqrFzHjoILCOfx9f1paICo1SfzEQXO.hvRWDgy.HB
70tLxTPDDMQDPyAPD15hHFR0ZwQWDAb.DgqtHBzPJOL5pzrzfk6NnBcUBTrj
EKHi9BM3afB.kzvyn6ffrDFTinCwZ.DAXLQGooL6a0R6CTi9nHsQXrNUdj1x
iNUgwR6tlsNoBYs0w.MvnZEVZmpIi9djrFBpMpjFYHfF3ljxrGaMM4Emvwlz
HvafBJH1dXkawKbAfS6o9qoJo9KnRxueqm5ugOrwKZUnuwid6xiWjFm6k6u+
tMF.T0UR.C4EFaQR.Cv3qbkeSv4a8y1H3aVDploBei5O4msrEUjldJ8QtiAe
+ZbZ3JiG4IBJ0tvirJZAktK94BMbCL.V7OISIb9+uD0VUhnyxE.O1s4+2wCD
6phRA5hqTbnnQ9HmIoiVRw08Y73pfsT5jT7uyJe46WiARNGP47KHOmeEhw8j
JDCCTkf04I5CruIK5pf4b9rN.0Y0wo85lnHt7.pUYLuIXc6SX8MAgA49KplB
.csDA7RAArOW8q.miHG6hi.W54nh64hqZD6kcjpe1escXN0Nz3i7HW4gt9gx
2uuaJOPXYXwKv3.FBVddiDPhQBTw4a00OjQHcD4T+5SUmIkYjMadjM0+Hi0x
bBYzUqekZWLld.SStvLsqLV6tDyPqsQ41XQfNPWoFYXyiLT+iriNjqPolG4N
VqhU+BltXBVYLPBIZQxJyPirzhnUpg1VG.NRJYs8EPqB4NfQ5xhuRMzHsrN.
YrfWmwZfjAKO0WZtS7GUH2JFhiJfaGU71Nsvs0dQa63B1FqXs0TgZqXmT288
28+gE.Z1C
-----------end_max5_patcher-----------