CustomMaterial Samples

hi i start write some documentation here for custom material ( its realy easy for me to make it here but i can move it in documentation after that complete )

definition : Custom Material inherited from stable version of Standard material (a carbon Copy of BABYLON.StandarMaterial)

when we need CustomMaterial ? : any time you wanna make any custom option but you can’t manage that in standard material .

vertex shader definitions :

  1. position(readonly) or positionUpdated(vec3) : local position per vertex
  2. normal(readonly) or NormalUpdated(vec3) : local normal

fragment shader definitions :

  1. vPositionW( readonly) : world position per pixel
  2. vNormalW(read only)
  3. vDiffuseUV(vec2) : (readonly) : defined uv attribute append when you have DiffuseTexture
  4. diffuseColor(vec3) you can manage that with Fragment_Custom_Diffuse : for control Diffuse color **** that mixed with diffuseTexture if you add any texture
  5. alpha(float) you can manage that from Fragment_Custom_alpha : for control transparency
  6. color(vec4) last result after attached all effect (light fog shadow … ) you can manage that in Fragment_before_FragColor

methods :

Start

.material = new BABYLON.CustomMaterial(“name”,scene);

Demo : You can define customMaterial exactly like StandardMaterial and you have all property and methods in custom material too

AddUniform

material.AddUniform(‘test1’,‘vec3’);

  1. simple (float,vec2, vec3,vec4,…) demo
  2. sampler without UV with Define UV
  3. array array3 , float

Fragment_Begin

material.Fragment_Begin( string)

#include<__decl__defaultFragment> 
[Fragment_Begin]
#extension GL_OES_standard_derivatives : enable

for define any new extension or include any shader (not find any requirement for make sample)

Fragment_Definitions

material.Fragment_Definitions( string)

 
#[Fragment_Definitions] 
 
void main(void) { 

this define before main you can define any varying or global function before main

demo : make varying for simple noise used vertex data to add normal

demo : change vertex use definition function

Fragment_MainBegin

void main(void) { 
 
vNormalW = vNormalW_helper; 
#[Fragment_MainBegin] 

demo : correct normal for back face

Fragment_Custom_Diffuse

you most find your result red and green and blue (witch any way you like ) and set it in diffuseColor or result

*** result (vec3) in this method replaced (one time) by diffuseColor

set texture setTexture use diffuseColor

Fragment_Custom_Alpha

you most find your alpha and set it to alpha variable or in result

*** result (vec3) in this method replaced (one time) byalpha

demo manage transparency

Fragment_Before_FragColor

before the last result you have chance to manage your result your final color available in color variable and you most be set it color after your changes

*** result (vec4) in this method replaced (one time) by color

demo result with and without light effect

Vertex_Begin

for define any new extension or include any shader (not find any requirement for make sample)

Vertex_Definitions

this define before main you can define any varying or global function before main

Vertex_MainBegin

same as Fragment_Main

Vertex_Before_PositionUpdated

localPosition = positionUpdated; 
#[Vertex_Before_PositionUpdated] 
 
gl_Position=viewProjection*finalWorld*vec4(positionUpdated,1.0); 

you most change positionUpdated in here for change last vertex result

Vertex_Before_NormalUpdated

#ifdef NORMAL 
 
#[Vertex_Before_NormalUpdated] 
 
localNormal = normalUpdated; 
vNormalW_helper=normalize(vec3(finalWorld*vec4(normalUpdated,0.0))); 

you most change normalUpdated in here for change last vertex normal result

related samples

Update Uniform demo

14 Likes

A FANTASTIC post and WONDERFUL demos, Naz! Thank you, thank you, thank you!!!

2 Likes

You definitly should add this to the official doc’ :slight_smile:

2 Likes

I have been waiting for the update for these!

Awesome and thank you for the right up.

the next generation is AdaptorMaterial

Did you ever do this?

1 Like

the shader low
any definition variable created per each pixel in each frame
so if you have 10 variable and have 40 fps in 800600 resolation
you use 800
6004010*[shader count]*[variable size]

** why all this matter because we use OpenEs ( the powerless 3d engine )

actually the base of shaderBuilder is adaptor pattern
but that design so complicated i think
so i call the more readable version of shaderBuilder is adaptor Material
but no i have a lot uncompleted tools
i need make them finish then start the new one
or make a team and i explain what i think and born new generation of shader

  • notice that shaderBuilder is not just string builder that have a writing way

about nodematerial
adaptormaterial is kind of node material with optimization steps
that mean you cant link what you have to all input

the base of adaptor material keep the small numbers of variables and use it in all steps of code
the when you write big shader you have less variable but you pack them in old variable and post them to next step
after each step you don’t care the pass and data and just walk to next steps

  • the base definition of “result” variable in shaderbuilder
3 Likes

Keep me posted, Im interested for sure.

2 Likes

Please continue. : )

Maybe a “PROJECT”… when ready.

Understand Adaptor Pattern.

“born new generation of shader”

Understand nodematerial with optimized steps.

Feel free to paste code (please)… we read LOTS of code.

It is good.

LIKE: “steps of code”

Would like to learn this.

And help.

:eagle:

2 Likes

I agree. This really should be in the official docs. Thanks for your work on this @nasimiasl !

@nasimiasl : You and your family - stay safe old friend - BJS needs your skills

cheers, gryff :slight_smile:

3 Likes

hi i planing to move Turkish Istanbul for 2 or 3 years working
i feel sad about world state
thanks for your replay i don’t see any border in this community

7 Likes

This is really true!!

1 Like