Skip to content

Commit

Permalink
Web viewer formatting improvements and fixes (#1635)
Browse files Browse the repository at this point in the history 
- Add colouring to items and folders which can be set vis CSS. This makes it easier to tell what areas are under what folders.
- Fix string disable setting (was using old API).
- Fix parenting of enum widgets to be under current folder instead of top level.
  • Loading branch information
@kwokcb
kwokcb authored Jan 6, 2024
1 parent b48057e commit 1d457c8
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 11 deletions.
9 changes: 9 additions & 0 deletions javascript/MaterialXView/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
</style>
</head>
<body style="margin: 0px; overflow: hidden;">
Expand Down
37 changes: 26 additions & 11 deletions javascript/MaterialXView/source/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.", );

Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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");
Expand All @@ -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;
Expand All @@ -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'];
Expand Down Expand Up @@ -852,8 +858,10 @@ export class Material
if (uifolderName && uifolderName.length) {
let newFolderName = currentNodePath + '/' + uifolderName;
currentFolder = folderList[newFolderName];
if (!currentFolder) {
if (!currentFolder)
{
currentFolder = matUI.addFolder(uifolderName);
currentFolder.domElement.classList.add('peditorfolder');
folderList[newFolderName] = currentFolder;
}
}
Expand Down Expand Up @@ -929,7 +937,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;

Expand Down Expand Up @@ -991,7 +1000,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
{
Expand All @@ -1017,8 +1027,9 @@ 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);
dropdownController.domElement.classList.add('peditoritem');
}
}
break;
Expand All @@ -1027,7 +1038,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;

Expand Down Expand Up @@ -1069,6 +1081,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;
Expand All @@ -1085,11 +1098,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;

Expand All @@ -1106,7 +1120,8 @@ 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;
default:
Expand Down

0 comments on commit 1d457c8

Please sign in to comment.