Is there a support for Gradeint Alpha in Babylon.js using *.png ?

[Ariel Yust]

I have this image:

 

 

you can notice it has a gradient alpha inside, made in PS

 

I want it to look like this in my project:

 

 

I made this example using PS

 

I'm using HasAlpha=true;

 

and getting this instead:

 

 

it's like it can't read the gradient alpha and translates it to solid color, as you can see in the bottom he draws some artifacts.

weird stuff, am I doing something wrong ? is there a solution ? will there be any solution ?

 

 

note: this is a *mirror* object, because I have max 8 of it I don't create a normal mirror using the mirror texture.

 

Thanks!

[GameMonetize]

Hello,

 

if you want one bit alpha (meaning alpha test), you have to use diffuseTexture property of StandardMaterial

In your case, bcause you want alpha blending, you have to set your texture into StandardMaterial.opacityTexture

[Ariel Yust]

Hey can you give an example ? tried the above and it didn't work ?

 

var Materials=[];Materials.push(loadTexture("gfx/GraphSquare.png", true, true));        function loadTexture(fileName, backFaceCulling, hasAlpha) {        var m = new BABYLON.StandardMaterial(fileName, scene);        var texture = new BABYLON.Texture(fileName, scene);        texture.anisotropicFilteringLevel = 0;        m.opacityTexture = texture;  // <-- Crashes here        //m.diffuseTexture = texture;        m.backFaceCulling = backFaceCulling;        //m.diffuseTexture.hasAlpha = hasAlpha;        return m;    }

when you mean set mt Texture into opacityTexture do you mean creating black and white gradient and loading it as another texture into opacityTexture ?

[GameMonetize]

Yes I meant exactly that:)

 

You should keep the diffuseTexture also for getting colors

 

What error do you get ?

[Ariel Yust]

Materials.push(loadTexture("gfx/CategoryMirror.png", true, true, "gfx/CategoryMirrorOpacity.png"));    function loadTexture(fileName, backFaceCulling, hasAlpha, opacityPath) {        var m = new BABYLON.StandardMaterial(fileName, scene);        var texture = new BABYLON.Texture(fileName, scene);        texture.anisotropicFilteringLevel = 0;        if (opacityMaterial != null) {            m.opacityTexture = new BABYLON.Texture(opacityPath, scene);        }        m.diffuseTexture = texture;        m.backFaceCulling = backFaceCulling;        m.diffuseTexture.hasAlpha = hasAlpha;        return m;    }

As you can see both files have the same size

what I see is just the CategoryMirror.png withou alpha at all... the edges that need to be transparent are in cyan color   WIERD.... 

 

Am I doing this right ?

[Ariel Yust]

Here is the solution

 

It seems that when you use hasAlpha with opacity texture then hasAlpha wouldn't do anything

so in the Opacity I need to add the gradient as black color   COOL stuff

[GameMonetize]

So it works?

[GameMonetize]

And BTW yes, if you use OpacityTexture you cannot set useAlpha to true because there are opposite (useAlpha means alpha testing and opacitytexture implies alpha blending)

[Ariel Yust]

So it works?

 

Yes id does, Thank you!

 

And BTW yes, if you use OpacityTexture you cannot set useAlpha to true because there are opposite (useAlpha means alpha testing and opacitytexture implies alpha blending)

 

Thanks for telling me that now  I figured it out by my self, actually the opacity looks better then HasAlpha, so I guess I'll be using it for awhile (I know it cost resources)

 

anyway thanks and I'm back to programming *click click click*

[Ariel Yust]

Found a new interesting problem, might be a juicy bug 

 

here are two files, one is the OpacityTexture of the other...

 

I'm using css style "background-image:" tag with z-index lower then canvas for the background image,

so the rest of the babylon.js project has transparent background to it...

 

I'v noticed that if an object with a material that have OpacityTexture moves on that canvas, and behind it there's nothing (aka no visible object), then it becomes half transparent or something~! then when it moves above an object that doesn't have OpacityTexture it appears normal~!

 

now I thought it might be something to do with lighting but I double checked at it doesn't ~!

 

I'v created OpacityTexture to all of my objects, and now they are all appear cyan/blue half transparent.

but when I disable OpacityTexture to the most far object from the camera then, the rest are still in transparent mode until they move or stand still above that most far object which in this case is using the image below (category.png).

 

Hope I explained the issue correctly

 

got any way to fix that ?

[GameMonetize]

Could you show us a demo of the bug?

[Ariel Yust]

Here you go,

 

 

Upper half shows an example when there is an object in background without TextureOpacity, and the colorful

icons move in front of it, you can clearly see that they are transparent in the places where they do not touch him, aka the transparent canvas background.

 

Lower half shows an example where even the objects in the background have their own TextureOpacity, everyone gets to be transparent...

var Materials = [];Materials.push(loadTexture("gfx/Card001.png", true, false, "gfx/CardOpacity.png"));function loadTexture(fileName, backFaceCulling, hasAlpha, opacityPath) {        var m = new BABYLON.StandardMaterial(fileName, scene);        var texture = new BABYLON.Texture(fileName, scene);        //texture.anisotropicFilteringLevel = 0;        if (opacityPath != null) {            m.opacityTexture = new BABYLON.Texture(opacityPath, scene);        }        m.diffuseTexture = texture;        m.backFaceCulling = backFaceCulling;        m.diffuseTexture.hasAlpha = hasAlpha;        return m;    }

That's the light I'm using, btw 

light.excludedMeshes

 Doesn't seem to work, it crashes when I push Meshes inside...

I don't need lighting on my objects because it's a 3D UI and a Prototype 

var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);    light.diffuse = new BABYLON.Color3(1, 1, 1);    light.specular = new BABYLON.Color3(0.4, 0.4, 0.4);    light.groundColor = new BABYLON.Color3(1, 1, 1);

[GameMonetize]

What error do you get when trying to use the excludedMeshes?

 

BTW, I'm afraid that the transparency behavior is "normal": the canvas supports transparency blending with its background and when you wrote a transparent object into it, it will use the alpha value for its own alpha blending

 

This only fix I can propose is to use nothing under the canvas or use a fullscreen quad to remove alpha values

[Ariel Yust]

I can't move the quad to be in front of the screen all the time, when I update it in the animation loop

it takes like several mil seconds for the quad to update it's position and angle...

 

there must be another way for this to work...

the HasAlpha crops the images and leaves pixelated edges, which look ugly!

so using opacity texture is something small you could do to make the edges smoother and nice like in Photoshop

 

Not using this feature to make gfx look normal, it ruins the whole purpose, I mean this feature is a must...

if the canvas is transparent then it should use the background colors for the transparency, not the same canvas's colors

but the object behind it in the screen, if something like that can't be supported

 

then is there a way to create a static background image to stretch to the screen size ? as if an image is in the background ?

 

I give you an example - what will happen if I want to show lets say a 3D item spin in a menu and I put it in a new canvas in front of my main canvas... the opacity textures will make it look transparent and weird, so it means we will have to use only HasAlpha...

 

 

anyway my point is I need a solution... do you have any ?

 

Thanks for the help!

[GameMonetize]

Hummm... I will find one

 

I just need a sample project where the problem is obvious as a test scene

[Ariel Yust]

Sorry that I can't share my project, but it's easy to create a test scene

 

I'm using planes and the function that I'v included in here for setting materials =]

 

I'm at work now, but later I'll create you a test scene - But just for you Delta 

[GameMonetize]

So kind of you I hate when potential bugs remain

[Ariel Yust]

Hey...

 

Sorry for taking so long, I had life troubles...

 

in any case here I uploaded the example as promised, I hope you understand the problem =]

 

btw: I'm using the latest babylon.js version 1.9.0 don't forget to add it

and change *.txt to *.js

 

The problem is that the Blue image looks cyan because I'm using Opacity map to smooth the texture's edges

it receives it's original color when it's behind the Red image, which has no Opacity Map.

 

You will see why this is wrong I made it animate for ya =]

 

 

Thanks & Good Luck

main.html

mainTutos.txt

scene_tuto.txt

hands.txt

[GameMonetize]

I've just check in a new version of babylon 1.9. It should fix your problem:)

[Ariel Yust]

Delta, there is an 

Uncaught SyntaxError: Unexpected Token }

in line 1

in the latest version 1.9.0 of Babylonjs in the minified version

 

https://raw2.github.com/BabylonJS/Babylon.js/master/babylon.1.9.0.js

 

I think it might be this function:

cylinder.setIndices(indices);return cylinder;};

[GameMonetize]

It should work, this is the version I use on www.babylonjs.com

 

Perhaps some issue with the download ?

[Ariel Yust]

I'm testing it on the project I shared here...

 

and I'm copy pasting the RAW of Babylon.js from this link

 

https://raw2.github.com/BabylonJS/Babylon.js/master/babylon.1.9.0.js

 

also, I included you a screenshot of the errors I'm getting...

[Temechon]

Hello Ariel, 

 

I retrieved your project and I don't have any errors with the latest minified babylonjs, as you can see here : https://dl.dropboxusercontent.com/u/17799537/test/main.html

 

It should be an error in your babylon file stored locally. Can you please try again with the last version of babylon ? Here is the version I used in this test folder : https://dl.dropboxusercontent.com/u/17799537/test/babylon.1.9.0.js

 

Please try to "Save as" instead of copy-pasting.

[Ariel Yust]

Okay great I copy paste it now and it works...

I guess it was something with my browser showing me the code wrong I don't know...

 

In any case Thanks Delta the fix you made works for me =]