textureなしで液晶のピクセルをシェーダーで再現する
こんにちは
12月24日にシェーダーアドベントカレンダーに参加させていただきました
その時はテクスチャーを使い液晶のシェーダーを作成していましたが
せっかくなのでテクスチャーなしで行う方法を書いておきます
大体の原理は前の記事を見てください
まず最終的なノード画面です
細部を見ていきましょう
この液晶シェーダーで大切な部分はFloodFillのテクスチャーでした
- Rチャンネル 0.0 ~ 1.0
- Gチャンネル 0.0 ~ 1.0
- Bチャンネル 0.333 ~ 0.333
- Aチャンネル 1.0 ~ 1.0
この場合Bチャンネルは横に三分割されているので1.0 / 3 で0.333333....となり
Aチャンネルは縦には分割されていないので1.0のままとなります
今回この横3分割のFloodFillをシェーダー内で作成します
やり方は以下の手順です
- UVを横に3回タイリングする
- BとAチャンネルに数値を入れる
- 4チャンネルを合体する
FloodFillの作成
Tiling部分の拡大画像です
最初のMultiplyで横だけ3回タイリングさせています
次のMultiplyで全体のタイリング数を決めて
MakeFloat4にBとAチャンネルの値を入れてFloodFillのテクスチャーを作成しています
ピクセルマスクの作成
次にピクセル作成の部分です
前半はTilingの部分と似ています
2番目の赤い枠ないの処理はUVのの原点を中央に移動させています
これではRGBの配置と枠線が一致しません
下の画像のようになってしまいます
枠線だけUとV方向に0.5移動しています
なのであらかじめ0.5を足して修正しています
ラインの太さの調整
3番目の赤い枠は横のラインの太さを調整しています
もしこれを行わないと下の画像のようになってしまいます
横のラインが太く縦のラインが細くなっているのがわかるでしょうか?
これは前半で横にだけタイリングさせていることが原因です
なので縦にタイリング数と同じ数だけMultiplyします
RGBを塗分ける
赤枠内ではタイリングしたUVを3分割して
それぞれRGBチャンネルに入れて色を付けています
赤枠内を拡大して見てみます
各SmoothStepでどういったことをしているかというと
U方向のグラデーションを3分割しています
そしてそれぞれRGBにつないでピクセルの色として合成します
最後に枠線とRGBのピクセルをかけて枠付きのピクセルマスクを作ります
そしてこれらを合成して完成です!
以上がTextureなしで液晶シェーダーを作成する!でした!