How to use alpha channel to store information

[PeapBoy]

Hi amazing Babylon community !

I'm working with BabylonJS for only 3 weeks, so I have still a lot to learn and I have so many questions ! Before all, thanks for your work.


Currently, I'm working on an easy normal depth shader and I have exactly the same problem as this guy.

Actually, I want to use this shader as a pass to store information into a normalDepthTexture I'll then pass to my final fragment shader.
Storing normal data into rgb components of gl_FragColor works great, but anything stored into alpha channel will be blended or something like that.
I tried setting needAlphaTesting / needAlphaBlending but it does not solve the problem. In the thread above, the solution is to use use blendMode(REPLACE) but I don't know how to do that in Babylon.

Here a PR to reproduce my issue : http://www.babylonjs-playground.com/#LNXGT#11
To see the difference, at lines 29 and 47, change the 'a' component to 'r' component by commenting / uncommenting the relevant part of the shader.


Thank you all ! 

[NasimiAsl]

hi : welcome to froum

i don't understand correctly your task 

see this sample : http://www.babylonjs-playground.com/#1HECPU#4

i am on your post try to understand problem

 

[PeapBoy]

Hi Nasimi !

Sorry, I should have been more precise; 

In the PR, in the first shader I do this :

gl_FragColor.a = vDepth.x / vDepth.y;

So, I'm just storing the depth value in the alpha channel of gl_FragColor. Because I want to create a depth sampler I'll use in another shader (I could also use scene.enableDepthRenderer to get a depth sampler but here I want to do it myself).

In the second shader, I take this depth sampler and I do this :

float depth = texture2D(normalDepthSampler, vUV).a;
gl_FragColor = vec4(depth, depth, depth, 1.0);

Just to see the result.
http://imgur.com/HDsS0wZ

Now, if I comment these lines and if I replace them by these :

gl_FragColor.r = vDepth.x / vDepth.y;

... in the first shader (storing in the red channel rather than the alpha channel).
And :

float depth = texture2D(normalDepthSampler, vUV).r;
gl_FragColor = vec4(depth, depth, depth, 1.0);

... in the second shader to see the result. You can see that the result is different.
http://imgur.com/zxRsMsF

That means that depth information isn't stored in the same way in rgb and alpha channel. There is blending of the value in alpha channel or something like that. But that, I'm sure you already knew it. 

So here comes in my question : is there any way in BabylonJS to disable this blending ?
I do not want my value to be altered, just pass them from one shader to another using the texture created by the first one.

I looked at your PR, I don't really understand because I never used "eash". Is it your own creation ? (I saw it on your github )


Thank you very much for considering my question !

UPDATE : wrong link for the first image

Edited July 4, 2016 by PeapBoy
Wrong image link

[NasimiAsl]

13 minutes ago, PeapBoy said:

I looked at your PR, I don't really understand because I never used "eash". Is it your own creation ? (I saw it on your github )

it is old version of shaderBuilder

just notice the out put

my point is that r u want have Depth texture  behind of surface on surface ?

[Nabroski]

Hello

i'm just interested in this topic, cant wait to start using shaders, i already using 3% of babylonjs, so it might take a while.
i can't see any pictures.
i also have google it, and one guy on stackoverflow said, that the problem is, - you can use gl_Fragcolor only once, the second call will be ignored. just tested it, - it looks like this.
also big fan processing

I following this topic. excited of results.

Best

[NasimiAsl]

wait for me i make my sample for you

 

[PeapBoy]

You're too fast for me guys ! 

13 minutes ago, NasimiAsl said:

my point is that r u want have Depth texture  behind of surface on surface ?

My plane (used to display the result of the shader) is arbitrarily located ahead of the cube I use.
So, not sure to understand your question, but no, I don't necessarily want to see what's behind my plane on my plane.

 

10 minutes ago, Nabroski said:

i can't see any pictures.

Sorry, I failed. 

[PeapBoy]

Quote

i also have google it, and one guy on stackoverflow said, that the problem is, - you can use gl_Fragcolor only once, the second call will be ignored. just tested it, - it looks like this.

Mmh strange, I can't see any difference when calling gl_FragColor only once in each shader, like this :

gl_FragColor = vec4(vNormal, vDepth.x / vDepth.y);

Rather than in two lines.

[Nabroski]

Hello i'm just experimenting

i get a different result if set the alpha value .1 with two gl_GLFragcolor it behaves much different. when setting the alpha to 0.1
http://www.babylonjs-playground.com/#LNXGT#12


so did i understand u correctly, you want, when i comment/uncomment the lines that the second example should looks like the first one ?

Best

@NasimiAsl Don't go too crazy. I'll wait. 

 

 

 

 

 

[PeapBoy]

@Nabroski No problem, thank you for helping me 

Yes, you're totally right, I want to tell WebGL to behave the same for red and alpha channel.

 

17 minutes ago, Nabroski said:

i get a different result if set the alpha value .1 with two gl_GLFragcolor it behaves much different. when setting the alpha to 0.1
http://www.babylonjs-playground.com/#LNXGT#12

Not enough experimented to understand why alpha does "bright" the diffuse color when "needAlphaTesting" or "needAlphaBlending" is set to false.