From d189f70b367b7eca8d5843865d8e30b2ecddf033 Mon Sep 17 00:00:00 2001 From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com> Date: Sun, 21 Jul 2024 22:34:16 -0400 Subject: [PATCH] Support MTOON in Material Assistant Support MTOON in Material Assistant --- .../html/js/entityProperties.js | 17 +- .../html/js/materialAssistant.js | 1840 +++++++++++++++-- 2 files changed, 1736 insertions(+), 121 deletions(-) diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js index dd8d67e24d..f94f6d2ffc 100644 --- a/scripts/system/create/entityProperties/html/js/entityProperties.js +++ b/scripts/system/create/entityProperties/html/js/entityProperties.js @@ -1841,6 +1841,7 @@ let createAppTooltip = new CreateAppTooltip(); let currentSpaceMode = PROPERTY_SPACE_MODE.LOCAL; let zonesList = []; let canViewAssetURLs = false; +let maSelectedId; function createElementFromHTML(htmlString) { let elTemplate = document.createElement('template'); @@ -3613,10 +3614,9 @@ function saveMaterialData() { function openMaterialAssistant() { if (materialEditor === null) { - loadDataInMaUi({}); - } else { - loadDataInMaUi(materialEditor.getText()); + newJSONMaterialEditor(); } + loadDataInMaUi(materialEditor.getText()); $('#uiMaterialAssistant').show(); $('#properties-list').hide(); } @@ -4177,7 +4177,16 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) { const multipleSelections = currentSelections.length > 1; const hasSelectedEntityChanged = !areSetsEqual(selectedEntityIDs, previouslySelectedEntityIDs); - closeMaterialAssistant(); + if (selections.length === 1) { + if (maSelectedId !== selections[0].id) { + closeMaterialAssistant(); + } + maSelectedId = selections[0].id; + } else { + closeMaterialAssistant(); + maSelectedId = ""; + } + requestZoneList(); if (selections.length === 0) { diff --git a/scripts/system/create/entityProperties/html/js/materialAssistant.js b/scripts/system/create/entityProperties/html/js/materialAssistant.js index 02af601330..2b85eb1a38 100644 --- a/scripts/system/create/entityProperties/html/js/materialAssistant.js +++ b/scripts/system/create/entityProperties/html/js/materialAssistant.js @@ -2,7 +2,7 @@ // // Created by Alezia Kurdis on May 19th, 2022. // Copyright 2022 Vircadia contributors. -// Copyright 2022 Overte e.V. +// Copyright 2022-2024 Overte e.V. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html @@ -20,12 +20,15 @@ let maClose, maMetallic, maMetallicSlider, maMetallicMap, + maUseSpecular, maRoughnessIsActive, maRoughness, maRoughnessSlider, maRoughnessMap, + maUseGloss, maNormalMapIsActive, maNormalMap, + maUseBump, maOpacityIsActive, maOpacity, maOpacitySlider, @@ -47,9 +50,71 @@ let maClose, maScatteringMap, maOcclusionMapIsActive, maOcclusionMap, + maLightMapIsActive, + maLightMap, + maShadeIsActive, + maShadeColorPicker, + maShadeColorPickerSel, + maShadeMapIsActive, + maShadeMap, + maMatcapIsActive, + maMatcapColorPicker, + maMatcapColorPickerSel, + maMatcapMapIsActive, + maMatcapMap, + maShadingShiftIsActive, + maShadingShift, + maShadingShiftSlider, + maShadingShiftMapIsActive, + maShadingShiftMap, + maShadingToonyIsActive, + maShadingToony, + maShadingToonySlider, + maParametricRimIsActive, + maParametricRimColorPicker, + maParametricRimColorPickerSel, + maRimMapIsActive, + maRimMap, + maParametricRimFresnelPowerIsActive, + maParametricRimFresnelPower, + maParametricRimFresnelPowerSlider, + maParametricRimLiftIsActive, + maParametricRimLift, + maParametricRimLiftSlider, + maRimLightingMixIsActive, + maRimLightingMix, + maRimLightingMixSlider, +/* ############## Not yet supported, but the code is ready (commented) ################### + maOutlineWidthModeIsActive, + maOutlineWidthModeNone, + maOutlineWidthModeWorld, + maOutlineWidthModeScreen, + maOutlineWidthIsActive, + maOutlineWidth, + maOutlineWidthSlider, + maOutlineIsActive, + maOutlineColorPicker, + maOutlineColorPickerSel, +*/ + maUvAnimationMaskMapIsActive, + maUvAnimationMaskMap, + maUvAnimationScrollXSpeedIsActive, + maUvAnimationScrollXSpeed, + maUvAnimationScrollXSpeedSlider, + maUvAnimationScrollYSpeedIsActive, + maUvAnimationScrollYSpeed, + maUvAnimationScrollYSpeedSlider, + maUvAnimationRotationSpeedIsActive, + maUvAnimationRotationSpeed, + maUvAnimationRotationSpeedSlider, + maProcedural, + maAddProceduralTemplate, maCullFaceModeBack, maCullFaceModeFront, - maCullFaceModeNone; + maCullFaceModeNone, + maModelHifiPbr, + maModelVrmMtoon, + maModelHifiShaderSimple; let DEFAULT_ALBEDO = [1,1,1]; let DEFAULT_EMISSIVE = [0,0,0]; @@ -60,6 +125,25 @@ let DEFAULT_METALLIC = 0; let DEFAULT_OPACITY = 1; let DEFAULT_OPACITY_CUTOFF = 0.5; let DEFAULT_SCATTERING = 0; +let DEFAULT_MODEL = "hifi_pbr"; +let DEFAULT_SHADE = [1,1,1]; +let DEFAULT_MATCAP = [1,1,1]; +let DEFAULT_SHADING_SHIFT = 0.0; +let DEFAULT_SHADING_TOONY = 0.9; +let DEFAULT_PARAMETRIC_RIM = [0,0,0]; +let DEFAULT_RIM_LIGHTING_MIX = 1.0; +let DEFAULT_PARAMETRIC_RIM_FRESNEL_POWER = 5.0; +let DEFAULT_PARAMETRIC_RIM_LIFT = 0.0; + +/* ############## Not yet supported, but the code is ready ################### +let DEFAULT_OUTLINE = [0,0,0]; +let DEFAULT_OUTLINE_WIDTH_MODE = "none"; +let DEFAULT_OUTLINE_WIDTH = 0.0; +//################################################################# +*/ +let DEFAULT_UV_ANIMATION_SCROLL_X_SPEED = 0.0; +let DEFAULT_UV_ANIMATION_SCROLL_Y_SPEED = 0.0; +let DEFAULT_UV_ANIMATION_ROTATION_SPEED = 0.0; function initiateMaUi() { maClose = document.getElementById("uiMaterialAssistant-closeButton"); @@ -72,12 +156,15 @@ function initiateMaUi() { maMetallic = document.getElementById("ma-metallic"); maMetallicSlider = document.getElementById("ma-metallic-slider"); maMetallicMap = document.getElementById("ma-metallicMap"); + maUseSpecular = document.getElementById("ma-useSpecular"); maRoughnessIsActive = document.getElementById("ma-roughness-isActive"); maRoughness = document.getElementById("ma-roughness"); maRoughnessSlider = document.getElementById("ma-roughness-slider"); maRoughnessMap = document.getElementById("ma-roughnessMap"); + maUseGloss = document.getElementById("ma-useGloss"); maNormalMapIsActive = document.getElementById("ma-normalMap-isActive"); maNormalMap = document.getElementById("ma-normalMap"); + maUseBump = document.getElementById("ma-useBump"); maOpacityIsActive = document.getElementById("ma-opacity-isActive"); maOpacity = document.getElementById("ma-opacity"); maOpacitySlider = document.getElementById("ma-opacity-slider"); @@ -98,9 +185,69 @@ function initiateMaUi() { maScatteringMap = document.getElementById("ma-scatteringMap"); maOcclusionMapIsActive = document.getElementById("ma-occlusionMap-isActive"); maOcclusionMap = document.getElementById("ma-occlusionMap"); + maLightMapIsActive = document.getElementById("ma-lightMap-isActive"); + maLightMap = document.getElementById("ma-lightMap"); + maShadeIsActive = document.getElementById("ma-shade-isActive"); + maShadeColorPicker = document.getElementById("ma-shade-colorPicker"); + maShadeMapIsActive = document.getElementById("ma-shadeMap-isActive"); + maShadeMap = document.getElementById("ma-shadeMap"); + maMatcapIsActive = document.getElementById("ma-matcap-isActive"); + maMatcapColorPicker = document.getElementById("ma-matcap-colorPicker"); + maMatcapMapIsActive = document.getElementById("ma-matcapMap-isActive"); + maMatcapMap = document.getElementById("ma-matcapMap"); + maShadingShiftIsActive = document.getElementById("ma-shadingShift-isActive"); + maShadingShift = document.getElementById("ma-shadingShift"); + maShadingShiftSlider = document.getElementById("ma-shadingShift-slider"); + maShadingShiftMapIsActive = document.getElementById("ma-shadingShiftMap-isActive"); + maShadingShiftMap = document.getElementById("ma-shadingShiftMap"); + maShadingToonyIsActive = document.getElementById("ma-shadingToony-isActive"); + maShadingToony = document.getElementById("ma-shadingToony"); + maShadingToonySlider = document.getElementById("ma-shadingToony-slider"); + maParametricRimIsActive = document.getElementById("ma-parametricRim-isActive"); + maParametricRimColorPicker = document.getElementById("ma-parametricRim-colorPicker"); + maRimMapIsActive = document.getElementById("ma-rimMap-isActive"); + maRimMap = document.getElementById("ma-rimMap"); + maParametricRimFresnelPowerIsActive = document.getElementById("ma-parametricRimFresnelPower-isActive"); + maParametricRimFresnelPower = document.getElementById("ma-parametricRimFresnelPower"); + maParametricRimFresnelPowerSlider = document.getElementById("ma-parametricRimFresnelPower-slider"); + maParametricRimLiftIsActive = document.getElementById("ma-parametricRimLift-isActive"); + maParametricRimLift = document.getElementById("ma-parametricRimLift"); + maParametricRimLiftSlider = document.getElementById("ma-parametricRimLift-slider"); + maRimLightingMixIsActive = document.getElementById("ma-rimLightingMix-isActive"); + maRimLightingMix = document.getElementById("ma-rimLightingMix"); + maRimLightingMixSlider = document.getElementById("ma-rimLightingMix-slider"); + +/* ############## Not yet supported, but the code is ready ################################ + maOutlineWidthModeIsActive = document.getElementById("ma-outlineWidthMode-isActive"); + maOutlineWidthModeNone = document.getElementById("ma-outlineWidthMode-none"); + maOutlineWidthModeWorld = document.getElementById("ma-outlineWidthMode-world"); + maOutlineWidthModeScreen = document.getElementById("ma-outlineWidthMode-screen"); + maOutlineWidthIsActive = document.getElementById("ma-outlineWidth-isActive"); + maOutlineWidth = document.getElementById("ma-outlineWidth"); + maOutlineWidthSlider = document.getElementById("ma-outlineWidth-slider"); + maOutlineIsActive = document.getElementById("ma-outline-isActive"); + maOutlineColorPicker = document.getElementById("ma-outline-colorPicker"); + //################################################################################# +*/ + maUvAnimationMaskMapIsActive = document.getElementById("ma-uvAnimationMaskMap-isActive"); + maUvAnimationMaskMap = document.getElementById("ma-uvAnimationMaskMap"); + maUvAnimationScrollXSpeedIsActive = document.getElementById("ma-uvAnimationScrollXSpeed-isActive"); + maUvAnimationScrollXSpeed = document.getElementById("ma-uvAnimationScrollXSpeed"); + maUvAnimationScrollXSpeedSlider = document.getElementById("ma-uvAnimationScrollXSpeed-slider"); + maUvAnimationScrollYSpeedIsActive = document.getElementById("ma-uvAnimationScrollYSpeed-isActive"); + maUvAnimationScrollYSpeed = document.getElementById("ma-uvAnimationScrollYSpeed"); + maUvAnimationScrollYSpeedSlider = document.getElementById("ma-uvAnimationScrollYSpeed-slider"); + maUvAnimationRotationSpeedIsActive = document.getElementById("ma-uvAnimationRotationSpeed-isActive"); + maUvAnimationRotationSpeed = document.getElementById("ma-uvAnimationRotationSpeed"); + maUvAnimationRotationSpeedSlider = document.getElementById("ma-uvAnimationRotationSpeed-slider"); + maProcedural = document.getElementById("ma-procedural"); + maAddProceduralTemplate = document.getElementById("ma-addProceduralTemplate"); maCullFaceModeBack = document.getElementById("ma-cullFaceMode-back"); maCullFaceModeFront = document.getElementById("ma-cullFaceMode-front"); maCullFaceModeNone = document.getElementById("ma-cullFaceMode-none"); + maModelHifiPbr = document.getElementById("ma-Model-hifi_pbr"); + maModelVrmMtoon = document.getElementById("ma-Model-vrm_mtoon"); + maModelHifiShaderSimple = document.getElementById("ma-Model-hifi_shader_simple"); maClose.onclick = function() { closeMaterialAssistant(); @@ -128,8 +275,11 @@ function initiateMaUi() { maMaterialData.albedoMapIsActive = true; maAlbedoMapIsActive.className = "uiMaterialAssistant-active"; maAlbedoMap.disabled = false; + if (maMaterialData.albedoMap === undefined) { + maMaterialData.albedoMap = ""; + } } - maGenerateJsonAndSave(); + maGenerateJsonAndSave(); }; maMetallicIsActive.onclick = function() { if (maMaterialData.metallicIsActive) { @@ -138,12 +288,14 @@ function initiateMaUi() { maMetallic.disabled = true; maMetallicSlider.disabled = true; maMetallicMap.disabled = true; + maUseSpecular.disabled = true; } else { maMaterialData.metallicIsActive = true; maMetallicIsActive.className = "uiMaterialAssistant-active"; maMetallic.disabled = false; maMetallicSlider.disabled = false; - maMetallicMap.disabled = false; + maMetallicMap.disabled = false; + maUseSpecular.disabled = false; } maGenerateJsonAndSave(); }; @@ -154,12 +306,14 @@ function initiateMaUi() { maRoughness.disabled = true; maRoughnessSlider.disabled = true; maRoughnessMap.disabled = true; + maUseGloss.disabled = true; } else { maMaterialData.roughnessIsActive = true; maRoughnessIsActive.className = "uiMaterialAssistant-active"; maRoughness.disabled = false; maRoughnessSlider.disabled = false; - maRoughnessMap.disabled = false; + maRoughnessMap.disabled = false; + maUseGloss.disabled = false; } maGenerateJsonAndSave(); }; @@ -168,10 +322,15 @@ function initiateMaUi() { maMaterialData.normalMapIsActive = false; maNormalMapIsActive.className = "uiMaterialAssistant-inactive"; maNormalMap.disabled = true; + maUseBump.disabled = true; } else { maMaterialData.normalMapIsActive = true; maNormalMapIsActive.className = "uiMaterialAssistant-active"; maNormalMap.disabled = false; + maUseBump.disabled = false; + if (maMaterialData.normalMap === undefined) { + maMaterialData.normalMap = ""; + } } maGenerateJsonAndSave(); }; @@ -244,16 +403,34 @@ function initiateMaUi() { maMaterialData.occlusionMapIsActive = true; maOcclusionMapIsActive.className = "uiMaterialAssistant-active"; maOcclusionMap.disabled = false; + if (maMaterialData.occlusionMap === undefined) { + maMaterialData.occlusionMap = ""; + } } maGenerateJsonAndSave(); }; + maLightMapIsActive.onclick = function() { + if (maMaterialData.lightMapIsActive) { + maMaterialData.lightMapIsActive = false; + maLightMapIsActive.className = "uiMaterialAssistant-inactive"; + maLightMap.disabled = true; + } else { + maMaterialData.lightMapIsActive = true; + maLightMapIsActive.className = "uiMaterialAssistant-active"; + maLightMap.disabled = false; + if (maMaterialData.lightMap === undefined) { + maMaterialData.lightMap = ""; + } + } + maGenerateJsonAndSave(); + }; maName.oninput = function() { maMaterialData.name = maName.value; maGenerateJsonAndSave(); }; maAlbedoMap.oninput = function() { maMaterialData.albedoMap = maAlbedoMap.value; - maGenerateJsonAndSave(); + maGenerateJsonAndSave(); }; maMetallicSlider.oninput = function() { maMetallic.value = maMetallicSlider.value/1000; @@ -264,6 +441,10 @@ function initiateMaUi() { maMaterialData.metallicMap = maMetallicMap.value; maGenerateJsonAndSave(); }; + maUseSpecular.oninput = function() { + maMaterialData.useSpecular = maUseSpecular.checked; + maGenerateJsonAndSave(); + }; maRoughnessSlider.oninput = function() { maRoughness.value = maRoughnessSlider.value/1000; maMaterialData.roughness = parseFloat(maRoughness.value); @@ -273,10 +454,18 @@ function initiateMaUi() { maMaterialData.roughnessMap = maRoughnessMap.value; maGenerateJsonAndSave(); }; + maUseGloss.oninput = function() { + maMaterialData.useGloss = maUseGloss.checked; + maGenerateJsonAndSave(); + }; maNormalMap.oninput = function() { maMaterialData.normalMap = maNormalMap.value; maGenerateJsonAndSave(); }; + maUseBump.oninput = function() { + maMaterialData.useBump = maUseBump.checked; + maGenerateJsonAndSave(); + }; maOpacitySlider.oninput = function() { maOpacity.value = maOpacitySlider.value/1000; maMaterialData.opacity = parseFloat(maOpacity.value); @@ -325,6 +514,427 @@ function initiateMaUi() { maMaterialData.occlusionMap = maOcclusionMap.value; maGenerateJsonAndSave(); }; + maLightMap.oninput = function() { + maMaterialData.lightMap = maLightMap.value; + maGenerateJsonAndSave(); + }; + maShadeIsActive.onclick = function() { + if (maMaterialData.shadeIsActive) { + maMaterialData.shadeIsActive = false; + maShadeIsActive.className = "uiMaterialAssistant-inactive"; + maShadeColorPicker.style.pointerEvents = 'none'; + maShadeColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.shadeIsActive = true; + maShadeIsActive.className = "uiMaterialAssistant-active"; + maShadeColorPicker.style.pointerEvents = 'auto'; + maShadeColorPicker.style.backgroundColor = maGetRGB(maMaterialData.shade); + } + maGenerateJsonAndSave(); + }; + maShadeMapIsActive.onclick = function() { + if (maMaterialData.shadeMapIsActive) { + maMaterialData.shadeMapIsActive = false; + maShadeMapIsActive.className = "uiMaterialAssistant-inactive"; + maShadeMap.disabled = true; + } else { + maMaterialData.shadeMapIsActive = true; + maShadeMapIsActive.className = "uiMaterialAssistant-active"; + maShadeMap.disabled = false; + if (maMaterialData.shadeMap === undefined) { + maMaterialData.shadeMap = ""; + } + } + maGenerateJsonAndSave(); + }; + + maShadeMap.oninput = function() { + maMaterialData.shadeMap = maShadeMap.value; + maGenerateJsonAndSave(); + }; + + maMatcapIsActive.onclick = function() { + if (maMaterialData.matcapIsActive) { + maMaterialData.matcapIsActive = false; + maMatcapIsActive.className = "uiMaterialAssistant-inactive"; + maMatcapColorPicker.style.pointerEvents = 'none'; + maMatcapColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.matcapIsActive = true; + maMatcapIsActive.className = "uiMaterialAssistant-active"; + maMatcapColorPicker.style.pointerEvents = 'auto'; + maMatcapColorPicker.style.backgroundColor = maGetRGB(maMaterialData.matcap); + } + maGenerateJsonAndSave(); + }; + maMatcapMapIsActive.onclick = function() { + if (maMaterialData.matcapMapIsActive) { + maMaterialData.matcapMapIsActive = false; + maMatcapMapIsActive.className = "uiMaterialAssistant-inactive"; + maMatcapMap.disabled = true; + } else { + maMaterialData.matcapMapIsActive = true; + maMatcapMapIsActive.className = "uiMaterialAssistant-active"; + maMatcapMap.disabled = false; + if (maMaterialData.matcapMap === undefined) { + maMaterialData.matcapMap = ""; + } + } + maGenerateJsonAndSave(); + }; + + maMatcapMap.oninput = function() { + maMaterialData.matcapMap = maMatcapMap.value; + maGenerateJsonAndSave(); + }; + + maParametricRimIsActive.onclick = function() { + if (maMaterialData.parametricRimIsActive) { + maMaterialData.parametricRimIsActive = false; + maParametricRimIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimColorPicker.style.pointerEvents = 'none'; + maParametricRimColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.parametricRimIsActive = true; + maParametricRimIsActive.className = "uiMaterialAssistant-active"; + maParametricRimColorPicker.style.pointerEvents = 'auto'; + maParametricRimColorPicker.style.backgroundColor = maGetRGB(maMaterialData.parametricRim); + } + maGenerateJsonAndSave(); + }; + + maRimMapIsActive.onclick = function() { + if (maMaterialData.rimMapIsActive) { + maMaterialData.rimMapIsActive = false; + maRimMapIsActive.className = "uiMaterialAssistant-inactive"; + maRimMap.disabled = true; + } else { + maMaterialData.rimMapIsActive = true; + maRimMapIsActive.className = "uiMaterialAssistant-active"; + maRimMap.disabled = false; + if (maMaterialData.rimMap === undefined) { + maMaterialData.rimMap = ""; + } + } + maGenerateJsonAndSave(); + }; + + maRimMap.oninput = function() { + maMaterialData.rimMap = maRimMap.value; + maGenerateJsonAndSave(); + }; + + maRimLightingMixIsActive.onclick = function() { + if (maMaterialData.rimLightingMixIsActive) { + maMaterialData.rimLightingMixIsActive = false; + maRimLightingMixIsActive.className = "uiMaterialAssistant-inactive"; + maRimLightingMix.disabled = true; + maRimLightingMixSlider.disabled = true; + } else { + maMaterialData.rimLightingMixIsActive = true; + maRimLightingMixIsActive.className = "uiMaterialAssistant-active"; + maRimLightingMix.disabled = false; + maRimLightingMixSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maRimLightingMixSlider.oninput = function() { + maRimLightingMix.value = maRimLightingMixSlider.value/1000; + maMaterialData.rimLightingMix = parseFloat(maRimLightingMix.value); + maGenerateJsonAndSave(); + }; + + maParametricRimFresnelPowerIsActive.onclick = function() { + if (maMaterialData.parametricRimFresnelPowerIsActive) { + maMaterialData.parametricRimFresnelPowerIsActive = false; + maParametricRimFresnelPowerIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimFresnelPower.disabled = true; + maParametricRimFresnelPowerSlider.disabled = true; + } else { + maMaterialData.parametricRimFresnelPowerIsActive = true; + maParametricRimFresnelPowerIsActive.className = "uiMaterialAssistant-active"; + maParametricRimFresnelPower.disabled = false; + maParametricRimFresnelPowerSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maParametricRimFresnelPowerSlider.oninput = function() { + maParametricRimFresnelPower.value = maParametricRimFresnelPowerSlider.value/1000; + maMaterialData.parametricRimFresnelPower = parseFloat(maParametricRimFresnelPower.value); + maGenerateJsonAndSave(); + }; + + maParametricRimLiftIsActive.onclick = function() { + if (maMaterialData.parametricRimLiftIsActive) { + maMaterialData.parametricRimLiftIsActive = false; + maParametricRimLiftIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimLift.disabled = true; + maParametricRimLiftSlider.disabled = true; + } else { + maMaterialData.parametricRimLiftIsActive = true; + maParametricRimLiftIsActive.className = "uiMaterialAssistant-active"; + maParametricRimLift.disabled = false; + maParametricRimLiftSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maParametricRimLiftSlider.oninput = function() { + maParametricRimLift.value = maParametricRimLiftSlider.value/1000; + maMaterialData.parametricRimLift = parseFloat(maParametricRimLift.value); + maGenerateJsonAndSave(); + }; + + maShadingShiftIsActive.onclick = function() { + if (maMaterialData.shadingShiftIsActive) { + maMaterialData.shadingShiftIsActive = false; + maShadingShiftIsActive.className = "uiMaterialAssistant-inactive"; + maShadingShift.disabled = true; + maShadingShiftSlider.disabled = true; + } else { + maMaterialData.shadingShiftIsActive = true; + maShadingShiftIsActive.className = "uiMaterialAssistant-active"; + maShadingShift.disabled = false; + maShadingShiftSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maShadingShiftMapIsActive.onclick = function() { + if (maMaterialData.shadingShiftMapIsActive) { + maMaterialData.shadingShiftMapIsActive = false; + maShadingShiftMapIsActive.className = "uiMaterialAssistant-inactive"; + maShadingShiftMap.disabled = true; + } else { + maMaterialData.shadingShiftMapIsActive = true; + maShadingShiftMapIsActive.className = "uiMaterialAssistant-active"; + maShadingShiftMap.disabled = false; + if (maMaterialData.shadingShiftMap === undefined) { + maMaterialData.shadingShiftMap = ""; + } + } + maGenerateJsonAndSave(); + }; + + maShadingShiftSlider.oninput = function() { + maShadingShift.value = maShadingShiftSlider.value/1000; + maMaterialData.shadingShift = parseFloat(maShadingShift.value); + maGenerateJsonAndSave(); + }; + + maShadingShiftMap.oninput = function() { + maMaterialData.shadingShiftMap = maShadingShiftMap.value; + maGenerateJsonAndSave(); + }; + + maShadingToonyIsActive.onclick = function() { + if (maMaterialData.shadingToonyIsActive) { + maMaterialData.shadingToonyIsActive = false; + maShadingToonyIsActive.className = "uiMaterialAssistant-inactive"; + maShadingToony.disabled = true; + maShadingToonySlider.disabled = true; + } else { + maMaterialData.shadingToonyIsActive = true; + maShadingToonyIsActive.className = "uiMaterialAssistant-active"; + maShadingToony.disabled = false; + maShadingToonySlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maShadingToonySlider.oninput = function() { + maShadingToony.value = maShadingToonySlider.value/1000; + maMaterialData.shadingToony = parseFloat(maShadingToony.value); + maGenerateJsonAndSave(); + }; + +/* ################# Not supported Yet, but the code is ready ######################### + + maOutlineWidthModeIsActive.onclick = function() { + if (maMaterialData.outlineWidthModeIsActive) { + maMaterialData.outlineWidthModeIsActive = false; + maOutlineWidthModeIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineWidthModeNone.disabled = true; + maOutlineWidthModeWorld.disabled = true; + maOutlineWidthModeScreen.disabled = true; + } else { + maMaterialData.outlineWidthModeIsActive = true; + maOutlineWidthModeIsActive.className = "uiMaterialAssistant-active"; + maOutlineWidthModeNone.disabled = false; + maOutlineWidthModeWorld.disabled = false; + maOutlineWidthModeScreen.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maOutlineWidthModeNone.oninput = function() { + maMaterialData.outlineWidthMode = maOutlineWidthModeNone.value; + maGenerateJsonAndSave(); + }; + + maOutlineWidthModeWorld.oninput = function() { + maMaterialData.outlineWidthMode = maOutlineWidthModeWorld.value; + maGenerateJsonAndSave(); + }; + + maOutlineWidthModeScreen.oninput = function() { + maMaterialData.outlineWidthMode = maOutlineWidthModeScreen.value; + maGenerateJsonAndSave(); + }; + + maOutlineWidthIsActive.onclick = function() { + if (maMaterialData.outlineWidthIsActive) { + maMaterialData.outlineWidthIsActive = false; + maOutlineWidthIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineWidth.disabled = true; + maOutlineWidthSlider.disabled = true; + } else { + maMaterialData.outlineWidthIsActive = true; + maOutlineWidthIsActive.className = "uiMaterialAssistant-active"; + maOutlineWidth.disabled = false; + maOutlineWidthSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maOutlineWidthSlider.oninput = function() { + maOutlineWidth.value = maOutlineWidthSlider.value/1000; + maMaterialData.outlineWidth = parseFloat(maOutlineWidth.value); + maGenerateJsonAndSave(); + }; + + maOutlineIsActive.onclick = function() { + if (maMaterialData.outlineIsActive) { + maMaterialData.outlineIsActive = false; + maOutlineIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineColorPicker.style.pointerEvents = 'none'; + maOutlineColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.outlineIsActive = true; + maOutlineIsActive.className = "uiMaterialAssistant-active"; + maOutlineColorPicker.style.pointerEvents = 'auto'; + maOutlineColorPicker.style.backgroundColor = maGetRGB(maMaterialData.outline); + } + maGenerateJsonAndSave(); + }; +//################################################################ +*/ + + maUvAnimationMaskMapIsActive.onclick = function() { + if (maMaterialData.uvAnimationMaskMapIsActive) { + maMaterialData.uvAnimationMaskMapIsActive = false; + maUvAnimationMaskMapIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationMaskMap.disabled = true; + } else { + maMaterialData.uvAnimationMaskMapIsActive = true; + maUvAnimationMaskMapIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationMaskMap.disabled = false; + if (maMaterialData.uvAnimationMaskMap === undefined) { + maMaterialData.uvAnimationMaskMap = ""; + } + } + maGenerateJsonAndSave(); + }; + + maUvAnimationMaskMap.oninput = function() { + maMaterialData.uvAnimationMaskMap = maUvAnimationMaskMap.value; + maGenerateJsonAndSave(); + }; + + maUvAnimationScrollXSpeedIsActive.onclick = function() { + if (maMaterialData.uvAnimationScrollXSpeedIsActive) { + maMaterialData.uvAnimationScrollXSpeedIsActive = false; + maUvAnimationScrollXSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationScrollXSpeed.disabled = true; + maUvAnimationScrollXSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationScrollXSpeedIsActive = true; + maUvAnimationScrollXSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationScrollXSpeed.disabled = false; + maUvAnimationScrollXSpeedSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maUvAnimationScrollXSpeedSlider.oninput = function() { + maUvAnimationScrollXSpeed.value = maUvAnimationScrollXSpeedSlider.value/1000; + maMaterialData.uvAnimationScrollXSpeed = parseFloat(maUvAnimationScrollXSpeed.value); + maGenerateJsonAndSave(); + }; + + maUvAnimationScrollYSpeedIsActive.onclick = function() { + if (maMaterialData.uvAnimationScrollYSpeedIsActive) { + maMaterialData.uvAnimationScrollYSpeedIsActive = false; + maUvAnimationScrollYSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationScrollYSpeed.disabled = true; + maUvAnimationScrollYSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationScrollYSpeedIsActive = true; + maUvAnimationScrollYSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationScrollYSpeed.disabled = false; + maUvAnimationScrollYSpeedSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maUvAnimationScrollYSpeedSlider.oninput = function() { + maUvAnimationScrollYSpeed.value = maUvAnimationScrollYSpeedSlider.value/1000; + maMaterialData.uvAnimationScrollYSpeed = parseFloat(maUvAnimationScrollYSpeed.value); + maGenerateJsonAndSave(); + }; + + maUvAnimationRotationSpeedIsActive.onclick = function() { + if (maMaterialData.uvAnimationRotationSpeedIsActive) { + maMaterialData.uvAnimationRotationSpeedIsActive = false; + maUvAnimationRotationSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationRotationSpeed.disabled = true; + maUvAnimationRotationSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationRotationSpeedIsActive = true; + maUvAnimationRotationSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationRotationSpeed.disabled = false; + maUvAnimationRotationSpeedSlider.disabled = false; + } + maGenerateJsonAndSave(); + }; + + maUvAnimationRotationSpeedSlider.oninput = function() { + maUvAnimationRotationSpeed.value = maUvAnimationRotationSpeedSlider.value/1000; + maMaterialData.uvAnimationRotationSpeed = parseFloat(maUvAnimationRotationSpeed.value); + maGenerateJsonAndSave(); + }; + + maProcedural.oninput = function() { + let testJsonData; + if (maProcedural.value === "") { + maAddProceduralTemplate.disabled = false; + } else { + try { + testJsonData = JSON.parse(maProcedural.value); + } catch (e) { + maProcedural.style.color = "#ff0000"; + return; + } + } + maProcedural.style.color = "#000000"; + maMaterialData.procedural = maProcedural.value; + maGenerateJsonAndSave(); + }; + maAddProceduralTemplate.onclick = function() { + if (maMaterialData.procedural === "") { + let template = { + "version": 3, + "fragmentShaderURL": "", + "uniforms": {}, + "channels": [] + }; + maProcedural.value = JSON.stringify(template, null, 4); + maAddProceduralTemplate.disabled = true; + maProcedural.oninput(); + } + }; maCullFaceModeBack.oninput = function() { maMaterialData.cullFaceMode = maCullFaceModeBack.value; maGenerateJsonAndSave(); @@ -338,6 +948,22 @@ function initiateMaUi() { maGenerateJsonAndSave(); }; + maModelHifiPbr.oninput = function() { + maMaterialData.model = maModelHifiPbr.value; + maFieldContextualDisplayer(); + maGenerateJsonAndSave(); + }; + maModelVrmMtoon.oninput = function() { + maMaterialData.model = maModelVrmMtoon.value; + maFieldContextualDisplayer(); + maGenerateJsonAndSave(); + }; + maModelHifiShaderSimple.oninput = function() { + maMaterialData.model = maModelHifiShaderSimple.value; + maFieldContextualDisplayer(); + maGenerateJsonAndSave(); + }; + var maAlbedoColorPickerID = "#ma-albedo-colorPicker"; maAlbedoColorPickerSel = $(maAlbedoColorPickerID).colpick({ colorScheme: 'dark', @@ -389,27 +1015,157 @@ function initiateMaUi() { } } }); + + var maShadeColorPickerID = "#ma-shade-colorPicker"; + maShadeColorPickerSel = $(maShadeColorPickerID).colpick({ + colorScheme: 'dark', + layout: 'rgbhex', + color: '000000', + submit: false, + onShow: function(colpick) { + $(maShadeColorPickerID).colpickSetColor({ + "r": maMaterialData.shade[0] * 255, + "g": maMaterialData.shade[1] * 255, + "b": maMaterialData.shade[2] * 255, + }); + $(maShadeColorPickerID).attr('active', 'true'); + }, + onHide: function(colpick) { + $(maShadeColorPickerID).attr('active', 'false'); + }, + onChange: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + if ($(maShadeColorPickerID).attr('active') === 'true') { + maMaterialData.shade = [(rgb.r/255), (rgb.g/255), (rgb.b/255)]; + maGenerateJsonAndSave(); + } + } + }); + + var maMatcapColorPickerID = "#ma-matcap-colorPicker"; + maMatcapColorPickerSel = $(maMatcapColorPickerID).colpick({ + colorScheme: 'dark', + layout: 'rgbhex', + color: '000000', + submit: false, + onShow: function(colpick) { + $(maMatcapColorPickerID).colpickSetColor({ + "r": maMaterialData.matcap[0] * 255, + "g": maMaterialData.matcap[1] * 255, + "b": maMaterialData.matcap[2] * 255, + }); + $(maMatcapColorPickerID).attr('active', 'true'); + }, + onHide: function(colpick) { + $(maMatcapColorPickerID).attr('active', 'false'); + }, + onChange: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + if ($(maMatcapColorPickerID).attr('active') === 'true') { + maMaterialData.matcap = [(rgb.r/255), (rgb.g/255), (rgb.b/255)]; + maGenerateJsonAndSave(); + } + } + }); + + var maParametricRimColorPickerID = "#ma-parametricRim-colorPicker"; + maParametricRimColorPickerSel = $(maParametricRimColorPickerID).colpick({ + colorScheme: 'dark', + layout: 'rgbhex', + color: '000000', + submit: false, + onShow: function(colpick) { + $(maParametricRimColorPickerID).colpickSetColor({ + "r": maMaterialData.parametricRim[0] * 255, + "g": maMaterialData.parametricRim[1] * 255, + "b": maMaterialData.parametricRim[2] * 255, + }); + $(maParametricRimColorPickerID).attr('active', 'true'); + }, + onHide: function(colpick) { + $(maParametricRimColorPickerID).attr('active', 'false'); + }, + onChange: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + if ($(maParametricRimColorPickerID).attr('active') === 'true') { + maMaterialData.parametricRim = [(rgb.r/255), (rgb.g/255), (rgb.b/255)]; + maGenerateJsonAndSave(); + } + } + }); + +/* ############# Not supported yet, but the code is ready ######################### + + var maOutlineColorPickerID = "#ma-outline-colorPicker"; + maOutlineColorPickerSel = $(maOutlineColorPickerID).colpick({ + colorScheme: 'dark', + layout: 'rgbhex', + color: '000000', + submit: false, + onShow: function(colpick) { + $(maOutlineColorPickerID).colpickSetColor({ + "r": maMaterialData.outline[0] * 255, + "g": maMaterialData.outline[1] * 255, + "b": maMaterialData.outline[2] * 255, + }); + $(maOutlineColorPickerID).attr('active', 'true'); + }, + onHide: function(colpick) { + $(maOutlineColorPickerID).attr('active', 'false'); + }, + onChange: function(hsb, hex, rgb, el) { + $(el).css('background-color', '#' + hex); + if ($(maOutlineColorPickerID).attr('active') === 'true') { + maMaterialData.outline = [(rgb.r/255), (rgb.g/255), (rgb.b/255)]; + maGenerateJsonAndSave(); + } + } + }); +//############################################################################## +*/ + } function loadDataInMaUi(materialDataPropertyValue) { var entityMaterialData, materialDefinition; - try { - entityMaterialData = JSON.parse(materialDataPropertyValue); - } - catch(e) { + var mapToUse; + + if (materialDataPropertyValue === "" || materialDataPropertyValue === "{}") { entityMaterialData = { "materials":{} }; + } else { + try { + entityMaterialData = JSON.parse(materialDataPropertyValue); + } + catch(e) { + entityMaterialData = { + "materials":{} + }; + } } - + if (entityMaterialData.materials.length === undefined) { materialDefinition = entityMaterialData.materials; } else { materialDefinition = entityMaterialData.materials[0]; } - //MODEL (value other than "hifi_pbr" are not supposed to get the button, so we can assume.) - maMaterialData.model === "hifi_pbr"; + //MODEL + maMaterialData.model = materialDefinition.model || DEFAULT_MODEL; + switch (maMaterialData.model) { + case "hifi_pbr": + maModelHifiPbr.checked = true; + break; + case "vrm_mtoon": + maModelVrmMtoon.checked = true; + break; + case "hifi_shader_simple": + maModelHifiShaderSimple.checked = true; + break; + default: + alert("ERROR: model = '" + maMaterialData.model + "'. Something has been broken in the code."); + } //NAME if (materialDefinition.name !== undefined) { @@ -440,7 +1196,9 @@ function loadDataInMaUi(materialDataPropertyValue) { maAlbedoColorPicker.style.backgroundColor = maGetRGB(maMaterialData.albedo); //ALBEDO MAP - if (materialDefinition.defaultFallthrough === true && materialDefinition.albedoMap === undefined) { + if (materialDefinition.defaultFallthrough === true + && materialDefinition.albedoMap === undefined + && (materialDefinition.model === "hifi_pbr" || materialDefinition.model === "vrm_mtoon" )) { maMaterialData.albedoMapIsActive = false; maAlbedoMapIsActive.className = "uiMaterialAssistant-inactive"; maAlbedoMap.disabled = true; @@ -458,20 +1216,44 @@ function loadDataInMaUi(materialDataPropertyValue) { maAlbedoMap.value = maMaterialData.albedoMap; //METALLIC + if (materialDefinition.metallicMap !== undefined && materialDefinition.specularMap !== undefined) { + if (JSON.stringify(materialDefinition).indexOf("metallicMap") > JSON.stringify(materialDefinition).indexOf("specularMap")) { + delete materialDefinition.specularMap; + mapToUse = materialDefinition.metallicMap; + maUseSpecular.checked = false; + } else { + delete materialDefinition.metallicMap; + mapToUse = materialDefinition.specularMap; + maUseSpecular.checked = true; + } + } else if (materialDefinition.metallicMap === undefined && materialDefinition.specularMap === undefined) { + mapToUse = materialDefinition.metallicMap; + maUseSpecular.checked = false; + } else if (materialDefinition.specularMap === undefined) { + mapToUse = materialDefinition.metallicMap; + maUseSpecular.checked = false; + } else { + mapToUse = materialDefinition.specularMap; + maUseSpecular.checked = true; + } + if (materialDefinition.defaultFallthrough === true && materialDefinition.metallic === undefined - && materialDefinition.metallicMap === undefined) { + && mapToUse === undefined + && materialDefinition.model === "hifi_pbr") { maMaterialData.metallicIsActive = false; maMetallicIsActive.className = "uiMaterialAssistant-inactive"; maMetallic.disabled = true; maMetallicSlider.disabled = true; maMetallicMap.disabled = true; + maUseSpecular.disabled = true; } else { maMaterialData.metallicIsActive = true; maMetallicIsActive.className = "uiMaterialAssistant-active"; maMetallic.disabled = false; maMetallicSlider.disabled = false; maMetallicMap.disabled = false; + maUseSpecular.disabled = false; } if (materialDefinition.metallic !== undefined) { @@ -482,28 +1264,53 @@ function loadDataInMaUi(materialDataPropertyValue) { maMetallic.value = maMaterialData.metallic; maMetallicSlider.value = Math.floor(maMaterialData.metallic * 1000); - if (materialDefinition.metallicMap !== undefined) { - maMaterialData.metallicMap = materialDefinition.metallicMap; + if (mapToUse !== undefined) { + maMaterialData.metallicMap = mapToUse; } else { maMaterialData.metallicMap = ""; } maMetallicMap.value = maMaterialData.metallicMap; + maMaterialData.useSpecular = maUseSpecular.checked; //ROUGHNESS + if (materialDefinition.roughnessMap !== undefined && materialDefinition.glossMap !== undefined) { + if (JSON.stringify(materialDefinition).indexOf("roughnessMap") > JSON.stringify(materialDefinition).indexOf("glossMap")) { + delete materialDefinition.glossMap; + mapToUse = materialDefinition.roughnessMap; + maUseGloss.checked = false; + } else { + delete materialDefinition.roughnessMap; + mapToUse = materialDefinition.glossMap; + maUseGloss.checked = true; + } + } else if (materialDefinition.roughnessMap === undefined && materialDefinition.glossMap === undefined) { + mapToUse = materialDefinition.roughnessMap; + maUseGloss.checked = false; + } else if (materialDefinition.glossMap === undefined) { + mapToUse = materialDefinition.roughnessMap; + maUseGloss.checked = false; + } else { + mapToUse = materialDefinition.glossMap; + maUseGloss.checked = true; + } + if (materialDefinition.defaultFallthrough === true && materialDefinition.roughness === undefined - && materialDefinition.roughnessMap === undefined) { + && mapToUse === undefined + && materialDefinition.model === "hifi_pbr") { maMaterialData.roughnessIsActive = false; maRoughnessIsActive.className = "uiMaterialAssistant-inactive"; maRoughness.disabled = true; maRoughnessSlider.disabled = true; maRoughnessMap.disabled = true; + maUseGloss.disabled = true; } else { maMaterialData.roughnessIsActive = true; maRoughnessIsActive.className = "uiMaterialAssistant-active"; maRoughness.disabled = false; maRoughnessSlider.disabled = false; maRoughnessMap.disabled = false; + maUseGloss.disabled = false; } if (materialDefinition.roughness !== undefined) { @@ -514,30 +1321,57 @@ function loadDataInMaUi(materialDataPropertyValue) { maRoughness.value = maMaterialData.roughness; maRoughnessSlider.value = Math.floor(maMaterialData.roughness * 1000); - if (materialDefinition.roughnessMap !== undefined) { - maMaterialData.roughnessMap = materialDefinition.roughnessMap; + if (mapToUse !== undefined) { + maMaterialData.roughnessMap = mapToUse; } else { maMaterialData.roughnessMap = ""; } maRoughnessMap.value = maMaterialData.roughnessMap; + maMaterialData.useGloss = maUseGloss.checked; //NORMAL MAP - if (materialDefinition.defaultFallthrough === true && materialDefinition.normalMap === undefined) { + if (materialDefinition.normalMap !== undefined && materialDefinition.bumpMap !== undefined) { + if (JSON.stringify(materialDefinition).indexOf("normalMap") > JSON.stringify(materialDefinition).indexOf("bumpMap")) { + delete materialDefinition.bumpMap; + mapToUse = materialDefinition.normalMap; + maUseBump.checked = false; + } else { + delete materialDefinition.normalMap; + mapToUse = materialDefinition.bumpMap; + maUseBump.checked = true; + } + } else if (materialDefinition.normalMap === undefined && materialDefinition.bumpMap === undefined) { + mapToUse = materialDefinition.normalMap; + maUseBump.checked = false; + } else if (materialDefinition.bumpMap === undefined) { + mapToUse = materialDefinition.normalMap; + maUseBump.checked = false; + } else { + mapToUse = materialDefinition.bumpMap; + maUseBump.checked = true; + } + + if (materialDefinition.defaultFallthrough === true && + mapToUse === undefined && + (materialDefinition.model === "hifi_pbr" || materialDefinition.model === "vrm_mtoon")) { maMaterialData.normalMapIsActive = false; maNormalMapIsActive.className = "uiMaterialAssistant-inactive"; maNormalMap.disabled = true; + maUseBump.disabled = true; } else { maMaterialData.normalMapIsActive = true; maNormalMapIsActive.className = "uiMaterialAssistant-active"; maNormalMap.disabled = false; + maUseBump.disabled = false; } - if (materialDefinition.normalMap !== undefined) { - maMaterialData.normalMap = materialDefinition.normalMap; + if (mapToUse !== undefined) { + maMaterialData.normalMap = mapToUse; } else { maMaterialData.normalMap = ""; } maNormalMap.value = maMaterialData.normalMap; + maMaterialData.useBump = maUseBump.checked; //OPACITY if (materialDefinition.defaultFallthrough === true @@ -602,7 +1436,8 @@ function loadDataInMaUi(materialDataPropertyValue) { //EMISSIVE if (materialDefinition.defaultFallthrough === true && materialDefinition.emissive === undefined - && materialDefinition.emissiveMap === undefined) { + && materialDefinition.emissiveMap === undefined + && (materialDefinition.model === "hifi_pbr" || materialDefinition.model === "vrm_mtoon")) { maMaterialData.emissiveIsActive = false; maEmissiveIsActive.className = "uiMaterialAssistant-inactive"; maBloom.disabled = true; @@ -649,7 +1484,8 @@ function loadDataInMaUi(materialDataPropertyValue) { //SCATTERING if (materialDefinition.defaultFallthrough === true && materialDefinition.scattering === undefined - && materialDefinition.scatteringMap === undefined) { + && materialDefinition.scatteringMap === undefined + && materialDefinition.model === "hifi_pbr") { maMaterialData.scatteringIsActive = false; maScatteringIsActive.className = "uiMaterialAssistant-inactive"; maScattering.disabled = true; @@ -679,7 +1515,8 @@ function loadDataInMaUi(materialDataPropertyValue) { maScatteringMap.value = maMaterialData.scatteringMap; //OCCLUSION MAP - if (materialDefinition.defaultFallthrough === true && materialDefinition.occlusionMap === undefined) { + if (materialDefinition.defaultFallthrough === true && materialDefinition.occlusionMap === undefined + && materialDefinition.model === "hifi_pbr") { maMaterialData.occlusionMapIsActive = false; maOcclusionMapIsActive.className = "uiMaterialAssistant-inactive"; maOcclusionMap.disabled = true; @@ -695,6 +1532,468 @@ function loadDataInMaUi(materialDataPropertyValue) { maMaterialData.occlusionMap = ""; } maOcclusionMap.value = maMaterialData.occlusionMap; + + //LIGHT MAP + if (materialDefinition.defaultFallthrough === true && + materialDefinition.lightMap === undefined && + materialDefinition.model === "hifi_pbr") { + maMaterialData.lightMapIsActive = false; + maLightMapIsActive.className = "uiMaterialAssistant-inactive"; + maLightMap.disabled = true; + } else { + maMaterialData.lightMapIsActive = true; + maLightMapIsActive.className = "uiMaterialAssistant-active"; + maLightMap.disabled = false; + } + + if (materialDefinition.lightMap !== undefined) { + maMaterialData.lightMap = materialDefinition.lightMap; + } else { + maMaterialData.lightMap = ""; + } + maLightMap.value = maMaterialData.lightMap; + + //SHADE + if (materialDefinition.defaultFallthrough === true && materialDefinition.shade === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.shadeIsActive = false; + maShadeIsActive.className = "uiMaterialAssistant-inactive"; + maShadeColorPicker.style.pointerEvents = 'none'; + maShadeColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.shadeIsActive = true; + maShadeIsActive.className = "uiMaterialAssistant-active"; + maShadeColorPicker.style.pointerEvents = 'auto'; + maShadeColorPicker.style.backgroundColor = maGetRGB(maMaterialData.shade); + } + + if (materialDefinition.shade !== undefined) { + maMaterialData.shade = materialDefinition.shade; + } else { + maMaterialData.shade = DEFAULT_SHADE; + } + maShadeColorPicker.style.backgroundColor = maGetRGB(maMaterialData.shade); + + //SHADE MAP + if (materialDefinition.defaultFallthrough === true + && materialDefinition.shadeMap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.shadeMapIsActive = false; + maShadeMapIsActive.className = "uiMaterialAssistant-inactive"; + maShadeMap.disabled = true; + } else { + maMaterialData.shadeMapIsActive = true; + maShadeMapIsActive.className = "uiMaterialAssistant-active"; + maShadeMap.disabled = false; + } + + if (materialDefinition.shadeMap !== undefined) { + maMaterialData.shadeMap = materialDefinition.shadeMap; + } else { + maMaterialData.shadeMap = ""; + } + maShadeMap.value = maMaterialData.shadeMap; + + //MATCAP + if (materialDefinition.defaultFallthrough === true && materialDefinition.matcap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.matcapIsActive = false; + maMatcapIsActive.className = "uiMaterialAssistant-inactive"; + maMatcapColorPicker.style.pointerEvents = 'none'; + maMatcapColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.matcapIsActive = true; + maMatcapIsActive.className = "uiMaterialAssistant-active"; + maMatcapColorPicker.style.pointerEvents = 'auto'; + maMatcapColorPicker.style.backgroundColor = maGetRGB(maMaterialData.matcap); + } + + if (materialDefinition.matcap !== undefined) { + maMaterialData.matcap = materialDefinition.matcap; + } else { + maMaterialData.matcap = DEFAULT_MATCAP; + } + maMatcapColorPicker.style.backgroundColor = maGetRGB(maMaterialData.matcap); + + //MATCAP MAP + if (materialDefinition.defaultFallthrough === true + && materialDefinition.matcapMap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.matcapMapIsActive = false; + maMatcapMapIsActive.className = "uiMaterialAssistant-inactive"; + maMatcapMap.disabled = true; + } else { + maMaterialData.matcapMapIsActive = true; + maMatcapMapIsActive.className = "uiMaterialAssistant-active"; + maMatcapMap.disabled = false; + } + + if (materialDefinition.matcapMap !== undefined) { + maMaterialData.matcapMap = materialDefinition.matcapMap; + } else { + maMaterialData.matcapMap = ""; + } + maMatcapMap.value = maMaterialData.matcapMap; + + //SHADING SHIFT + if (materialDefinition.defaultFallthrough === true + && materialDefinition.shadingShift === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.shadingShiftIsActive = false; + maShadingShiftIsActive.className = "uiMaterialAssistant-inactive"; + maShadingShift.disabled = true; + maShadingShiftSlider.disabled = true; + } else { + maMaterialData.shadingShiftIsActive = true; + maShadingShiftIsActive.className = "uiMaterialAssistant-active"; + maShadingShift.disabled = false; + maShadingShiftSlider.disabled = false; + } + + if (materialDefinition.shadingShift !== undefined) { + maMaterialData.shadingShift = materialDefinition.shadingShift; + } else { + maMaterialData.shadingShift = DEFAULT_SHADING_SHIFT; + } + maShadingShift.value = maMaterialData.shadingShift; + maShadingShiftSlider.value = Math.floor(maMaterialData.shadingShift * 1000); + + //SHADING SHIFT MAP + if (materialDefinition.defaultFallthrough === true + && materialDefinition.shadingShiftMap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.shadingShiftMapIsActive = false; + maShadingShiftMapIsActive.className = "uiMaterialAssistant-inactive"; + maShadingShiftMap.disabled = true; + } else { + maMaterialData.shadingShiftMapIsActive = true; + maShadingShiftMapIsActive.className = "uiMaterialAssistant-active"; + maShadingShiftMap.disabled = false; + } + + if (materialDefinition.shadingShiftMap !== undefined) { + maMaterialData.shadingShiftMap = materialDefinition.shadingShiftMap; + } else { + maMaterialData.shadingShiftMap = ""; + } + maShadingShiftMap.value = maMaterialData.shadingShiftMap; + + //SHADING TOONY + if (materialDefinition.defaultFallthrough === true + && materialDefinition.shadingToony === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.shadingToonyIsActive = false; + maShadingToonyIsActive.className = "uiMaterialAssistant-inactive"; + maShadingToony.disabled = true; + maShadingToonySlider.disabled = true; + } else { + maMaterialData.shadingToonyIsActive = true; + maShadingToonyIsActive.className = "uiMaterialAssistant-active"; + maShadingToony.disabled = false; + maShadingToonySlider.disabled = false; + } + + if (materialDefinition.shadingToony !== undefined) { + maMaterialData.shadingToony = materialDefinition.shadingToony; + } else { + maMaterialData.shadingToony = DEFAULT_SHADING_TOONY; + } + maShadingToony.value = maMaterialData.shadingToony; + maShadingToonySlider.value = Math.floor(maMaterialData.shadingToony * 1000); + + //PARAMETRIC RIM + if (materialDefinition.defaultFallthrough === true && materialDefinition.parametricRim === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.parametricRimIsActive = false; + maParametricRimIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimColorPicker.style.pointerEvents = 'none'; + maParametricRimColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.parametricRimIsActive = true; + maParametricRimIsActive.className = "uiMaterialAssistant-active"; + maParametricRimColorPicker.style.pointerEvents = 'auto'; + maParametricRimColorPicker.style.backgroundColor = maGetRGB(maMaterialData.parametricRim); + } + + if (materialDefinition.parametricRim !== undefined) { + maMaterialData.parametricRim = materialDefinition.parametricRim; + } else { + maMaterialData.parametricRim = DEFAULT_PARAMETRIC_RIM; + } + maParametricRimColorPicker.style.backgroundColor = maGetRGB(maMaterialData.parametricRim); + + //RIM MAP + if (materialDefinition.defaultFallthrough === true + && materialDefinition.rimMap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.rimMapIsActive = false; + maRimMapIsActive.className = "uiMaterialAssistant-inactive"; + maRimMap.disabled = true; + } else { + maMaterialData.rimMapIsActive = true; + maRimMapIsActive.className = "uiMaterialAssistant-active"; + maRimMap.disabled = false; + } + + if (materialDefinition.rimMap !== undefined) { + maMaterialData.rimMap = materialDefinition.rimMap; + } else { + maMaterialData.rimMap = ""; + } + maRimMap.value = maMaterialData.rimMap; + + //RIM LIGHTING MIX + if (materialDefinition.defaultFallthrough === true + && materialDefinition.rimLightingMix === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.rimLightingMixIsActive = false; + maRimLightingMixIsActive.className = "uiMaterialAssistant-inactive"; + maRimLightingMix.disabled = true; + maRimLightingMixSlider.disabled = true; + } else { + maMaterialData.rimLightingMixIsActive = true; + maRimLightingMixIsActive.className = "uiMaterialAssistant-active"; + maRimLightingMix.disabled = false; + maRimLightingMixSlider.disabled = false; + } + + if (materialDefinition.rimLightingMix !== undefined) { + maMaterialData.rimLightingMix = materialDefinition.rimLightingMix; + } else { + maMaterialData.rimLightingMix = DEFAULT_RIM_LIGHTING_MIX; + } + maRimLightingMix.value = maMaterialData.rimLightingMix; + maRimLightingMixSlider.value = Math.floor(maMaterialData.rimLightingMix * 1000); + + //PARAMETRIC RIM FRESNEL POWER + if (materialDefinition.defaultFallthrough === true + && materialDefinition.parametricRimFresnelPower === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.parametricRimFresnelPowerIsActive = false; + maParametricRimFresnelPowerIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimFresnelPower.disabled = true; + maParametricRimFresnelPowerSlider.disabled = true; + } else { + maMaterialData.parametricRimFresnelPowerIsActive = true; + maParametricRimFresnelPowerIsActive.className = "uiMaterialAssistant-active"; + maParametricRimFresnelPower.disabled = false; + maParametricRimFresnelPowerSlider.disabled = false; + } + + if (materialDefinition.parametricRimFresnelPower !== undefined) { + maMaterialData.parametricRimFresnelPower = materialDefinition.parametricRimFresnelPower; + } else { + maMaterialData.parametricRimFresnelPower = DEFAULT_PARAMETRIC_RIM_FRESNEL_POWER; + } + maParametricRimFresnelPower.value = maMaterialData.parametricRimFresnelPower; + maParametricRimFresnelPowerSlider.value = Math.floor(maMaterialData.parametricRimFresnelPower * 1000); + + //PARAMETRIC RIM LIFT + if (materialDefinition.defaultFallthrough === true + && materialDefinition.parametricRimLift === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.parametricRimLiftIsActive = false; + maParametricRimLiftIsActive.className = "uiMaterialAssistant-inactive"; + maParametricRimLift.disabled = true; + maParametricRimLiftSlider.disabled = true; + } else { + maMaterialData.parametricRimLiftIsActive = true; + maParametricRimLiftIsActive.className = "uiMaterialAssistant-active"; + maParametricRimLift.disabled = false; + maParametricRimLiftSlider.disabled = false; + } + + if (materialDefinition.parametricRimLift !== undefined) { + maMaterialData.parametricRimLift = materialDefinition.parametricRimLift; + } else { + maMaterialData.parametricRimLift = DEFAULT_PARAMETRIC_RIM_LIFT; + } + maParametricRimLift.value = maMaterialData.parametricRimLift; + maParametricRimLiftSlider.value = Math.floor(maMaterialData.parametricRimLift * 1000); + +/* ######## Not supported yet, but the code is ready ######################################### + //OUTLINE WIDTH MODE + if (materialDefinition.defaultFallthrough === true + && materialDefinition.outlineWidthMode === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.outlineWidthModeIsActive = false; + maOutlineWidthModeIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineWidthModeNone.disabled = true; + maOutlineWidthModeWorld.disabled = true; + maOutlineWidthModeScreen.disabled = true; + } else { + maMaterialData.outlineWidthModeIsActive = true; + maOutlineWidthModeIsActive.className = "uiMaterialAssistant-active"; + maOutlineWidthModeNone.disabled = false; + maOutlineWidthModeWorld.disabled = false; + maOutlineWidthModeScreen.disabled = false; + } + + if (materialDefinition.outlineWidthMode !== undefined) { + maMaterialData.outlineWidthMode = materialDefinition.outlineWidthMode; + } else { + maMaterialData.outlineWidthMode = DEFAULT_OUTLINE_WIDTH_MODE; + } + + switch (maMaterialData.outlineWidthMode) { + case "none": + maOutlineWidthModeNone.checked = true; + break; + case "worldCoordinates": + maOutlineWidthModeWorld.checked = true; + break; + case "screenCoordinates": + maOutlineWidthModeScreen.checked = true; + break; + default: + alert("ERROR: outlineWidthMode = '" + maMaterialData.outlineWidthMode + "'. Something has been broken in the code."); + } + + //OUTLINE WIDTH + if (materialDefinition.defaultFallthrough === true + && materialDefinition.outlineWidth === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.outlineWidthIsActive = false; + maOutlineWidthIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineWidth.disabled = true; + maOutlineWidthSlider.disabled = true; + } else { + maMaterialData.outlineWidthIsActive = true; + maOutlineWidthIsActive.className = "uiMaterialAssistant-active"; + maOutlineWidth.disabled = false; + maOutlineWidthSlider.disabled = false; + } + + if (materialDefinition.outlineWidth !== undefined) { + maMaterialData.outlineWidth = materialDefinition.outlineWidth; + } else { + maMaterialData.outlineWidth = DEFAULT_OUTLINE_WIDTH; + } + maOutlineWidth.value = maMaterialData.outlineWidth; + maOutlineWidthSlider.value = Math.floor(maMaterialData.outlineWidth * 1000); + + //OUTLINE + if (materialDefinition.defaultFallthrough === true && materialDefinition.outline === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.outlineIsActive = false; + maOutlineIsActive.className = "uiMaterialAssistant-inactive"; + maOutlineColorPicker.style.pointerEvents = 'none'; + maOutlineColorPicker.style.backgroundColor = "#555555"; + } else { + maMaterialData.outlineIsActive = true; + maOutlineIsActive.className = "uiMaterialAssistant-active"; + maOutlineColorPicker.style.pointerEvents = 'auto'; + maOutlineColorPicker.style.backgroundColor = maGetRGB(maMaterialData.outline); + } + + if (materialDefinition.outline !== undefined) { + maMaterialData.outline = materialDefinition.outline; + } else { + maMaterialData.outline = DEFAULT_OUTLINE; + } + maOutlineColorPicker.style.backgroundColor = maGetRGB(maMaterialData.outline); + +//############################################################## +*/ + + //UV ANIMATION MASK MAP + if (materialDefinition.defaultFallthrough === true + && materialDefinition.uvAnimationMaskMap === undefined + && materialDefinition.model === "vrm_mtoon" ) { + maMaterialData.uvAnimationMaskMapIsActive = false; + maUvAnimationMaskMapIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationMaskMap.disabled = true; + } else { + maMaterialData.uvAnimationMaskMapIsActive = true; + maUvAnimationMaskMapIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationMaskMap.disabled = false; + } + + if (materialDefinition.uvAnimationMaskMap !== undefined) { + maMaterialData.uvAnimationMaskMap = materialDefinition.uvAnimationMaskMap; + } else { + maMaterialData.uvAnimationMaskMap = ""; + } + maUvAnimationMaskMap.value = maMaterialData.uvAnimationMaskMap; + + //UV ANIMATION SCROLL X SPEED + if (materialDefinition.defaultFallthrough === true + && materialDefinition.uvAnimationScrollXSpeed === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.uvAnimationScrollXSpeedIsActive = false; + maUvAnimationScrollXSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationScrollXSpeed.disabled = true; + maUvAnimationScrollXSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationScrollXSpeedIsActive = true; + maUvAnimationScrollXSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationScrollXSpeed.disabled = false; + maUvAnimationScrollXSpeedSlider.disabled = false; + } + + if (materialDefinition.uvAnimationScrollXSpeed !== undefined) { + maMaterialData.uvAnimationScrollXSpeed = materialDefinition.uvAnimationScrollXSpeed; + } else { + maMaterialData.uvAnimationScrollXSpeed = DEFAULT_UV_ANIMATION_SCROLL_X_SPEED; + } + maUvAnimationScrollXSpeed.value = maMaterialData.uvAnimationScrollXSpeed; + maUvAnimationScrollXSpeedSlider.value = Math.floor(maMaterialData.uvAnimationScrollXSpeed * 1000); + + //UV ANIMATION SCROLL Y SPEED + if (materialDefinition.defaultFallthrough === true + && materialDefinition.uvAnimationScrollYSpeed === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.uvAnimationScrollYSpeedIsActive = false; + maUvAnimationScrollYSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationScrollYSpeed.disabled = true; + maUvAnimationScrollYSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationScrollYSpeedIsActive = true; + maUvAnimationScrollYSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationScrollYSpeed.disabled = false; + maUvAnimationScrollYSpeedSlider.disabled = false; + } + + if (materialDefinition.uvAnimationScrollYSpeed !== undefined) { + maMaterialData.uvAnimationScrollYSpeed = materialDefinition.uvAnimationScrollYSpeed; + } else { + maMaterialData.uvAnimationScrollYSpeed = DEFAULT_UV_ANIMATION_SCROLL_Y_SPEED; + } + maUvAnimationScrollYSpeed.value = maMaterialData.uvAnimationScrollYSpeed; + maUvAnimationScrollYSpeedSlider.value = Math.floor(maMaterialData.uvAnimationScrollYSpeed * 1000); + + //UV ANIMATION ROTATION SPEED + if (materialDefinition.defaultFallthrough === true + && materialDefinition.uvAnimationRotationSpeed === undefined + && materialDefinition.model === "vrm_mtoon") { + maMaterialData.uvAnimationRotationSpeedIsActive = false; + maUvAnimationRotationSpeedIsActive.className = "uiMaterialAssistant-inactive"; + maUvAnimationRotationSpeed.disabled = true; + maUvAnimationRotationSpeedSlider.disabled = true; + } else { + maMaterialData.uvAnimationRotationSpeedIsActive = true; + maUvAnimationRotationSpeedIsActive.className = "uiMaterialAssistant-active"; + maUvAnimationRotationSpeed.disabled = false; + maUvAnimationRotationSpeedSlider.disabled = false; + } + + if (materialDefinition.uvAnimationRotationSpeed !== undefined) { + maMaterialData.uvAnimationRotationSpeed = materialDefinition.uvAnimationRotationSpeed; + } else { + maMaterialData.uvAnimationRotationSpeed = DEFAULT_UV_ANIMATION_ROTATION_SPEED; + } + maUvAnimationRotationSpeed.value = maMaterialData.uvAnimationRotationSpeed; + maUvAnimationRotationSpeedSlider.value = Math.floor(maMaterialData.uvAnimationRotationSpeed * 1000); + + //PROCEDURAL + if (materialDefinition.procedural !== undefined) { + maMaterialData.procedural = JSON.stringify(materialDefinition.procedural, null, 4); + maAddProceduralTemplate.disabled = true; + } else { + maMaterialData.procedural = ""; + maAddProceduralTemplate.disabled = false; + } + maProcedural.value = maMaterialData.procedural; //CULL FACE MODE if (materialDefinition.cullFaceMode !== undefined) { @@ -715,134 +2014,438 @@ function loadDataInMaUi(materialDataPropertyValue) { default: alert("ERROR: cullFaceMode = '" + maMaterialData.cullFaceMode + "'. Something has been broken in the code."); } + + maFieldContextualDisplayer(); +} + +function maFieldContextualDisplayer() { + if (maMaterialData.model === "hifi_pbr") { + document.getElementById("maContainerAlbedo").style.display = "block"; + document.getElementById("maContainerAlbedoMap").style.display = "block"; + document.getElementById("maContainerMetallic").style.display = "block"; + document.getElementById("maContainerRoughness").style.display = "block"; + document.getElementById("maContainerNormalMap").style.display = "block"; + document.getElementById("maContainerOpacity").style.display = "block"; + document.getElementById("maContainerOpacityMap").style.display = "block"; + document.getElementById("maContainerEmissive").style.display = "block"; + document.getElementById("maContainerEmissiveMap").style.display = "block"; + document.getElementById("maContainerUnlit").style.display = "block"; + document.getElementById("maContainerScattering").style.display = "block"; + document.getElementById("maContainerOcclusionMap").style.display = "block"; + document.getElementById("maContainerLightMap").style.display = "block"; + document.getElementById("maContainerMtoon").style.display = "none"; + document.getElementById("maContainerShaderSimple").style.display = "none"; + } else if (maMaterialData.model === "vrm_mtoon") { + document.getElementById("maContainerAlbedo").style.display = "block"; + document.getElementById("maContainerAlbedoMap").style.display = "block"; + document.getElementById("maContainerMetallic").style.display = "none"; + document.getElementById("maContainerRoughness").style.display = "none"; + document.getElementById("maContainerNormalMap").style.display = "block"; + document.getElementById("maContainerOpacity").style.display = "block"; + document.getElementById("maContainerOpacityMap").style.display = "block"; + document.getElementById("maContainerEmissive").style.display = "block"; + document.getElementById("maContainerEmissiveMap").style.display = "block"; + document.getElementById("maContainerUnlit").style.display = "none"; + document.getElementById("maContainerScattering").style.display = "none"; + document.getElementById("maContainerOcclusionMap").style.display = "none"; + document.getElementById("maContainerLightMap").style.display = "none"; + document.getElementById("maContainerMtoon").style.display = "block"; + document.getElementById("maContainerShaderSimple").style.display = "none"; + } else if (maMaterialData.model === "hifi_shader_simple") { + document.getElementById("maContainerAlbedo").style.display = "block"; + document.getElementById("maContainerAlbedoMap").style.display = "none"; + document.getElementById("maContainerMetallic").style.display = "none"; + document.getElementById("maContainerRoughness").style.display = "none"; + document.getElementById("maContainerNormalMap").style.display = "none"; + document.getElementById("maContainerOpacity").style.display = "block"; + document.getElementById("maContainerOpacityMap").style.display = "none"; + document.getElementById("maContainerEmissive").style.display = "none"; + document.getElementById("maContainerEmissiveMap").style.display = "none"; + document.getElementById("maContainerUnlit").style.display = "none"; + document.getElementById("maContainerScattering").style.display = "none"; + document.getElementById("maContainerOcclusionMap").style.display = "none"; + document.getElementById("maContainerLightMap").style.display = "none"; + document.getElementById("maContainerMtoon").style.display = "none"; + document.getElementById("maContainerShaderSimple").style.display = "block"; + } } function maGenerateJsonAndSave() { var newMaterial = {}; var defaultFallthrough = false; + //MODEL + newMaterial.model = maMaterialData.model; + //NAME if (maMaterialData.name != "") { newMaterial.name = maMaterialData.name; } - //ALBEDO & ALBEDOMAP + //ALBEDO if (maMaterialData.albedoIsActive) { newMaterial.albedo = maMaterialData.albedo; - if (maMaterialData.albedoMap !== "") { - newMaterial.albedoMap = maMaterialData.albedoMap; - } } else { defaultFallthrough = true; } - //METALLIC & METALLICMAP - if (maMaterialData.metallicIsActive) { - if (maMaterialData.metallicMap === "") { - newMaterial.metallic = maMaterialData.metallic; + + if (maMaterialData.model === "hifi_pbr") { + + //ALBEDOMAP + if (maMaterialData.albedoMapIsActive) { + newMaterial.albedoMap = maMaterialData.albedoMap || ""; } else { - newMaterial.metallicMap = maMaterialData.metallicMap; + defaultFallthrough = true; } - } else { - defaultFallthrough = true; - } - - //ROUGHNESS & ROUGHNESSMAP - if (maMaterialData.roughnessIsActive) { - if (maMaterialData.roughnessMap === "") { - newMaterial.roughness = maMaterialData.roughness; + + //METALLIC & METALLICMAP + if (maMaterialData.metallicIsActive) { + if (maMaterialData.metallicMap === "") { + newMaterial.metallic = maMaterialData.metallic; + } else { + if (maMaterialData.useSpecular) { + newMaterial.specularMap = maMaterialData.metallicMap; + } else { + newMaterial.metallicMap = maMaterialData.metallicMap; + } + } } else { - newMaterial.roughnessMap = maMaterialData.roughnessMap; + defaultFallthrough = true; } - } else { - defaultFallthrough = true; - } - - //NORMAL MAP - if (maMaterialData.normalMapIsActive) { - if (maMaterialData.normalMap !== "") { - newMaterial.normalMap = maMaterialData.normalMap; - } - } else { - defaultFallthrough = true; - } - - //OPACITY - if (maMaterialData.opacityIsActive) { - switch (maMaterialData.opacityMapMode) { - case "OPACITY_MAP_OPAQUE": - newMaterial.opacity = maMaterialData.opacity; - break; - case "OPACITY_MAP_MASK": - newMaterial.opacityMapMode = maMaterialData.opacityMapMode; - newMaterial.opacityMap = maMaterialData.albedoMap; - newMaterial.opacityCutoff = maMaterialData.opacityCutoff; - break; - case "OPACITY_MAP_BLEND": - newMaterial.opacityMapMode = maMaterialData.opacityMapMode; - newMaterial.opacityMap = maMaterialData.albedoMap; - break; - default: - alert("ERROR: opacityMapMode = '" + maMaterialData.opacityMapMode + "'. Something has been broken in the code."); - } - } else { - defaultFallthrough = true; - } - - //EMISSIVE - if (maMaterialData.emissiveIsActive) { - if (maMaterialData.emissiveMap === "") { - newMaterial.emissive = scaleEmissiveByBloomFactor(maMaterialData.emissive, maMaterialData.bloom); + + //ROUGHNESS & ROUGHNESSMAP + if (maMaterialData.roughnessIsActive) { + if (maMaterialData.roughnessMap === "") { + newMaterial.roughness = maMaterialData.roughness; + } else { + if (maMaterialData.useGloss) { + newMaterial.glossMap = maMaterialData.roughnessMap; + } else { + newMaterial.roughnessMap = maMaterialData.roughnessMap; + } + } } else { - newMaterial.emissiveMap = maMaterialData.emissiveMap; - } - } else { - defaultFallthrough = true; - } + defaultFallthrough = true; + } - //UNLIT - if (maMaterialData.unlit) { - newMaterial.unlit = maMaterialData.unlit; - } - - //SCATTERING - if (maMaterialData.scatteringIsActive) { - if (maMaterialData.scatteringMap === "") { - newMaterial.scattering = maMaterialData.scattering; + //NORMAL MAP + if (maMaterialData.normalMapIsActive) { + if (maMaterialData.useBump) { + newMaterial.bumpMap = maMaterialData.normalMap || ""; + } else { + newMaterial.normalMap = maMaterialData.normalMap || ""; + } } else { - newMaterial.scatteringMap = maMaterialData.scatteringMap; + defaultFallthrough = true; } - } else { - defaultFallthrough = true; - } - - //OCCLUSION MAP - if (maMaterialData.occlusionMapIsActive) { - if (maMaterialData.occlusionMap !== "") { - newMaterial.occlusionMap = maMaterialData.occlusionMap; + + //OPACITY + if (maMaterialData.opacityIsActive) { + switch (maMaterialData.opacityMapMode) { + case "OPACITY_MAP_OPAQUE": + newMaterial.opacity = maMaterialData.opacity; + break; + case "OPACITY_MAP_MASK": + newMaterial.opacityMapMode = maMaterialData.opacityMapMode; + newMaterial.opacityMap = maMaterialData.albedoMap; + newMaterial.opacityCutoff = maMaterialData.opacityCutoff; + break; + case "OPACITY_MAP_BLEND": + newMaterial.opacityMapMode = maMaterialData.opacityMapMode; + newMaterial.opacityMap = maMaterialData.albedoMap; + break; + default: + alert("ERROR: opacityMapMode = '" + maMaterialData.opacityMapMode + "'. Something has been broken in the code."); + } + } else { + defaultFallthrough = true; } - } else { - defaultFallthrough = true; + + //EMISSIVE + if (maMaterialData.emissiveIsActive) { + if (maMaterialData.emissiveMap === "") { + newMaterial.emissive = scaleEmissiveByBloomFactor(maMaterialData.emissive, maMaterialData.bloom); + } else { + newMaterial.emissiveMap = maMaterialData.emissiveMap; + } + } else { + defaultFallthrough = true; + } + + //UNLIT + if (maMaterialData.unlit) { + newMaterial.unlit = maMaterialData.unlit; + } + + //SCATTERING + if (maMaterialData.scatteringIsActive) { + if (maMaterialData.scatteringMap === "") { + newMaterial.scattering = maMaterialData.scattering; + } else { + newMaterial.scatteringMap = maMaterialData.scatteringMap; + } + } else { + defaultFallthrough = true; + } + + //OCCLUSION MAP + if (maMaterialData.occlusionMapIsActive) { + newMaterial.occlusionMap = maMaterialData.occlusionMap || ""; + } else { + defaultFallthrough = true; + } + + //LIGHT MAP + if (maMaterialData.lightMapIsActive) { + newMaterial.lightMap = maMaterialData.lightMap || ""; + } else { + defaultFallthrough = true; + } + + } else if (maMaterialData.model === "vrm_mtoon") { + //ALBEDOMAP + if (maMaterialData.albedoMapIsActive) { + newMaterial.albedoMap = maMaterialData.albedoMap || ""; + } else { + defaultFallthrough = true; + } + + //NORMAL MAP + if (maMaterialData.normalMapIsActive) { + if (maMaterialData.useBump) { + newMaterial.bumpMap = maMaterialData.normalMap || ""; + } else { + newMaterial.normalMap = maMaterialData.normalMap || ""; + } + } else { + defaultFallthrough = true; + } + + //EMISSIVE + if (maMaterialData.emissiveIsActive) { + if (maMaterialData.emissiveMap === "") { + newMaterial.emissive = scaleEmissiveByBloomFactor(maMaterialData.emissive, maMaterialData.bloom); + } else { + newMaterial.emissiveMap = maMaterialData.emissiveMap; + } + } else { + defaultFallthrough = true; + } + + //OPACITY + if (maMaterialData.opacityIsActive) { + switch (maMaterialData.opacityMapMode) { + case "OPACITY_MAP_OPAQUE": + newMaterial.opacity = maMaterialData.opacity; + break; + case "OPACITY_MAP_MASK": + newMaterial.opacityMapMode = maMaterialData.opacityMapMode; + newMaterial.opacityMap = maMaterialData.albedoMap; + newMaterial.opacityCutoff = maMaterialData.opacityCutoff; + break; + case "OPACITY_MAP_BLEND": + newMaterial.opacityMapMode = maMaterialData.opacityMapMode; + newMaterial.opacityMap = maMaterialData.albedoMap; + break; + default: + alert("ERROR: opacityMapMode = '" + maMaterialData.opacityMapMode + "'. Something has been broken in the code."); + } + } else { + defaultFallthrough = true; + } + + //SHADE + if (maMaterialData.shadeIsActive) { + newMaterial.shade = maMaterialData.shade; + } else { + defaultFallthrough = true; + } + + //SHADEMAP + if (maMaterialData.shadeMapIsActive) { + newMaterial.shadeMap = maMaterialData.shadeMap || ""; + } else { + defaultFallthrough = true; + } + + //MATCAP + if (maMaterialData.matcapIsActive) { + newMaterial.matcap = maMaterialData.matcap; + } else { + defaultFallthrough = true; + } + + //MATCAPMAP + if (maMaterialData.matcapMapIsActive) { + newMaterial.matcapMap = maMaterialData.matcapMap || ""; + } else { + defaultFallthrough = true; + } + //SHADING SHIFT + if (maMaterialData.shadingShiftIsActive) { + newMaterial.shadingShift = maMaterialData.shadingShift; + } else { + defaultFallthrough = true; + } + + //SHADING SHIFT MAP + if (maMaterialData.shadingShiftMapIsActive) { + newMaterial.shadingShiftMap = maMaterialData.shadingShiftMap || ""; + } else { + defaultFallthrough = true; + } + + //SHADING TOONY + if (maMaterialData.shadingToonyIsActive) { + newMaterial.shadingToony = maMaterialData.shadingToony; + } else { + defaultFallthrough = true; + } + + //PARAMETRIC RIM + if (maMaterialData.parametricRimIsActive) { + newMaterial.parametricRim = maMaterialData.parametricRim; + } else { + defaultFallthrough = true; + } + + //RIM MAP + if (maMaterialData.rimMapIsActive) { + newMaterial.rimMap = maMaterialData.rimMap || ""; + } else { + defaultFallthrough = true; + } + + //RIM LIGHTING MIX + if (maMaterialData.rimLightingMixIsActive) { + newMaterial.rimLightingMix = maMaterialData.rimLightingMix; + } else { + defaultFallthrough = true; + } + + //PARAMETRIC RIM FRESNEL POWER + if (maMaterialData.parametricRimFresnelPowerIsActive) { + newMaterial.parametricRimFresnelPower = maMaterialData.parametricRimFresnelPower; + } else { + defaultFallthrough = true; + } + + //PARAMETRIC RIM LIFT + if (maMaterialData.parametricRimLiftIsActive) { + newMaterial.parametricRimLift = maMaterialData.parametricRimLift; + } else { + defaultFallthrough = true; + } +/* ###################### Not yet supported but ready for it... ############################# + + //OUTLINE WIDTH MODE + if (maMaterialData.outlineWidthModeIsActive) { + newMaterial.outlineWidthMode = maMaterialData.outlineWidthMode; + } else { + defaultFallthrough = true; + } + + //OUTLINE WIDTH + if (maMaterialData.outlineWidthIsActive) { + newMaterial.outlineWidth = maMaterialData.outlineWidth; + } else { + defaultFallthrough = true; + } + + //OUTLINE + if (maMaterialData.outlineIsActive) { + newMaterial.outline = maMaterialData.outline; + } else { + defaultFallthrough = true; + } + + if (newMaterial.outlineWidthMode === "none") { + delete newMaterial.outlineWidth; + delete newMaterial.outline; + } + + //##################################################################################### +*/ + //UV ANIMATION MASK MAP + if (maMaterialData.uvAnimationMaskMapIsActive) { + newMaterial.uvAnimationMaskMap = maMaterialData.uvAnimationMaskMap || ""; + } else { + defaultFallthrough = true; + } + + //UV ANIMATION SCROLL X SPEED + if (maMaterialData.uvAnimationScrollXSpeedIsActive) { + newMaterial.uvAnimationScrollXSpeed = maMaterialData.uvAnimationScrollXSpeed; + } else { + defaultFallthrough = true; + } + + //UV ANIMATION SCROLL Y SPEED + if (maMaterialData.uvAnimationScrollYSpeedIsActive) { + newMaterial.uvAnimationScrollYSpeed = maMaterialData.uvAnimationScrollYSpeed; + } else { + defaultFallthrough = true; + } + + //UV ANIMATION ROTATION SPEED + if (maMaterialData.uvAnimationRotationSpeedIsActive) { + newMaterial.uvAnimationRotationSpeed = maMaterialData.uvAnimationRotationSpeed; + } else { + defaultFallthrough = true; + } + + } else if (maMaterialData.model === "hifi_shader_simple") { + //OPACITY + if (maMaterialData.opacityIsActive) { + newMaterial.opacity = maMaterialData.opacity; + } else { + defaultFallthrough = true; + } + + //PROCEDURAL + + if ( maMaterialData.procedural === "") { + maAddProceduralTemplate.disabled = false; + } else { + newMaterial.procedural = JSON.parse(maMaterialData.procedural); + maAddProceduralTemplate.disabled = true; + } + } //CULL FACE MODE newMaterial.cullFaceMode = maMaterialData.cullFaceMode; - //MODEL - newMaterial.model = maMaterialData.model; - //defaultFallthrough if (defaultFallthrough) { newMaterial.defaultFallthrough = true; } - + + //Remove the empty map when defaultFallthrough is false + if (!defaultFallthrough) { + if (newMaterial.albedoMap === "") {delete newMaterial.albedoMap; } + if (newMaterial.normalMap === "") {delete newMaterial.normalMap; } + if (newMaterial.bumpMap === "") {delete newMaterial.bumpMap; } + if (newMaterial.occlusionMap === "") {delete newMaterial.occlusionMap; } + if (newMaterial.lightMap === "") {delete newMaterial.lightMap; } + if (newMaterial.shadeMap === "") {delete newMaterial.shadeMap; } + if (newMaterial.matcapMap === "") {delete newMaterial.matcapMap; } + if (newMaterial.shadingShiftMap === "") {delete newMaterial.shadingShiftMap; } + if (newMaterial.rimMap === "") {delete newMaterial.rimMap; } + if (newMaterial.uvAnimationMaskMap === "") {delete newMaterial.uvAnimationMaskMap; } +/* ############## Not yet supported, but the code is ready (commented) ################### + if (newMaterial.outlineWidthMode === "none") {delete newMaterial.outlineWidthMode; } +//############################################################################################ */ + } + //insert newMaterial to materialData var materialDataForUpdate = { "materialVersion": 1, "materials": [] }; materialDataForUpdate.materials.push(newMaterial); - + //save to property EventBridge.emitWebEvent( JSON.stringify({ @@ -912,10 +2515,13 @@ function maGetMaterialDataAssistantAvailability(materialData) { materialDataJSON = materialData; materialDataString = JSON.stringify(materialData); } - if (getPropertyInputElement("materialURL").value === "materialData" && materialDataString.indexOf("hifi_shader_simple") === -1 && - materialDataString.indexOf("glossMap") === -1 && materialDataString.indexOf("specularMap") === -1 && - materialDataString.indexOf("bumpMap") === -1 && materialDataString.indexOf("lightMap") === -1 && - materialDataString.indexOf("texCoordTransform0") === -1 && materialDataString.indexOf("texCoordTransform1") === -1 && + + if (getPropertyInputElement("materialURL").value === "materialData" && + materialDataString.indexOf("outlineWidthMode") === -1 && //<=== ##### REMOVE THIS LINE WHEN YOU REACTIVATE OUTINE BLOCK (commented in the code) ##### + materialDataString.indexOf("outlineWidth") === -1 && //<=== ##### REMOVE THIS LINE WHEN YOU REACTIVATE OUTINE BLOCK (commented in the code) ##### + materialDataString.indexOf("outline") === -1 && //<=== ##### REMOVE THIS LINE WHEN YOU REACTIVATE OUTINE BLOCK (commented in the code) ##### + materialDataString.indexOf("texCoordTransform0") === -1 && + materialDataString.indexOf("texCoordTransform1") === -1 && (materialDataJSON.materials === undefined || materialDataJSON.materials.length <= 1 || typeof materialDataJSON.materials === "object")) { showMaterialAssistantButton(); } else {