#maxmspポストプロセスについての本を読むと、トーンマッピングといった自動的に明るさや色味を調整する技術がある事がわかりました。ゲームなどでステージが切り替わった際にある程度自動的に明るさを調整してくれるようなものです。今回はjit.gl.pix上のみで動作するオートルミナンスの試作をつくったので公開しておきます。(jit.gl.pix)今回は複数のnearestや関数を利用するためcodeboxで書きました。paramは直接codebox内部で宣言する方法もありますが、一旦codeboxの外部で受け取るようにすれば、codeboxで同様の変数名を利用できます。指定もしやすいのでおすすめです。入力されたテクスチャから代表的な5ピクセルを取得し、gray関数から明るさ(graymean)を求めています。この処理は本当は画面全体に行いたいのですが効率化の観点から擬似的に行なっています。ピクセルシェーダー毎に同じ処理をしてしまっているので、外部で計算できると良さそうですが、jit.gl.pixで行ううまい方法を思いつかなかったのでこのような書き方になっています。paramで設定した目標の明るさとの差分を取り、それを入力されたピクセルに足し合わせています。responseの値を使ってゆっくり変化するようにしています。#maxmsp山田監督作品もさる事ながら、そのほかの映像作品・ゲーム・VJなどでもよく見た、2010年代にかなり流行ったポストエフェクトと言えそうな色収差です。Code右上では、色のズレ方を計算しています。snormから取得した値からlengthで値を取ってしまうとアーティファクトが発生するのでabsにするのが肝でした。3つのsampleを用意し、色のズレを反映した位置からピクセルを取得します。下の方の処理は、ズラした色の色相を回転させるために120度づつズラしたsin波を合成(三相交流)して位相で色味を調整できるようにしています。RGBのズレだけだと画面の色が偏ってる場合に効果が発揮されない場合があるので色相変更できると良い感じです。exportcodeすればGLSLでも利用できるので、Max8以外の環境をお使いの方もご参考ください。#maxmsp今月は今まで謎の存在だったjit.gl系の調査とCG系の勉強をしていました。全体像が見えてきた気がしたのでjit.glで絵が出るまでの流れを一枚の絵にまとめてみました。”3Dモデル”ありき。実際は柔軟にパイプラインを組めるので上記に縛られる必要は無いのですが、jit.gl系はフラットにオブジェクトが並びすぎていてシンプルなレンダリングの流れがそもそも分かりにくいので整理しておきました。こちらの資料をもとに深めていただければと思います。裏で動いてるOpenGLへの理解の助けになります。シェーダーはjit.gl.slabやjit.gl.shaderでそのまま参考になります。HLSLとGLSLとは違う言語ですが、アルゴリズムが色々載ってて参考になる。ポストエフェクトはjit.gl.pixでも参考にしやすいです。10年くらい前のゲームで使われているシェーダー技術がわかりやすく網羅・解説されています。CG業界は謎の英語専門用語が飛び交う世界で一見なんなのか分からない事も多くとても助かりました。コードは載って無いですが、頑張れば擬似的に真似できるかも?ハードウェアアーキテクチャよりの話しが多めですがGPUについて理解が深まりました。低レイヤー・電気系の話は自分には結構むずい。鈍器みたいな本、とりあえず買って家に置いとくと気合いが入る一冊(まだ一章しか読んでないけど、きっと凄いだろう・・・)色1つの画面を作るのに、データ(画像・モデル)を別のソフトから持ってくるか数学的に演算で作成しておき、GPU上にテクスチャとして転送した上で、あらゆる数学的な計算しまくると絵がでる。行列演算の話をしているんだなという事に気がつきました。等のクリエイティブコーディング的な環境でも論理的には同じような絵は出せるんだろうなという気づきが得られて良かったです。3Dモデルの配置や制御だったり、アセットの購入やライブラリの充実などIDEとしての完成度や効率は段違いなんでしょうね・・・リアルタイムレンダリングはやはりゲーム業界が先頭に立っているんだろうな。いう訳で、また面白そうなトピックがあったらディグって行きたいと思います。ありがとうございました。#maxmspはじめにjit.gl系の画面出力にポストプロセスのエフェクトをかけられるjit.gl.passですが、ビジュアルプログラミングであるMaxにおいて、ほとんどパッチングをしないで高度な処理が走ってしまうため理解が難しい存在だと思いました。そんなjit.gl.passについて調べた結果をまとめておきます。Object)を使って一度ポストエフェクトを掛けない状態で3Dモデルやライティングを考慮したレンダリングした結果に対し、ポストエフェクトを掛けているんでしょう。(ソースが無いけど)そういうオブジェクトだから・・・みたいに理解しておきました。DOFで深度を使えるの?jit.gl系を触っていて3DモデルのZバッファや深度情報を直接取得する方法は見かけた事がなかったのですが、jit.gl.passのfxサンプルの中には被写界深度エフェクトのように明らかに奥行き情報を使わないと掛けられないエフェクトが入っています。やってるのでしょうか。アルファチャンネルにdepth画像が入れられるよと書いてあります。3Dモデルなどを一度レンダリングして画面全体の絵をつくり、その時に利用した深度マップもポストプロセスに出力してくれるという事でしょう。NORMALSテクスチャを渡しています。wチャンネルを参照して被写界深度エフェクトを掛けています。ファイルを見ると一つのDoFを実現するためにも複数のエフェクト(.jxs)を重ねがけしているように見えます。このエフェクトは画面全体のフラグメントシェーダー上の操作ではあります。含まれてなかったっけ?という疑問が湧きました。Shaderを参照しています。shaderも通っているということですね。コードを見てみるとほとんど何もしないようなシェーダーになっており、受け渡しているだけです。Shaderを利用していればほとんど意識しないでフラグメントシェーダーの事だけ考えれば良いと言えそうです。jit.gl.slabも似たようなフラグメントシェーダーのみを対象としたシェーダーオブジェクトです。versionが書いてあるので新しいgl-coreの場合はこちらの方が参考になります。読み込んで使えるらしい?jit.gl.passのリファレンスを読むと、genjitも読める?的な事が書いてあり、色々試してみたんですが、genjitファイルをそのままは読めませんでした。jit.gl.pixから一旦.jxsを生成したら読み込むことはできましたjit.gl.pixをexportcodeして.jxsを生成.jxpにfile=***.jxsのsubpassを追記jit.gl.passで.jxpを読み込みparamも.jxsで定義してあれば、jit.gl.passに通ります。edge抽出シェーダーの後にjit.gl.pixで書いた四分割シェーダーをjit.gl.passで書いてみたサンプル画像です。まとめjit.gl系オブジェクトの中で一番難解だと個人的に感じたjit.gl.passへの理解が深まり、Jitterにおけるレンダリングパイプラインの概要が掴めたような気がします。次回の記事ではその辺りをまとめてみたいと思います。shaderの代わりになりそうという事で、モデル移動方向と反対側の頂点が遅れて付いてくる頂点処理を実装してみました。高fspだと擬似的なモーションブラーに、低fpsで使うとディレイアニメーション的な表現になります。コード三次元的にどの向きに移動しても破綻ないように作ってみたつもりです・・・クオータニオンや内積などのベクトル計算は大学以来初めてまともに扱いましたが、使い道がわかると楽しいですね。