[SOLVED] - Shader Alpha Not Going Transparent

[MackeyK24]

I am trying to implement an "Additive Shader" (from space shooter tutorial) where BLACK pixels are transparent (or do NOT ADD) and the rest of color add on top...

Do we (BabylonJS Community) has a shader already that does something like that???

if not, i will have to make one... I tried to start off by just return a transparent color:

void main(void)
{
   gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
}

I have "needsAlphaBlending = true" on shader material options object 

BUT I STILL SEE BLACK SQUARE (I little less bright , but still there)...

I would assume that setting a color rgba (0,0,0,0) would make EVERY pixel transparent... But it is not.

Any help or info would be very kool

 

[GameMonetize]

This **should** work. can you repro it in the PG?

(like here: http://www.babylonjs-playground.com/#16UICJ#2)

[MackeyK24]

@Deltakosh Same problem... Cant really do a playground (is typescript)... For some reason if i serialize material.alphaMode = 1 ... When scene loads is all garbled... But if i set material.alphaMode = 1 in code works great for transparent using Standard Shader... But is STILL no joy in GLSL... I would think that:

 gl_FragColor = vec4(0.0,0.0,0.0,0.0) WOULD BE TOTALLY transparent .. but is not... (Maybe something the ALPHA_ADD... but that is garbled when i set)

Im still playing with things though...

Do you have any examples where you just take the black background out (basically making BLACK transparent... thats what i really need to finish my tutorial)

 

[GameMonetize]

Here we are:

http://www.babylonjs-playground.com/#16UICJ#3

ANd I guess it is because of my bad english, you have to set needAlphaBlending and not needSAlphaBlending

[MackeyK24]

@Deltakosh Ill be darned... gl_FragColor = vec4( 1., 1., 1., 0.1 ) it working fine in that playground... I could have sworn i tried that... But maybe was setting needsAlphatesting as well... Ill remove all references to needsAlphaTesting...

Also... What should alpha mode be.... "Combine" or "Add" or something else.

Another .. what is the best way to check for BLACK color ... Should i check all three r g b are == 0 ???

[Pryme8]

Yea check if all three values are under a certain amount.  You can do it inline though so if(color.rgb >= 0.1) should work

[MackeyK24]

8 hours ago, Pryme8 said:

Yea check if all three values are under a certain amount.  You can do it online though so if(color.rgb >= 0.1) should work

Yep... I am doing something like that... Check out my first REAL USEFUL Universal Shader. Its and "Particles Additive" shader used in the Space Shooter tutorial for the BOLT QUAD... The BOTTOM half is UNITY HLSL Shader used at design time (OPTIONAL can be anything you want to see at design time)...

But the First half is what counts... It the actual Babylon Shader Programs. It contains (combined with the Properties Section at top) ALL the info you need to make COMPLE FULLY FUNCTION BabylonJS Shaders:

Shader "BabylonJS/AdditiveShader" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_Brightness ("Intensity", Range(1.0, 10.0)) = 2.0
		_Blackness ("Blackness", Range(0.0, 1.0)) = 0.4
		[NoScaleOffset] _MainTex ("Albedo (RGB)", 2D) = "white" {}
		[ToggleOff] _NeedsAlphaTesting ("Needs Alpha Testing", Int) = 0
		[ToggleOff] _NeedsAlphaBlending ("Needs Alpha Blending", Int) = 0
		[Enum(Disable,0,Additive,1,Combine,2,Subtract,3,Multiply,4,Maximized,5,OneOne,6)] _AlphaMode ("Alpha Blending Mode", int) = 2
	}
	Category {
		Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" }
		Blend SrcAlpha One
		ColorMask RGB
		Cull Off Lighting Off ZWrite Off
		SubShader {
			Pass {
				CGPROGRAM

				//////////////////////////////////////////////////////////
				// BABYLON WEBGL RUNTIME SHADER PROGRAM SECTIONS (GLSL) //
				//////////////////////////////////////////////////////////

				#ifdef BABYLON
				attributes: ["position", "normal", "uv"]
				uniforms: ["worldViewProjection, _Color, _Brightness, _Blackness"]
				samplers: []
				defines: []
				#endif //BABYLON-END


				#ifdef VERTEX
				attribute vec3 position;
				attribute vec3 normal;
				attribute vec2 uv;
				uniform mat4 worldViewProjection;
				precision highp float;

				varying vec2 vUV;
				
				void main(void)
				{
					gl_Position = worldViewProjection * vec4(position, 1.0);
					vUV = uv;
				}
				#endif //VERTEX-END


				#ifdef FRAGMENT
				precision highp float;

				varying vec2 vUV;
				uniform vec4 _Color;
				uniform sampler2D _MainTex;
				uniform float _Blackness;
				uniform float _Brightness;

				void main(void)
				{
					vec4 baseColor = texture2D(_MainTex, vUV);
					float pixel = baseColor.r + baseColor.g + baseColor.b;
					if (pixel <= _Blackness) {
						gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
					} else {
						gl_FragColor = baseColor * _Color * _Brightness;
					}
				}
				#endif //FRAGMENT-END 


				////////////////////////////////////////////////////////
				// DEFAULT UNITY EDITOR SHADER PROGRAM SECTION (HLSL) //
				////////////////////////////////////////////////////////
				
				// Upgrade NOTE: excluded shader from DX11, OpenGL ES 2.0 because it uses unsized arrays
				#pragma exclude_renderers d3d11 gles

				#pragma vertex vert
				#pragma fragment frag
				#pragma target 2.0
				#pragma multi_compile_particles

				#include "UnityCG.cginc"

				float _Brightness;
				sampler2D _MainTex;
				fixed4 _Color;
				
				struct appdata_t {
					float4 vertex : POSITION;
					float2 texcoord : TEXCOORD0;
					UNITY_VERTEX_INPUT_INSTANCE_ID
				};

				struct v2f {
					float4 vertex : SV_POSITION;
					float2 texcoord : TEXCOORD0;
					UNITY_VERTEX_OUTPUT_STEREO
				};
				
				float4 _MainTex_ST;

				v2f vert (appdata_t v)
				{
					v2f o;
					UNITY_SETUP_INSTANCE_ID(v);
					UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
					o.vertex = UnityObjectToClipPos(v.vertex);
					o.texcoord = TRANSFORM_TEX(v.texcoord,_MainTex);
					return o;
				}
				
				fixed4 frag (v2f i) : SV_Target
				{
					return tex2D(_MainTex, i.texcoord) * _Color * _Brightness;
				}
				
				ENDCG 
			}
		}	
	}
	FallBack "Particles/Additive"
}

 

As you can see... The both do the same thing

 

[Pryme8]

you can do a distance calculation and then fade it also with taking the resulting float of the distance and doing a calculation like
float f = distance(color, vec3(0,0,0));
f = f*f*f*f*0.2 (or something like this)
and you should be able to do a smoothing calculation... im kinda tired right now and this might be off topic but yeah...

[Pryme8]

I should post my non repeating terrain texture shader for you... you might get a kick out of it, it identifies each section of the uv or fragcoords and assigns a pseudo random unique id that places a texture down on that block that is smeamless with the others around it but does not use the same one over and over again.  Once again might not be related but you could learn a thing or two from it.  Ill see if I can dig that one up for you.  It does a lot of comparative calculations in a single pass.

[JackFalcon]

let you_guys = 'heros';

Because of this, was able to figure out alpha opacity on a sine wave for a shader-fader.

Not perfect, but pretty cool for a rookie. : )

Hope it helps someone.

http://www.babylonjs-playground.com/#16UICJ#9

 

 

[Nabroski]

nice i always want to experiment with the new UI system http://www.babylonjs-playground.com/#16UICJ#15