migrate materials from userData to materialData

libraries/entities/src/EntityItemProperties.cpp

@@ -363,6 +363,7 @@ EntityPropertyFlags EntityItemProperties::getChangedProperties() const {
     CHECK_PROPERTY_CHANGE(PROP_MATERIAL_MAPPING_POS, materialMappingPos);
     CHECK_PROPERTY_CHANGE(PROP_MATERIAL_MAPPING_SCALE, materialMappingScale);
     CHECK_PROPERTY_CHANGE(PROP_MATERIAL_MAPPING_ROT, materialMappingRot);
+    CHECK_PROPERTY_CHANGE(PROP_MATERIAL_DATA, materialData);
 
     // Certifiable Properties
     CHECK_PROPERTY_CHANGE(PROP_ITEM_NAME, itemName);
@@ -1376,6 +1377,7 @@ QScriptValue EntityItemProperties::copyToScriptValue(QScriptEngine* engine, bool
         COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_MATERIAL_MAPPING_POS, materialMappingPos);
         COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_MATERIAL_MAPPING_SCALE, materialMappingScale);
         COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_MATERIAL_MAPPING_ROT, materialMappingRot);
+        COPY_PROPERTY_TO_QSCRIPTVALUE(PROP_MATERIAL_DATA, materialData);
     }
 
     /**jsdoc
@@ -1539,6 +1541,7 @@ void EntityItemProperties::copyFromScriptValue(const QScriptValue& object, bool
     COPY_PROPERTY_FROM_QSCRIPTVALUE(materialMappingPos, glmVec2, setMaterialMappingPos);
     COPY_PROPERTY_FROM_QSCRIPTVALUE(materialMappingScale, glmVec2, setMaterialMappingScale);
     COPY_PROPERTY_FROM_QSCRIPTVALUE(materialMappingRot, float, setMaterialMappingRot);
+    COPY_PROPERTY_FROM_QSCRIPTVALUE(materialData, QString, setMaterialData);
 
     // Certifiable Properties
     COPY_PROPERTY_FROM_QSCRIPTVALUE(itemName, QString, setItemName);
@@ -1902,6 +1905,7 @@ void EntityItemProperties::entityPropertyFlagsFromScriptValue(const QScriptValue
         ADD_PROPERTY_TO_MAP(PROP_MATERIAL_MAPPING_POS, MaterialMappingPos, materialMappingPos, glmVec2);
         ADD_PROPERTY_TO_MAP(PROP_MATERIAL_MAPPING_SCALE, MaterialMappingScale, materialMappingScale, glmVec2);
         ADD_PROPERTY_TO_MAP(PROP_MATERIAL_MAPPING_ROT, MaterialMappingRot, materialMappingRot, float);
+        ADD_PROPERTY_TO_MAP(PROP_MATERIAL_DATA, MaterialData, materialData, QString);
 
         // Certifiable Properties
         ADD_PROPERTY_TO_MAP(PROP_ITEM_NAME, ItemName, itemName, QString);
@@ -2298,6 +2302,7 @@ OctreeElement::AppendState EntityItemProperties::encodeEntityEditPacket(PacketTy
                 APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_POS, properties.getMaterialMappingPos());
                 APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_SCALE, properties.getMaterialMappingScale());
                 APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_ROT, properties.getMaterialMappingRot());
+                APPEND_ENTITY_PROPERTY(PROP_MATERIAL_DATA, properties.getMaterialData());
             }
 
             APPEND_ENTITY_PROPERTY(PROP_NAME, properties.getName());
@@ -2666,6 +2671,7 @@ bool EntityItemProperties::decodeEntityEditPacket(const unsigned char* data, int
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_MATERIAL_MAPPING_POS, glmVec2, setMaterialMappingPos);
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_MATERIAL_MAPPING_SCALE, glmVec2, setMaterialMappingScale);
         READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_MATERIAL_MAPPING_ROT, float, setMaterialMappingRot);
+        READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_MATERIAL_DATA, QString, setMaterialData);
     }
 
     READ_ENTITY_PROPERTY_TO_PROPERTIES(PROP_NAME, QString, setName);
@@ -2849,6 +2855,7 @@ void EntityItemProperties::markAllChanged() {
     _materialMappingPosChanged = true;
     _materialMappingScaleChanged = true;
     _materialMappingRotChanged = true;
+    _materialDataChanged = true;
 
     // Certifiable Properties
     _itemNameChanged = true;
@@ -3200,6 +3207,9 @@ QList<QString> EntityItemProperties::listChangedProperties() {
     if (materialMappingRotChanged()) {
         out += "materialMappingRot";
     }
+    if (materialDataChanged()) {
+        out += "materialData";
+    }
 
     // Certifiable Properties
     if (itemNameChanged()) {

libraries/entities/src/EntityItemProperties.h

@@ -230,6 +230,7 @@ public:
     DEFINE_PROPERTY_REF(PROP_MATERIAL_MAPPING_POS, MaterialMappingPos, materialMappingPos, glmVec2, glm::vec2(0, 0));
     DEFINE_PROPERTY_REF(PROP_MATERIAL_MAPPING_SCALE, MaterialMappingScale, materialMappingScale, glmVec2, glm::vec2(1, 1));
     DEFINE_PROPERTY_REF(PROP_MATERIAL_MAPPING_ROT, MaterialMappingRot, materialMappingRot, float, 0);
+    DEFINE_PROPERTY_REF(PROP_MATERIAL_DATA, MaterialData, materialData, QString, "");
 
     // Certifiable Properties - related to Proof of Purchase certificates
     DEFINE_PROPERTY_REF(PROP_ITEM_NAME, ItemName, itemName, QString, ENTITY_ITEM_DEFAULT_ITEM_NAME);

libraries/entities/src/EntityPropertyFlags.h

@@ -240,6 +240,7 @@ enum EntityPropertyList {
     PROP_MATERIAL_MAPPING_POS,
     PROP_MATERIAL_MAPPING_SCALE,
     PROP_MATERIAL_MAPPING_ROT,
+    PROP_MATERIAL_DATA,
 
     ////////////////////////////////////////////////////////////////////////////////////////////////////
     // ATTENTION: add new properties to end of list just ABOVE this line

libraries/entities/src/EntityTree.cpp

@@ -2376,6 +2376,30 @@ bool EntityTree::readFromMap(QVariantMap& map) {
             }
         }
 
+        // Convert old materials so that they use materialData instead of userData
+        if (contentVersion < (int)EntityVersion::MaterialData && properties.getType() == EntityTypes::EntityType::Material) {
+            if (properties.getMaterialURL().startsWith("userData")) {
+                QString materialURL = properties.getMaterialURL();
+                properties.setMaterialURL(materialURL.replace("userData", "materialData"));
+
+                QJsonObject userData = QJsonDocument::fromJson(properties.getUserData().toUtf8()).object();
+                QJsonObject materialData;
+                QJsonValue materialVersion = userData["materialVersion"];
+                if (!materialVersion.isNull()) {
+                    materialData.insert("materialVersion", materialVersion);
+                    userData.remove("materialVersion");
+                }
+                QJsonValue materials = userData["materials"];
+                if (!materials.isNull()) {
+                    materialData.insert("materials", materials);
+                    userData.remove("materials");
+                }
+
+                properties.setMaterialData(QJsonDocument(materialData).toJson());
+                properties.setUserData(QJsonDocument(userData).toJson());
+            }
+        }
+
         EntityItemPointer entity = addEntity(entityItemID, properties);
         if (!entity) {
             qCDebug(entities) << "adding Entity failed:" << entityItemID << properties.getType();

libraries/entities/src/MaterialEntityItem.cpp

@@ -36,6 +36,7 @@ EntityItemProperties MaterialEntityItem::getProperties(EntityPropertyFlags desir
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(materialMappingPos, getMaterialMappingPos);
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(materialMappingScale, getMaterialMappingScale);
     COPY_ENTITY_PROPERTY_TO_PROPERTIES(materialMappingRot, getMaterialMappingRot);
+    COPY_ENTITY_PROPERTY_TO_PROPERTIES(materialData, getMaterialData);
     return properties;
 }
 
@@ -49,6 +50,7 @@ bool MaterialEntityItem::setProperties(const EntityItemProperties& properties) {
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(materialMappingPos, setMaterialMappingPos);
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(materialMappingScale, setMaterialMappingScale);
     SET_ENTITY_PROPERTY_FROM_PROPERTIES(materialMappingRot, setMaterialMappingRot);
+    SET_ENTITY_PROPERTY_FROM_PROPERTIES(materialData, setMaterialData);
 
     if (somethingChanged) {
         bool wantDebug = false;
@@ -78,6 +80,7 @@ int MaterialEntityItem::readEntitySubclassDataFromBuffer(const unsigned char* da
     READ_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_POS, glm::vec2, setMaterialMappingPos);
     READ_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_SCALE, glm::vec2, setMaterialMappingScale);
     READ_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_ROT, float, setMaterialMappingRot);
+    READ_ENTITY_PROPERTY(PROP_MATERIAL_DATA, QString, setMaterialData);
 
     return bytesRead;
 }
@@ -93,6 +96,7 @@ EntityPropertyFlags MaterialEntityItem::getEntityProperties(EncodeBitstreamParam
     requestedProperties += PROP_MATERIAL_MAPPING_POS;
     requestedProperties += PROP_MATERIAL_MAPPING_SCALE;
     requestedProperties += PROP_MATERIAL_MAPPING_ROT;
+    requestedProperties += PROP_MATERIAL_DATA;
     return requestedProperties;
 }
 
@@ -112,6 +116,7 @@ void MaterialEntityItem::appendSubclassData(OctreePacketData* packetData, Encode
     APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_POS, getMaterialMappingPos());
     APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_SCALE, getMaterialMappingScale());
     APPEND_ENTITY_PROPERTY(PROP_MATERIAL_MAPPING_ROT, getMaterialMappingRot());
+    APPEND_ENTITY_PROPERTY(PROP_MATERIAL_DATA, getMaterialData());
 }
 
 void MaterialEntityItem::debugDump() const {
@@ -145,9 +150,9 @@ std::shared_ptr<NetworkMaterial> MaterialEntityItem::getMaterial() const {
     }
 }
 
-void MaterialEntityItem::setMaterialURL(const QString& materialURLString, bool userDataChanged) {
+void MaterialEntityItem::setMaterialURL(const QString& materialURLString, bool materialDataChanged) {
-    bool usingUserData = materialURLString.startsWith("userData");
+    bool usingMaterialData = materialDataChanged || materialURLString.startsWith("materialData");
-    if (_materialURL != materialURLString || (usingUserData && userDataChanged)) {
+    if (_materialURL != materialURLString || (usingMaterialData && materialDataChanged)) {
         removeMaterial();
         _materialURL = materialURLString;
 
@@ -156,8 +161,8 @@ void MaterialEntityItem::setMaterialURL(const QString& materialURLString, bool u
             _currentMaterialName = split.last().toStdString();
         }
 
-        if (usingUserData) {
+        if (usingMaterialData) {
-            _parsedMaterials = NetworkMaterialResource::parseJSONMaterials(QJsonDocument::fromJson(getUserData().toUtf8()), materialURLString);
+            _parsedMaterials = NetworkMaterialResource::parseJSONMaterials(QJsonDocument::fromJson(getMaterialData().toUtf8()), materialURLString);
 
             // Since our material changed, the current name might not be valid anymore, so we need to update
             setCurrentMaterialName(_currentMaterialName);
@@ -191,11 +196,11 @@ void MaterialEntityItem::setCurrentMaterialName(const std::string& currentMateri
     }
 }
 
-void MaterialEntityItem::setUserData(const QString& userData) {
+void MaterialEntityItem::setMaterialData(const QString& materialData) {
-    if (_userData != userData) {
+    if (_materialData != materialData) {
-        EntityItem::setUserData(userData);
+        _materialData = materialData;
-        if (_materialURL.startsWith("userData")) {
+        if (_materialURL.startsWith("materialData")) {
-            // Trigger material update when user data changes
+            // Trigger material update when material data changes
             setMaterialURL(_materialURL, true);
         }
     }

libraries/entities/src/MaterialEntityItem.h

@@ -53,7 +53,7 @@ public:
     virtual void setUnscaledDimensions(const glm::vec3& value) override;
 
     QString getMaterialURL() const { return _materialURL; }
-    void setMaterialURL(const QString& materialURLString, bool userDataChanged = false);
+    void setMaterialURL(const QString& materialURLString, bool materialDataChanged = false);
 
     void setCurrentMaterialName(const std::string& currentMaterialName);
 
@@ -73,9 +73,11 @@ public:
     float getMaterialMappingRot() const { return _materialMappingRot; }
     void setMaterialMappingRot(const float& materialMappingRot);
 
+    QString getMaterialData() const { return _materialData; }
+    void setMaterialData(const QString& materialData);
+
     std::shared_ptr<NetworkMaterial> getMaterial() const;
 
-    void setUserData(const QString& userData) override;
     void setParentID(const QUuid& parentID) override;
     void setClientOnly(bool clientOnly) override;
     void setOwningAvatarID(const QUuid& owningAvatarID) override;
@@ -87,7 +89,7 @@ public:
     void preDelete() override;
 
 private:
-    // URL for this material.  Currently, only JSON format is supported.  Set to "userData" to use the user data to live edit a material.
+    // URL for this material.  Currently, only JSON format is supported.  Set to "materialData" to use the material data to live edit a material.
     // The following fields are supported in the JSON:
     // materialVersion: a uint for the version of this network material (currently, only 1 is supported)
     // materials, which is either an object or an array of objects, each with the following properties:
@@ -117,6 +119,7 @@ private:
     glm::vec2 _materialMappingScale { 1, 1 };
     // How much to rotate this material within its parent's UV-space (degrees)
     float _materialMappingRot { 0 };
+    QString _materialData;
 
     NetworkMaterialResourcePointer _networkMaterial;
     NetworkMaterialResource::ParsedMaterials _parsedMaterials;

libraries/networking/src/udt/PacketHeaders.cpp

@@ -30,7 +30,7 @@ PacketVersion versionForPacketType(PacketType packetType) {
         case PacketType::EntityEdit:
         case PacketType::EntityData:
         case PacketType::EntityPhysics:
-            return static_cast<PacketVersion>(EntityVersion::ShadowControl);
+            return static_cast<PacketVersion>(EntityVersion::MaterialData);
         case PacketType::EntityQuery:
             return static_cast<PacketVersion>(EntityQueryPacketVersion::RemovedJurisdictions);
         case PacketType::AvatarIdentity:

libraries/networking/src/udt/PacketHeaders.h

@@ -231,7 +231,8 @@ enum class EntityVersion : PacketVersion {
     ZoneStageRemoved,
     SoftEntities,
     MaterialEntities,
-    ShadowControl
+    ShadowControl,
+    MaterialData
 };
 
 enum class EntityScriptCallMethodVersion : PacketVersion {

scripts/system/edit.js

@@ -409,6 +409,12 @@ var toolBar = (function () {
             //    default:
             //        shapeType = "uv";
             //}
+            var materialData = "";
+            if (materialURL.startsWith("materialData")) {
+                materialData = JSON.stringify({
+                    "materials": {}
+                })
+            }
 
             var DEFAULT_LAYERED_MATERIAL_PRIORITY = 1;
             if (materialURL) {
@@ -416,7 +422,8 @@ var toolBar = (function () {
                     type: "Material",
                     materialURL: materialURL,
                     //materialMappingMode: materialMappingMode,
-                    priority: DEFAULT_LAYERED_MATERIAL_PRIORITY
+                    priority: DEFAULT_LAYERED_MATERIAL_PRIORITY,
+                    materialData: materialData
                 });
             }
         }
@@ -2047,7 +2054,7 @@ var PropertiesTool = function (opts) {
             parentSelectedEntities();
         } else if (data.type === 'unparent') {
             unparentSelectedEntities();
-        } else if (data.type === 'saveUserData') {
+        } else if (data.type === 'saveUserData' || data.type === 'saveMaterialData') {
             //the event bridge and json parsing handle our avatar id string differently.
             var actualID = data.id.split('"')[1];
             Entities.editEntity(actualID, data.properties);

scripts/system/html/css/edit-style.css

@@ -1387,12 +1387,14 @@ input#reset-to-natural-dimensions {
     margin-top: 48px;
 }
 
-#userdata-clear{
+#userdata-clear,
+#materialdata-clear {
     margin-bottom: 10px;
 }
 
 
-#static-userdata {
+#static-userdata,
+#static-materialData {
     display: none;
     z-index: 99;
     position: absolute;
@@ -1403,7 +1405,8 @@ input#reset-to-natural-dimensions {
     background-color: #2e2e2e;
 }
 
-#userdata-saved {
+#userdata-saved,
+#materialData-saved {
     margin-top:5px;
     font-size:16px;
     display:none;

scripts/system/html/entityProperties.html

@@ -781,6 +781,20 @@
                     <label for="property-material-url">Material URL</label>
                     <input type="text" id="property-material-url">
                 </div>
+
+                <div class="property textarea">
+                    <label for="property-material-data">Material data</label>
+                    <br><br>
+                    <div class="row">
+                        <input type="button" class="red" id="materialdata-clear" value="Clear Material Data">
+                        <input type="button" class="blue" id="materialdata-new-editor" value="Edit as JSON">
+                        <input disabled type="button" class="black" id="materialdata-save" value="Save Material Data">
+                        <span id="materialdata-saved" visible="false">Saved!</span>
+                    </div>
+                    <div id="static-naterialdata"></div>
+                    <div id="materialdata-editor"></div>
+                    <textarea id="property-material-data"></textarea>
+                </div>
             </fieldset>
             <fieldset class="minor">
                 <div class="material-group material-section property text" id="property-parent-material-id-string-container">

scripts/system/html/js/entityProperties.js

@@ -66,6 +66,7 @@ function enableProperties() {
 
     if (elLocked.checked === false) {
         removeStaticUserData();
+        removeStaticMaterialData();
     }
 }
 
@@ -78,8 +79,13 @@ function disableProperties() {
     }
     var elLocked = document.getElementById("property-locked");
 
-    if ($('#userdata-editor').css('display') === "block" && elLocked.checked === true) {
+    if (elLocked.checked === true) {
-        showStaticUserData();
+        if ($('#userdata-editor').css('display') === "block") {
+            showStaticUserData();
+        }
+        if ($('#materialdata-editor').css('display') === "block") {
+            showStaticMaterialData();
+        }
     }
 }
 
@@ -356,15 +362,139 @@ function userDataChanger(groupName, keyName, values, userDataElement, defaultVal
     multiDataUpdater(groupName, val, userDataElement, def);
 }
 
+function setMaterialDataFromEditor(noUpdate) {
+    var json = null;
+    try {
+        json = materialEditor.get();
+    } catch (e) {
+        alert('Invalid JSON code - look for red X in your code ', +e);
+    }
+    if (json === null) {
+        return;
+    } else {
+        var text = materialEditor.getText();
+        if (noUpdate === true) {
+            EventBridge.emitWebEvent(
+                JSON.stringify({
+                    id: lastEntityID,
+                    type: "saveMaterialData",
+                    properties: {
+                        materialData: text
+                    }
+                })
+            );
+            return;
+        } else {
+            updateProperty('materialData', text);
+        }
+    }
+}
+
 function setTextareaScrolling(element) {
     var isScrolling = element.scrollHeight > element.offsetHeight;
     element.setAttribute("scrolling", isScrolling ? "true" : "false");
 }
 
 
+var materialEditor = null;
+
+function createJSONMaterialEditor() {
+    var container = document.getElementById("materialdata-editor");
+    var options = {
+        search: false,
+        mode: 'tree',
+        modes: ['code', 'tree'],
+        name: 'materialData',
+        onModeChange: function() {
+            $('.jsoneditor-poweredBy').remove();
+        },
+        onError: function(e) {
+            alert('JSON editor:' + e);
+        },
+        onChange: function() {
+            var currentJSONString = materialEditor.getText();
+
+            if (currentJSONString === '{"":""}') {
+                return;
+            }
+            $('#materialdata-save').attr('disabled', false);
+
+
+        }
+    };
+    materialEditor = new JSONEditor(container, options);
+}
+
+function hideNewJSONMaterialEditorButton() {
+    $('#materialdata-new-editor').hide();
+}
+
+function showSaveMaterialDataButton() {
+    $('#materialdata-save').show();
+}
+
+function hideSaveMaterialDataButton() {
+    $('#materialdata-save').hide();
+}
+
+function showNewJSONMaterialEditorButton() {
+    $('#materialdata-new-editor').show();
+}
+
+function showMaterialDataTextArea() {
+    $('#property-material-data').show();
+}
+
+function hideMaterialDataTextArea() {
+    $('#property-material-data').hide();
+}
+
+function showStaticMaterialData() {
+    if (materialEditor !== null) {
+        $('#static-materialdata').show();
+        $('#static-materialdata').css('height', $('#materialdata-editor').height());
+        $('#static-materialdata').text(materialEditor.getText());
+    }
+}
+
+function removeStaticMaterialData() {
+    $('#static-materialdata').hide();
+}
+
+function setMaterialEditorJSON(json) {
+    materialEditor.set(json);
+    if (materialEditor.hasOwnProperty('expandAll')) {
+        materialEditor.expandAll();
+    }
+}
+
+function getMaterialEditorJSON() {
+    return materialEditor.get();
+}
+
+function deleteJSONMaterialEditor() {
+    if (materialEditor !== null) {
+        materialEditor.destroy();
+        materialEditor = null;
+    }
+}
+
+var savedMaterialJSONTimer = null;
+
+function saveJSONMaterialData(noUpdate) {
+    setMaterialDataFromEditor(noUpdate);
+    $('#materialdata-saved').show();
+    $('#materialdata-save').attr('disabled', true);
+    if (savedMaterialJSONTimer !== null) {
+        clearTimeout(savedMaterialJSONTimer);
+    }
+    savedMaterialJSONTimer = setTimeout(function() {
+        $('#materialdata-saved').hide();
+
+    }, EDITOR_TIMEOUT_DURATION);
+}
+
 var editor = null;
-var editorTimeout = null;
-var lastJSONString = null;
 
 function createJSONEditor() {
     var container = document.getElementById("userdata-editor");
@@ -395,11 +525,6 @@ function createJSONEditor() {
 
 function hideNewJSONEditorButton() {
     $('#userdata-new-editor').hide();
-
-}
-
-function hideClearUserDataButton() {
-    $('#userdata-clear').hide();
 }
 
 function showSaveUserDataButton() {
@@ -408,17 +533,10 @@ function showSaveUserDataButton() {
 
 function hideSaveUserDataButton() {
     $('#userdata-save').hide();
-
 }
 
 function showNewJSONEditorButton() {
     $('#userdata-new-editor').show();
-
-}
-
-function showClearUserDataButton() {
-    $('#userdata-clear').show();
-
 }
 
 function showUserDataTextArea() {
@@ -446,7 +564,6 @@ function setEditorJSON(json) {
     if (editor.hasOwnProperty('expandAll')) {
         editor.expandAll();
     }
-
 }
 
 function getEditorJSON() {
@@ -484,12 +601,15 @@ function bindAllNonJSONEditorElements() {
         // TODO FIXME: (JSHint) Functions declared within loops referencing 
         //             an outer scoped variable may lead to confusing semantics.
         field.on('focus', function(e) {
-            if (e.target.id === "userdata-new-editor" || e.target.id === "userdata-clear") {
+            if (e.target.id === "userdata-new-editor" || e.target.id === "userdata-clear" || e.target.id === "materialdata-new-editor" || e.target.id === "materialdata-clear") {
                 return;
             } else {
                 if ($('#userdata-editor').css('height') !== "0px") {
                     saveJSONUserData(true);
                 }
+                if ($('#materialdata-editor').css('height') !== "0px") {
+                    saveJSONMaterialData(true);
+                }
             }
         });
     }
@@ -652,6 +772,10 @@ function loaded() {
         var elMaterialMappingScaleX = document.getElementById("property-material-mapping-scale-x");
         var elMaterialMappingScaleY = document.getElementById("property-material-mapping-scale-y");
         var elMaterialMappingRot = document.getElementById("property-material-mapping-rot");
+        var elMaterialData = document.getElementById("property-material-data");
+        var elClearMaterialData = document.getElementById("materialdata-clear");
+        var elSaveMaterialData = document.getElementById("materialdata-save");
+        var elNewJSONMaterialEditor = document.getElementById('materialdata-new-editor');
 
         var elImageURL = document.getElementById("property-image-url");
 
@@ -772,9 +896,15 @@ function loaded() {
                 } else if (data.type === "update") {
 
                     if (!data.selections || data.selections.length === 0) {
-                        if (editor !== null && lastEntityID !== null) {
+                        if (lastEntityID !== null) {
-                            saveJSONUserData(true);
+                            if (editor !== null) {
-                            deleteJSONEditor();
+                                saveJSONUserData(true);
+                                deleteJSONEditor();
+                            }
+                            if (materialEditor !== null) {
+                                saveJSONMaterialData(true);
+                                deleteJSONMaterialEditor();
+                            }
                         }
                         elTypeIcon.style.display = "none";
                         elType.innerHTML = "<i>No selection</i>";
@@ -783,6 +913,7 @@ function loaded() {
                         disableProperties();
                     } else if (data.selections && data.selections.length > 1) {
                         deleteJSONEditor();
+                        deleteJSONMaterialEditor();
                         var selections = data.selections;
 
                         var ids = [];
@@ -815,8 +946,13 @@ function loaded() {
                     } else {
 
                         properties = data.selections[0].properties;
-                        if (lastEntityID !== '"' + properties.id + '"' && lastEntityID !== null && editor !== null) {
+                        if (lastEntityID !== '"' + properties.id + '"' && lastEntityID !== null) {
-                            saveJSONUserData(true);
+                            if (editor !== null) {
+                                saveJSONUserData(true);
+                            }
+                            if (materialEditor !== null) {
+                                saveJSONMaterialData(true);
+                            }
                         }
 
                         var doSelectElement = lastEntityID === '"' + properties.id + '"';
@@ -993,6 +1129,28 @@ function loaded() {
                             hideNewJSONEditorButton();
                         }
 
+                        var materialJson = null;
+                        try {
+                            materialJson = JSON.parse(properties.materialData);
+                        } catch (e) {
+                            // normal text
+                            deleteJSONMaterialEditor();
+                            elMaterialData.value = properties.materialData;
+                            showMaterialDataTextArea();
+                            showNewJSONMaterialEditorButton();
+                            hideSaveMaterialDataButton();
+                        }
+                        if (materialJson !== null) {
+                            if (materialEditor === null) {
+                                createJSONMaterialEditor();
+                            }
+
+                            setMaterialEditorJSON(materialJson);
+                            showSaveMaterialDataButton();
+                            hideMaterialDataTextArea();
+                            hideNewJSONMaterialEditorButton();
+                        }
+
                         elHyperlinkHref.value = properties.href;
                         elDescription.value = properties.description;
 
@@ -1200,6 +1358,7 @@ function loaded() {
                         } else {
                             enableProperties();
                             elSaveUserData.disabled = true;
+                            elSaveMaterialData.disabled = true;
                         }
 
                         var activeElement = document.activeElement;
@@ -1384,6 +1543,31 @@ function loaded() {
             showSaveUserDataButton();
         });
 
+        elClearMaterialData.addEventListener("click", function() {
+            deleteJSONMaterialEditor();
+            elMaterialData.value = "";
+            showMaterialDataTextArea();
+            showNewJSONMaterialEditorButton();
+            hideSaveMaterialDataButton();
+            updateProperty('materialData', elMaterialData.value);
+        });
+
+        elSaveMaterialData.addEventListener("click", function() {
+            saveJSONMaterialData(true);
+        });
+
+        elMaterialData.addEventListener('change', createEmitTextPropertyUpdateFunction('materialData'));
+
+        elNewJSONMaterialEditor.addEventListener('click', function() {
+            deleteJSONMaterialEditor();
+            createJSONMaterialEditor();
+            var data = {};
+            setMaterialEditorJSON(data);
+            hideMaterialDataTextArea();
+            hideNewJSONMaterialEditorButton();
+            showSaveMaterialDataButton();
+        });
+
         var colorChangeFunction = createEmitColorPropertyUpdateFunction(
             'color', elColorRed, elColorGreen, elColorBlue);
         elColorRed.addEventListener('change', colorChangeFunction);