Beams are not completely transparent on edge

While trying to produce a box effect around an area using beams, the bottom near floor using a gradient and the top being completely transparent the beam is not completely transparent and has a green bar across the top however as you can see below the decal I uploaded has no green at the right side edge. This is becoming problematic as I cannot have a clear on edge the beam which is what it’s intended to have. While playing around with the settings I noticed that ‘TextureLength’ property makes the problematic green line thinner, but no matter what the value is set to always visible.
image

This is the beam. The beam has the non-transparent side at the bottom, the transparent side at the top.

Image:

4 Likes

Why use a decal?
Just use the Transparenct Property of the Beam itself. If you go to the right side of the Transparency Property you will see three dots … click on that and a window pops up where you can take a solid green beam and make it transparent at one end by dragging the slider up and down.

This also works for items like beam width & colour.

1 Like

You should attach the image you’re using in case it is an issue with that (e.g. invisible pixels at end of texture have color that Roblox isn’t handling properly)

2 Likes

The problem still exists above, however, I didn’t know that was a feature so I’ll play around and see if I can find a workaround for this.

EDIT:
Tried your method, but I couldn’t rotate the beam so that the gradient starts from bottom and goes to nothing at the top, it only lets me have the gradient go left to right. Any suggestions?

I’ve been able to make something like this just fine. You need to play around with the beam properties to get it correct.

You have to either change the attachments so they go bottom to top, or rotate the texture and reupload it.

The alternative method suggested by @Scottifly which I’m trying doesn’t have a texture, that’s what I did with my initial method to fix, the only option I believe will work is putting an attachment on the bottom and top and having to edit the beam’s texture width every time I want to make another boundary, this method isn’t ideal but the only option I’ve got if I don’t want to deal with the green line that appears.

In a case like your playground you only have to make 2 because you can copy and move each side to the opposite edge.

The reason your decal has an issue is that it is actually loaded with that edge.
Take any of the ‘solid’ colour decals you find in the library, then put it on a REALLY large Part. You’ll find that most have some fading or distortion along the edges if you enlarge them enough.

It’s not an issue with the asset, it’s an artifact from the texture being sampled with interpolation. Beams support tiling the texture in all modes, which means the texture sampling has to be set to wrap. To make things look smooth, textures are scaled with interpolation, which–a bit like a blur–includes information from neighboring pixels in a weighted sum. In texture wrap mode, the “neighbors” of edge pixels are on the other side of the texture.

To prevent this, you have to have an empty (fully transparent) margin on the side opposite the one that is meant to be fully transparent, so that there is no color data leaking across the boundary. It should be a least 2 pixels for no artifacts at normal viewing size/distance and highest graphics quality. I don’t know exactly how far across the wrapping boundary the interpolation can sample from for all graphics drivers, quality levels and MIP levels, so I’m usually generous with the padding and give it 4 pixels.

10 Likes

Ah, that explains it perfectly! Thanks!

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.