[SOLVED] - Shader Programs Attributes And Uniforms

[MackeyK24]

What are all the babylon possible shader attributes and uniforms:

// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

// Uniforms
uniform mat4 worldViewProjection;

i assume they will all be equiv to some webgl attribute (if you had to do in strait webgl). 

So i assume:

position = gl_Vertex -> To vec3

normal = gl_Normal -> To vec3

uv = gl_MultiTexCoord0 - To vec2

and 

worldViewProjection = gl_ProjectionMatrix * gl_ModelViewMatrix

and so on...

What are all the other possible attributes and uniforms, and most importantly what do they equal in regular GLSL.

A... I just would to really understand where each attribute and uniform comes from.

B... I am trying to make a 'Universal Unity Babylon GLSL Shader Template' for use directly in the Unity for creating Babylon shaders.

Minimal Example Shader For Unity:

Shader "BabylonJS/Sample basic shader" { // defines the name of the shader 
   SubShader { // Unity chooses the subshader that fits the GPU best
      Pass { // some shaders require multiple passes
         GLSLPROGRAM // here begins the part in Unity's GLSL

         #ifdef VERTEX // here begins the vertex shader

         void main() // all vertex shaders define a main() function
         {
            gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
               // this line transforms the predefined attribute 
               // gl_Vertex of type vec4 with the predefined
               // uniform gl_ModelViewProjectionMatrix of type mat4
               // and stores the result in the predefined output 
               // variable gl_Position of type vec4.
         }

         #endif // here ends the definition of the vertex shader


         #ifdef FRAGMENT // here begins the fragment shader

         void main() // all fragment shaders define a main() function
         {
            gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); 
               // this fragment shader just sets the output color 
               // to opaque red (red = 1.0, green = 0.0, blue = 0.0, 
               // alpha = 1.0)
         }

         #endif // here ends the definition of the fragment shader

         ENDGLSL // here ends the part in GLSL 
      }
   }
}

My intent was to parse the shader text blocks for the vertex and fragment sections during export. Then do some kind 'key text replace' in the vertex part that reads all the attributes and uniforms replace with babylon.js equivalent at export. I would also love to base64 encode this vertex and fragment program right in the ShaderMaterial section of the .babylon son file. I posted a topic on this, hopefully others can see the benefits as well.

Anyways... Any info on all the BUILT-IN attributes and uniforms that babylon.js exposes (and how they are calculated so i can duplicate that calculation when running in unity editor)

THANK YOU VERY MUCH

 

[GameMonetize]

Hello!

are you asking in the context of the ShaderMaterial? Or a custom material?

For ShaderMaterial, you can have the list here: https://www.eternalcoding.com/?p=113#2

For a custom material, you decide what you want to use so you are on point for it

[MackeyK24]

So are you saying these are EVERYTHING the ShaderMaterial provides as 'Built-In' attributes and uniforms

attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection"]

What about 'color' is that an attribute?

What about 'view' and 'projection' are those uniforms?

Most importantly, how are they computed?

Take a look at 'MACRO SECTION' i am creating for BabylonJS Unity GLSL Shaders... I need to know EXACTLY how each "well known' babylonjs attribute and uniform is computed. That way i can declare a 'MACRO' block that uses the normal 'gl_' api in unity then when exported i simple replace the 'MACRO' block with BabylonJS version:

//<-- DO NOT MODIFY VERTEX MACROS -->
//<-- BABYLON VERTEX MACROS START -->
vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; }
vec3 GL_NORMAL_ATTRIBUTE() { return gl_Normal; }
vec4 GL_COLOR_ATTRIBUTE() { return gl_Color; }
vec2 GL_UV_ATTRIBUTE() { return vec2(gl_MultiTexCoord0.xy); }
mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return gl_ProjectionMatrix * gl_ModelViewMatrix; }
//<-- BABYLON VERTEX MACROS END -->

I need to be able to create GL MACRO functions for all possible Built-In ShaderMaterial attributes and uniforms that babylon js exposes

Take a look at my 'AmigaShader.shader' (from CYOS basic shader example)... This is what i got so far:

Shader "BabylonJS/AmigaShader" {
	Properties {
		textureSampler ("Texture", 2D) = "white" {}
	}
	SubShader {
		Pass {
	 
        	GLSLPROGRAM // here begins the part in Unity's GLSL

	        #ifdef VERTEX // here begins the vertex shader
				precision highp float;

				//<-- DO NOT MODIFY VERTEX MACROS -->
				//<-- BABYLON VERTEX MACROS START -->
				vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; }
				vec3 GL_NORMAL_ATTRIBUTE() { return gl_Normal; }
				vec4 GL_COLOR_ATTRIBUTE() { return gl_Color; }
				vec2 GL_UV_ATTRIBUTE() { return vec2(gl_MultiTexCoord0.xy); }
				mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return gl_ProjectionMatrix * gl_ModelViewMatrix; }
				//<-- BABYLON VERTEX MACROS END -->

				// Varying
				varying vec2 vUV;

				void main(void) {
					vec2 uv = GL_UV_ATTRIBUTE();
					vec4 pos = GL_POSITION_ATTRIBUTE();
					mat4 wvp = GL_WORLDVIEWPROJECTION_UNIFORM();

				    gl_Position = wvp * pos;
				    vUV = uv;
				}

	        #endif // here ends the definition of the vertex shader


	        #ifdef FRAGMENT // here begins the fragment shader
				precision highp float;

				varying vec2 vUV;
				uniform sampler2D textureSampler;

				void main(void) {
				    gl_FragColor = texture2D(textureSampler, vUV);
				}

	        #endif // here ends the definition of the fragment shader

	        ENDGLSL // here ends the part in GLSL 
		}
	}
	//<-- REQUIRES ATTRIBUTE AND UNIFROM -->
	CustomEditor "BabylonMaterialInspector"
}

Works great so far... just need the rest of the macro created

 

[MackeyK24]

STILL NEED HELP WITH BABYLON JS GL_ATTRIBUTES: Need to know all the attributes and uniforms (See several little snippets, but can't seems to find a list that has ALL the built-in attributes and uniforms... Like position, normal and worldViewProjection)

So far everything is working great (Using just those few GL_ATTRIBUTES i know about).

Check this out... You can now use unity editor to fully layout your scene with materials and the new universal babylonjs glsl shaders and see the shader on meshes in unity. Then when exported using the unity babylon export tool... Parse the universal shader and formats babylon js .fx shaders.

In unity, i dropped cube on scene, made a material, specify the 'BabylonJs/Templates/AmigaShader' (from the babylonjs example):

The BabylonJS Unity Shader:

Shader "BabylonJS/Templates/Amiga Shader" {
Properties {
	[NoScaleOffset] textureSampler ("Texture", 2D) = "white" {}
	scaleFactor ("Scale Factor", Range (1.0,5.0)) = 1.0
}
SubShader {
Pass {
GLSLPROGRAM

#ifdef BABYLON
	attributes: ["position", "normal", "uv"]
	uniforms: ["world", "worldView", "worldViewProjection"]
#endif //BABYLON-END


#ifdef VERTEX
//BABYLON-VERTEX-MACROS-START
vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; }
vec3 GL_NORMAL_ATTRIBUTE() { return gl_Normal; }
vec4 GL_COLOR_ATTRIBUTE() { return gl_Color; }
vec2 GL_UV_ATTRIBUTE() { return vec2(gl_MultiTexCoord0.xy); }
mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return gl_ProjectionMatrix * gl_ModelViewMatrix; }
//BABYLON-VERTEX-MACROS-END
precision highp float;

varying vec2 vUV;

void main(void)
{
	vec2 uv = GL_UV_ATTRIBUTE();
	vec4 pos = GL_POSITION_ATTRIBUTE();
	mat4 wvp = GL_WORLDVIEWPROJECTION_UNIFORM();

    gl_Position = wvp * pos;
    vUV = uv;
}
#endif //VERTEX-END


#ifdef FRAGMENT
precision highp float;

varying vec2 vUV;
uniform float scaleFactor;
uniform sampler2D textureSampler;

void main(void)
{
    gl_FragColor = texture2D(textureSampler, vUV * scaleFactor);
}
#endif //FRAGMENT-END 

ENDGLSL
}}}

Note: Uses the standard unity GLSLPROGRAM format (with and added #ifdef BABYLON section for attributes and uniforms)

This shaders works great in unity so you can see your water or whatever right in the designer. When exported to .fx files... Looks like this:

//BABYLON-VERTEX-MACROS-START
attribute vec3 position;
vec4 GL_POSITION_ATTRIBUTE() { return vec4(position, 1.0); }
attribute vec3 normal;
vec3 GL_NORMAL_ATTRIBUTE() { return normal; }
attribute vec2 uv;
vec2 GL_UV_ATTRIBUTE() { return uv; }
uniform mat4 world;
mat4 GL_WORLD_UNIFORM() { return world; }
uniform mat4 worldView;
mat4 GL_WORLDVIEW_UNIFORM() { return worldView; }
uniform mat4 worldViewProjection;
mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return worldViewProjection; }
//BABYLON-VERTEX-MACROS-END
precision highp float;

varying vec2 vUV;

void main(void)
{
	vec2 uv = GL_UV_ATTRIBUTE();
	vec4 pos = GL_POSITION_ATTRIBUTE();
	mat4 wvp = GL_WORLDVIEWPROJECTION_UNIFORM();

    gl_Position = wvp * pos;
    vUV = uv;
}

 And

precision highp float;

varying vec2 vUV;
uniform float scaleFactor;
uniform sampler2D textureSampler;

void main(void)
{
    gl_FragColor = texture2D(textureSampler, vUV * scaleFactor);
}

Freakin Sweet

Just need the rest of those GL_ATTRIBUTES 

[JCPalmer]

I would just do a text search for GL_ATTRIBUTES on your local repository directory src/Shaders.  File Explorer does a good job for Win, or whatever you use for text searching.

Otherwise, you are asking someone else to do that for you.

[GameMonetize]

Still not sure to understand what you are looking for.

 

But about attributes, you can define the attributes required by your shader using this syntax:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Materials/babylon.shaderMaterial.ts#L27

 

The list of attributes you can set in your vertex buffer:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.vertexBuffer.ts#L118

[MackeyK24]

What i am try to make are 'universal' GL_ATTRIBUTE MACRO functions for BabylonJS shaders that will work with BOTH Unity (for design time) and Babylon (for runtime).

So far its working great for the few attributes i know the 'gl_' equivalent for... For example:

In Babylon i have a GL_POSITION_ATTRIBUTE macro function:

attribute vec3 position;
vec4 GL_POSITION_ATTRIBUTE() { return vec4(position, 1.0); }

That simple returns the 'position' attribute (cast to vec4)

Now in Unity (using regular gl_Vertex for position)

vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; }

So i can safely use GL_POSITION_ATTRIBUTE() instead of the platform specific (babylon = 'position' and unity = 'gl_Vertex')

void main(void)
{
	vec2 uv = GL_UV_ATTRIBUTE();
	vec4 pos = GL_POSITION_ATTRIBUTE();
	mat4 wvp = GL_WORLDVIEWPROJECTION_UNIFORM();

    gl_Position = wvp * pos;
    vUV = uv;
}

 This shader will work in both unity and babylon. My problem is that i have to KNOW and DUPLICATE all the BUILT-IN attributes and uniforms so i can make macros for each. No babylon hide all the low level GLSL stuff to make things easier... So instead of have to use the GLSL gl_Vertex attribute, BABYLON JS will expose that attribute as 'position'.

Now i am no shader guy... but i can tell the real simple ones:

BJS: position = GLSL: gl_Vertex

BJS: normal = GLSL: gl_Normal

BJS: uv = GLSL: gl_MultiTexCoord0.xy

AND uniforms  AS WELL

BJS: worldViewProjection = GLSL: gl_ProjectionMatrix * gl_ModelViewMatrix

SO WHAT ARE ALL THE REST.

1... Is there a BJS: color = GLSL: gl_Color

2... What is the calculation for BJS: worldView, world, view, projection AND whatever other ones that are build-in to babylon like 'worldViewProjection'

i need to know the EXACT calculations for EVERY BUILT-IN (babylon is doing the hard work and exposing as some attribute) so i can make the unity version of macro do the exact same things... That way if you texture up a mesh at design time using the universal shader, when exported THEY SHOULD LOOK WORK EXACTLY THE SAME.

My hope was to simple REPLACE the GL_ATRTIBUTE MACRO BLOCKS:

So Unity BLOCK:

//BABYLON-VERTEX-MACROS-START
vec4 GL_POSITION_ATTRIBUTE() { return gl_Vertex; }
vec3 GL_NORMAL_ATTRIBUTE() { return gl_Normal; }
vec4 GL_COLOR_ATTRIBUTE() { return gl_Color; }
vec2 GL_UV_ATTRIBUTE() { return vec2(gl_MultiTexCoord0.xy); }
mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return gl_ProjectionMatrix * gl_ModelViewMatrix; }
//BABYLON-VERTEX-MACROS-END

Would get replaced with Babylon BLOCK ON EXPORT:

//BABYLON-VERTEX-MACROS-START
attribute vec3 position;
vec4 GL_POSITION_ATTRIBUTE() { return vec4(position, 1.0); }
attribute vec3 normal;
vec3 GL_NORMAL_ATTRIBUTE() { return normal; }
attribute vec2 uv;
vec2 GL_UV_ATTRIBUTE() { return uv; }
uniform mat4 worldViewProjection;
mat4 GL_WORLDVIEWPROJECTION_UNIFORM() { return worldViewProjection; }
//BABYLON-VERTEX-MACROS-END

As you can see, with my limited knowledge... I currently only support these FEW attributes... Because i don't know what are all the built-in ones and how they were computed.

Hope that explains better

[GameMonetize]

yep and now you have the list of attributes supported by babylon (my second link)

[MackeyK24]

So so long winded

[MackeyK24]

Note... the URLS with vertex links not working

 

[GameMonetize]

Which one?

[MackeyK24]

Both... this url says can't find server:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.vertexBuffer.ts#L118

[MackeyK24]

Yo... I think the urls might be fine... Github is getting Denial Of Service Attacked

 

[GameMonetize]

Yep

[MrVR]

Hi Guys, I'm playing further with the Shaders and I can not figure how to use this ones can somebody help me

I need the equivalents of this ones thanks  

gl_NormalMatrix 
gl_ModelViewProjectionMatrix 

-- UPDATE

Ok Seem to work with this normal as the gl_NormalMatrix and gl_ModelViewProjectionMatrix = projMat * viewMat * modelMat please correct me if IM wrong

But I can find the way to set up the cube texture envMap on my exporter

    uniform samplerCube envMap;

            void main(void) {
                vec3 eye = normalize(eyePos - position);
                vec3 r = reflect(eye, worldNormal);
                vec4 color = textureCube(envMap, r);
                color.a = 0.5;
                gl_FragColor = color;
            }

--UPDATE 2

ok I think i figure that worldViewProjection is the gl_ModelViewProjectionMatrix  but i need to understand how to set up a new property for a uniform samplerCube _MainTex; instead 2d

can anyone help me with this please @Deltakosh ?  I need to set up a cubemap texture to finish my shader uniform samplerCube _MainTex;

Shader "BabylonJS/waterShader" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_Brightness ("Intensity", Range(1.0, 10.0)) = 1.0
		[NoScaleOffset] _MainTex ("Albedo (RGB)", 2D) = "white" {}
		_ScaleX ("Scale Factor X", Range (0.0, 10.0)) = 1.0
		_ScaleY ("Scale Factor Y", Range (0.0, 10.0)) = 1.0
		_Metallic ("Metallic", Range(0,1)) = 0.0
		_Glossiness ("Smoothness", Range(0,1)) = 0.5
		[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
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		
			CGPROGRAM

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

			#ifdef BABYLON
		
			

here is where i puts the cube map

 

			#ifdef FRAGMENT
			
			varying vec3 position;
			varying vec3 worldNormal;
			varying vec3 eyeNormal;
			uniform vec3 eyePos;
			// uniform samplerCube envMap;
			uniform samplerCube _MainTex;

			void main(void) {
				vec3 eye = normalize(eyePos - position);
				vec3 r = reflect(eye, worldNormal);
				vec4 color = textureCube(_MainTex, r);
				color.a = 0.5;
				gl_FragColor = color;
			}

			
			#endif //FRAGMENT-END 

Here is list of the build in transformations if some one now the equivalences in the shader please let me know, I will calculate the ones I need if there not available in babylon shader

• world 
• view 
• projection 
• worldView 
• worldViewProjection 

uniform mat4 gl_ModelViewMatrix;
uniform mat4 gl_ProjectionMatrix;
uniform mat4 gl_ModelViewProjectionMatrix;
uniform mat4 gl_TextureMatrix[gl_MaxTextureCoords];
uniform mat3 gl_NormalMatrix; // transpose of the inverse of the
   // upper left 3x3 matrix of gl_ModelViewMatrix
uniform mat4 gl_ModelViewMatrixInverse;
uniform mat4 gl_ProjectionMatrixInverse;
uniform mat4 gl_ModelViewProjectionMatrixInverse;
uniform mat4 gl_TextureMatrixInverse[gl_MaxTextureCoords];
uniform mat4 gl_ModelViewMatrixTranspose;
uniform mat4 gl_ProjectionMatrixTranspose;
uniform mat4 gl_ModelViewProjectionMatrixTranspose;
uniform mat4 gl_TextureMatrixTranspose[gl_MaxTextureCoords];
uniform mat4 gl_ModelViewMatrixInverseTranspose;
uniform mat4 gl_ProjectionMatrixInverseTranspose;
uniform mat4 gl_ModelViewProjectionMatrixInverseTranspose;
uniform mat4 gl_TextureMatrixInverseTranspose[gl_MaxTextureCoords];