How to reapply alphaTest to model with ShaderMaterial

Questions
1

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? :slight_smile: Playground code below.

https://www.babylonjs-playground.com/#BG5KD4#16

2

Hey there :slight_smile: 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…

2 Likes
3

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

1 Like
4

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. :smiley:

I’m not sure what is going on here. :slight_smile: please help, my game environment is looking shady. :smiley:

5

…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… :slight_smile:

6

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

https://cyos.babylonjs.com/#P746G7

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

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?

7

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

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…

8

And to help get you started with PBRCustomMaterial:

In the PBRCustomMaterial documentation, 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 and here is your model with the custom PBR material on this PG, to confirm that it looks the same. And here’s an example PG 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 for CUSTOM_VERTEX and search the fragment file for CUSTOM_FRAGMENT then you can see where in the files the helper functions will inject your custom code. :slight_smile:

2 Likes
9

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

1 Like
10

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

Here is the link to the final code. :slight_smile:

https://www.babylonjs-playground.com/#0H56F2#10

Useful link
https://forum.babylonjs.com/t/custommaterial-samples/57

3 Likes