Dissolve/Disintegrate effect of complex object

[bold arrow]

I'm trying to get a "dissolve-away" effect on a playing card prefab that is composed of multiple objects with Image masks and transparency involved. I've tried a few ways to get this working, but none yield the end result I'm looking for

• Dissolve shader: shader graph shaders seemingly don't support layer masking. Tried a quick guide to tweak to include Stencil settings, but this either didn't work with masking or stopped showing the dissolve effect. Also the multiple objects don't seem to apply the effect consistently, but it may just look that way because of the other issue.
• Add shader material to image mask: mask component doesn't seem to work with custom image materials
• Output dissolve effect onto render texture and use as mask: can't find a way to use a render texture as a mask

Only solution I've got working so far is manually creating sprite slides for the dissolve effect, and updating the mask image to a different sprite every few slides. But I don't think that'll be scaleable when I want to make it look decent, rather than just a placeholder.

Is there a better way to apply this?

[worthy prism]

Using Canvas and Image components?

[bold arrow]

Yes, that's right

With some RawImage components too, but may change that later, or if needed

[worthy prism]

My solution would be to do the dissolve effect in world space or screen space, whichever space your UI is in or which seems more appropriate

Every object with the shader will do the same dissolve, so they appear to dissolve as one

[bold arrow]

So have a full screen shader that dissolves everything? How would that work to only dissolve the chosen card?

[worthy prism]

Not full screen, just per object

[bold arrow]

Okay, so screen space handles that better than overlay? That's good to know

Still doesn't solve the issue of invalidating the layer masks though

[worthy prism]

I didn't say anything about that
An object shader that would use screen space position for calculating the effect

[worthy prism]

Maybe you are using a unity version that doesn't support Canvas shader graphs
So earlier than 6

[bold arrow]

Started as a new project on unity 6, so that's not it

[worthy prism]

How does the layer masking stop working exactly? And what kind of layer masking

Could show the shader graph itself that has issues with the masking and/or dissolving itself

[bold arrow]

Sure, let me screen grab that

Well, the quick test I did re-hooking up the shader (since I have the manual-mask method in place) seems to work now. I'll post the shader now, and will test it out properly in a few hours when I'm not working

(also a side question if you know - how to select the image texture as a texture in your shader without setting manually?)

[worthy prism]

Setting it manually in what context?

[worthy prism]

Having the noise UV use screen position is important if you want to ensure the pattern to not be different between separate images that are meant to act as one

The center of the effect can be a per material property also, if you want it to set by group of images rather than originating on the screen center

[bold arrow]

I’ve been setting the texture in the shader material directly, rather than it picking up the texture from the image component

[bold arrow]

How can you do this? I didn’t see any options for it in the screen position settings

[worthy prism]

If your MainTex property's Reference is _MainTex it should just pick it up

[bold arrow]

Thanks so far for the help. The shader is now working with the mask, and the _MainTex is applying

What isn't working is:

• what you said earlier about centering on the card, instead of screen center
• the dissolve amount isn't changing with the shader property, is only being set at instancing

[bold arrow]

@worthy prism point 2 seems to be fixed by modifying materialForRendering rather than material, which is less convenient for debugging with sliders but still okay

[worthy prism]

In URP you use typically runtime material instances to modify shader properties
But with that you have to be mindful when you're creating a new instance and modifying one such
Methods that modify material properties create a new material instance, unless you're modifying an instance with them

So in your case you'd modify the group of materials that make up the card together

[worthy prism]

If you want to center the effect on the card, you have to calculate where that center is
The materials won't know about each other, so you have to pass some world space or screen space coordinate as a property as their common center

And convert to a screen space offset either in shader or before passing it to them

[bold arrow]

That's odd. I have a line that's basically image.material = new Material(image.material); at initialisation. If I don't do this, modifying the materialForRendering changes all of my cards, not just the one I'm running the code on.

[bold arrow]

Given that my cards move and scale, I guess I'll need to pass in both a screen position and scale each frame for the shader to compensate for

[worthy prism]

Probably you have to do that because Canvas is the renderer, not the Images themselves
But, creating the instances yourself is okay and makes it a bit clearer to keep track of them

[worthy prism]

Yes

[bold arrow]

Ah, that's interesting to know, might help me debug other issues in the future

Thanks for the help this far. Will see if I can get this working, and hopefully post back with a working result!

[bold arrow]

@worthy prism It's now working... sort of
The card dissolves, and doesn't affect other cards. Awesome. Using a shared material instance so less to worry about keeping in sync. But:

• The card images only dissolve if I change materialForRendering, but the cost icons (currently using the built-in knob sprite, one sliced one simple) only dissolve if I change material. Might be that the card images I create using Sprite.Create since it's fetched card art at runtime, where the costs are just straight from the prefab
• No idea how to dissolve the TMPro text. No image element, font shaders seem completely unrelated to text shaders
  Also haven't got the screen space working yet, but that's (for now) just a time issue

[worthy prism]

What do you mean haven't got "screen space working yet"?

[bold arrow]

Centering the dissolve effect on the card center, compensating for card size etc. This one looks correct because it's centered on the screen anyway

[worthy prism]

Yeah afaik TMP shaders still don't have shader graph bases
So a custom shader would have to arduously recreate them first, like how Canvas SG shaders used to have to be done before U6 (and how Terrain SG shaders will have to be made until U6.3 at least)

[bold arrow]

Yikes. Might cut my losses and just do a simple fade for the text then.

[worthy prism]

Since you've got a big stack of elements and need to do effects on all of them, it may even be worth the trouble to render them into render targets

[bold arrow]

I'm not really familiar with what that is. Is it related to render textures?

[worthy prism]

Yes, render target texture I mean
A camera renders the card into a texture, which is then displayed as one image so the shader can treat all its pieces as one, whether they are text or anything at all

Unfortunately I believe that requires having a whole camera for each card (or for many cards next to each other for a card atlas), the texture that's high resolution enough to capture the detail both of which can be expensive
And managing the sizes of the camera and RT texture (or several) is rather manual

I guess there could be a component that automatically in a minimal way renders a group of objects to the kind of RT texture that's sufficient for them, but I'm not aware if Unity has that by itself, or as a third party asset either

[bold arrow]

Okay yeah. I tried outputting the dissolve effect itself as a render texture and using it as a mask, but that didn't work. Figured it would be too expensive to resolve all my cards like that, and too complex/janky to switch to a render texture only when I need to dissolve

I doubt my cards will get much more complex than they are so may stick with the current method. Do you have any idea why some images need material and others materialForRendering?

And is there any downside/hidden issue to just changing both of them?

[worthy prism]

Something to do with how UI handles materials, never encountered that but I rarely use UI

Could ask in #📲┃ui-ux, in case someone knows about that specifically

Must be related to how Canvas is the actual renderer, so it has its logic for splitting different materials into submeshes or separate renderers internally

a GPU can only render one shader / shader variant in one go

[bold arrow]

Will do. Thanks for the help this far. It's pretty much working as I want it to

[bold arrow]

@worthy prism not perfect, but does everything I want it to. Thanks for all the assistance!

(added a border emission effect too)

[worthy prism]

Got the per card centering working too?

[bold arrow]

I've put in the code for it, but haven't stress tested it yet. Lemme check quick

Probably centered, but with the wrong scaling logic? But I can fix the math when I have time

(these are all at .4 scale when "in hand")

[bold arrow]

@worthy prism Scaling and positioning fixed up. Last thing I might do is add some randomness to the UV seed so it isn't the same dissolve shape every time, but the rest seems good

[worthy prism]

[worthy prism]

@bold arrow It's possible to mask out the text with the shader
TMP supports masking under "extra settings", and if the shader graph has alpha clipping it uses the clipped alpha for the stencil

[bold arrow]

My current shader doesn’t have any alpha clipping (just regular alpha with an edge function), but I could probably add it in without too much trouble.

There’s also currently no “whole card” image to read the mask from, but I guess I can add one behind the rest of the card? Or if can it read from disabled images

[worthy prism]

Alpha clipping is just a checkbox in graph settings, it'll work with the alpha input you already have
Tuning the clipping threshold is optional

"Read the mask from"?

[bold arrow]

I assume the TMP mask works like image mask, where the mask image needs to span the entire space of the image it’s masking. Is that not the case?

[bold arrow]

Yeah, seems that tmp masking needs a texture, can't use a material/shader

[worthy prism]

I didn't have to do anything but to enable alpha clipping

Leftmost is Shader Graph
Middle is no material
Rightmost is rect mask

[bold arrow]

What does the setting look like in the inspector, to apply shader graph?

[worthy prism]

Material has no properties to set

[bold arrow]

Okay, so you do still need an image to use as the mask. I’ll try that out

[bold arrow]

@worthy prism not working for me. As soon as I add a Mask to an image, the shader stops working
Only difference between 1/2 and 3/4 is the that the Mask component is disabled in 1/2

[bold arrow]

I think it has something to do with the change over time. Found a link that implies that "materialForRendering" comes into play when masking is enabled.

I can set the material with some dissolve, then enable the mask, and it works. But when the mask is enabled, I can't change the material in the object's inspector. If I inspect the material directly, changes don't appear on the object. Then when I disable the mask, the material updates. So unless I want to be enabling and disabling my mask on each frame, I don't think it's supported

Tested the above in a completely new scene without any of my existing prefabs, just the shader

[worthy prism]

Can you change the dissolve property via code if not through the inspector?

If you must enable a nd disable the mask each time, that'd be no problem to do in code also
But I'd be suspicious of that kind of hacky solution being unreliable or platform dependent somehow

[bold arrow]

Yeah, plus I can't imagine that'd perform too well

I'll test out changing the property through code

[worthy prism]

It might or might not be a problem
Depends why it's happening exactly

[bold arrow]

That seems to work through code, so long as I'm targetting materialForRendering

I'll see if I can get my card text to do the same

[bold arrow]

That works too. Relevant point that may be why mine didn't work before - the "materialForRendering" of the mask changes if you enable/disable "Show Mask Graphic"

[bold arrow]

Seems to work, and for the whole card too, not just the text