• 日本語

  • [Unity] UnityでSpineで出力したアトラスにmipmapを手動で追加する方法はありますか？

    Japanese

  • koyu

    • Post #1
    • This post is in Japanese

    [Unity] UnityでSpineで出力したアトラスにmipmapを手動で追加する方法はありますか？
    Is there a way to manually add mipmap to the atlas output by Spine in Unity?

    私は当初、カメラでズームをしても絵がぼやけずに描画できるように、高解像度のSpineアニメーションを出力していました。
    それをUnityでスケール縮小して画面に描画していました。

    Initially, I was outputting a high-resolution Spine animation so that I could draw the picture without blurring when I zoomed with the camera.
    I used Unity to reduce the scale and draw it on the screen.

    しかし、上の画像のように大きな解像度の絵を小さく縮小して描画するほど、粒子で絵が荒れてしまう事に私は気づきました。
    このサイズのスケールでは0.25が一番綺麗に見えます。

    However, I noticed that the smaller the size of a picture with a larger resolution, such as the one in the image above, is drawn, the more grainy the picture becomes.
    0.25 looks best on this size scale.

    しかし、それを採用した場合、カメラがズームした時は解像度の低さが気になってきます。
    そこでUnityのMipmap機能を使えないかと調べました。

    However, when it is adopted, the resolution is low when the camera zooms.
    So I investigated whether the Mipmap function of Unity could be used.

    しかし、Unityで自動生成されたMipmapはとてもぼやけて見えます。
    私はmipmapの設定をいくつか試しましたが、Spineで予め縮小して出力されたサイズを適切なカメラスケールで表示することが最良のように思えました。
    私はUnityの自動補正を使わずにMipmapを使えないかと思案しました。

    But the Unity-generated Mipmap looks very blurry.
    I tried a few mipmap settings, but it seemed best to have Spine pre-scaled down and display the output size on a proper camera scale.
    I wondered if I could use Mipmap without using Unity's auto-correction.

    そこで私はこの記事https://baba-s.hatenablog.com/entry/2019/06/03/090000を参考に、Unityで生成されたMipmapを、手動で上書きすることはできないかと考えました。
    Spineで生成されたアトラスを1/2、1/4サイズにしたpng画像をphotoshopで出力し、
    SetPixelsでmipmapを上書きしてみました。

    So, with this article as a reference, https://baba-s.hatenablog.com/entry/2019/06/03/090000 I wondered if the Mipmap generated by Unity could be overwritten manually.
    Output atlas generated by Spine to 1/2, 1/4 size png image with photoshop,
    I tried overwriting mipmap with SetPixels.

    しかし、上の画像のようにノイズが出現してしまい、上手くいきませんでした。
    元々、これは無理に上書きしただけなので、仕様外の手法です。
    もっと適切な手段があるのではないかと疑問に思いました。

    However, the noise appeared like the image above, and it didn't work.
    Originally, this was a method outside the specifications because it was overwritten by force.
    I wondered if there might be a better way.

    上記を踏まえて、

    ・UnityでSpineで出力したアトラスにmipmapを手動で追加する方法はありますか？
    ・もしくは、SpineにUnityのMipmapを割り当てて出力する機能はありますか？

    何卒よろしくお願い致します

    Based on the above,

    -Is there a way to manually add mipmap to the atlas output by Unity in Spine?
    -Or, is there a function that assigns Unity's Mipmap to Spine and outputs it?

    Thank you

    Related Discussions
    ...

    詳細な書き込みをありがとうございます。
    Thanks for the detailled writeup.

    koyu wrote

    ・UnityでSpineで出力したアトラスにmipmapを手動で追加する方法はありますか？
    もしくは、SpineにUnityのMipmapを割り当てて出力する機能はありますか？

    • Is there a way to manually add mipmap to the atlas output by Unity in Spine?
      -Or, is there a function that assigns Unity's Mipmap to Spine and outputs it?

    残念ながら、ここでの問題は、Unityがテクスチャファイルに含まれる事前に計算されたミップマップレベルの読み込みをサポートしていないことです。
    そのため、例えば、事前に計算されたミップマップレベルを含むDDSテクスチャを作成しても、Unityではインポートできませんでした。
    Unfortunately the problem here is that Unity does not support loading precomputed mipmap levels contained in a texture file. So even if you would create e.g. a DDS texture with included pre-computed mipmap levels, it could not be imported in Unity.

    koyu wrote

    しかし、上の画像のようにノイズが出現してしまい、上手くいきませんでした。
    However, the noise appeared like the image above, and it didn't work.

    テクスチャのミップマップレベルを手動で設定すると、ご指摘の記事にあるように動作するはずです。修正したテクスチャが Spine SkeletonAnimation マテリアルで使用されていることを確認していますか？
    Manually setting mipmap levels of a texture should work as mentioned in the article you mentioned. Are you sure that your modified texture is used at the Spine SkeletonAnimation material?

    SkeletonAnimationコンポーネントを使用せずに、修正したミップマップテクスチャをクアッドに描画しても動作しますか？
    Does it work if you do not use a    SkeletonAnimation` component but instead draw the modified mipmap texture on a quad?

    また、0や0.5の代わりに1など、テクスチャの mipmap bias の値を変えてみましたか?
    Apart from that, have you tried different mipmap bias values at the Texture, e.g. -1 as well instead of 0 and 0.5?

    あなたのお返事とサポートに感謝します。
    Thank you for your reply and support.

    Manually setting mipmap levels of a texture should work as mentioned in the article you mentioned. Are you sure that your

    modified texture is used at the Spine SkeletonAnimation material?
    はい。調査を続けたところmipmapの手動割り当てには成功していることが確認できました。詳細を後述します。
    Yes. After continuing the investigation, I confirmed that the manual allocation of mipmap was successful. Details will be described later.

    Does it work if you do not use a SkeletonAnimation component but instead draw the modified mipmap texture on a quad?

    申し訳ありません。私はご指摘の「quad」とこの工程の具体的な手順が理解できませんでした。
    SkeletonAnimationではない、通常のTextureType:Sprite(2D&UI)でmipmapが表示できるかどうか、を指していますか？
    I'm sorry. I couldn't understand the "quad" you pointed out and the specific steps in this process.
    Is it pointing to whether or not mipmap can be displayed with normal TextureType: Sprite (2D & UI), not SkeletonAnimation?

    Apart from that, have you tried different mipmap bias values at the Texture, e.g. -1 as well instead of 0 and 0.5?

    私はそれを試してみました。ですが画像は依然としてぼやけたままで、満足の行く結果が得られませんでした。
    I tried it. But the image was still blurry and didn't produce satisfactory results.

    ＿＿＿＿＿

    ■Mipmapの手動割当とPremultiply Alphaついて
    About manual allocation of Mipmap and Premultiply Alpha

    調べていくうちに、私はこの問題がmipmapではなく、
    Straight Alpha と Premultiply Alpha(PMA) の設定が衝突していることが原因のように思えました。
    In my investigation, I found this problem was not in mipmap
    It seemed to be due to a conflict between the settings of Straight Alpha and Premultiply Alpha (PMA).

    http://ja.esotericsoftware.com/forum/viewtopic.php?p=15772

    実際のところ、手動でのmipmap割当は成功しているように見えます。
    In fact, the manual mipmap allocation seems to succeed.

    わかりやすいように色を付けました。
    カメラがズームすると手動で設定した緑色のmipmapに切り替わっていることが確認できます。
    しかしそれは上記のURLにある「BLEEDING INTO TRANSPARENT AREAS」と同様の症状があります。
    Colored for clarity.
    When the camera zooms, you can see that it has switched to the manually set green mipmap.
    However, it has the same symptoms as "BLEEDING INTO TRANSPARENT AREAS" in the above URL.

    今回のmipmap手動割当は、Spineで出力されたpng画像をphotoshopで縮小して使用しています。
    その画像は通常はUnityのアトラスではなく、通常のpng画像としてインポートされてしまうので、Premultiply Alphaとして扱われていないように見えます。
    それをmipmapとして、PMAのアトラスに上書きしたため、PMAの中にStraight Alphaの画像が混じってしまい、それが表示された時、設定の食い違いから「BLEEDING INTO TRANSPARENT AREAS」が出現してしまうように感じました。
    この推測は正しいでしょうか？　ご意見をお聞かせください。
    This time, mipmap manual allocation uses the png image output from Spine after reducing it in Photoshop.
    The image doesn't seem to be treated as a Premultiply Alpha because it's usually imported as a regular png image, not a Unity atlas.
    Since it was overwritten on the PMA's atlas as a mipmap, the image of Straight Alpha was mixed in the PMA, and when it was displayed, it seemed that "BLEEDING INTO TRANSPARENT AREAS" would appear due to the discrepancy in the settings. It was.
    Is this guess correct? Please let us know what you think.

    ■PMAでmipmapを手動上書きするには？
    How to manually overwrite mipmap in PMA?

    上記の推測が正しければ、以下の２つのうちどちらかが実現できれば、問題が解決しそうです。
    ・photoshopで縮小したpngアトラスをUnity上でPMAにする（ただし、アルファを乗算したあとで縮小しているので、乗算済みアルファの部分が正しく機能するかはまだ分かりません）
    ・Spineでmipmapに割当できる異なった解像度のアトラスを出力する（PMAが維持され、各パーツの位置が解像度間で完全に一致している必要がありそうです）
    If the above assumptions are correct, the problem is likely to be solved if either of the following two can be realized.
    -Make png atlas reduced in photoshop PMA on Unity (However, since it is reduced after multiplying by alpha, it is still unknown whether the part of the multiplied alpha works correctly)
    -Output atlas of different resolutions that can be assigned to mipmaps in Spine (PMA must be maintained and the position of each part must match exactly between resolutions)

    しかし、私はその方法がわかりません。
    レンダリング速度を速くしたいので、可能であれば Straight ではなく PMA 形式で実装したいです。
    But I don't know how.
    I want to speed up the rendering, so I would like to implement it in PMA format instead of Straight if possible.

    上記の推測は正しいのか、正しければそれを修正するための方法をご教授いただければ幸いです。
    何卒よろしくお願い致します。
    Is the above guess correct, and if so, please give me a way to fix it.
    Thank you for your cooperation.

    谢谢上面的信息和澄清你认为是错的。
    Thanks for the info above and the clarification what you actually considered wrong.

    问题很可能是Photoshop的PNG导出，用邻居RGB颜色填充透明像素（出血）。
    The problem is most likely the png export of Photoshop, filling transparent pixels with neighour RGB color (bleeding).

    我认为有两种方法可以解决这个问题。
    a）（首选）正确导出PMA mipmap图像 - 作为一个不同的格式（例如，作为.tif）或用一个特殊的png导出插件，它为您提供了必要的控制，使您的文件中的透明部分不出血。当然，你也可以使用不同的图像处理程序。
    b) 在分配图像之前，使用该图像，并通过代码（color.rgb乘以color.a）重新应用alpha-premultiplication到纹理上。

    I see two ways to solve this:
    a) (preferred) Export the PMA mipmap image correctly: as a different format (e.g. as .tif) or with a special png export plugin, which provides you with the necessary control to not bleed in transparent parts of your files. You could also use a different image manipulation program of course.
    b) Use the image and re-apply alpha-premultiplication to the texture via code (multiply color.rgb by color.a) before assigning the image.

    お返事ありがとうございます。
    申し訳ありません。
    私は頂いた解決方法a,bの具体的な実行手順が分かりませんでした。
    試しにphotoshopからtif形式で出力したものを同様の方法でmipmap割当を行いましたが出血は改善しませんでした。

    Thank you for your reply.
    I'm sorry.
    I didn't understand the specific steps to execute the solutions a and b.
    I tried to assign the mipmap output from Photoshop in tif format, but the bleeding did not improve.

    これはSpineで出力されたpngアトラスをphotoshopで縮小し、それをtif形式で出力したものです。
    （おそらく解決法は単純にtif形式で出力することを指しているのではないと私は思います）
    私はどのように解決法a,bを実現させたらよいでしょうか？

    This is a png atlas output by Spine, reduced by photoshop, and output in tif format.
    (I think the solution probably doesn't just point to outputting in tif format)
    How should I implement solution a, b?

    我很抱歉回答得不够清楚。
    I'm sorry that the answer was not clear enough.

    关于解决方案（A）。
    如果我没记错的话，tif文件导出的问题比较少，而且实际的RGB参数内容也没有问题。 如果我没记错的话，"tif "文件导出会造成较少的问题，而且颜色的实际RGB部分没有被破坏。你需要看一下Photoshop中的通道面板，以查看实际的RGBA内容。作为验证的步骤，你可以在Photoshop中再次打开导出的文件，查看刚才导出的真实RGB和A通道内容。如果RGB在透明区域不是黑色的，你需要想办法导出，使RGB通道保持黑色而不是改成漂白的颜色。你也可以尝试一下Gimp，比如说，如果我没记错的话，它对导出的图像的RGB颜色不执行任何改变。

    Regarding solution (A):
    What I meant is that Photoshop often causes problems when exporting transparent images as png format by automatically applying bleed in transparent areas. If I remember correctly, tif file export caused fewer problems and left the actual RGB part of the color intact. You need to have a look at the Channels panel in Photoshop to see the actual RGBA content. As a verification step you can open the exported file in Photoshop again to see the real RGB and A channel content that you just exported. If RGB is not black in transparent areas, you will need to find a way to export it so that the RGB channel is kept black and not changed to bleed color. You may also try Gimp for example, which performs no changes to the exported image's RGB colors if I remember correctly.

    关于解决方案（B）。
    我的意思是，你可以通过代码纠正任何错误的RGB颜色。你必须把导入的图像（RGB通道中的漂白颜色）和修改RGB值如下。

    color.rgba = Color4(color.rgb * color.a, //RGB部分需要乘以alpha
                    color.a); //alpha部分保持不变

    这就是所谓的 "预乘alpha"。

    Regarding solution (B):
    I meant that you can correct any wrong RGB colors via code. You have to take the imported image (with bleed color in RGB channels) and modify RGB values as follows:

    color.rgba = Color4(color.rgb * color.a, // the RGB part needs to be multiplied by alpha
                    color.a); // alpha part remains unchanged

    This is called "pre-multiplying alpha".

    我看到的另一个潜在的问题是，你启用了 "Alpha is Transparency"，而对于 "Premultiply alpha "纹理，建议 "停用"。关于PMA和直线alpha设置的摘要可以在这里找到：http://esotericsoftware.com/spine-unity#Advanced

    Premultiplied-vs-Straight-Alpha-Import。
    尽管如此，我认为这个设置并没有造成问题。

    One more potential problem I see is that you have enabled Alpha is Transparency which is recommended disabled for Premultiply alpha textures. A summary of PMA and straight alpha settings can be found here: spine-unity Runtime Documentation: Advanced Premultiplied vs Straight Alpha Import.
    Nevertheless, I don't think that this setting caused the problem.

    詳しい解説ありがとうございます！
    Haraldさんのおかげで私はSpineアニメをUnity上で綺麗にミップマップすることができました！

    Thank you for the detailed explanation!
    Thanks to Harald, I was able to beautifully mipmap the Spine anime on Unity!

    これで安心してカメラズームを使い、キャラクターを綺麗に拡大表示することができます！
    遠くのカメラアングル、近くのズーム、両方を使いたかったのでとても助かりました。
    Haraldさんの多くの助言と、素晴らしいアニメツールSpineに感謝します！

    With this, you can use the camera zoom with peace of mind and magnify the character neatly!
    It was very helpful because I wanted to use both the distant camera angle and the close zoom.

    Many thanks to Harald for his many suggestions and the wonderful animation tool Spine!

    こーゆー嬉しいお言葉をありがとうございます。
    結果はとても良いものになりました。
    スパインを気に入っていただき、お悩み解決のお手伝いができたとのことで、私たちもとても嬉しく思います!

    Thank you very much for your kind words Koyu!
    The result looks very good indeed.
    It makes us very happy that you like Spine and that we could help you with resolving your problem!