BlackShadauw

GLTF dont apply alpha/transparency [SOLVED]

Recommended Posts

Hi guys,

I am stuck an don't find any workable solution on the web.

I would like to apply transparency on a simple box (with / or without UV mapp), but if in my Blender it seems to be OK, in my BSJ scene it dosent work, the transparency dosen't apply :(.

Any idea what could be missing ?

 

 

Capture.JPG

Share this post


Link to post
Share on other sites

Hi @V!nc3r,

Thanks yea finaly the transparencyMode did the trick.

But this is sad to pass by BJS when using glTF for that kind of stuff.
My glTF alpha, alphamode etc values are not applied on the Material object in Babylon :(

In chrome inspector i have these (as you can see before that's not what I made.. well never mind)

  1. albedoTexture:undefined
  2. alpha:1
  3. alphaCutOff:0.4
  4. alphaMode:2

Share this post


Link to post
Share on other sites

@BlackShadauw

I've written about this before, but in my opinion the best pipeline into BJS is using the .Babylon format exported from Blender - which is the most compatible and repeatable format to use. I like Kronos, yeet the glTF format is lacking.

I hope this helps.

DB

Share this post


Link to post
Share on other sites

@dbawel Thanks for your opinion,

Yea i maybe will pass under babylon format...

I avoided it until now to have an easy setting texture in glTF format that i could not have with .byblon as i saw.
I avoided .babylon too, to have cycle for a more realistic texture render.
 

 

Share this post


Link to post
Share on other sites

Of course it works when using an alpha texture, but sometimes you want alpha in a material without texture - like the example case of this thread - , and if so we have to tweak the transparencyMode when in BJS.

Share this post


Link to post
Share on other sites

Hi all, for me it dosent work properly, i need to cheat a little.

After using your settings BghGary, i must to force with javascript the alpha mode to "0.X" and to force transparencyMode to "2" to have some transparent effect.

Nothing happend with only the GlTF file.

Share this post


Link to post
Share on other sites

@bghgary

As I believe @BlackShadauw is saying, and also in my experience, the only reliable result you'll get is to not rely on Blender or any other external package to set many of your material values. I personally never do this, as I lose control over any functions handling my materials, and depending on the export application, many of your material values will not export properly depending on how they were applied - especially using glTF.

Cheers,

DB

Share this post


Link to post
Share on other sites

glTF is intended as a portable runtime format and supports a PBR metallic roughness material model, which includes alpha as coverage. We call it the JPEG of 3D. It is not intended for interchange, though you are free to do so. If the intent of the original model uses a material model within the scope of glTF, it should work. The original question about applying transparency using Blender should work.

Share this post


Link to post
Share on other sites

Hi,

Here is all files the white piece should be about 50% transparent.

In my (small) experience with glTF file and blender it appear to be very difficult to have a good setting when exporting for webGL.

So many parameters to understand which one should be or should not to be activated to have the desire effect. It is really nice to count on you guys.

But with only the documentation it is realy hard to understand how things works.
Something that would be great is a repository with some workable exemples .blend files and other that people could download, study the content, make tests.

I will make a try with .babylon

test.zip

Share this post


Link to post
Share on other sites

I just replied to a message which deals with this issue. The question is how to achieve photo realism. The following is my personal approach, however it works for me. I hope the person I messaged with isn't offended I posted my response:

Just think about how difficult it is to render photo-realism in ANY 3D application. I have years of experience working with practically every renderer, and it takes considerable knowledge to render what we do for feature film and broadcast. However, WebGL does not currently have the rendering capabilities that external renderers such as RenderMan, Mental Ray, VRay, etc. has. It is very limited, unles you're a wiz at writing OpenGL shaders. If you're intersted in this and have the skill set to do it, then visit Shadertoy https://www.shadertoy.com/ and modify any shader that suits you. 

Otherwise, you can always achieve photo realistic results in WebGL by first taking a good digital camera (not a camera phone, as lenses mean everything), and shooting your own real world textures specific to your mesh. Then import only the model (and animation if you need) into WebGL and apply and new material using real world textures specific to your model. I must point out that you MUST be proficient in Photoshop to really make realism come to life in WebGL V1. I can expand this if you like. But the point is to gain as much control over your materials and textures as possible in the render engine of WebGL (generally the same on all standard browsers), and not let a 3D app versioned exporter do it for you if you truly want photo realism. The learning curve on this is very fast - even for a beginner in babylon. But I must point out that if you're looking for realism, NEVER download textures from the web.

Let me know if I need to expand on any of this.

DB

Share this post


Link to post
Share on other sites
On ‎6‎/‎24‎/‎2018 at 1:58 AM, BlackShadauw said:

Here is all files the white piece should be about 50% transparent.

Yeah, I also made this mistake a few times. You changed the BaseColor property instead of BaseColorFactor property. My understanding is that you use BaseColor for textures and BaseColorFactor for the factor. The documentation states this exactly, but still it's easy to do it wrong.

On ‎6‎/‎24‎/‎2018 at 1:58 AM, BlackShadauw said:

But with only the documentation it is realy hard to understand how things works.
Something that would be great is a repository with some workable exemples .blend files and other that people could download, study the content, make tests.

I would suggest filing an issue on glTF-Blender-Exporter. If you are hitting this, I'm sure others will have the same issue.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.