Texture with alpha drops pixels

[Toushin]

Hello,

 

a little about my project first:

 

I am trying to create an editor, with which users can customize the look of products. I use babylon.js for the preview, which uses a dynamic texture to display user-input. This works as intended, so far.

 

I have 3 meshes on top of each other, a background-plane, a foreground-plane and a transparent plane simulating glass, which uses a material with fresnel parameters.

The material for the foreground-plane uses the dynamic texture and has "hasAlpha" set to true, so I can show the background underneath.

 

Unfortunately this seems to drop some pixels, especially for blured or semitransparent objects, users are able to place in the editor.

 

Looking through the forum I found a solution for the dropped pixels, by using the diffuseTexture also for the opacityTexture od the material. This seems to prevent pixels from being droped, but visible parts of the texture now look like the glass-mesh isn't even there.

 

I attached 2 screenshots to show my problem, the first without opacityTexture, the second with opacityTexture.

[GameMonetize]

Hey!

 

Do you think you can try to reproduce it in the Playground? That's far easier for us to help you then:)

[jahow]

Hey,

 

The example on the left shows 2 kind of problems:

 

1. jagged edges around the drawn text: this is probably due to the built-in WebGL smoothing; I'd advise you to try to disable it and see if the problem is still there. To do that, create the engine object like so:

engine = new BABYLON.Engine(canvas, false); 

2. incorrect transparency around the deer (is that a deer?). This is because the mesh with the deer on it is considered alpha-tested, not alpha-blended. Adding an opacity texture to it makes it alpha blended, like on the right, which is what you seem to want. More info here (I just wrote this so I'm happy if that helps ).

 

What you can try: instead of adding an opacity texture to the material, set the .useAlphaFromDiffuseTexture property on the material to true

 

Also, like DK said, it's really hard to help you without more details on how your scene works.

 

Good luck!

[Toushin]

Ok, I tried building something similar to my problem here

[jahow]

http://www.babylonjs-playground.com/#17MONN#7

 

Does it look better now? The thing is, in the playground you've posted, the plane with the decals on it was rendered last, and as such the white rectangle was drawn on top of the box with the grey fresnel effect. I've set the property .renderingGroupId of the grey box to 1, which means it will be rendered after all the other meshes (which have this property set to default, which is 0).

[Toushin]

Setting the .renderingGroupId doesn't seem to be the solution I am looking for, I extended the playground here to show why, if I have additional meshes in the scene, any mesh for which I set .renderGroupId to 1 will be visible through everything else.

 

I'll try to strip down my program to the bare essentials and post it here, that'll probably be better than me trying to show something in the playground and forgetting half of the stuff I use, especially since I use imported meshes.

 

Edit: the example can be found here

[jahow]

Another solution: http://www.babylonjs-playground.com/#17MONN#11

 

By setting the alphaIndex property on the 'foreground' object to zero, it will always be displayed before the glass material. This property overrides the depth sorting algorithm, meaning that this object will always be rendered before any other transparent mesh that doesn't have this property set to 0. I don't think this feature is documented anywhere though...

 

You have many solutions at hand, so it all depends on how your scene will be expanded. Will you add more objects around the mug? Will you have several layers of 'foreground' objects? Getting transparency right requires a little bit of planning ahead: which meshes are transparent or not, is it possible that they overlap, etc.

[Toushin]

Thanks jahow, you really helped me out there.

[jahow]

You're welcome

[RaananW]

Hey Jahow, wonderful solution! This should be somehow documented. Do you have the time to update the documentation? I have never used the alphaIndex property, it would be great to actually know what it does :-) 

[jahow]

Yeah, I actually found out about this property when looking at BJS's depth sorting function: https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Rendering/babylon.renderingGroup.ts#L53

 

I updated the page about transparency, so now it's documented: http://doc.babylonjs.com/page.php?p=25100

 

To be honest I'm not sure about the intent of the BJS creators with this property. I've never seen it used or commented anywhere, but you know, it works well so why not use it

[NasimiAsl]

http://eash.space/eash-preview.html?glass_alpha.0.00003

 

i make this with shader