# How to reapply alphaTest to model with ShaderMaterial

**URL:** <https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828>\
**Category:** Questions\
**Created:** [January 17, 2022, 5:21am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828 "2022-01-17T05:21:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 17, 2022, 5:21am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/1 "2022-01-17T05:21:13Z")

</div>

Hi there,

Is there a way to reapply an alpha to a model with ShaderMaterial? Basically, once the model(grass model) is loaded it has an alpha applied as the texture file is a (.png) file. But when I assign a ShaderMaterial to the model, the alpha disappears and the texture isn’t showing properly. Could someone please help? 🙂 Playground code below.

[https://www.babylonjs-playground.com/#BG5KD4#16](https://www.babylonjs-playground.com/#BG5KD4#16)

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 17, 2022, 6:24am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/2 "2022-01-17T06:24:14Z")

</div>

Hey there 🙂 I added the missing options “needAlphaBlending” and “needAlphaTesting” when creating the ShaderMaterial and also updated the fragment shader to use the alpha from the texture, which seemed to fix the alpha issue. It looks like maybe there’s a separate issue with the lighting code that makes some of the grass blades too dark but I’m not sure what’s gone wrong with that part…

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#BG5KD4%2318)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 17, 2022, 7:02pm UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/3 "2022-01-17T19:02:57Z")

</div>

Many thanks, @Blake Just what I was looking for. 😃

---

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 17, 2022, 7:27pm UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/4 "2022-01-17T19:27:21Z")

</div>

Hi @Blake So I couldn’t resolve the lighting issue. Please comment out the material [grass.material = shaderMaterial;] line to see the desired result after applying the shader, but I feel like you have already. 😃

I’m not sure what is going on here. 🙂 please help, my game environment is looking shady. 😃

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 17, 2022, 10:02pm UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/5 "2022-01-17T22:02:12Z")

</div>

> [@VoxelCubes](#):
>
> comment out the material [grass.material = shaderMaterial;] line to see the desired result

…TBH I don’t fully understand all of your lighting code tho (your mesh and lighting are more complicated than what I’ve made shaders for so far ), so it’s hard for me to help troubleshoot more… 🙂

---

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 18, 2022, 3:28am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/6 "2022-01-18T03:28:08Z")

</div>

Thanks for the prompt response @Blake, actually, I only modified the [CYOS Shader Editor - Wave code] as I am quite new to shaders. 🙂 Please see the shader link below.

[https://cyos.babylonjs.com/#P746G7](https://cyos.babylonjs.com/#P746G7)

It might be easier to work with the shader code instead. 🙂

Also, is it possible to pass lighting in my game to the shader?

One more thing, the model was exported from Blender as [.babylon] file with PBR materials, is it possible to use [PBRMetallicRoughnessMaterial] with ShaderMaterial to get the same visual effect/result?

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 19, 2022, 10:37pm UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/7 "2022-01-19T22:37:59Z")

</div>

> [@VoxelCubes](#):
>
> is it possible to pass lighting in my game to the shader?

It is but you have to create and set the uniforms for the light’s properties yourself if you use ShaderMaterial.

> [@VoxelCubes](#):
>
> is it possible to use [PBRMetallicRoughnessMaterial] with ShaderMaterial to get the same visual effect/result?

You could try using the PBRCustomMaterial so it will start out looking exactly the same and then make your customizations to the shader using the PBRCustomMaterial helper functions. I would recommend that approach over trying to recreate the PBR material using ShaderMaterial, which would be much, much more difficult IMO…

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 19, 2022, 10:42pm UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/8 "2022-01-19T22:42:52Z")

</div>

And to help get you started with PBRCustomMaterial:

In the PBRCustomMaterial [documentation](https://doc.babylonjs.com/typedoc/classes/babylon.pbrcustommaterial), all of the capitalized functions (at the beginning of the list of functions) are the ones that can be used to customize your PBR material. They let you easily inject code at various key points in the shader and you can also add uniforms, global functions, etc.

Here for example is your model with the original PBR material on this [PG](https://www.babylonjs-playground.com/#BG5KD4#31) and here is your model with the custom PBR material on this [PG](https://www.babylonjs-playground.com/#BG5KD4#33), to confirm that it looks the same. And here’s an example [PG](https://www.babylonjs-playground.com/#BG5KD4#32) that adds and animates a new uniform which makes your grass bluer to get a small taste of customizing it.

One more thing, it helps to have open the files for the PBR vertex and fragment shaders for reference. If you search the [vertex file](https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/pbr.vertex.fx) for CUSTOM\_VERTEX and search the [fragment file](https://github.com/BabylonJS/Babylon.js/blob/master/src/Shaders/pbr.fragment.fx) for CUSTOM\_FRAGMENT then you can see where in the files the helper functions will inject your custom code. 🙂

---

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 20, 2022, 5:26am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/9 "2022-01-20T05:26:15Z")

</div>

Amazing! 😃 I will give this a try and keep you posted. Many thanks @Blake

---

<div class="post-metadata">

**Author:** ![VoxelCubes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/voxelcubes/32/8760_2.png) [@VoxelCubes](https://forum.babylonjs.com/u/VoxelCubes)\
**Post date:** [January 21, 2022, 5:00am UTC](https://forum.babylonjs.com/t/how-to-reapply-alphatest-to-model-with-shadermaterial/26828/10 "2022-01-21T05:00:13Z")

</div>

Ok, I managed to get what I wanted 😃 and just want to say thank you for your help and pointing me in the right direction @Blake 🙂

**Here is the link to the final code.** 🙂

[https://www.babylonjs-playground.com/#0H56F2#10](https://www.babylonjs-playground.com/#0H56F2#10)

**Useful link**  
[https://forum.babylonjs.com/t/custommaterial-samples/57](https://forum.babylonjs.com/t/custommaterial-samples/57)
