Transparency Modes for Textures to fix depth problems

[BlueTaslem]

As a Roblox developer, it’s currently difficult to use textures, decals, particles, SurfaceGUIs, and similar images, as well as transparent geometry, because transparent objects do not stack correctly.

Partially transparent solids are difficult to render, because a “depth test” cannot be used, since distant objects must remain visible behind closer, transparent objects. To solve this, you can apply the “painter’s algorithm” and render objects from back to front. Roblox currently attempts to do this with transparent objects – including all decals, SurfaceGUIs, textures, and particles.

However, this approach doesn’t always work, because it’s hard (impossible, in general) to predict which objects need to be drawn in front. As a result, Roblox gets it wrong sometimes:

However, the difficult case only happens when the materials are partially transparent. For example, in the above image, we could just render the opaque part of the texture using the normal depth-test, and not rely on sorting the objects in the correct order.

I propose the addition of a new property to the objects that currently suffer from this (transparent BaseParts, Decals, Textures, SurfaceGuis, ParticleEmitters, etc), TransparencyMode.

The most essential modes would be

• Standard, which is the current behavior and supports alpha values that aren’t 0 or 1.
• Binary, which treats all pixels that are not opaque as invisible. This would be the setting used to solve the above gif, since the bush texture doesn’t (meaningfully) use partially transparent pieces.

In addition, it would be nice to (eventually) have a more powerful middle-ground choice:

• Dither, which would use a Bayer matrix (or halftoning or similar) to determine whether or not a pixel of a given alpha value should be present or absent. This would be useful for fixing the ordering of transparent geometry (though it has some kind of artifact which won’t be suitable for all cases). It may be necessary to have multiple Dithered options, so that different layers of geometry that should stack don’t correlate too much. It would also work for providing partially transparent textures at a much higher quality than can be gotten from doing the dithering in the texture itself (since as the texture got closer to the screen the matrix’ pixels would not get bigger).

My understanding is that most games nowadays use dithered transparency for most of the transparent geometry in them. It would be great if Roblox could support this too so that it becomes possible to use transparent textures.

[Arch_Mage]

Transparency is understandably difficult to handle in rendering, so I can understand why there might not be a way to cover all of the bases. However, having modes of transparency would help to mitigate the issues that do pop up, and give developers more control over how these objects are rendered.

I very much support this. More power to the devs!

[BlueTaslem]

By tweaking Studio’s shaders, I got an example of transparent slate using hatching vs roblox’s current transparency.

By adding the following line to the Slate fragment shader, I can make all slate materials 50% transparent (of course, a branchless version would be better):

if(mod(floor(gl_FragCoord.x)+floor(gl_FragCoord.y),2.0)<0.0){discard;}

How Normal TransparencyMode looks:

How Dithered TransparencyMode might look:

Note the differences:

• In Standard mode, the spheres don’t cast shadows from ambient occlusion.
• In Dithered mode, the green sphere doesn’t cast (as much of) a shadow when looking through the blue sphere
• In Dithered mode, the order of red / blue is always correct, but the red sphere is completely hidden by the blue sphere (if they were different opacities, or used different dithers, then this would be less true)

GIF showing how these look when stacked. First, with standard transparency, you can see the parts shifting which one is on top. Next, with dithered transparency, you can see that it’s consistent (but that back parts are totally invisible, because they use the same dither pattern)

(The GIF is too big for the devforum, sorry)

[vsnry]

If the only artifact is the part furthest behind being invisible then that’s fine. We need this feature

[sloomingbla]

https://devforum.roblox.com/t/a-way-to-create-sprite-based-objects/517864/7

Big support here! There are many applications for something like this - both for aesthetic and performance purposes. Not only is this a problem plaguing my game at the moment, it’s a problem that I had to work around in my previous game, Space Frontier. This is an issue that generally prevents me from using decals/textures unless absolutely necessary.

The ability to use multiple transparent decals in a scene with proper ordering would greatly improve the amount of options I have to create as a developer. Even if you gave us a barebones option such as “RenderFirst” or “RenderLast”, I would be incredibly happy!

[Blackcurrrantt]

So this was ~6 years ago now and Roblox seems to not even have considered adding anything like this. I want to revive this post because transparency has been a big issue in my game. I’m using decals for the faces on my characters, however they’re too large and are sometimes cut off from the corners of the head (not to mention strange lighting glitches appearing on the decals)

So as a workaround I’ve moved the faces onto a plane I made in blender which roughly fits around the face of the character.

This seems to fix both of my issues, however now a new issue has been bugging me which is related to this post; the faces are showing over the particles because they’re situated in a transparent meshpart.

Intended behaviour (face is on the head)

Actual behaviour (face is on the ‘face plane’ mesh)

This is a huge issue. Any smoke, fire, dust, earth, sparks or debris particles I want to create for my game will show underneath the face decal because I have no control over the order which they show in, making for a greatly immersion breaking effect. Like in the images shown, I also can’t add that extra visual flare and character to my characters by having their eyes flash with a lens flare before they use an ability.

(Side note: the particles show properly when the face plane has a transparency value of 0)

I’ve even gotten REALLY hacky and have tried making the face mesh transparency to 0, then giving it a surface appearance with an invisible texture to try having it be invisible with transparency at 0. This yielded the same results as just having it at transparency 1.

Anyway, I’m really hoping this gets added (and also the previous issues I mentioned fixed). I’ve looked around on the internet and various forums but it seems there’s no workaround for my issues yet.

Edit: I’ve found a solution to my specific problem, although as of now all of the issues that I explained above are still valid criticisms which I still think should be addressed by Roblox.