Description:
The current approach for materials requires materials to be defined per entity, without an easy way to re-use them. While mixins can be used to avoid the repetition in the HTML, it brings little to no runtime benefits. Instead, a material asset type could be introduced along with an accompanying property type. This would allow materials to be re-used and also passed to components.

Pseudo-code:

<a-assets>
  <a-material id="wood" shader="phong" src="url(./wood.png)"></a-material>
  <a-material id="red" shader="flat" color="red"></a-material>
</a-assets>

<a-box material="material: #wood"></a-box>
<a-entity hands-tracking-controls="hand: right; handMaterial: #red"></a-entity>

This would bring quite a few benefits as well as open the door to various possible optimizations:

• All defined materials and textures can be compiled/uploaded during the loading screen, minimizing stutters at runtime
• Memory usage can be reduced by re-using the same material instance
• When used throughout a scene, the sorting could take material ID in account (default behaviour in vanilla Three.js), reducing program switches
• Would potentially introduce a non-intrusive way to use BatchedMesh (Consider an A-Frame API to expose THREE.BatchedMesh  #5396), as it requires the same material to be used
• Components can expose a single material property instead of individual properties for each tunable material property, allowing for greater flexibility (for example, changes like this would no longer be needed)
• Third party libraries could create materials on the fly that can be applied through common A-Frame approaches instead of Three.js, without having to register a shader for it.

To maintain backwards compatibility, the material component can still create materials on the fly, making it an opt-in feature for users to use. For components that would normally use a single color property and now a material property, it might be desirable to have a short-hand to also create "in-line" materials in properties, e.g.:

<a-entity hands-tracking-controls="hand: right; handMaterial: material(color: red)"></a-entity>

Alternatively a component can of-course continue to expose both the individual properties besides a material property.

Feedback and suggestions are welcome.