Shader In BabylonJs

[NasimiAsl]

Flow this topic if you don't Use Shader a lot.

i try made that because most of member prefer to don't Use shader 

 

we talk about this stuffs step by step :

1.   What is Shader  
2.   How It work in GPU : understanding
3.   How can i use it 
4.   How can start programming in shader
5.   what information we access in shader
6.   [ more question added in next ]

we try talk about one stuff per days 

 

[NasimiAsl]

1.  What is Shader

two kind of shader we have "Material Shader" and "Post Process Shader"

Material Shader : 

 has 2 functions

1. one for called per each vertex of mesh   : Vertex Shader
2. and next one called per each pixel of mesh rendered in view-port  : Fragment Shader or Pixel Shader

PostProcess Shader : 

has 2 functions

 1. vertex shader in postprocess used for make a texture coordinate for fragment shader 

attribute vec2 v_coord;
uniform sampler2D fbo_texture;
varying vec2 f_texcoord;

void main(void) {
  gl_Position = vec4(v_coord, 0.0, 1.0);
  f_texcoord = (v_coord + 1.0) / 2.0;
}

 2.  called per each pixel of screen rendered in view-port (that can be called smaller than correct view-port  :  called scale parameter ) : Fragment Shader or Pixel Shader

any action in 3d engines need process shader for display final color per pixel of viewport

so any material we used or any effect we have one or few shader we have for do that for us 

 

 

[gryff]

Looks good @NasimiAsl - maybe I will finally get my head around shaders, or at least get a better understanding of them

cheers gryff

[NasimiAsl]

Hello again in Days 2:

i wanna talk more  about Material Shader 

so how it work is best question we have in first :

we need send information about mesh and textures for Shader 

we have 3 type of variable [attributes , uniforms , varying ]

*** all this stuff managed in babylonjs automatically you just need define what you want more 

 

Attributes : 

 #Per-vertex variables passed by the engine to the shader, like position, normal, etc (Mesh data in the graphic)

before shader we have geometry information  [ vertices , face , uv , uv2  ] this make mesh in 3d Engine 

all this attributes ( geometry information  )  is Local informaion about mesh and we haven't the global position and scale or rotation in this attributes

Uniforms :

 # User defined variables that are passed by the main program to the vertex and fragment shader, these variables are global for a given execution of a shader.

3d Engine can send other data like global Postion or anything else with Uniforms.

defult global information is : [view , world ,worldView , worldViewProjection , viewProjection ]  we talk more about this in advance mode

Varying : 

# Variables passed from the vertex shader to the fragment shader.

you can share some information between vertex shader and fragment shader you most define it in Varying 

** varying can help us to make more optimization too 

[royibernthal]

@NasimiAsl What happened to days 3 and 4?

[NasimiAsl]

in Iran Is Weekend   but in Day 3  and 4 we talk about variable Kind and usage 

i just write introduction about day 3 and 4  we continue in Saturday  :

when we need initialize a shader we need collect all uniforms and varyings

Witch uniform we need in Shader ?

What Varying we most Define ?

all variable types

bool ,float , vec? (vector 2,3,4) , mat? (matrix 2,3,4 ) , ivec? (2,3,4 ) , sampler?D (1,2,3) , samplerCube , sampler?DShadow (1,2)

vector components is : x y z w  ( size and position stuff  ) -   r g b a  ( color stuff) -  s t p q ( texture coordinate stuff)

sample of vector usage : 

1: uniform vec3 position;

2: vec2  a = position.xy; 

2: vec3  a = position.xyv;

* notic you can use like this too : 

.xxx .xxy .xyx .xyy .xzz .. etc

and in color you can use  

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

 
uniform sampler2D textureSampler;

vec4 map = texture2D( textureSampler , vec2(  uv.x , uv.y  ) );

map.rgb or map.rrr  

reference is : http://mew.cx/glsl_quickref.pdf

more  after Saturday    and sorry about late 

ask any question about before thanks

[NasimiAsl]

hi  :  Days 3 

Witch uniform we need in Shader ?

witch we need in Vertex ?

      usually we don't change vertex shader and we most look at them like last chance for solution

     *** when we change vertex shader we miss real position and picking system and collision system

     *** when we change some vertex position you lost your correct normal we most be recalculate (just in safe normal not in flat normals)

     *** it is hard to control move vertex and make animated

     *** when you can make your animation or morph in vertex shader you do that on GPU side it is very optimized

     in vertex shader you don't work with array of position and you just have one and don't have access to other positions

    see this code it is explain what call your vertex shader in GPU : 

for (int i = 0; i < vertexCount; i++) {
  output = vertexShader(vertex[i]); 
}  

reference : https://processing.org/tutorials/pshader/

so your uniform send for all vertex and you cant custom that per vertex

http://babylonjs.com/cyos/#1LNKAZ

you can define your condition for change  in you shader 

http://babylonjs.com/cyos/#1LNKAZ#1 

if you cant find your special vertex by mathematical or condition you most define your uniform and send this special vertex for shader.

        

 

[Nabroski]

Hello

Can you also share also very simple playgrounds, so i can start change number and see if it still works

http://www.babylonjs-playground.com/#LA4VD#14

How to import a shaders i made with cyos in the playground to start experimenting

[NasimiAsl]

@Nabroski 

you can use this for make shaderMaterial : 

http://www.babylonjs-playground.com/#1YHPOU#0

and you can Use ShaderBuilder : 

http://www.babylonjs-playground.com/#GHZP8#0