Which class to extend for creating a custom material

Questions
1

I want to create a custom material. I will add external ‘uniforms’ and ‘defines’ variables in the vertex and fragment files.
At first, I try to use class ShaderMaterial after I have read the document about the shader and materials. My constructor of custom material looks like following:

constructor(name: string, scene: BABYLON.Scene, options?: any) {
  // I can't deal with options before keyword 'super'
  super(name, scene, './shaders', {attributes:[], uniforms:[], defines:[], samples:[]})
}

But I figure out that I can’t add external uniforms or defines depending on my options. Are there some hooks or events for injecting uniforms or defines?

And then I try to use class CustomMaterial, however, I don’t know how to load .fx files in CustomMaterial. I try to find some examples and find these.
But it uses Class PushMaterial. What is Class PushMaterial? (‘Blackman question mark’ in my mind)
Em…I’m confused when I face these Classes. Maybe I miss something important.

2

Hello and welcome!

This should do the job:

image

There are other ways to pass the shaders. Have a look at the docs:

1 Like
3

Maybe material plugins can help you (new in 5.0):

3 Likes
4

@roland Thanks for your reply. I am using the Shader Material. I find the Textures and Uniform how to pass in this document. But how to pass the Defines from javascript code after has created the shadermater.

What’s more, how to comment on the code in .fx file. I used two slashes but it didn’t work.

1 Like
5

Em. I’m using BJS version 4.2.1

6

@sknightq the defines will be part of the constructor in this case. so you can try to update with mat.options.defines and I guess it might work

7

You are a pretty kind man! mat.options.defines works well in some simple examples.
But I have another question. I find some examples using class MaterialDefines to control defines. In my understanding, define in the GLSL file is just a flag to control precompile status, which doesn’t rely on its value whether true or false. But I find the example that why the define to set value true or false?

  if (defines.MTOON_DEBUG_NORMAL !== true) {
      defines.MTOON_DEBUG_NORMAL = true;
      defines.MTOON_DEBUG_LITSHADERATE = false;
      defines.markAsUnprocessed();
  }
1 Like
8

if they are true they will be added in the shader header and not if they are false.

1 Like
9

Hello @sknightq just checking in, was your question answered? :smiley: