# Custom inspector properties for ShaderMaterial uniforms

**URL:** <https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921>\
**Category:** Feature requests\
**Tags:** material\
**Created:** [October 18, 2022, 10:58pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921 "2022-10-18T22:58:57Z")\
**Posts on this page:** 8\
**Page:** 1

<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:** [October 18, 2022, 10:58pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/1 "2022-10-18T22:58:57Z")

</div>

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? 🤔

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 12:45pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/2 "2022-10-19T12:45:39Z")

</div>

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 ?

---

<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:** [October 19, 2022, 5:20pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/3 "2022-10-19T17:20:44Z")

</div>

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](https://doc.babylonjs.com/toolsAndResources/inspector#extensibility) from the inspector docs, but the setter calls this.setColor3() instead of setting diffuseColor on the material.

```auto
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? 🤔

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 19, 2022, 5:52pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/4 "2022-10-19T17:52:21Z")

</div>

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

---

<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:** [October 19, 2022, 6:49pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/6 "2022-10-19T18:49:48Z")

</div>

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. 😀 🤯 I can make a little PR for that later today. 🙂

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

---

<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:** [October 19, 2022, 9:32pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/7 "2022-10-19T21:32:29Z")

</div>

Okay here it is, I just added a little note and PG [example](https://playground.babylonjs.com/#LQF5QR#52) to show that materials are supported too. 🙂

> <https://github.com/BabylonJS/Documentation/pull/684>
>
> Update the doc on Inspector Extensibility with an example using a material to sh…ow that both nodes \*\*and\*\* materials are supported. :)
> 
> I'm not sure what image if any to use for the PG link thou, should I just take a screenshot of the PG?
> 
> Also I thought it might look better with an empty line between the first PG link and the code block right after it, but I'm not sure how to add that spacing if it's needed...
> 
> Forum: https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/6
> The new PG example that would be added: https://playground.babylonjs.com/#LQF5QR#52

---

<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:** [October 21, 2022, 7:59pm UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/8 "2022-10-21T19:59:34Z")

</div>

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. 😉

> **[Babylon.js Playground](https://playground.babylonjs.com/#08YKKJ)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [May 3, 2023, 6:03am UTC](https://forum.babylonjs.com/t/custom-inspector-properties-for-shadermaterial-uniforms/34921/9 "2023-05-03T06:03:48Z")

</div>

Thanks @Blake

Life saving helper. 🤣