Soft Mask - A replacement of Unity UI Mask with alpha support

Hey, guys,

Soft Mask has just been updated to version 1.1.1. It's a minor patch, which includes a few improvements and bug fixes.

Improvements

• Improved usage of Soft Mask in Unity version 5.6 or later. Unity doesn’t upgrade Soft Mask shaders and warnings aren’t popped up during import anymore.
• Nested Masks aren’t disabled automatically now. Instead, each child is masked by the nearest mask only, which gives more predictable behaviour. See the Nested Masks section in the documentation for details.

Bug fixes

• Fixed the way Soft Mask interacts with nested canvases with Sorting Override flag enabled. It doesn’t mask those canvases anymore which corresponds to the way standard Mask does work.

I also want to thank Martin Scott from Blazing Griffin (@MRJScott) who helped me to reveal these bugs. Without his efforts, there would be no 1.1.1.

Future plans

I promised an integration with TextMesh Pro a long time ago and it's still not released. Sorry for this. I didn't forget about it and still working on it. And I've made some progress in this direction. There are chances that modifications, which are needed for Soft Mask to work with TextMesh Pro, will be incorporated into some of TMPro's future versions. I'm currently testing my changes to be sure that they do not break anything in TextMesh Pro.

So, there are good chances that we will see Soft Mask 1.2 with TextMesh Pro support soon!

As always, if you have any suggestions or questions about Soft Mask, feel free to post them here or write me emails or PMs.

 

SoftMask works great! I really like it, default unity mask component should be like this.

I have only one litte request: Could you please make a small tutorial or desciption how to make softmask working with custom shaders. I checked your provided shader and tried to adapt the chances to my shader, but without success.
I use ShaderForge / AmplifyShaderEditor, do you see a simple way to make these shaders compatible with softmask?

Thanks!

 

Thank you, @MS80!

I haven't used any of node-based shader editors that are available in Asset Store yet. But you just give me yet another reason to do it. So, I'll try some of them soon and then let you know what is possible to do.

A tutorial or description for regular text shaders would be helpful too — the documentation still sends you directly to the shader code, which may be confusing for those who haven't worked with them much. So, I will add such information to the documentation in the next version of Soft Mask.

That's the next version, but you probably need a solution right now. So, I'm going to write a small guide which I post here in a day.

 

Hello again,

I started to work on the tutorial and realized that to be useful, it should be a bit longer than I originally thought. I'm almost done with a version in my native language but I still need to translate it to English, which I'm doing soo slow at this moment. So, guys, sorry for this delay. I will post it here as soon as I can.

But I also have good news for you, @MS80! I took a closer look at Amplify Shader Editor and Shader Forge. As I understood, the first one doesn't support UI shaders creation (I haven't tried it yet by myself) while Shader Forge - does, but requires manual editing of the resulted code in case if you want to make it work with standard Mask (as described here).

So, I picked Shader Forge, created a simplest possible 2D shader in it and then added support of Soft Mask by inserting several instructions to the generated code. Everything seems to work fine. The resulted shader is attached to the post, maybe it will help you. If not, wait for a tutorial that I promised, or, if you have specific questions — ask them, and I'll answer

 

Thanks @zxkne, that sounds good! Adding only a few lines to shaderforge shader would be cool

I've tried your attached shader, unfortunatly it does not work in my test project. I've tried it with a new project, using Unity 5.6.0f3 / 2017.1.0f3, Win10 and softmask 1.1.1. The material gets the correct texture "mask" but the masking itself does not work, and the color is black.




Also looking forward for your tutorial!

 

Hi there, is it supported on iOS? I saw something about using ETC1 for mobile. What about PVRTC or just uncompressed RGB16,24?

 

I reproduced this issue and figured out what is going wrong. The generated shader has a shadow pass which isn't needed for UI. I didn't dig into this further, just removed it, and now everything works fine I also found a way to tell Shader Forge to not generate shadow pass: just mark a checkbox in the Experimental section in the shader settings panel. I attached the updated shader example, just in case.

Manual editing of a generated shader has a significant drawback: you have to reapply all your changes after each tuning of a material. That seems not very practical to me. Soft Mask integration doesn't require any tricky coding — just two function calls. I think it's possible to add Soft Mask support into a shader in Shader Forge itself, using nodes. I'm attracted by this idea, so, I'm going to play with it a little bit and let you know then

Hi! I personally haven't tested it on iOS but heard that some of the customers used Soft Mask on this platform. What's about texture compression, Soft Mask should work with any texture compression that Unity supports. Support of ETC1 is stated explicitly because usage of this format isn't opaque to shader writers: in Unity UI there is a separate shader that handles ETC. If you use default UI shader, you don't have to think about it at all.

If you decide to purchase Soft Mask and, eventually, something goes wrong, will it not work on your platform or with your texture compression format, I'll help you to solve issues or refund you.

 

Hi zxkne,

I've purchased Soft Mask and it's working as advertised, however like some people before i'm using textMeshPro, i've tried the unity package, replacing the TMP with the custom one and replacing the shader but it does not seem to work. I'm on Unity 5.6.2p2

Any update on the integration?
Or a way you could have a look at what i might be doing wrong?
Thanks!
Tom

[EDIT!! Nevermind, don't know what i changed but it's working now! thanks anyway]

 

Hi, Tom,

Do you use source code version of TextMesh Pro? If yes, then I can send you a patch for TextMesh Pro and an integration package that enables Soft Mask to automatically mask TextMeshProUGUI components.

If you had not purchased TextMesh Pro before it became free, then you probably don't have access to source code. In this case, I currently can afford you only a bit ugly solution. I still provide you an integration package, but you will have to use a custom derived class instead of TextMeshProUGUI. It may be very inconvenient if you have many text instances already set up because there is no way to copy properties between a base and derived class instances in Unity. But currently is the only one method.

Thanks for purchasing!

 

Hi thanks for answering! I've used the derived class and it's working beautifully now. Luckily i didn't have to many instances to replace yet.

 

That's great, I'm glad to hear, that everything works! I'm looking forward to the moment when we all can use seamless integration without all these hacks.

 

Thank you very much! I've added soft mask support to some shaders with only a few additional lines.
It seems changes in the shader (f.e material main color) itself does not update directly on ui elements, but this is a Unity issue....?!

Yes! That sounds promising. Thumbs up for "SoftMask" node in ShaderForge!


I had another idea, do you think it would be possible to add "RenderTexture" as source for soft mask?

 

Great! Honestly, I didn't understand the principle by which Unity decides whether to allow or not editing of material for UI element. It definitely doesn't allow modification of UI/Default material, but if I create a separate instance that uses the same shader, I can modify it. I don't know why it doesn't work for Shader Forge.

I'm sorry to disappoint you but that's not possible in Shader Forge. At least without hacks and disassembling (which is against the EULA, as I understand it). Unlike Amplify, it doesn't provide API for custom nodes creation. What I'm originally talked about is to just put several nodes into a graph instead of modifying the resulted shader. And I just tried, it doesn't work Details in the following post.

Yes, it's definitely possible. I've done it before But currently, it has a limitation: you have to copy RT content into a separate Texture2D, just because SoftMask interface doesn't accept base Texture class. I have some plans about dynamic masks, so 'native' support of render textures (and also any Graphic as a mask source, even texts!) might be added in the future

 

As I said, I've tried to add Soft Mask support to a UI shader entirely in Shader Forge and it didn't work. And here's why:

1. It's not possible to insert custom #pragma into a shader. So, to fully add support of Soft Mask you still need to manually edit shader code which devalues the entire idea.
2. There is no way to move calculation of mask coordinates from a pixel shader into a vertex shader. Performing of this operation in a pixel shader isn't ineffective but can be used, of course.
3. It's impossible to exclude mask-related calculations for a case when an element isn't nested in any mask. Again, to do it, you have to edit the code and insert #ifdefs.

So I wouldn't recommend going this way, if anything

 

Hello!, I just bought your plugin, i'm using a circled image to do the masking, but when its applied the mask have rounded borders on the edges of the image, if i increase the ammount of empty pixels around the circle works fine, but i wanted to know if its possible to achieve it without having to change the images
(On the left is the image i'm using as a mask, on the right is the same image as a mask masking a square image)

 

Hello, @arizagamx,

Thank you for purchasing!

I've reproduced your issue. It caused by that Soft Mask also performs regular rectangular clipping and when doing so, it smoothes rectangle borders a little bit. The smoothing is just of 1 pixel width, so, I originally didn't think that it may be an issue in some cases. Seems that I was wrong

Currently, I can propose you only a workaround solution. Open SoftMask.cginc file, find the __SoftMask_Get2DClippingAntialiased function and replace it with this:

Code (CSharp):

1. inline float __SoftMask_Get2DClippingAntialiased(in float2 position, in float4 clipRect)
2. {
3.     return UnityGet2DClipping(position, clipRect);
4. }

If you do so, you will not get anti-aliasing in a case when you don't use mask texture at all (unlikely that you need it).

I will think how to fix this in a right way. Probably I'll add a smoothing width option in future versions.

 

Здравствуйте, Олег
Разрешите поинтересоваться - в реализации вы GrabPass используете в шейдере на который вы заменяете UI/Default ? надеюсь это не коммерческая тайна у меня стоит задача не маскирования, а правильного фейда группы UI элементов (увы CanvasGroup делает это неправильно, фейдит индивидуально, а не как группу), реализовал через GrapPass и получил проблемы на iOS metal - для мягкой маски вы должно быть столкнулись с той же проблемой.
Спасибо

 

Здравствуйте!

Нет, GrabPass я не использую. Поскольку в качестве маски поддерживаются только статичные текстуры или спрайты, рендеринг в текстуру не требуется. У меня есть планы по поддержке динамических масок, но, если честно, про GrabPass я даже и не подумал. Вместо этого начал искать способ рисовать Graphic в текстуру.

Так что по GrabPass, увы, подсказать ничего не могу

 

Hey,

Tutorial on How to add the Soft Mask support to your own shader is ready!

Your feedback is very welcome! I believe, together we can make it better.

 

Thank you very much, it worked!

 

Trash. no nested masks, not work with standard mask

 

Hi, @NoGame0life,

Sorry, that the package didn't fulfill your requirements. I'm ready to refund you if you want.

Also, I would like to ask you to share some more details on "not work with standard mask". What does it mean? Soft Mask can be nested into a standard mask and vice versa and it should work. If not, it's a bug — if you provide me more information, I'll try to fix it or find a workaround.

 

Hi @zxkne,

I just bought Soft Mask and it works pretty well, except I see some slight flickering around the edges in game. Here's what it looks like in scene: http://imgur.com/a/rPe73.

I'm able to reproduce this with a UI Image with no sprite + a nested child UI image with a sprite of a different color. The hierarchy looks like:
-> TopImage (White Image + SoftMask)
-> BottomImage (Red Image)

Here's what it looks like in scene view, game view is less noticeable but still not great: http://imgur.com/a/kP0t2.

I'm using Unity 5.6.1f1.

Thanks for your help! I appreciate the clean asset + how easy it is to start using soft masks .

Darren

 

Hi @darren-peakbeaklabs,

Can you try the fix that is described in the post #66? It seems like the cause of your issue is the same as there - smoothing of the mask borders. It was an unwise design decision and I already removed it in the version 1.2 that is being developed now.

Thank you for choosing my package and for good feedback!

 

That worked, thanks . Left you a good review!

 

Zxkne - could I get a copy of the integration package? We use TextMeshPro (but didn't begin until after it became free, so we don't have source) and really would like to continue using SoftMask!

 

Hello, @jweinhartSW,

I've sent you a private message.

And I also have good news for you and everyone else who interested in using Soft Mask together with TextMesh Pro. Changes that were required for Soft Mask are already included in the latest version of TextMesh Pro - 1.0.55.xx.b12. So, you don't need to use custom derived classes or patch TMPro code anymore

The integration package will be published on Asset Store as a free package (but it will require SM and TMPro to work) as soon as I finish the documentation and test it. But for now, anyone who wants to participate in "beta-testing" of the integration package can get a preview copy by sending me your invoice number via email or PM.

 

Здравствуйте! Заинтересовался вашим компонентом, но не уверен, что он может помочь мне реализовать то, что я хочу (см. картинку):


Т.е. есть спрайт, есть маска (в идеале заданная выбранным цветом), есть параметры рамки, emboss или тени. Поможет ли ваш компонент получить подобный результат выходе и как этого можно достичь?

Вообще, возможно ли наложить тень на полученный после маски результат с помощью компонентов UI Shadow или UI Outline или они работать с этим в принципе не будут? Со стандартной маской не работают...

 

Здравствуйте!

К сожалению, добиться желаемого эффекта стандартными средствами не получится. Стандартные эффекты Shadow и Outline работают довольно простым способом: они дополнительно рисуют элемент 4 раза со смещением в разные стороны и с заливкой указанным цветом. Маска распространяется в том числе и на эти дополнительные элементы и, соответственно, отсекает все, что выходит за границы маскируемой области (которая остается на том же месте). Поэтому все, чего можно добиться при помощи SoftMask + Outline – еле-заметная обводка:

Обратите внимание, что Effect Distance указан 3, а по факту толщина обводки от силы в пол-пикселя. Ее видно только потому, что у маски слегка сглаженные (anti-aliased) края.

Лучшее, что я смог придумать для отброса тени стандартными средствами - просто использовать 2 картинки. Каждая из них маскируется отдельно (одной и той же маской). У второй картинки задаем небольшое смещение:


Конечно, такой подход весьма ограничен. Хотя можно поэкспериментировать со слегка размытой версией исходной маски... то есть, использовать для картинки и для тени немного разные маски: одну – четкую, а другую – с размытыми краями. Теоретически это позволит добиться размытой тени.

Я предполагаю, что на Asset Store существуют пакеты, которые реализуют Photoshop-подобные эффекты для UI. Я не могу заранее сказать будут ли они работать с Soft Mask – зависит от реализации. Но особо расчитывать на то, что все заработает как вы ожидаете, я бы не стал.

Спасибо за интерес к моему пакету!

 

Спасибо за ответ! Печально, что задача пока не решается. Также. к сожалению у меня пока не получается найти Photoshop подобные эффекты в Asset Store, применимые к UI Image (только для шрифтов кое-что есть). Так что, если сделаете что-то подобное - будете первым. Думаю, с вашим опытом в написании шейдеров это не составить большого труда.

 

I've just sent version 1.2 to review. If everything goes well, it should become available on Asset Store in a few days.

The key feature of 1.2 is a long-awaited TextMesh Pro integration! To use it, you need to import Soft Mask for TextMesh Pro (it's free) into your project.

To get information on how to use Soft Mask with TextMesh Pro, reference the Soft Mask documentation.

The integration works starting from TextMesh Pro version 1.0.55.xx.0b12. Please note that this version of TextMesh Pro works only with Unity 5.4 and higher. So, you can't use SoftMask with TextMesh Pro in your Unity 5.3 projects (of course, the previous hacky method still can be used).

Here are full release notes:

Improvements

• Added support of TextMesh Pro in a separate integration package — Soft Mask for TextMesh Pro

• Added an ability to inject custom logic into the process of shader replacement. This feature is used by the new TextMesh Pro integration package and also can be used to better integrate Soft Mask with your own UI shaders.

• Added a tutorial on how to add support of Soft Mask into your own shader.

Bug fixes

• Removed anti-aliasing from rectangular clipping. Images whose content is close to the texture borders are displayed correctly now. If you used Soft Mask without texture set and want to achieve the previous anti-aliased look, you can use a special texture with a one-pixel gap on the borders.
  
  
• Removed a visual artifact that sometimes could appear on the edge of the masked image in Tiled sprite mode.

Please note, that removing of anti-aliasing from rectangular clipping is a breaking change at some degree. If you relied on the previous behavior (i.e. you used Soft Mask without a texture) and want to achieve the same effect, you need to create a special texture. Feel free to contact me if you need some help on it.

 

Both Soft Mask 1.2 and Soft Mask for TextMesh Pro are available on Asset Store now. I've removed attached .unitypackage from my previous post because now you can download it from Asset Store.

As always, your feedback is very welcome!

 

I just uploaded version 1.2.1 to Asset Store. This update solves an issue with dynamic assemblies which was introduced in 1.2. The version should be available on Asset Store soon.

If you encounter an exception that looks like this:

... replace GetExportedTypes() with GetTypes() in file MaterialReplacer.cs, line 62.

Sorry for the inconvenience. And thanks to everyone who reported this bug and helped me to solve it!

 

@zxkne Great work on TMPro based support.
Does your plugin provide following feature or plans to provide following feature.
Ability to detect if a sprite or font (TMPro) is fully or partially masked? What i want to do is mask object on runtime and once whole sprite or font is hidden get a event or isFullyMasked = true type property.
Please advise

 

@JohnGate, thank you!

Unfortunately, there is no such functionality and it's not planned for the near future.

In general case, it's a very expensive task because it requires per-pixel iteration of the intersection area of a mask and a sprite. Probably it may be optimized very well for some cases, or even for the general case. For example, one could check just several pixels instead of the whole area. To implement something like this you need to set your texture readable after which it's possible to sample it from C#. Soft Mask contains code that allows to sample the mask texture with respect to the Image type (sliced / tiled), see SoftMask.IsRaycastLocationValid(). This function is called by Unity to filter input events (when Raycast Threshold > 0) and also may be used as a starting point if you decide to implement required functionality by yourself.

Also, I remembered that there was a hardware technique that allows to know how much pixels GPU actually drew. It introduces some lag (because GPU works asynchronously) and I'm not sure whether it's available in Unity or not, but it's probably an area for research.

If you need further help, especially on SoftMask's code, feel free to write me.

 

Thank you for your detailed reply, ill investigate and see if i can implement it. Thanks again

 

Soft Mask 1.2.2 has been released. This version continues the fight against bugs related to dynamic assemblies and also improves shader performance for Unity 2017.2 a little bit.

Bug fixes

• Fixed a bug causing Soft Mask to not work when the project contained dynamic assemblies with an unfinished process of type building i.e. when TypeBuilder.CreateType() hasn’t been called.

Improvements

• Improved compatibility of Soft Mask shaders with 2017.2. Now they perform rectangular clipping only when UNITY_UI_CLIP_RECT is defined.

 

Soft Mask is on sale until 08.12. The discount is 30%.

 

Hi zxkne,
We have purchased your plugin, Is there an example of an additive shader working with SoftMask? we currently use a lot of additive effects in our UI and that would be very useful.

 

Hi @Yarden-Raveh,
Thanks for purchasing!
There are two main options on how to use additive blending with Soft Mask.

1. If you use a version of Unity's default UI shader with additive blending enabled (i.e. with Blend SrcAlpha One) then you can just create a copy SoftMask.shader and set such blending in it. After this, create a material based on this shader and apply it to UI elements. An example of this is attached to the post (Soft Mask should be imported to a project to make it work).
   
   
2. If you use a more sophisticated shader, you need to insert special instructions to it (or to a copy of it). There is a step-by-step tutorial on how to do it.

Also, if you can't or don't want to apply special materials to your UI elements manually (e.g. if you have many UI elements), you could use IMaterialReplacer. Implement this interface in your code like the follows:

Code (CSharp):

1. public class MyMaterialReplacer : SoftMasking.IMaterialReplacer {
2.     public int order { get { return 1; } }
3.  
4.     public Material Replace(Material material) {
5.         if (material.shader.name == "MyKnownShader") {
6.             var result = new Material(Shader.Find("MyKnownShaderWithSoftMaskSupport"));
7.             result.CopyPropertiesFromMaterial(material);
8.             return result;
9.         }
10.         return null; // don't replace
11.     }
12. }

To make it work you need to be sure that the "MyKnownShaderWithSoftMaskSupport" shader is included into a build, the simplest way to do it is to put it into a Resources folder.

 

Wow, didn't expect a reply so fast. Thanks for the help that shader example is really helping us!

With regards,
Yarden Raveh

 

A new version of TextMesh Pro 1.0.56.xx.b1 was released on 29.11.2017. The source code version is already available, I guess, the Asset Store's version will be updated soon too. I've tested SoftMask for TextMesh Pro with this new version and it seems that everything is working fine. If you encounter any issues using Soft Mask with TextMesh Pro, please let me know.

UPDATE TextMesh Pro 1.0.56.xx.b1 is available on Asset Store. Also, don't forget to execute the menu 'Tools / Soft Mask / Update TextMesh Pro integration' after updating TextMesh Pro.

 

I have TextMeshPro-1.0.55.2017.2.0b12 and downloaded Soft Mask today (as well as the TMP extension) and It doesnt work with TMP.

I get two errors when I try and "Update TextMeshPro Integration"

Could not patch TextMesh Pro shader TMP_SDF-Mobile Masking. Probably TextMesh Pro was updated and Soft Mask - TextMesh Pro is still not.
UnityEngine.Debug:LogErrorFormat(String, Object[])
SoftMasking.TextMeshPro.Editor.ShaderPatcher:UpdateShaders() (at Assets/SoftMask for TextMesh Pro/Scripts/Editor/ShaderPatcher.cs:39)

Could not patch TextMesh Pro shader TMP_SDF. Probably TextMesh Pro was updated and Soft Mask - TextMesh Pro is still not.
UnityEngine.Debug:LogErrorFormat(String, Object[])
SoftMasking.TextMeshPro.Editor.ShaderPatcher:UpdateShaders() (at Assets/SoftMask for TextMesh Pro/Scripts/Editor/ShaderPatcher.cs:39)

 

Hello, @keenanwoodall

Sorry that the package didn't work for you.

I have tried the version you mentioned and everything worked as expected. So, I need more information to be able to diagnose the issue. Could you answer following questions, please?

1. Do you use a source (from TMPro forum) or a binary (from Asset Store) version of TextMesh Pro?
2. Did you change TMPro shaders in some way?
3. Does this bug reproduce on a fresh project? Can you send me a minimal project that reproduces the bug in a private message?

I'll understand if you will not want to investigate the issue. If you want a refund, just send me your invoice number via PM.

 

Hey. I haven't changed the shaders and TMP is installed from the asset store. One interesting thing I noticed is that text that uses the default Liberation SDF are masked correctly. Its the SDF's that I've made that aren't masking correctly.

 

I've found version 1.0.55 from Asset Store (it's not possible to download an older version directly), but "Update TextMesh Pro Integration" still works Can you provide an example project with the issue shown? For example, you can make a copy of the project with everything removed except the TMPro, SoftMask and SoftMask for TMPro folders.

By SDF you mean a Font Asset that is created with a special TMPro window? They're separate things from shaders, so they shouldn't affect shader patching. Some of the texts may work because they use shaders that have been patched successfully (you have 2 errors, but there are more than 2 shaders to patch).

 

Yea by SDF I mean the generated font assets. Do you think I can change the settings/shader of the SDFs that I'm using to match one that works? If so do you know where and what I should change? If not I'll try and piece together an example project.

 

You can look in the SoftMask for TextMesh Pro/Shaders/Generated/Resources folder. If there are some shaders, they could be used with Soft Mask. For example, if the folder contains "TMP_SDF-Mobile - SoftMask" shader, you can select a TMPro-material that is based on "TMP_SDF-Mobile" (without "- SoftMask" — it will be replaced automatically, so you don't need to deal with it).

But anyway, this doesn't solve the root cause. So I would be very appreciated for an example project

 

Hello!
I m using unity 2017.3.0p3 and having this error.
having this error soft mask is working great in Editor , but could not build on android.

failed to open source file: 'SoftMaskTemplate.cginc'
Compiling Vertex program
Platform defines: UNITY_NO_DXT5nm UNITY_NO_RGBM UNITY_ENABLE_REFLECTION_BUFFERS UNITY_FRAMEBUFFER_FETCH_AVAILABLE UNITY_NO_CUBEMAP_ARRAY UNITY_NO_SCREENSPACE_SHADOWS UNITY_PBS_USE_BRDF2 SHADER_API_MOBILE UNITY_HARDWARE_TIER3 UNITY_COLORSPACE_GAMMA UNITY_LIGHTMAP_DLDR_ENCODING

 

Hello! Try to reimport Soft Mask/Shaders folder (RMB, Reimport). I don't know why, but sometimes Unity refuses to include .cginc that should be visible. Please let me know if that will not help.