From 6a589318aa0c84e32977d2923bd395a364755df2 Mon Sep 17 00:00:00 2001 From: Bernard Kwok Date: Thu, 4 Jan 2024 12:12:21 -0500 Subject: [PATCH 1/6] - Fix parenting of enum - Add back in ui advanced and make closed by default - Close all but first material on init. - Add item and folder CSS styling. --- javascript/MaterialXView/index.ejs | 9 +++++++ javascript/MaterialXView/source/viewer.js | 32 +++++++++++++++++------ 2 files changed, 33 insertions(+), 8 deletions(-) diff --git a/javascript/MaterialXView/index.ejs b/javascript/MaterialXView/index.ejs index d832f03e42..3d898899c2 100644 --- a/javascript/MaterialXView/index.ejs +++ b/javascript/MaterialXView/index.ejs @@ -10,6 +10,15 @@ margin: 0; font-family: Arial } + + /* Property editor item color */ + .peditoritem { + background-color: #334444; + } + /* Property editor folder color */ + .peditorfolder { + background-color: #333333; + } diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 3eff576be3..22bf078f53 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -637,16 +637,18 @@ export class Material // Only create the shader once even if assigned more than once. var startGenTime = performance.now(); let shaderMap = new Map(); + let closeUI = false; for (let matassign of this._materials) { let materialName = matassign.getMaterial().getName(); let shader = shaderMap[materialName]; if (!shader) { - shader = viewer.getMaterial().generateMaterial(matassign.getMaterial(), viewer, searchPath); + shader = viewer.getMaterial().generateMaterial(matassign.getMaterial(), viewer, searchPath, closeUI); shaderMap[materialName] = shader; } matassign.setShader(shader); + closeUI = true; } console.log("- Generate (", this._materials.length, ") shader(s) time: ", performance.now() - startGenTime, " ms.", ); @@ -694,7 +696,7 @@ export class Material // // Generate a new material for a given element // - generateMaterial(elem, viewer, searchPath) + generateMaterial(elem, viewer, searchPath, closeUI) { var startGenerateMat = performance.now(); @@ -767,7 +769,7 @@ export class Material // Update property editor const gui = viewer.getEditor().getGUI(); - this.updateEditor(elem, shader, newMaterial, gui, viewer); + this.updateEditor(elem, shader, newMaterial, gui, viewer, closeUI); if (logDetailedTime) console.log("- Per material generate time: ", performance.now() - startGenerateMat, "ms"); @@ -779,7 +781,7 @@ export class Material // Update property editor for a given MaterialX element, it's shader, and // Three material // - updateEditor(elem, shader, material, gui) + updateEditor(elem, shader, material, gui, viewer, closeUI) { const DEFAULT_MIN = 0; const DEFAULT_MAX = 100; @@ -788,6 +790,10 @@ export class Material const elemPath = elem.getNamePath(); var matUI = gui.addFolder(elemPath + ' Properties'); + if (closeUI) + { + matUI.close(); + } const uniformBlocks = Object.values(shader.getStage('pixel').getUniformBlocks()); var uniformToUpdate; const ignoreList = ['u_envRadianceMips', 'u_envRadianceSamples', 'u_alphaThreshold']; @@ -852,8 +858,17 @@ export class Material if (uifolderName && uifolderName.length) { let newFolderName = currentNodePath + '/' + uifolderName; currentFolder = folderList[newFolderName]; - if (!currentFolder) { - currentFolder = matUI.addFolder(uifolderName); + if (!currentFolder) + { + if (nodeDefInput.hasAttribute('uiadvanced')) + { + currentFolder = matUI.addFolder(uifolderName + " (Advanced)"); + currentFolder.close(); + } + else + { + currentFolder = matUI.addFolder(uifolderName); + } folderList[newFolderName] = currentFolder; } } @@ -929,7 +944,8 @@ export class Material { step = (maxValue - minValue) / 1000.0; } - currentFolder.add(material.uniforms[name], 'value', minValue, maxValue, step).name(path); + const w = currentFolder.add(material.uniforms[name], 'value', minValue, maxValue, step).name(path); + w.domElement.classList.add('peditoritem'); } break; @@ -1017,7 +1033,7 @@ export class Material } } const defaultOption = enumList[value]; // Set the default selected option - const dropdownController = gui.add(enumeration, defaultOption, enumeration).name(path); + const dropdownController = currentFolder.add(enumeration, defaultOption, enumeration).name(path); dropdownController.onChange(handleDropdownChange); } } From 25811a9a4d50ee143d9ffe77af65d331046126b7 Mon Sep 17 00:00:00 2001 From: Bernard Kwok Date: Thu, 4 Jan 2024 12:22:59 -0500 Subject: [PATCH 2/6] Finish coloring items / folders. --- javascript/MaterialXView/source/viewer.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 22bf078f53..3750d5d854 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -869,6 +869,7 @@ export class Material { currentFolder = matUI.addFolder(uifolderName); } + currentFolder.domElement.classList.add('peditorfolder'); folderList[newFolderName] = currentFolder; } } @@ -1007,7 +1008,8 @@ export class Material } if (enumList.length == 0) { - currentFolder.add(material.uniforms[name], 'value', minValue, maxValue, step).name(path); + let w = currentFolder.add(material.uniforms[name], 'value', minValue, maxValue, step).name(path); + w.domElement.classList.add('peditoritem'); } else { @@ -1035,6 +1037,7 @@ export class Material const defaultOption = enumList[value]; // Set the default selected option const dropdownController = currentFolder.add(enumeration, defaultOption, enumeration).name(path); dropdownController.onChange(handleDropdownChange); + dropdownController.domElement.classList.add('peditoritem'); } } break; @@ -1043,7 +1046,8 @@ export class Material uniformToUpdate = material.uniforms[name]; if (uniformToUpdate && value != null) { - currentFolder.add(material.uniforms[name], 'value').name(path); + let w = currentFolder.add(material.uniforms[name], 'value').name(path); + w.domElement.classList.add('peditoritem'); } break; @@ -1085,6 +1089,7 @@ export class Material Object.keys(material.uniforms[name].value).forEach((key) => { let w = vecFolder.add(material.uniforms[name].value, key, minValue[key], maxValue[key], step[key]).name(keyString[key]); + w.domElement.classList.add('peditoritem'); }) } break; @@ -1101,11 +1106,12 @@ export class Material const color3 = new THREE.Color(dummy.color); color3.fromArray(material.uniforms[name].value); dummy.color = color3.getHex(); - currentFolder.addColor(dummy, 'color').name(path) + let w = currentFolder.addColor(dummy, 'color').name(path) .onChange(function (value) { const color3 = new THREE.Color(value); material.uniforms[name].value.set(color3.toArray()); }); + w.domElement.classList.add('peditoritem'); } break; @@ -1123,6 +1129,7 @@ export class Material item = currentFolder.add(material.uniforms[name], 'value'); item.name(path); item.readonly(true); + item.domElement.classList.add('peditoritem'); } break; default: From d1a3e5be8bfb4e151cd3dc7f7dead668cdf505c6 Mon Sep 17 00:00:00 2001 From: Bernard Kwok Date: Thu, 4 Jan 2024 14:18:04 -0500 Subject: [PATCH 3/6] Fix string to set `disabled` as `readonly` does not exist in API. --- javascript/MaterialXView/source/viewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 3750d5d854..4f398ceb21 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -1128,7 +1128,7 @@ export class Material if (uniformToUpdate && value != null) { item = currentFolder.add(material.uniforms[name], 'value'); item.name(path); - item.readonly(true); + item.disable(true); item.domElement.classList.add('peditoritem'); } break; From 5e18cc47af62e33b863eca5b47a4759c1dc58d06 Mon Sep 17 00:00:00 2001 From: Bernard Kwok Date: Fri, 5 Jan 2024 14:30:27 -0500 Subject: [PATCH 4/6] Remove changes for uiadvanced. --- javascript/MaterialXView/source/viewer.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 4f398ceb21..50e51b67c0 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -860,15 +860,7 @@ export class Material currentFolder = folderList[newFolderName]; if (!currentFolder) { - if (nodeDefInput.hasAttribute('uiadvanced')) - { - currentFolder = matUI.addFolder(uifolderName + " (Advanced)"); - currentFolder.close(); - } - else - { - currentFolder = matUI.addFolder(uifolderName); - } + currentFolder = matUI.addFolder(uifolderName); currentFolder.domElement.classList.add('peditorfolder'); folderList[newFolderName] = currentFolder; } From 98a19b8e9a89a996cf7ca3dea27cb624b2f7ee15 Mon Sep 17 00:00:00 2001 From: Bernard Kwok Date: Fri, 5 Jan 2024 14:40:30 -0500 Subject: [PATCH 5/6] Refine to still close ui-advanced so default shading mode inputs for std surface fit. --- javascript/MaterialXView/source/viewer.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 50e51b67c0..20d2083907 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -861,6 +861,10 @@ export class Material if (!currentFolder) { currentFolder = matUI.addFolder(uifolderName); + if (nodeDefInput.hasAttribute('uiadvanced')) + { + currentFolder.close(); + } currentFolder.domElement.classList.add('peditorfolder'); folderList[newFolderName] = currentFolder; } From 35637564f4cf9b434946fb31fee4b4589098db63 Mon Sep 17 00:00:00 2001 From: Jonathan Stone Date: Fri, 5 Jan 2024 14:28:02 -0800 Subject: [PATCH 6/6] Omit closing of advanced folders --- javascript/MaterialXView/source/viewer.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/javascript/MaterialXView/source/viewer.js b/javascript/MaterialXView/source/viewer.js index 20d2083907..50e51b67c0 100644 --- a/javascript/MaterialXView/source/viewer.js +++ b/javascript/MaterialXView/source/viewer.js @@ -861,10 +861,6 @@ export class Material if (!currentFolder) { currentFolder = matUI.addFolder(uifolderName); - if (nodeDefInput.hasAttribute('uiadvanced')) - { - currentFolder.close(); - } currentFolder.domElement.classList.add('peditorfolder'); folderList[newFolderName] = currentFolder; }