Shading Pixels Transparent

[FreeFrags]

Hi all,

id like to shade my pixels transparent in my pixel shader but i cant seem to get this working i have the following pixelshader:

 

        precision mediump float;

        

        varying vec2 vUV;

        varying vec3 vPosition;

 

        uniform sampler2D textureSampler;

 

        void main(void) 

        {

            vec2 blaat;

            blaat.x = 1.0;

            blaat.y = vPosition.y;

 

            vec4 col = texture2D(textureSampler, blaat);

            vec4 alpha;

            alpha.r = col.r;

            alpha.g = col.g;

            alpha.b = col.b;

 

            if(vPosition.y < -100.0)

              alpha.a = 0.5;

            else

              alpha.a = 1.0;

 

            gl_FragColor = alpha;

        }

 

can some one please tell me what im doing wrong? it looks like the pixels that should be transparent become white. 

 

 

[FreeFrags]

I just found out that shading pixels fully transparent is very easy, I thought id note it here as it might be easy for people searching on this topic. You should use the discard keyword

 

        precision mediump float;

        

        varying vec2 vUV;

        varying vec3 vPosition;

 

        uniform sampler2D textureSampler;

 

        void main(void) 

        {

            if(vPosition.y < 0.1)

                discard;

            

            vec2 blaat;

            blaat.x = 1.0;

            blaat.y = vPosition.y;

                    

            gl_FragColor = texture2D(textureSampler, blaat);

        }

 

you can test this here

http://www.babylonjs.com/cyos/

 

Template: Basic 

Mesh: Ground

 

Leave the pixel shader as is and paste the pixel shader above

[chg]

I've not used babylon.js but have you checked that your blending mode was set correctly?

 

Please note that the use of "discard" is discouraged on some architectures (eg. PowerVR) for performance reasons

[GameMonetize]

you have to define that your material need alphaBlending to activate alpha support

Do you use a ShaderMaterial?

 

If yes, you should add needAlphaBlending property :

var amigaMaterial = new BABYLON.ShaderMaterial("amiga", scene, {vertexElement: "vertexShaderCode",fragmentElement: "fragmentShaderCode",needAlphaBlending: true});

[FreeFrags]

Thanks for the tips

 

i was indeed using the ShaderMaterial and i now added the needAlphaBlending. but i think im still missing something because the shader now shades everything below the set height to white in stead of making it transparent. 

 

This engine is so cool looks like ill be having a lot of fun with it.

[GameMonetize]

Could you share a sample on Playground? It will be easier to help you

[Wingnut]

Hi again gang!

 

@Deltakosh & FreeFrags...

 

http://www.babylonjs.com/playground/#JTTS7

 

There's a playground of FreeFrag's shader on a heightMap.

 

FF, did you ever get transparency working correctly?

 

If I understand correctly, you are trying to get the white parts of the material... to be transparent, correct? 

 

I don't think that's working, yet... and maybe some shader experts will help.  I would like to see that transparency thing if its possible.  I think it would be interesting.

 

But already it's a cool effect, huh?  The stripes give an interesting 'strata' to the heightMap landscape, eh?

 

Here's the link to the original CYOS save (which I zip-downloaded from CYOS and then used it to make the playground scene).  Party on!

[GameMonetize]

here is the fixed version

http://www.babylonjs.com/playground/#JTTS7#1

[FreeFrags]

Thanks guys 

 

@wingnut

I never continued trying as i was going to use this to create "holes" in a ground plane. But i thought that i could also just skip the indices. I found a thread in which someone was asking for something similar so thats why i commented in this thread and added my "Solution". 

http://www.html5gamedevs.com/topic/5923-creategroundfromheightmap-use-2d-array-instead-of-image-url/

 

@Deltakosh 

thanks for your fix.

 

im not sure if im doing something wrong but i cant seem to see any of the results when someone posts a url to a playground they created. it will show me the standard playground scene with the sphere and the plane.

[Wingnut]

That's strange, ff.  When you arrive at the playground, is the /#JTTS7#1 still on the end of the URL in your browser? 

(using the recently-mentioned url as an example)

 

Thanks for that other info, ff.  I hope you accomplished your mission. 

 

There is a funny backstory here, FreeFrags.  I tell it to you someday... after I go to self-inflicted shaders school (inside joke for Deltakosh). 

 

Suffice it to say... that I MUST get that shader working exactly like you intended it to work (transparent in white areas only)... or else I'll eventually go bonkers.  And to accomplish that, I have to go to shaders school for a couple of years.  hehe.