How to achieve alpha gradient fall-off

Alpha in WebGL can be achieved but it may not be the way you have achieved it in Blender or any other 3D package if you are looking to replicate a specific result. There are many ways to do it. It will be up to you to find an approach that works well with your tools, skills and subjectivity as far as reaching the desired goal.

You will have to weigh the decisions of where to apply the alpha. Should it be a part of a texture in which case the graphic would be baked and won’t need alpha. Or is it a situation where you are just adding stencil/sticker and it too could be done via a baked map. Or maybe you looking to achieve a specific effect that just requires a real good gradient with alpha.

By looking at your images I cant really tell what you are trying to do so I will give it a guess and point you in a direction. I don’t know what you don’t know so I have to start with some basics..feel free to skip or dismiss if you already know this stuff.

So this patch of road is your image and you are wanting to dither the edges to fade out. The first thing you will want to do is make sure your image follows the multiple of twos rule. There is stuff all over the internet on this one… here is once place: https://www.katsbits.com/tutorials/textures/make-better-textures-correct-size-and-power-of-two.php

Then you need to select the way you are going to create the alpha mask. Are you going to create it as part of the image using the alpha channel or are you going to try and apply a 3d mask at run time?

For this example, we will just assume you are needing it to be done in the image and not run time.

Using your image editor create your alpha gradient in white (255,255,255) and black(0,0,0). The soft gradient effect is created by using a value and a distance that allows you to achieve at least 255 levels of gray. If you gradient is too small that distance will skip colors of gray and if you skip a lot you may only get a few bands of gray, like in your image (not saying that is what caused yours but it could cause it).

Resolution of the image is also important, the larger the image the more information/data and colors of gray you can have to make up that gradient, thus making a smoother gradient. Too small of a texture can lead itself to a gradient that looks like yours.

File format is also important. PNG, TGA, TIF and EXR. PNG is often the default people use but its not always the best choice. You have to balance the importance graphically with the ability of the end user being able to view it and that of data efficiency. But the wrong selection depending on your graphic can result in some bad gradients too.

Lastly, you have to test which blend mode you want to use with your material. Each has its benefits and drawbacks. Alpha Blend, Alpha Hashed and Alpha Clip. Based on what you are trying to do I would think you would want alpha blend.

What I can tell you is the image you have in blender can be replicated in Verge.

Have fun. Good luck.

glad it was helpful