# CustomMaterial Samples

**URL:** <https://forum.babylonjs.com/t/custommaterial-samples/57>\
**Category:** Announcements\
**Tags:** documentation\
**Created:** [December 8, 2018, 8:30pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57 "2018-12-08T20:30:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [December 8, 2018, 8:30pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/1 "2018-12-08T20:30:15Z")

</div>

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](https://www.babylonjs-playground.com/#UXCB15)** : 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](https://www.babylonjs-playground.com/#UXCB15%231)**
2. **sampler [without UV](https://www.babylonjs-playground.com/#UXCB15%234) [with Define UV](https://www.babylonjs-playground.com/#UXCB15%235)**
3. **array [array3](https://www.babylonjs-playground.com/#UXCB15%233) , [float](https://www.babylonjs-playground.com/#UXCB15%232)**

**Fragment\_Begin**

material.Fragment\_Begin( string)

```auto
#include< __decl__ defaultFragment> 
[Fragment_Begin]
#extension GL_OES_standard_derivatives : enable

```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

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

**Fragment\_Definitions**

material.Fragment\_Definitions( string)

```auto
 
#[Fragment_Definitions] 
 
void main(void) { 

```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

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](https://www.babylonjs-playground.com/#UXCB15%238)**

**[demo : change vertex use definition function](https://www.babylonjs-playground.com/#UXCB15%239)**

**Fragment\_MainBegin**

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

```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

**[demo : correct normal for back face](https://www.babylonjs-playground.com/#UXCB15%2310)**

**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](https://www.babylonjs-playground.com/#UXCB15%235) [setTexture use diffuseColor](https://www.babylonjs-playground.com/#UXCB15%2311)**

**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](https://www.babylonjs-playground.com/#UXCB15%2312)**

**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](https://www.babylonjs-playground.com/#UXCB15%2314)**

**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**

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

```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

you most change positionUpdated in here for change last vertex result

**Vertex\_Before\_NormalUpdated**

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

```

![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==) ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

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

related samples

**Update Uniform [demo](https://www.babylonjs-playground.com/#UXCB15%237)**

---

<div class="post-metadata">

**Author:** ![Wingnut](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/wingnut/32/53_2.png) [@Wingnut](https://forum.babylonjs.com/u/Wingnut)\
**Post date:** [December 10, 2018, 2:13am UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/2 "2018-12-10T02:13:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\
**Post date:** [December 10, 2018, 9:17am UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/3 "2018-12-10T09:17:19Z")

</div>

You definitly should add this to the official doc’ 🙂

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [December 10, 2018, 9:27am UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/4 "2018-12-10T09:27:51Z")

</div>

I have been waiting for the update for these!

Awesome and thank you for the right up.

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [December 10, 2018, 9:28am UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/5 "2018-12-10T09:28:53Z")

</div>

the next generation is AdaptorMaterial

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [October 16, 2019, 5:21pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/6 "2019-10-16T17:21:58Z")

</div>

> [@nasimiasl](#):
>
> AdaptorMaterial

Did you ever do this?

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [October 16, 2019, 7:29pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/7 "2019-10-16T19:29:59Z")

</div>

the shader low  
**any definition variable created per each pixel in each frame**  
so if you have 10 variable and have 40 fps in 800_600 resolation  
you use 800_600_40_10\*[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

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [October 16, 2019, 8:12pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/8 "2019-10-16T20:12:58Z")

</div>

Keep me posted, Im interested for sure.

---

<div class="post-metadata">

**Author:** ![aFalcon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/afalcon/32/7015_2.png) [@aFalcon](https://forum.babylonjs.com/u/aFalcon)\
**Post date:** [October 16, 2019, 8:44pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/9 "2019-10-16T20:44:40Z")

</div>

> [@nasimiasl](#):
>
> make a team and i explain

Please continue. : )

Maybe a “PROJECT”… when ready.

Understand Adaptor Pattern.

_“born new generation of shader”_

- also interested with @Pryme8

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.

🦅

---

<div class="post-metadata">

**Author:** ![adam](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@adam](https://forum.babylonjs.com/u/adam)\
**Post date:** [December 13, 2019, 11:02pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/10 "2019-12-13T23:02:38Z")

</div>

> [@Vinc3r](#):
>
> You definitly should add this to the official doc’ 🙂

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

---

<div class="post-metadata">

**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\
**Post date:** [January 3, 2020, 4:22pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/11 "2020-01-03T16:22:07Z")

</div>

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

cheers, gryff 🙂

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [January 5, 2020, 12:19pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/13 "2020-01-05T12:19:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [January 6, 2020, 4:27pm UTC](https://forum.babylonjs.com/t/custommaterial-samples/57/14 "2020-01-06T16:27:07Z")

</div>

> [@nasimiasl](#):
>
> thanks for your replay i don’t see any border in this community

This is really true!!