Q&A
> 画像そのものではなくスクショしたもの
とりあえず画像そのものを貼ってください。
やりたいこと
unityでSprireRenderで画像を表示し、その際に自作のshaderを使用したいのですが、透過された画像でうまく表示されません。
やったこと
①Projectビューで「standard surface shader」を作成。特に編集はしない。
②適当なマテリアルを作成し、そのシェーダに①のシェーダを設定。
③スプライトレンダーを使用したオブジェクトをゲーム内に配置し、そのスプライトレンダーのマテリアルを設定。
これで画面には画像が表示されますが、この時透過処理がされた画像だと、↓のように正しく輪の外側に黒い部分生えたり、輪の内側がジャギどころでないギザギザになる現象がおきます。
これが表示した元の画像(248×258)です。一応、画像そのものではなくスクショしたものですが。
試したこと
自作してないシェーダー、例えば既に用意されているshaderからunlitのものをマテリアルに適用すると、
↓のunlitの上三つは最初の画像の様に汚く表示され、下二つはジャギが少し気になるものの正常に表示されました。
つまりはshaderの設定によって透過部分が意図した表示になるかが決まっているようなのですが、「shader 透過画像」「unity shader 汚くなる」、などで調べてもこの現象についての情報が一切見つかりません。
この現象はshaderのどの部分が関係し、解決するにはどうすれば良いのでしょうか。
ここから追記
フォトショップで使用している輪の画像におかしなところがないかチャンネルを確認しましたが、おかしいところはありませんでした。
また、確認用にこのような画像をフォトショップで制作（分かりにくいですが、白いところは透過した個所と、白く塗りつぶした箇所があります）
unityで上記シェーダーを表示するとこのようになりました。
黒い枠がはみ出たり、白いところが繋がったりと滅茶苦茶になっていますね。
これに関してもunlitで表示される上3つのunlitだと見た目がおかしく、下2つのunlitだとジャギが気になるものの、正常に表示されます。
さらなる追記
「surface shader alpha」などで検索させていただき色々試した結果、alpha:fadeのオプションを追加することで、↑のように透過部分を表示することができました
参考:https://docs.unity3d.com/ja/2018.4/Manual/SL-SurfaceShaders.html
何故か強烈な白が追加されているせいで輪の画像の薄青のグラデーションが消し飛んでしまっていますが…
とりあえず、透過pngがshaderでおかしくなる、という問題は解決でいいかと思います！
説明不足で済みません。
問題が起きている輪の画像はアセットストで購入したUI素材なので、そものを張ることは出来ません。
なるほど…。
そうなると難しいですね…。
回答1件
0
ベストアンサー
アルファの扱いが半透明が扱えるか完全透明/完全不透明の2値かで違いが出ていそうな気はしますが、それだけで異常な表示になるとは思えません。
なのでファイル側に何らかの問題があるか確認したかったのですが、当該ファイル自体を貼れないとなるとそちらでテストしていただくしかないですね。
確証はありませんが、当該ファイルのアルファ0に近い箇所の色が場所によって異なっていることを疑っています。
アルファ値の扱えるソフト、例えばGIMPやPhotoShopあたりで当該ファイルを開いて、RGBAに分解してR・G・Bチャンネルに不自然な模様が出ていないか見てみてください。
あとは画像の(GPUに渡す際の)圧縮形式が多少怪しいですが、それにしてもこのような異常な表示になる理由はちょっと思いつかないです。
なるほど、ちょっと思っていた状況と違いますね。
まず、そのPhotoshopのスクリーンショットで見ているものは私の確認してほしかったものと違うのですが、
しかし「確認用」画像をこちらでも(GIMPで)見てみたのですが、思っている表示になりませんでした。
「黒い枠がはみ出たり、白いところが繋がったりと滅茶苦茶」な状態が、見えると予想していたもので、
これは何かというと、アルファ値を持つ画像はRGBAのA=0の箇所ではRGBの値は不問なので、圧縮しやすいように適宜隣と同じ色にしているものです。PNGは縦横斜め方向に同じ色が続くと圧縮しやすいので。
RGBAへのチャンネル分解でそれが見られるものと予想していたのですが(実際手元の某画像はそのように見えるのですが)、「確認用」画像はマゼンタの線の周りにやや透明のマゼンタが広がっている程度でシェーダー表示とは異なりました。
こうなると途中どこかで変換が挟まっているのかなという気がします。
一応、見た感じでは白の透明は透過されており黒の透明は透過されていないように見えるので、不要な部分を一度白で塗りつぶしてから消すことで改善するかもしれません。途中で変換が挟まっているなら無意味かもしれませんが。
あとは半透明を扱えるシェーダーを使うことですね。
＞ Bongoさん
Mesh TypeがTight
なるほど、外形の方は謎でしたがそういう物があるんですね。
投稿2021/05/22 06:40
編集2021/05/22 19:00総合スコア3047
ご回答、ありがとうございます。
返信だと画像を張ることができなかったため、画像についての確認結果を質問に追加する形で記述させていただきましたが、画像についてはおかしなところが無さそうです。
また、画像の設定についてもAlpha関連や、filtermodeなどを変えたところ、透過部分が塗りつぶされる、といった変化はあったものの解決することは出来ませんでした（全ての項目についてチェックした、とまでは言えませんが）
半透明非対応シェーダーの場合の変な外形は、スプライトのメッシュの形が現れているだけかもしれません。
デフォルトだとスプライトのMesh TypeがTightになっており、透明部分を大ざっぱにそぎ落とした形のメッシュが生成されるはずです（https://docs.unity3d.com/ja/current/Manual/TextureTypes.html#Sprite 、https://twitter.com/unity_japan/status/469328227526529024 ）。シーンビュー左上の「Shaded」を「Wireframe」や「Shaded Wireframe」に切り替えればメッシュの形を視覚的に確認できるかと思いますが、どのようになっているでしょうか?
確かに「Shaded Wireframe」でSnene Viewで確認すると、ワイヤーフレームが歪な形になって表示されました。じゃあ、Mesh Typeを変更すればいいんだね！と安直にFull Rectに変えると、こんどは透過部分がすべて塗りつぶされてしまいます。
ドキュメントのTextureTypesの項目を読んでも分からず、テクスチャーごとに設定を変更するものなのか、シェーダーにそれ用に記述が必要なのか。恐らく後者だとは思うのですが、どのように対処すれば良いでしょうか。
変な形はメッシュの形のせいということで説明できそうですね。でしたら残る課題は透明部分をちゃんと透過させることになるでしょうが、これはikadzuchiさんからご指摘のあった「アルファの扱いが半透明が扱えるか完全透明/完全不透明の2値か」ということ...つまりシェーダーの作りの問題と言えるかと思います。
「shader 透過画像」で検索なさったとのことですが、透過に対応したサーフェスシェーダーの書き方が分からないということでしたら、検索キーワードを「surface shader alpha」としてみるとどうでしょうか。
ikadzuchiさん追加調査ありがとうございます。完全透明なピクセルのRGB成分については、おっしゃるとおりUnityがテクスチャをインポートする際に加工しているものと思われます。
おそらくAlpha Is Transparencyの設定がオンになっていて、完全透明ピクセルと不透明・半透明ピクセルとの間で色の補間が行われた場合でも見た目が不自然にならないようにしているんでしょうね（https://www.programmersought.com/article/80036835820/ ）。
追記にも書かせていただきましたが、「surface shader alpha」で調べて、こちらのサイトを元に解決することができました。ありがとうございます。
https://qiita.com/keito_takaishi/items/a19b82d3d1395eaeaab9
>Bongoさん
なるほど、圧縮しやすくする目的しか思いつきませんでしたが、色の補間で不自然にならないようにする目的の方がありそうですね。
Unityにインポートする際(どうせGPUへ渡す際変換される)PNGの圧縮率を少しばかり高めるのも不自然なので引っかかっていました。
あなたの回答
tips
プレビュー
