Samples for CustomMaterial

[NasimiAsl]

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

 

[ozRocker]

Do you know how I can use a texture atlas with this?  Say I have a 4096x4096 image with 4 textures (1024x1024 in size) how can I reference each texture in the atlas using custom materials?

[NasimiAsl]

https://www.babylonjs-playground.com/#UXCB15#29

https://www.babylonjs-playground.com/#UXCB15#30

 

if you wanna use tile  you see edge problem

https://www.babylonjs-playground.com/#UXCB15#32

for fix that you most make tiled pattern texture 

photoshop action for do that : Tiling for AtlasMap.atn  after setup short key "ctrl+shift +f9"

for sample :   converted to 

 

https://www.babylonjs-playground.com/#UXCB15#31

ping @ozRocker

main atlas texture : 

 

[ozRocker]

@NasimiAsl everything seems to work except emissiveColor.  I think its changing ambient color instead.  When I set emissiveColor to (1,1,1) ( or white ) it should show the texture without any lighting effects but it just makes it white instead.

https://www.babylonjs-playground.com/#UXCB15#33

 

[NasimiAsl]

 you can set texture before fragColor without any effect https://www.babylonjs-playground.com/#UXCB15#34 too may be that help

[ozRocker]

35 minutes ago, NasimiAsl said:

 you can set texture before fragColor without any effect https://www.babylonjs-playground.com/#UXCB15#34 too may be that help

Thanks.  It works perfectly!  You are the master of shaders.

Do you know if there is a performance hit having to also load the texture file with 1 pixel in it?

[NasimiAsl]

i know it is sample  you most change it by your project always

[ozRocker]

Oh, I just realised I can load the atlas texture once and use that to replace the dot.

[ozRocker]

It seems if I have emissiveColor set to white I can't use specularColor.  Do you know how I can use both?

[NasimiAsl]

the first simple most work i need look where that have  diffuseTexture  in main shader ( a bit time) 

make a simple bug in forum we work mix standard material and custom material  if you need it necessary i can look at close to night

https://www.babylonjs-playground.com/#UXCB15#35 check this source too that most fix some problems

[ozRocker]

I see what's happening, you're adding the old diffuse texture with it.  That doesn't work so well for me 'cos I'm morphing and combining textures.  I've combined your texture atlas code with this code https://playground.babylonjs.com/#BDG7ME#23  If I can get specular highlights working for the head in that playground then it should work here too

[waverider]

Hy there does the custom material support something like this too?

material.Vertex_Custom_Diffuse

 

just wondering...^_^

[NasimiAsl]

5 hours ago, waverider said:

Hy there does the custom material support something like this too?

material.Vertex_Custom_Diffuse

 

just wondering...^_^

no Diffuse used just in fragment you can use Vertex Position Update 

[waverider]

 

[Pryme8]

https://playground.babylonjs.com/#44X0M9#35 
I am struggling with this and times when I have gotten it to "work" (made it turn the mesh white) I could only have it do it to the first submesh.

https://www.babylonjs-playground.com/#UXCB15#8

I'm thinking maybe something is broken as thats one of your examples.

[Pryme8]

https://www.babylonjs-playground.com/#UXCB15#38

I can not get this thing to work for the life of me...

@NasimiAsl

[NasimiAsl]

sorry i see late https://www.babylonjs-playground.com/#UXCB15#39

use diffuseSampler

[Pryme8]

https://www.babylonjs-playground.com/#UXCB15#40

When you do that and then modify the UV its like there are double textures placed and it does a whole bunch of funky stuff... I was already using that but it was impossible to actually manipulate it and always had a ghost of the diffuseTexture then.

And why would this one :https://www.babylonjs-playground.com/#UXCB15#5
work but then mine wont?

I need to be able to use custom samplers and manipulate the UV or this will be pretty useless.

https://www.babylonjs-playground.com/#UXCB15#41

Like here you can see the ghosting I was talking about when all I did was change the results to a vec3.
https://www.babylonjs-playground.com/#UXCB15#42
^ what the diffuse should look like with no manipulation.

[Pryme8]

Also the 

box.material.onBindObservable

Continuously fires and I do not think that is correct as well.