【Maya/CgFX】もんしょさんのUVチェッカーをMaya上で再現してみた

もんしょさん @monsho1977 がSubstance Designerで下記のツイートにあるUVチェッカーを作られていました。
そこでなんとなくMayaのリアルタイムシェーダーでもできそうだなぁと思って、

PresetのCgFXに入っているbrix.cgfxをベースに改造して可変できるUVチェッカーのシェーダーを作ってみました。

使ってみたい方はこちらからDLして、適当な場所に保存してもらい、

Maya上でCgFXシェーダーの新しいマテリアルを作ってCgFXファイルという所にUVChecker.cgfxを読み込ませて下さい。

 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

※2016/09/12追記

このシェーダーを制作した環境はMaya2016です。

最近のバージョンであれば大丈夫だと思いますが試せていません。

 

また細かい使い方を書いてませんでしたが、

Gif動画にもあるようにライトのディレクショナルライトの影響を受けさせたい場合は

アトリビュートのDirectionalLightNameのところにディレクショナルライトのオブジェクト名を入れて下さい。

残念ながらその名前を入力したライトの角度だけを見ていて、

ライト側で色や強さを変更しても影響されないのでシェーダーのアトリビュートで変更して下さい。

 

ベースのカラーテクスチャも反映させたいときは

UseBaseMapにチェックを入れてテクスチャを参照させて下さい。

 

数字の画像も同様にZip内に一緒に入っているテクスチャか、

ご自身で作られたテクスチャ（同じように１０等分してあるものなら使えると思います）を参照させてください。

Num Blocksの数字を変更すると表示される数字の数が変わります。

（一応最大値を50にしていますがテキストエディタなどで50となっているとこを変更してもらえばいくつでもいけます。）

Number Color Strengthで数字テクスチャの濃さを変更できます。

 

虹色のグラデーションを反映させるときはUse Gradationにチェックを入れて下さい。

Gradation Saturationでグラデーションの濃さを変更できます。

 

 

あまり触らない部分ではありますが、UVマップの名前を任意のものに変更されている場合は

頂点データのUVのところを「uv:○○」（○のところにUVマップ名）に変えて下さい。

デフォルトはmap1となっていると思います。

 

また、頂点カラーも反映させた場合は、

頂点データの一番下にあるvtxColorに「color:○○」（○のところにカラーセット名）を入力して下さい。

ここが厄介なのですが、UVとは違ってデフォルト値が入ってないので

カラーセット名の前にcolor:を入れ忘れがちになるのでご注意下さい。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

 

詳しい原因はわかっていませんが、

ビューポートのレンダリングエンジンがOpenGLの場合は「ビューポート2.0」でも表示できますが、

DirectX11の場合は「ビューポート2.0」じゃ映らないので「旧式の既定ビューポート」にして下さい。

 

※ご使用の際に不具合が出ても責任は取れませんので自己責任でお試し下さい。

 

 

実際に使用している画面をGifにしてみました。

途中色がおかしくなったり数字部分が抜けたりしていますが圧縮によるものです。

※直接Gifを貼り付けていましたが、なぜか表示されてない事に気づいたのでツイートに埋め込んだGifを表示・・・

コードはちょっと長いので貼り付けませんのでご興味ある方はDLしてファイルの中をご覧下さい。

たいして難しいことはしていません。　（と言いつつ同僚のプログラマーさんに聞いた部分もありますがｗ）

 

数字部分はさすがにフラグメントシェーダーで描く方法分からなかったので数字を並べたテクスチャを使っています。

なので、その数字のテクスチャをご自身で作ってもらえばお好きな見た目にできます。

 

あとグラデーションは下記のサイトの書かれていたHUEtoRGBとHSVtoRGBの関数を使わせてもらっています。

RGB to HSV/HSL/HCY/HCL in HLSL - chilliant.com
http://www.chilliant.com/rgb2hsv.html

 

例↓

 

個人的にまだうまく処理できてない場所が１つあり、

上のような横長の数字テクスチャをフラグメントシェーダ内で縦に並べていますが、

おそらくそこの処理の問題で縦の列の間に１ピクセルくらい隙間ができてしまってるんです。

近づかないとあまり分からないですがそこの対処法が分かる方がいましたらご教授お願いします。