Custom inspector properties for ShaderMaterial uniforms

Heya, I wonder if a way to add a ShaderMaterial’s uniforms to the material’s inspector tab could be added? Already it’s supported for nodes to have custom inspector properties, so maybe something similar to allow a ShaderMaterial subclass to specify which uniforms to sync? :thinking:

1 Like

I do not think we should expose uniforms directly but might be cool to display all the serializable properties ??? so it is easy to expose and still a 1 1 mapping between the material properties and the inspector ?

For example if I just copied the implementation for Node’s custom inspector properties then the user code for the property could be like below. It’s just copied from the node example from the inspector docs, but the setter calls this.setColor3() instead of setting diffuseColor on the material.

set color(value) {
    this._color = value;        
    this.setColor3("color", value);
    // this._mesh.material.diffuseColor = value;

get color() {
    return this._color;

In that case I would probably also create a helper function to automagically create the properties based on the name and type specified in the inspectableCustomProperties array. That part could always live in user code thou, maybe in an example in the doc?

But I’m not super sure if you’re suggesting something different from the existing node implementation thou or what differences you would want? :thinking:

1 Like

Yup exactly that, dealing with properties like you have here for color and not directly exposing the shader uniform :slight_smile:

OMG I went to start implementing it but it’s already implemented. Yay! So all that’s needed is to add a Material section and example to the doc to compliment the Node section and example. :grinning: :exploding_head: I can make a little PR for that later today. :slight_smile:

1 Like

Okay here it is, I just added a little note and PG example to show that materials are supported too. :slight_smile:


Here’s the first draft of the helper function I was talking about creating earlier, to avoid the need to create the inspectable properties manually when adding a shader material’s uniforms to the Inspector.

So you can just call addUniformsToInspector() on the shader material and pass the same array of inspectableCustomProperties as you would normally set manually and it will automagically create all the properties needed to extend the Inspector for you. I’m also working on a helper function to add a save button for them, but that one’s even hackier LOL. :wink: