How to serialize (extended) materials

[pailhead]

Serialization has been cited as a pain point when working with extended materials. Properties of built in materials are referenced in various places in the core. Since toJSON lives in Material.js it has to know about all the built-in material properties.

When toJSON is called on MeshStandardMaterial it contains all the properties that are available by default (color, depthFunc, etc), properties that i set optionally (roughnessMap, transparent, etc).

I'm not sure if extensions should be serialized in the first place, if it's specific only to the known list of properties here:
https://github.com/mrdoob/three.js/blob/dev/src/materials/Material.js#L163-L265

However, if one did want to omit some properties and include others, it could be done in several ways.

userData could be overloaded with anything, since it's kind of a JSON within a JSON. This is the most generic interface i can think of, since it basically allows anyone to write any custom format in there.

Or, the same pattern could be applied from Material.toJSON - name specific properties you want serialized, and tell three how to serialize it.

I've made a demo where i've extended the MeshStandardMaterial to use the specular gloss lighting model. Such a material no longer uses roughness nor roughnessMap so i don't need them in the JSON. Two new properties that replace these though, glossiness and glossinessMap i do need the information on - i need to know which float was set for glossiness and which texture for the map.

http://dusanbosnjak.com/test/webGL/three-material-includes/

If you click serialize it will generate this output:

https://github.com/pailhead/three.js/blob/material-includes-2/examples/serializedResult.json

The changes are these:

- "roughness": 1,  <- by default, roughnessMap is ommitted if null though
- "metalness": 1,
+ "specular": 16777215,
+ "specularMap": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
+ "glossiness": 1,
+ "glossinessMap": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
"metadata":{
+  "extensions": {
+      "isSpecGlossExtended": true,
+  }

How should one go about this problem, and which pitfalls could be considered?

[mrdoob]

#14245 (comment)