How to create two custom shaders materials?

Questions
1

Hi, I am trying to create two custom shaders in Babylon. I made the PG below with a function that generates custom shaders, but for some reason, it doesn’t work. For one shader it works, as expected

https://playground.babylonjs.com/#KJ3BVA

Thank you in advance.

2

You should not add VertexShader / FragmentShader to the names you pass to the ShaderMaterial constructor:

https://playground.babylonjs.com/#KJ3BVA#1

The PG still does not work but that’s because your shaders are invalid (look at the console of the browser, ndl and specComp are undefined in the fragment shader).

1 Like
3

I removed the errors from the shaders, but it applies the same shader to both spheres:

Don’t understand what you mean by

You should not add VertexShader / FragmentShader to the names you pass to the ShaderMaterial constructor:

Do you care to elaborate. Thank you

4

https://playground.babylonjs.com/#KJ3BVA#3

It finally works!! the documentation and your help, really helped thanks!

5

You were doing:

const vertexName = `customVertexShader`;
const fragName = `customFragmentShader`;
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene,
    { vertex: vertexName, fragment: fragName },
    ...
);

But the ShaderMaterial constructor is automatically adding VertexShader to the name you pass through vertex and FragmentShader to the name you pass through fragment in the 3rd parameter, so you should simply pass “custom”:

const vertexName = `customVertexShader`;
const fragName = `customFragmentShader`;
const shaderMaterial = new BABYLON.ShaderMaterial("shader", scene,
    { vertex: "custom", fragment: "custom" },
    ...
);

Regarding your other problem, it’s because you overwrite the same shader. Use another name for the second shader:

1 Like