[Irisy Aqua] Character Shader Brushup

Hi, it’s been a week.
It’s been a week since my last post, and I’m Otorakobo.

Today, I’d like to introduce the character shader, which has been finalized.
It may be a bit of a geeky introduction since it’s a very detailed adjustment, but I hope you enjoy it.

First of all, I wanted to express color change by making outlines emit light.
However, if we simply made the outlines emit light, it was expected to have a flat, flat appearance. We had received an order to create a sense of depth by using gradations and variable outline thickness.

To create a depth + gradient effect, we first created an image that changes the luminosity of the outline by looking at the Depth.

However, the problem with this expression was that the effect could be seen at close range, but at long range, the change was not noticeable at all.

Therefore, we added a mechanism to gradate the entire character even at the Y coordinate, which is independent of the distance.

And if we mix both, we get

It looks like this.
Turn on Depth at close range and turn off Depth at far range. I thought that controlling the depth like this would give an overall sense of depth.

Also, we implemented a similar mechanism to make the control of the outline thick and thin variable with reference to the Y position of the pixel and Depth.

Below is the screen only

Used with Depth

It looks pretty elaborate when you get into it this far lol.
Honestly, it’s hard to read the difference.
It might be the atmosphere how much it changes the first impression.

Other than that, Irisy Aqua has a setting where the character absorbs colors from the ground, so I applied a light that reflects the ground color.
The following is an inverted light shader that was used to make the lighting go around the back side of the character.

How did you like it?
Personally, I think that the picture is gradually becoming more and more solid.

This time I focused on character-related visual expressions, but next time I hope to introduce something effect-related.
See you soon!

【Irisy Aqua】キャラクタシェーダブラッシュアップ

どうも、1週間ぶりです。
Otorakoboです。

今日は、キャラクタシェーダの機能がまとまってきたのでそちらのご紹介です。
細かな調整なので、マニアックな制御紹介になってしまうかもですが、読んでもらえると嬉しいです笑

まず、アウトラインを発光させることで色の変化表現をしようと思いました。
ただし、単純にアウトラインを発光させると、のっぺりとした平面的な見た目になると予想されていたので、事前にグラデーションやアウトラインの太さを可変させることで、奥行き感を出したい。というオーダーは受けていました。

奥行＋グラデーションということで、まず作ったのがDepthを見てOutlineの発光度合を変更するものでした。
｛Image：Depth｝

ただ、この表現の問題点は近距離ではかなり効果を確認できますが、遠距離ではまったく変化が分からなくなってしまう点がありました。

そのため、距離に依存しないY座標でもキャラクタ全体にグラデーションする仕組みを入れました。
｛Image:Y｝

そして両方をミックスすると
｛Image：All｝

こんな感じです。
近距離ではDepthをオンにして、遠距離ではDepthをオフにする。みたいな制御をすると、全体的に奥行き感は出せるかなと思いました。

また、アウトラインの太い細いの制御をピクセルのY位置とDepthを参考に可変させる仕組みを同様に実装。

以下、スクリーンのみ
｛Image:ScreenWidth｝

Depthと併用
｛Image:DepthWidth｝

ここまで入るとかなり凝った感じになりますね笑
正直、差を読み取るのが難しいです。
第一印象にどれくらい変化があるのか雰囲気かもしれません。

その他、Irisy Aquaではキャラクタは地面からの色を吸収するという設定があるため、地面の色を反射するライトを適用しました。
キャラの裏側に回り込むようにライティングさせた反転ライトシェーダを採用したのが以下になります。
｛Image:Reflect｝

いかがだったでしょうか？
個人的には少しずつ絵回りも固まってきたように思っています。

今回はキャラクタ関連のビジュアル表現をフォーカスしてみましたが、次回は、エフェクト関連で何かご紹介できればと思います。
それでは！