New material cutout implementation

Hi everyone, what’s the best way to obtain a cut out effect ( like this) using new 1.58 materials ?

Thanks in advance for any suggestion !

Do the existing shaders not work with it?

There’s an example of one that can be used with the Standard Material here: How can I make the custom shader stop? - #18 by yaustar

I think you just need to set an alpha texture on a material, and use alpha test value to create cutout.

@mvaligursky very smart suggestion it works fine, still, this way is not possible to have a border color, which could be fancy with bloom.
I applied it as basic solution, thank you !

@yaustar the truth is that is the first time I approach shader extending in PC, i read some posts and tutorial, but I didnt put myhands on it, yet.
Thanks a lot for hints and directions, gonna start experimenting now :slight_smile:

I created a project to mix down transparency and cutout shader, here, on the root entity the shader script.
This cutout works on diffuseMap so it cant work on transparent materials, any hint/directions about how to approach this ?

p.s.:on the other side the alphatest works fine on transparent using a noise map, but no color border and the material loose a bit of “consistency”.

I’m not sure I understand the question … but perhaps what you need is to use discard instruction in the shader, to remove some pixels.

For example

if (transparency < 0.5)
    discard;

Or maybe i didnt explain my self properly, using the alpha we dont obtain a coloured border which instead is obtained with “burn shader”, but this last will not work on transparent material.

So the point is: is it possible to have a cutout ( with a coloured border ) on trasnparent / refractive materials ?

If you go to the last post, I believe I did it here: How can I make the custom shader stop? - #22 by yaustar

If you need it to not be affected by lighting, I think if you include the emissive chunk, you can change the color there?

Checking it right now, should i change api version in code ?

You will need to update this line to the current engine version: PlayCanvas | HTML5 Game Engine

See this for more details Shader Chunk Migrations | Learn PlayCanvas

Thank you a lot, always same project here , the iridiscent ball works fine, added this:

image

Btw do you know ho to pass&read correctly a vec3 to shader for the color ? I am actually using a not very elegant form…

image

Thanks a lot !

uniform vec3 color;

and pass it as Float32Array[3];

1 Like

@mvaligursky thanks !