Create material as an asset

[vincentfretin]

I'm thinking of creating a material as an asset that would really be a mixin with id and material component on it, and adding an UI to edit the material component on the mixin, that way I can use the same material on several entities and they update right away, without copying the material changes for each entity.

How to detect if a mixin is an asset material:

const mixin = document.getElementById('purple');
const isMaterial = mixin.attributes.length === 2 && mixin.attributes.id && mixin.attributes.material;

Note there is that proposal to add a material asset type in aframe:

• Materials as assets and property type aframevr/aframe#5457

But here we'll be just using mixin for now, that's what we have today.

Some notes when I did a quick experiment:

with

    <a-mixin id="purple" material="color: purple"></a-mixin>

AFRAME.INSPECTOR.execute('entitycreate', {element: 'a-box', mixin: 'purple'})

produces in the DOM

<a-box id="OQI0epYQNueIh3ygxEopK" mixin="purple" material geometry></a-box>

But changing the mixin with a different color, it doesn't work, we need to explicitly remove the material component, and change the mixin.
See aframe issue related to that:

• Component/attribute inheritance and precedence for primitives aframevr/aframe#5484

Also related to changing mixin, in 3dstreet we also had that
https://github.com/3DStreet/3dstreet/blob/7754bcba46c9460fa3dd7700ec9b2840879d7c1c/src/editor/lib/commands/EntityUpdateCommand.js#L114-L123
to force removing the gltf-model component that came from a mixin, then switching to a different mixin to load another gltf-model.
But here because it's a primitive? it seems that workaround doesn't work, we still need to remove the material component explicitly when changing the mixin.

If we do an UI to replace a material component by a mixin with material, we need to remove the material component before setting the mixin, something like that:

    AFRAME.INSPECTOR.execute("multi", [
      [
        "assetcreate",
        {
          id: "material-purple",
          type: "mixin"
          components: {material: "color: purple"},
        },
      ],
      [
        "componentremove",
        {
          entity: entityId,
          component: "material",
        },
      ],
      [
        "entityupdate",
        {
          entity: entityId,
          component: "mixin",
          value: "material-purple",
        },
      ],
    ]);

[vincentfretin]

Instead of using the generic Component.js that iterate over the material properties on the right sidebar, we need a specific UI to select one of the existing asset material or create a new one, and edit the asset material properties.