GLTF dont apply alpha/transparency [SOLVED]

[BlackShadauw]

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 ?

 

 

[V!nc3r]

I've also notice this issue, and it seems you just have to put the value 2 of your transparencyMode material property (on the BJS side). Or maybe play with the AlphaMode directly from the gltF node ?

[BlackShadauw]

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

[dbawel]

@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

[BlackShadauw]

@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.
 

 

[dbawel]

@BlackShadauw

There are things you need to know to prepare your scene for the ..babylon format. I can help you through this - ad it's not difficult if you know what you're doing. Many others can help also.

DB

[Nabroski]

@BlackShadauw @V!nc3r
you need an alpha texture
see here: https://github.com/KhronosGroup/glTF-Blender-Exporter/blob/master/scenes/01_alpha_blend.blend
test: http://www.babylonjs-playground.com/#T7A2L7#1

 

[Sebavan]

Alpha is definitely supported in GLTF and it could either be stored in a texture as seen before or as part of the 4th channel of the base color.

http://www.babylonjs-playground.com/#T7A2L7#2

Adding @bghgary who can definitely help on this and the current status of the blender exporter.

[V!nc3r]

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.

[Nabroski]

@Sebavan
Yes, you can hack the GLTF *.txt file, but the ultimative goal would be if the exporter would support it.




@V!nc3r
yeah, i understand that. unfortunately that's how the devs from GLTF intended it : /

the docs:
https://github.com/KhronosGroup/glTF-Blender-Exporter/blob/master/docs/user.md#alpha 
 

[Sebavan]

@Nabroski Yup I totally understand that. I was just highlighting that alpha is available in GLTF without texture.

@bghgary is looking into the corresponding blender support atm.

[bghgary]

This is an issue with the material interface. In order to get alphaMode set in the glTF, you have to set the BaseColorFactor's alpha to something smaller than 1.0. Like this:

If this is an issue, please post something in the glTF-Blender-Exporter repo.

[Nabroski]

Ah, BaseColorFactor 's alpha YES it works! 

 

[BlackShadauw]

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.

[bghgary]

@BlackShadauw Can you post the glTF file? Does it have alphaMode set in the materials?

[dbawel]

@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

[bghgary]

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.

[BlackShadauw]

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

[dbawel]

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

[bghgary]

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.

[BlackShadauw]

Hi thanks a lot !!

Finaly i have some transparency yea  awesome, i have less hairs but it works
BaseColorFactor was the good thing

 

 

[Guest]

hairs are overrated

This is me:

[V!nc3r]

Is this tshirt you wearing? ?

 

 

[Guest]

Correct!

[BlackShadauw]

ahah you make my day both of you