How does GUI clipping work under the hood?

What I mean is what is actually being produced to make the clipping function?

All clipping is based on standard mesh shapes. I’d like support for clipping to alpha of textures too / using black and white images for clipping masks - this would enable designers to mask off areas in faded ways so more interesting effects can be produced. I’d also like support for arbitrary mesh shapes / composite mesh shapes.

3 Likes

We use the stencil buffer to solve arbitrary clipping. The method is very similar to this blog post, with the addition of inverted clippers. It could be possible to either use alpha testing or the glsl ‘discard’ statements in shaders to achieve what you want, but I’m not certain about the availability of either on the different platforms (WebGL, OpenGL ES, etc) or their recommended use. I know that ‘discard’ can have a very negative effect on GPU perf, dep. on hardware.
From our documentation:
“render.STATE_ALPHA_TEST ( not available on iOS and Android)”

Depending on what you want to use the effect for, it could be an option to achieve it by rendering the clipped graphics to a texture and then solving the fade through alpha-blending. What do you think?

4 Likes

Thank you for the info.

Rendering whatever is to be clipped to a texture and then using another image’s rgb or a to be used as the alpha of the render target would probably be the best option. But this is kind of cumbersome and not something that can be currently done in the editor by the designer as easy as current node clipping is.

There’s also another problem with the standardization of render solutions like RenderCam and Defold-Orthographic where there is no ability to shim in render target features easily. Although maybe this can be considered and added somehow to these resources.

I agree! The thing is that it needs to work in practice across a wide variety of platforms/hardware in a scalable manner, so it’s unfortunately not trivial to solve.

1 Like