//// materialAssistant.js//// Created by Alezia Kurdis on May 19th, 2022.// Copyright 2022 Vircadia contributors.// 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 let maMaterialData = {}; let maClose, maName, maAlbedoIsActive, maAlbedoColorPicker, maAlbedoColorPickerSel, maAlbedoMapIsActive, maAlbedoMap, maMetallicIsActive, maMetallic, maMetallicSlider, maMetallicMap, maUseSpecular, maRoughnessIsActive, maRoughness, maRoughnessSlider, maRoughnessMap, maUseGloss, maNormalMapIsActive, maNormalMap, maUseBump, maOpacityIsActive, maOpacity, maOpacitySlider, maOpacityMapModeDont, maOpacityMapModeMask, maOpacityMapModeBlend, maOpacityCutoff, maOpacityCutoffSlider, maEmissiveIsActive, maEmissiveColorPicker, maEmissiveColorPickerSel, maBloom, maBloomSlider, maUnlit, maEmissiveMap, maScatteringIsActive, maScattering, maScatteringSlider, 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, maModelHifiPbr, maModelVrmMtoon, maModelHifiShaderSimple; let DEFAULT_ALBEDO = [1,1,1];let DEFAULT_EMISSIVE = [0,0,0];let DEFAULT_BLOOM_FACTOR = 1;let DEFAULT_ROUGHNESS = 0.9;let DEFAULT_METALLIC_FOR_MA_UI = 0.001;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"); maName = document.getElementById("ma-name"); maAlbedoIsActive = document.getElementById("ma-albedo-isActive"); maAlbedoColorPicker = document.getElementById("ma-albedo-colorPicker"); maAlbedoMapIsActive = document.getElementById("ma-albedoMap-isActive"); maAlbedoMap = document.getElementById("ma-albedoMap"); maMetallicIsActive = document.getElementById("ma-metallic-isActive"); 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"); maOpacityMapModeDont = document.getElementById("ma-opacityMapMode-dont"); maOpacityMapModeMask = document.getElementById("ma-opacityMapMode-mask"); maOpacityMapModeBlend = document.getElementById("ma-opacityMapMode-blend"); maOpacityCutoff = document.getElementById("ma-opacityCutoff"); maOpacityCutoffSlider = document.getElementById("ma-opacityCutoff-slider"); maEmissiveIsActive = document.getElementById("ma-emissive-isActive"); maEmissiveColorPicker = document.getElementById("ma-emissive-colorPicker"); maBloom = document.getElementById("ma-bloom"); maBloomSlider = document.getElementById("ma-bloom-slider"); maUnlit = document.getElementById("ma-unlit"); maEmissiveMap = document.getElementById("ma-emissiveMap"); maScatteringIsActive = document.getElementById("ma-scattering-isActive"); maScattering = document.getElementById("ma-scattering"); maScatteringSlider = document.getElementById("ma-scattering-slider"); 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(); }; maAlbedoIsActive.onclick = function() { if (maMaterialData.albedoIsActive) { maMaterialData.albedoIsActive = false; maAlbedoIsActive.className = "uiMaterialAssistant-inactive"; maAlbedoColorPicker.style.pointerEvents = 'none'; maAlbedoColorPicker.style.backgroundColor = "#555555"; } else { maMaterialData.albedoIsActive = true; maAlbedoIsActive.className = "uiMaterialAssistant-active"; maAlbedoColorPicker.style.pointerEvents = 'auto'; maAlbedoColorPicker.style.backgroundColor = maGetRGB(maMaterialData.albedo); } maGenerateJsonAndSave(); }; maAlbedoMapIsActive.onclick = function() { if (maMaterialData.albedoMapIsActive) { maMaterialData.albedoMapIsActive = false; maAlbedoMapIsActive.className = "uiMaterialAssistant-inactive"; maAlbedoMap.disabled = true; } else { maMaterialData.albedoMapIsActive = true; maAlbedoMapIsActive.className = "uiMaterialAssistant-active"; maAlbedoMap.disabled = false; if (maMaterialData.albedoMap === undefined) { maMaterialData.albedoMap = ""; } } maGenerateJsonAndSave(); }; maMetallicIsActive.onclick = function() { if (maMaterialData.metallicIsActive) { 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; } maGenerateJsonAndSave(); }; maRoughnessIsActive.onclick = function() { if (maMaterialData.roughnessIsActive) { 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; } maGenerateJsonAndSave(); }; maNormalMapIsActive.onclick = function() { if (maMaterialData.normalMapIsActive) { 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(); }; maOpacityIsActive.onclick = function() { if (maMaterialData.opacityIsActive) { maMaterialData.opacityIsActive = false; maOpacityIsActive.className = "uiMaterialAssistant-inactive"; maOpacity.disabled = true; maOpacitySlider.disabled = true; maOpacityMapModeDont.disabled = true; maOpacityMapModeMask.disabled = true; maOpacityMapModeBlend.disabled = true; maOpacityCutoff.disabled = true; maOpacityCutoffSlider.disabled = true; } else { maMaterialData.opacityIsActive = true; maOpacityIsActive.className = "uiMaterialAssistant-active"; maOpacity.disabled = false; maOpacitySlider.disabled = false; maOpacityMapModeDont.disabled = false; maOpacityMapModeMask.disabled = false; maOpacityMapModeBlend.disabled = false; maOpacityCutoff.disabled = false; maOpacityCutoffSlider.disabled = false; } maGenerateJsonAndSave(); }; maEmissiveIsActive.onclick = function() { if (maMaterialData.emissiveIsActive) { maMaterialData.emissiveIsActive = false; maEmissiveIsActive.className = "uiMaterialAssistant-inactive"; maBloom.disabled = true; maBloomSlider.disabled = true; maEmissiveMap.disabled = true; maEmissiveColorPicker.style.pointerEvents = 'none'; maEmissiveColorPicker.style.backgroundColor = "#555555"; } else { maMaterialData.emissiveIsActive = true; maEmissiveIsActive.className = "uiMaterialAssistant-active"; maBloom.disabled = false; maBloomSlider.disabled = false; maEmissiveMap.disabled = false; maEmissiveColorPicker.style.pointerEvents = 'auto'; maEmissiveColorPicker.style.backgroundColor = maGetRGB(maMaterialData.emissive); } maGenerateJsonAndSave(); }; maScatteringIsActive.onclick = function() { if (maMaterialData.scatteringIsActive) { maMaterialData.scatteringIsActive = false; maScatteringIsActive.className = "uiMaterialAssistant-inactive"; maScattering.disabled = true; maScatteringSlider.disabled = true; maScatteringMap.disabled = true; } else { maMaterialData.scatteringIsActive = true; maScatteringIsActive.className = "uiMaterialAssistant-active"; maScattering.disabled = false; maScatteringSlider.disabled = false; maScatteringMap.disabled = false; } maGenerateJsonAndSave(); }; maOcclusionMapIsActive.onclick = function() { if (maMaterialData.occlusionMapIsActive) { maMaterialData.occlusionMapIsActive = false; maOcclusionMapIsActive.className = "uiMaterialAssistant-inactive"; maOcclusionMap.disabled = true; } else { 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(); }; maMetallicSlider.oninput = function() { maMetallic.value = maMetallicSlider.value/1000; maMaterialData.metallic = parseFloat(maMetallic.value); maGenerateJsonAndSave(); }; maMetallicMap.oninput = function() { 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); maGenerateJsonAndSave(); }; maRoughnessMap.oninput = function() { 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); maGenerateJsonAndSave(); }; maOpacityMapModeDont.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeDont.value; maGenerateJsonAndSave(); }; maOpacityMapModeMask.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeMask.value; maGenerateJsonAndSave(); }; maOpacityMapModeBlend.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeBlend.value; maGenerateJsonAndSave(); }; maOpacityCutoffSlider.oninput = function() { maOpacityCutoff.value = maOpacityCutoffSlider.value/1000; maMaterialData.opacityCutoff = parseFloat(maOpacityCutoff.value); maGenerateJsonAndSave(); }; maBloomSlider.oninput = function() { maBloom.value = maBloomSlider.value/100; maMaterialData.bloom = parseFloat(maBloom.value); maGenerateJsonAndSave(); }; maUnlit.oninput = function() { maMaterialData.unlit = maUnlit.checked; maGenerateJsonAndSave(); };Lines 1–500 of 2531. Load more
// // materialAssistant.js // // Created by Alezia Kurdis on May 19th, 2022. // Copyright 2022 Vircadia contributors. // 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 let maMaterialData = {}; let maClose, maName, maAlbedoIsActive, maAlbedoColorPicker, maAlbedoColorPickerSel, maAlbedoMapIsActive, maAlbedoMap, maMetallicIsActive, maMetallic, maMetallicSlider, maMetallicMap, maUseSpecular, maRoughnessIsActive, maRoughness, maRoughnessSlider, maRoughnessMap, maUseGloss, maNormalMapIsActive, maNormalMap, maUseBump, maOpacityIsActive, maOpacity, maOpacitySlider, maOpacityMapModeDont, maOpacityMapModeMask, maOpacityMapModeBlend, maOpacityCutoff, maOpacityCutoffSlider, maEmissiveIsActive, maEmissiveColorPicker, maEmissiveColorPickerSel, maBloom, maBloomSlider, maUnlit, maEmissiveMap, maScatteringIsActive, maScattering, maScatteringSlider, 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, maModelHifiPbr, maModelVrmMtoon, maModelHifiShaderSimple; let DEFAULT_ALBEDO = [1,1,1]; let DEFAULT_EMISSIVE = [0,0,0]; let DEFAULT_BLOOM_FACTOR = 1; let DEFAULT_ROUGHNESS = 0.9; let DEFAULT_METALLIC_FOR_MA_UI = 0.001; 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"); maName = document.getElementById("ma-name"); maAlbedoIsActive = document.getElementById("ma-albedo-isActive"); maAlbedoColorPicker = document.getElementById("ma-albedo-colorPicker"); maAlbedoMapIsActive = document.getElementById("ma-albedoMap-isActive"); maAlbedoMap = document.getElementById("ma-albedoMap"); maMetallicIsActive = document.getElementById("ma-metallic-isActive"); 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"); maOpacityMapModeDont = document.getElementById("ma-opacityMapMode-dont"); maOpacityMapModeMask = document.getElementById("ma-opacityMapMode-mask"); maOpacityMapModeBlend = document.getElementById("ma-opacityMapMode-blend"); maOpacityCutoff = document.getElementById("ma-opacityCutoff"); maOpacityCutoffSlider = document.getElementById("ma-opacityCutoff-slider"); maEmissiveIsActive = document.getElementById("ma-emissive-isActive"); maEmissiveColorPicker = document.getElementById("ma-emissive-colorPicker"); maBloom = document.getElementById("ma-bloom"); maBloomSlider = document.getElementById("ma-bloom-slider"); maUnlit = document.getElementById("ma-unlit"); maEmissiveMap = document.getElementById("ma-emissiveMap"); maScatteringIsActive = document.getElementById("ma-scattering-isActive"); maScattering = document.getElementById("ma-scattering"); maScatteringSlider = document.getElementById("ma-scattering-slider"); 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(); }; maAlbedoIsActive.onclick = function() { if (maMaterialData.albedoIsActive) { maMaterialData.albedoIsActive = false; maAlbedoIsActive.className = "uiMaterialAssistant-inactive"; maAlbedoColorPicker.style.pointerEvents = 'none'; maAlbedoColorPicker.style.backgroundColor = "#555555"; } else { maMaterialData.albedoIsActive = true; maAlbedoIsActive.className = "uiMaterialAssistant-active"; maAlbedoColorPicker.style.pointerEvents = 'auto'; maAlbedoColorPicker.style.backgroundColor = maGetRGB(maMaterialData.albedo); } maGenerateJsonAndSave(); }; maAlbedoMapIsActive.onclick = function() { if (maMaterialData.albedoMapIsActive) { maMaterialData.albedoMapIsActive = false; maAlbedoMapIsActive.className = "uiMaterialAssistant-inactive"; maAlbedoMap.disabled = true; } else { maMaterialData.albedoMapIsActive = true; maAlbedoMapIsActive.className = "uiMaterialAssistant-active"; maAlbedoMap.disabled = false; if (maMaterialData.albedoMap === undefined) { maMaterialData.albedoMap = ""; } } maGenerateJsonAndSave(); }; maMetallicIsActive.onclick = function() { if (maMaterialData.metallicIsActive) { 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; } maGenerateJsonAndSave(); }; maRoughnessIsActive.onclick = function() { if (maMaterialData.roughnessIsActive) { 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; } maGenerateJsonAndSave(); }; maNormalMapIsActive.onclick = function() { if (maMaterialData.normalMapIsActive) { 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(); }; maOpacityIsActive.onclick = function() { if (maMaterialData.opacityIsActive) { maMaterialData.opacityIsActive = false; maOpacityIsActive.className = "uiMaterialAssistant-inactive"; maOpacity.disabled = true; maOpacitySlider.disabled = true; maOpacityMapModeDont.disabled = true; maOpacityMapModeMask.disabled = true; maOpacityMapModeBlend.disabled = true; maOpacityCutoff.disabled = true; maOpacityCutoffSlider.disabled = true; } else { maMaterialData.opacityIsActive = true; maOpacityIsActive.className = "uiMaterialAssistant-active"; maOpacity.disabled = false; maOpacitySlider.disabled = false; maOpacityMapModeDont.disabled = false; maOpacityMapModeMask.disabled = false; maOpacityMapModeBlend.disabled = false; maOpacityCutoff.disabled = false; maOpacityCutoffSlider.disabled = false; } maGenerateJsonAndSave(); }; maEmissiveIsActive.onclick = function() { if (maMaterialData.emissiveIsActive) { maMaterialData.emissiveIsActive = false; maEmissiveIsActive.className = "uiMaterialAssistant-inactive"; maBloom.disabled = true; maBloomSlider.disabled = true; maEmissiveMap.disabled = true; maEmissiveColorPicker.style.pointerEvents = 'none'; maEmissiveColorPicker.style.backgroundColor = "#555555"; } else { maMaterialData.emissiveIsActive = true; maEmissiveIsActive.className = "uiMaterialAssistant-active"; maBloom.disabled = false; maBloomSlider.disabled = false; maEmissiveMap.disabled = false; maEmissiveColorPicker.style.pointerEvents = 'auto'; maEmissiveColorPicker.style.backgroundColor = maGetRGB(maMaterialData.emissive); } maGenerateJsonAndSave(); }; maScatteringIsActive.onclick = function() { if (maMaterialData.scatteringIsActive) { maMaterialData.scatteringIsActive = false; maScatteringIsActive.className = "uiMaterialAssistant-inactive"; maScattering.disabled = true; maScatteringSlider.disabled = true; maScatteringMap.disabled = true; } else { maMaterialData.scatteringIsActive = true; maScatteringIsActive.className = "uiMaterialAssistant-active"; maScattering.disabled = false; maScatteringSlider.disabled = false; maScatteringMap.disabled = false; } maGenerateJsonAndSave(); }; maOcclusionMapIsActive.onclick = function() { if (maMaterialData.occlusionMapIsActive) { maMaterialData.occlusionMapIsActive = false; maOcclusionMapIsActive.className = "uiMaterialAssistant-inactive"; maOcclusionMap.disabled = true; } else { 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(); }; maMetallicSlider.oninput = function() { maMetallic.value = maMetallicSlider.value/1000; maMaterialData.metallic = parseFloat(maMetallic.value); maGenerateJsonAndSave(); }; maMetallicMap.oninput = function() { 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); maGenerateJsonAndSave(); }; maRoughnessMap.oninput = function() { 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); maGenerateJsonAndSave(); }; maOpacityMapModeDont.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeDont.value; maGenerateJsonAndSave(); }; maOpacityMapModeMask.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeMask.value; maGenerateJsonAndSave(); }; maOpacityMapModeBlend.oninput = function() { maMaterialData.opacityMapMode = maOpacityMapModeBlend.value; maGenerateJsonAndSave(); }; maOpacityCutoffSlider.oninput = function() { maOpacityCutoff.value = maOpacityCutoffSlider.value/1000; maMaterialData.opacityCutoff = parseFloat(maOpacityCutoff.value); maGenerateJsonAndSave(); }; maBloomSlider.oninput = function() { maBloom.value = maBloomSlider.value/100; maMaterialData.bloom = parseFloat(maBloom.value); maGenerateJsonAndSave(); }; maUnlit.oninput = function() { maMaterialData.unlit = maUnlit.checked; maGenerateJsonAndSave(); };