[SOLVED] Multiple Radial Masks

Help & Support
1

Good morning!

I am currently working with some ring graphics that use a radial mask to fill progress. The problem I have is that there are 9 of them that I will need to manipulate individually.

Since the radial mask comes from a material, it seems I can only manipulate the alphatest there, meaning I would need to create 9 separate materials for my radial masks. Is there a more efficient way to do this? I really don’t want to resort to 9 different materials if there is a better way.

2

If you are afraid of performance issues having 9 materials, don’t worry a single shader will be generated for all of them.

But yes there is lack of convenience having that many in editor just for that, maybe create a single one and clone/assign it using a script?

1 Like
3

@Leonidas,

Thank you! That’s exactly what I was worried about. If there isn’t a performance hit, I will just clone the material and use it that way.

1 Like
4

Yes, if the materials are identical (only uniforms change) a single shader will be executed.

And since material assets aren’t downloaded separately, but as a part of the config.json file, there won’t be multiple http requests. I think you are good :wink:

5

So I finally got around, to finishing up my 3D screens, so I could take a look at my radial masks again, but I’ve run into a problem. I’m using this as my script for testing:

var CcScreenLRadial = pc.createScript('ccScreenLRadial');

CcScreenLRadial.attributes.add('maskMaterial', {
    type: 'asset',
    assetType: 'material',
    title: 'Mask Material',
    description: 'The material to be cloned and applied to the radial for masking.'
});

CcScreenLRadial.prototype.initialize = function() {
    
    this.entity.element.material = this.maskMaterial.resource.clone();
    this.entity.element.material.alphaTest = 0.5;
    this.entity.element.material.update();
};

But I get very inconsistent results. Anything from the child entity that is being masked disappearing, to the rest of the image elements suddenly looking worse, all the way to absolutely nothing happening. It’s strange that I’m getting different behavior with the same lines of code. I guess it could be a caching issue?

I get the feeling that my approach to setting up the element material is where I’m going wrong, but a look at the documentation hasn’t revealed too much so far.

Any help would be greatly appreciated.

6

could it be perhaps related to sorting? Depending on camera position, they might get sorted differently and that causes the inconsistency? Perhaps try to use layer which is manually sorted.

1 Like
7

Hi @mvaligursky!

When I set up my layer for these screens, I made it manually sorted. More testing is just revealing more strangeness. If I set alphaTest to 0.5019, the result is as if the alphaTest was set to 0, but if I set it to 0.502 it’s as if it was set to 1.

8

that sounds like alpha testing, and not alpha blending. @ray did some work on those masks I think … any knowledge you can share?

9

@mvaligursky !!!

It took some additional thinking and minor cursing, but I figured it out. In my testing process I had forgotten that the script I was working with was being preloaded, while my other assets were not. Once I set my new script to also be in the group that was not preloaded, the script worked when placed in postInitialize. Luckily, as I keep working, the changes to the alphaTest will be event based so everything should be loaded by then.

Thank you very much for your advice!

2 Likes