jit.gl.pix で プロシージャルテクスチャを作る

BY TOMOHIRO NAGASAKI(@blurrednote)

Cycling74 Max6 の jit.gl.pix を使って、プロシージャルテクスチャを作ってみます。
(完成パッチはGithubにあります)

Max 6 から、GLSLをパッチで組むことができる”jit.gl.pix”というオブジェクトが追加されました。
この jit.gl.pix の最初の一歩として、プロシージャルテクスチャを作ってみます。
プロシージャルテクスチャは、画像の代わりに数値計算でテクスチャを生成する手法で、ちょっとしたパターンから、複雑な地形のようなものまで、様々なパターンを作り出すことができます。

まず、jit.gl.pixで描画した内容を表示するだけの、シンプルな描画パッチを作ります。
ProcedualTextureStudy01
jit.gl.pix の中身がjit.gl.videoplaneに表示されます。

次に、jit.gl.pix の中身を作ります。
今回作ってみるのは、格子状のパターンと、円が並んでいるパターンです。
どちらも OpenGL Insights 日本語版 から計算式を拝借しました。

格子状パターンは、フラグメントシェーダーで

と計算すると作れるようです。これを、jit.gl.pixパッチに作り替えてみます。
normとswizを使って、入力されたマトリックスを 0 – 1 で正規化し、テクスチャ座標の代わりに使っています。
ProcedualTextureStudy03
こんな感じになりました。ついでに、mix関数を使って色を置き換えてみます。
結果は
ProcedualTextureStudy05

円形パターンも作ってみます。シェーダーでの式は

です。jit.gl.pix パッチはこうなりました。
ProcedualTextureStudy04

結果は
ProcedualTextureStudy06

どちらもシンプルなテクスチャですが、固定になっているパラメータをリアルタイムで変化させたりすると、アニメーションするテクスチャが簡単に作れます。
ちなみに格子状と円形の結果を両方使うと、
ProcedualTextureStudy07

プロシージャルテクスチャを作るには独特のコツが必要のようですが、試行錯誤したりちょっと試したりにこのjit.gl.pixの描画環境がとても気軽です。

Max6.1からは、jit.gl.pixをWebGLのコードとして書き出す機能が追加されましたので、それが活用出来るようになれば、より楽しいかもしれません。