We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

How to achieve alpha gradient fall-off

Home Forums General Questions How to achieve alpha gradient fall-off

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #52229
    ilyabogomolov
    Participant

    Can i achieve that alpha gradient that i have in blender, but in verge?

    Attachments:
    You must be logged in to view attached files.
    #52238
    xeon
    Customer

    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.

    Xeon
    Route 66 Digital
    Interactive Solutions

    #52254
    ilyabogomolov
    Participant

    Thank you for the reply. I am kinda have some expertise in 3d modelling and texturing since it’s my main hobby and job direction!

    I thought that i have checked everything, but somehow i missed the “Alpha Blend” option, instead i used “Alpha Hashed”, thanks to your message, i did check everything you mentioned and did find out what was causing the problem!

    Now i’ll have a better ground placeholder instead of simply using ugly box-like mesh with texture that i previously used, thank you very much my friend!

    Attachments:
    You must be logged in to view attached files.
    #52259
    xeon
    Customer

    glad it was helpful

    Xeon
    Route 66 Digital
    Interactive Solutions

    #52277

    Alpha hashed has some limitation in webgl, it good when a transparency is solid for the whole object and has no gradient.

    Co-founder and lead graphics specialist at Soft8Soft.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.