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なしで液晶シェーダーを作成する!でした!
液晶のピクセルをシェーダーで再現する
こんにちは!Ka-punnです!
シェーダーアドベントカレンダーに初めて参加します!
この記事は12月24日クリスマスイブの記事として書かれています!
https://qiita.com/advent-calendar/2019/shader-advent-calender-2019
前日は7CITさんによる
「マッハで学ぶ VRChat Shader LV5 習得 までのLV別 技術情報まとめ」でした
続きを読むVFX技術者交流会で登壇してきました
大阪で行われたVFX技術者交流会で登壇してきました
https://atnd.org/events/107534
主にSubstanceDesignerとVFXとの関係についてお話しました
その中で作成したTriangleGeneratorのPixelProcessorについて中身を見てみたいというお声をいただいたので
画像をアップしますー
UE4セミナー
お久しぶりです
先日UE4セミナーに登壇させていただきました
そこでまたMaterialのことについてお話ししました
その時の資料がこちらです