Materials as assets and property type

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 (#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.

The issue does not name implementation files or tests. Start by tracing the existing material component, asset handling, and component property systems, then review how Three.js materials are created and shared. Done means reusable material assets and properties work with components while preserving the current material behavior.