トーンマッピング(初級)のオートルミナンス #jitter #maxmsp

ポストプロセスについての本を読むと、トーンマッピングといった自動的に明るさや色味を調整する技術がある事がわかりました。例えばゲームなどでステージが切り替わった際にある程度自動的に明るさを調整してくれるようなものです。

今回はjit.gl.pix上のみで動作するオートルミナンスの試作をつくったので公開しておきます。まだ試作という感じなので参考程度にどうぞ

Code (jit.gl.pix)

今回は複数のnearestや関数を利用するためcodeboxで書きました。

  • paramは直接codebox内部で宣言する方法もありますが、一旦codeboxの外部で受け取るようにすれば、codeboxで同様の変数名を利用できます。この書き方だと min / max の指定もしやすいのでおすすめです。
  • 入力されたテクスチャから代表的な5ピクセルを取得し、gray関数から明るさ(graymean)を求めています。この処理は本当は画面全体に行いたいのですが効率化の観点から擬似的に行なっています。ピクセルシェーダー毎に同じ処理をしてしまっているので、外部で計算できると良さそうですが、jit.gl.pixで行ううまい方法を思いつかなかったのでこのような書き方になっています。
  • paramで設定した目標の明るさとの差分を取り、それを入力されたピクセルに足し合わせています。大抵こういう処理をする場合に生の値を足し合わせるとガチャガチャした変化になりやすいので responseの値を使ってゆっくり変化するようにしています。

ちょっとまだ改善の余地ありそうなのですが・・・ご参考にどうぞ

Patch

----------begin_max5_patcher----------
2561.3oc6bszbaibD9rzuBr7jkMEy7.OyljZ2T0dK4PV6aqSwBDXDI7BN.Ev
PIJ6x+2y7..Dfjfb.AAEpTVUQIg4Y2eSOc2Sid32t+tIKR1RxmX7WM9Ci6t6
a2e2cxhDEbWwy2MYs+1fX+bYylPIujr3KSlpphQ1xjE+kH1rEYAI49kUQ2rN
YCKlvj8CUTZTnr47g3QLnrop1wdMknnDwnMesOKKZ6joFSlX7eKZXpOKXUDc
47LR.S0VK3LvTCjoi3OVxeiPy.UcgSFQzRp.JJ662eu3WS0jg8YrrMQSpnfL
+0DFIaNg5uHVRvfixwvC4XjWqb7I4QG2YVSMLssmAAdPOKS.B445hcmZ.s.m
gkKJTvFRBIijmlPyISt.r3DK9KimkFs03S+1G+jwuP4XjQrfL7oAjiKQfODe
ftmThXY7bwTtIiHjJNrDMjSrfRIDnqsdnlbfHYEPRAlb2jmhhIOSxxiRn0ZM
GjSSqU7c05h.H+RhbfbmVUTDUUjUUQYjmiJ6uYUo9Yb1gw4EAmJPqs1lS1ML
IgjLJWFsTBWtjVPRxEOw5Qdpe.Y2xEgVN.S1ARParDlbrUajfNVR3BY6tCo3
BIKiSB9SRXMge9RVJgFQS4hWDJymUvCUUGRdxeSLa9SITVdzWkTBji+Gq9mJ
nziVofWjrwulE4GWwDKyhBSnBhnwJhn3xoiyeJ1wpNyHaA0O8HclKSxglVpL
myjaxW3mIVvJzDfJqjkjD2rpp9ESdhUTcZDktGJxRRauxrnkqNQeWjvqb8oF
aYM4y2PU0NmKavlm6+bSzl4GGWrSu4vu0mFwUKSXQpk.DnpRk1vU4AYIwwM3
WUMOejZB4x5AjWhBYqjSTcgAdyiRKEhlTsJGFsjjyZVFyeYdyRxYup.8ZEsY
QwdYtFi0owbtnYC36RhxY4qRdIungkBZ0Afc1Jqu2ttZyFkeJ0mMUgJsqXTp
aliEVF+BW8fAf+G+sFv5c5n1Y1WWpU8dzt4lVUWhwhsJXOod.f69pKOTkInr
boMkBkPWefhyJFn1QCvwQC7jSyt1PoYTSWSIWacd1EdaXWkbAe+.adk8zCjN
PcV5.0OoCjEplzgI91JcDvs2IZYqLMpVMGydx9fwYPio5reQJ+nbqvV4qA1x
dODoEaes48QUepL48292bCQRC4g+i5zr.QjMXYl+quKHINI6gu84rOS+LS86
LB20ApgrlYaMdOWDB44Y7ghRdk+ebgJWmpR9prMPn4OKG.9muW9OAb66jLi+
twyjf2w60T9mGjMK4omxILdMfYX2pNJ9vcMDvK+cThOWGG6cQT3T037fpq7F
.OdC9fXZTi7T0edXWePmnOOVzoGOnWXM50Acx77j2dyT4GwhxZhOUL.xEHAZ
7.GpKe.V+AT8Gv0ev7gG9KVxQNjDy7EJD3C4d5Fdznb5pnAtDs.aqS6b+NWK
F5cCz6qL97yE8AIG7iT+jaipOt9sta1C1SydpSSo79cbYzC1YidlSzgYMcA8
wl2NGoiins4djbxE0ebXHOYSVP4ZToFYilDhPLmKhW5R3eTwhh1o0pvEQDPM
HB7.RDPMAhRD6nqP2uqj2vfeX0qfeXhtFA+noxxKIDHhCOm9RDML4EsizEDd
MhzkIRxsPty3XGAj3glgq8CxhCIXauYHqpgI+UZPcfXLEML2KSd.Zq7QGIcA
E54zQQ.+7T9XMOSrCZxaKB3zKD.4AtLDHymtb3C+2yQKoDl16Qr6Pn+zHPeX
W2YHnK1C3BLs7brE6Xf13eD1uSF1O6eD1ueD1ueD1uaVX+9oGM93+42+zED.
m9FeuhWUlqLDNVdil.d8X2gBy9AEX0QevHEH3Ib27zPA51.Een6PQOiqGla.
vZLBEEgGW33hHrT8L13n9Fk.auZvDzCLZBTPINEF4SMZBSWndFv0QOikxyKn
0HCppeZ.C3rdFVcm9AVl1Emvq.rFOAfJecRBaUNij18WDE75nd1QhFNvyiI3
aCl79tuYxqePAzTs8AL1TO2cnvpm5Uf.0VkxiBOZfhmIAb8GfNCHl8cahqq5
PNxMHlNmeaxnU1.2ysIlP65pQGOxF4uD8UiW6Nd31S7P4mhkbqhIbz3puDN1
1c3vtu6TrGmvQfeL26VkiZbm25tNDn0UQGBRoCABAiFkHwD5R1ptKp.tNJUU
gXcLIqHdAtc2+C7UYmCRYhAMZ7NcUdLJa4htuew6Z71hwHklD2wkh0tamA5d
c7ICh++CCMPmqg3QIb3LZfiBWTuDCL1Wkzqvy73Iq+a1Q4jBHes6vg4U47bi
uMLbkoHtR0tCH3qg7gJZziH8oWV52XoU52fsAirTN8MLuqf8IuqFjLQxQy7u
QblUQxBMHIAjktYAjHpJ6kxRIYgpWjM7skzPdsSZfggz.ZRZBqZC1Zmot.DF
LfoQlT7TqDpCNfXgHPF5uaZvvB6tfECFUnszo0PliidcYOBZnnBKcUhXdPCG
X8a5SZn1IsgQ+1Q.iVrJLjxwHrt6ocu4.j1jl8MWrB0k0tgReLB1k8c2T+JP
cJwmuo9UfzUyMZH0bC0Uy8fRDtcwwzAiJb5hQrAiJz0sB3P5bCzpKJVFJC5P
ytbpfACKzU+Oz8Vq+WeRyocRC8FSZl2ZC55ZS.hG6WFFX+x7eK6KMy+EIF1k
j5+qI449KIGj6+jsoIYL48OU6KBD3BYdnJy9UQR205z7N5BXxfj0qIT1AL4u
tgkX7uN8WmIkK80Sj8isvClbtqtf55TahUei1.pwf0Shdr8LvoVyaly7b4SV
B03i9zbi+YRb3U91e7RRVbXwk+PsaPj7gOEmv2YRWJ9eNRktgUdINpBv34+N
gA2g6ExBe5xye+PTwX1QtEBCgW+uwfjWQrX+WiixYcWaQIFDDGkthHR8eUN2
Wsbejqw+YuWY7OgQAB0j9YutCdZtpTmlZU5Dp19AUpfDoiW0nEl4+BKod90e
bQy3jjz5OG5y72+p1H39VBgq+h7j3MLBmDWod6ManbQsWHYyVmV6MxHutNUa
ANUi9yHpBSWm7bDQTRsFT.2ab.l.WWm5Ya99bh5p3SYbcHyE2SjVrqU0KsLR
d.6tHJNNxOK7Tb6IZiVLqGDC.bNF+VyrK8yVvs6LiSrswqs2DsXULxD.rcQN
u0rZXT9JR9o3zVagVLpEFArgV0SRnAfQGINXYdY9XTl4SE53550KVBLusLN9
BcsDodeqEWQxty5Kj2RMJ2Mw5.fryMeebJ7XeW+KPkCb4uwIyZwc+Zmp+.bW
24w4FMO1ZLOkGGsWSjoFSD5JLOXnFST82s0kOSfazZDVm0nlr85nvzjHJqPJ
2Rlyw1EesYYZd3S7itotD+pzSV8XOo6luLmgT3p4aEYPmoa0hN5VIFC0QkF9
ZLQWDxozXu2MZWLE6cS126Vre3MXu8au992bc4sV+X2XcgQy6+98+OLTPZsN
-----------end_max5_patcher-----------

色収差(Chromatic Aberration)エフェクト #jitter #maxmsp

山田監督作品もさる事ながら、そのほかの映像作品・ゲーム・VJなどでもよく見た、2010年代にかなり流行ったポストエフェクトと言えそうな色収差です。

Gen Code

  • 右上では、色のズレ方を計算しています。snormから取得した値からlengthで値を取ってしまうとアーティファクトが発生するのでabsにするのが肝でした。
  • 3つのsampleを用意し、色のズレを反映した位置からピクセルを取得します。
  • 下の方の処理は、ズラした色の色相を回転させるために120度づつズラしたsin波を合成(三相交流)して位相で色味を調整できるようにしています。RGBのズレだけだと画面の色が偏ってる場合に効果が発揮されない場合があるので色相変更できると良い感じです。

exportcodeすればGLSLでも利用できるので、Max8以外の環境をお使いの方もご参考ください。

Patch

----------begin_max5_patcher----------
3137.3oc2c0ziaiaF97L+JD7wry5RRQJJ0SYaQu0KsI2VrXfrsFakUVRPRd9
HK1CyjEsMnAHWZykfhhtaPaA1to.En.oa6+FmO18eQoHkskmwxCojoFMCBRb
LIk466Cede4K+Pjew960aPzodo8L9oFepwd68E6u2d7jxSXuhuuWuotmNLvM
kWrdOxOqe7I9gihNo2Ah7CmMMZVVfWFuDnhT8GwKezfG8wPzhhJJW1Ywdh5L
+m6votYI9m16.id8L9rhBF6lMbhe33CS7FlIJqIh1GbfADx+.Ssx+.Ya2GAs
Mc.1.LwgZQIK+MROKbX9iBWIm9gKDSXdZe496m+OGHot6lkkLyu2RQLwcpWl
WxgdgtCB3ZDXiPB7pPhSkHxVw.aPeBSocPbjf.3P.6KKel00whDykadMOYlW
uaV8lzH81xtd58vYIGWKMOz6DlTuPly7NMaoQv3f9w9mZ7vewCdnw8CYHhwv
IIQLtr+vCcG3kjv9eQgRaiffa0FYbvg409rDuq0Ng.yQGSDlCRXrbXE+GxKo
.KJ.i85cjef2wdIo4pxpRyf133RIuWoGIGAeTD+Gx9fkI4GJRhrLoDui8W77
3ko5lvTmLltjqo4XyoV3dq9YhF4kDxnhKLf4skEhDuUKugHM1cn2p1IuEMB4
04BPBhL4jHLfSoPPpfZgvfUHEicLNHZ3m6MpDGm0.E6E5GFm3k5ElIZkKm8H
uibmEjc3QQgYo9OlKIvbC1Mj+QER5FyLWW3pwmj36FrTIFm3OJJLWHVqEIO4
EUGS+HBKkxJCuDgtwa3gYLPFzTQloLkbV5.2j7FrBCdzhLyhhBVOqkOWf2QY
EYG6GFdITLKJt5LS7GOYKO6fHVlS21uMOmzCmEJx8PF2H6vT2iWGsybCBJLw
W+m+T2PelorWlunI.AVlovo2jzgIQAAqouhbNdC4Lhw0G5ch+nrI7JpLYfUb
+3EjndKakG4O1KMa8zxbGmtdJoYmI.8RIMaPgsLyiwz3.lVrdAXVI9oYoShN
IsnfKHZkAfUQET11tr+x0R+R9MGFMcJy3XokaYmm+RuvwYSle9ea9Ee07K98
yO+uO+hud9S9eyexuY9Eey7m7GmeweY9E+y4O42M+7m8gW95O7srx7px+TA9
gdCilElUlIxchUxl7vJK059hAkxor+X6x03FbyZ4H7XXYVpOIyR9YqHli8Vz
KTg2KMfvu8MO8Cu7Mu86e06+2m2SYEmdcJtvyIETVwQftfh+CO8eM+hue9S9
GyO+0r+OCDd2qd56e9KUGDHxABVTTmCD9ve3+9i+ou9su46d2qdMCGD.x6ew
+Y9EeK2J6EJiFPmqAMb38uY3f6bfw6+tu4G9qO+cO6EyOm4W4YyO+OKvie72
9b0ggqyk.wlHh4pSZXrfJntdecdDvXtdaRo2HJ9ZAoutdmNzMvy.X7fe0u9g
H1mvpUd3lU90bDT8fVpzOgkXXpPfXrqWYjKWEZPsCz7SLf8IJCGv0ICpCHPG
ReJarb1h9MMQWOf.aK.AUC3ng7CSKGNbPYeV.DcD33ipgwBDZsifCSgYi0sb
1gYSMVvB3.itSvNv6H3.3bmfcfZHb.fqYrbamc.2QvgXfIcH1wGUCv.raLUr
M4wjgb3yeZWHti6oNX.bZXuJH6hNYA2A.C6FxLHlcTvnFlIflFMJV3yvFZdG
fYzvfuVFJZmyJoN8tBZXj4DVupki8x71b2IfFF4E1ztOpTnFcGtQpeXMfiFF
WtI1VL6e1qlumasTiFFEJxBJnFEAk2cnFYmDE6WC.ogwgRnHtiih4FtH.rsB
Hf1ZTJl0.N.6F3fBgcrQoTGWGNNMMtbZeRWzyw8Lpm4hSCCGEaSEVKXt6Cry
sa5QSiGE.J66nCwO365GiIy7L.8MtOq9Ee5dZMFpuCbGwY.hEbfZ0Ybwdr2P
CP9eTFTra5fbAh9gsL4QpRjnaGyVxP5D+Gabl5.hcS63gONFBg6pEC6NNVxw
iSUGOnMMnURGFOdr53gUSmHDw3c6d.RCbhzzYXm1ochntQCsgizi.4wqcmwn
g1zQ64.6v3g5cxPa5hN.Q24bhPZnSDBObrtmKj6wButuxnQCcfTr0nfhfQLM
uUuFc16Dr.AwcrEnKd4Kyh7XQCcjZI1rTHwjsaB6L6KHw.83uwDWcndpa9P2
MlOE6oNGRGZxzHpiFMLj0hMXHDHriHcFCH2Aop6LY2r05J1.1H6awSBucSiJ
ylOq6lTxs9kz0F1zQ4JbndW.JZ3Lua5XwGLW2CK3wl1mj+W06PogySFlTfFb
2FTXGZC4p9pbSsa5v4DQgPocr0loVfAcm35.QsuK.FVM24Qw6Wc2BLDwmt5M
rk4DwrHJ05tdDDycRXYDQfHl3NSLppuIhHncSDpV3NVWNwQAYQCcSpFQPaFQ
vWiK1CjxyhnaFwKMFo6zmyGqLAA2XmrbsGJ1AM2IHHjc.Ag4skzEIHpG0JF2
7NdHcQOHLtQVDiknNAwbmQPDaKfND+HMLJYp5ycl0tIrUwVFA0Y5uslKJCpo
6NSKRGcQHp4p1gZZTHztLdn9pTgZ3jhfJ19tcP.wcZbfmw8GDMKbT9w6hA6w
lFqNBA1QlPHwKpqUGxE6NBhZ5qaFg2g7cY.ZWYk0Agn50Ms4tYF5EKdSGpeZ
+v57BJ1POLNqBYQlEqnkfBlhrMrnhiDBbOIe8CcDGFY0bkpVc1UkeX9TwIRD
u5yyey.QZzrjgKZkJZGMVWNF4kl4Gt7j75SW0kxkJXTxHwQjlbMNpJYanFqP
zvUKZnaVQKeCWUknAuYEs7MTZ61fZCTgqAM9LsHExR3gv1toCJssHrsI7RKZ
46ntNJpkuigaYBOREt1MNgG05rJYwGT2UznsuaBYEs7sDdKS3UhqoKBOQV.J
exYykh1CfjWznUKZ5gVQLkTzJXU5g.QjTHHZTHPxhD15TJfP4iTAoU4P5dwx
OxEzlUsCUZ3.pU3vTZ3vVm8pCwRiGlZDOxeEfkTLv5rYAHcyBzRqzChzzCGs
ROrjFOzqWLfzxAUqxgrtOzIKUVtgN8mijkXPsa6HawxhOTcZBiskUJzIgkJa
yzhYUQORgrVM15rOWprsH15zvg5nRKRqNrB4EMXaOrB4EMT0hldFiuirzJGZ
aO8CRKZ7yxp1cP9JHas9jA5H6XlVnD5YTrNJECn1DCocapyHQsopHEZCKrTQ
JP5RJvJM1QsAFJDFptnETomjEcFPNEohTnKZAEphTnsVDIEBcNaBxZkRzYfd
DrRS3k1FGhziXUm9JvxBFXcNMB4aZ3KEb3VvhVM.WroJSoOn0EMnrscs5HVj
G0Z83aktiotvjzfMa8skirNDH5rKSDREoPaMSPUjBc0wMRkNM01DNCjeg.z5
16AH+vSoZUNnJgG5agQrTBOzmbPTZJMzW6h7Q2YpU7PVyVGGsJFRuJy.8RSk
dch1.QRyc4ohvgTK9yB3TjhhWGyqeE2sZSL+yWbyKa7IWyMu7hKp5xW9ta3Z
pd40uR0WvxXw0Pt338lT5xtqW4K9W94k+Vt1kW+d9c.K6nPiG3FlZ7yhBFsi
uxpOIJIXTwMVs3xpk0vc+iBhX.V33kaC7KAYlWEdLk79befa3XYuupKN0E.N
Wy8UcMfD9cVef6YA9oYpeKluP+GF3GOwK+hIVbi.urgcCGJXW6EcO6ui7Gly
ScSNaE7vdr3YYKupuKISUBbPbwstn0hyyjk+ZiRbOIKp7s+6lIgAQQwk+9H2
L2KeQfmq8UrA7cGjFELKyiIhSDusIyBYjpS7R5OMtzaJ.+xDeIYeaE5y8CEX
5zni88xSoTAJf6YT.FXaSK+xSdYMgK3LKLlOiCyuEqqv82xmRJeoWQcG3GD3
6lLZaZ6VJiTJqCzD.XZr4MsxN1MYf6Xu9LgsJcs5hHkpZhv.fkc46g3aFUcj
e5DuzsooUVBoTThIBXAIkuBI0fh1j9acyxRl4qtKyMziJtROiRz4.Dt1MKa0
cNTjXtbyqYNvbyp3HT8zba.+jOPblDotlu5.xor9ye30eYpDvwkCPr.Ttlw+
K09p+RwpdkVhcZUat4ZF1nZ1QhJFUZ6fT6JhzVUDVlJZGTOqOoU5TipYEILH
biiO1KIsnz75f4O3QQbti8A7u5GJ9Jg+0Dui8WTdLOE2DlEbFy7sHvsdmZI7
40K+URNIj4NQPDYZ294wSw70j2QRZbwvP3tj1+K2++SD3n..
-----------end_max5_patcher-----------

ビネットエフェクト #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 のレンダリングパイプライン(簡易)まとめ #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.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におけるレンダリングパイプラインの概要が掴めたような気がします。次回の記事ではその辺りをまとめてみたいと思います。