Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Web viewer formatting improvements and fixes #1635

Merged
merged 7 commits into from
Jan 6, 2024
Merged

Web viewer formatting improvements and fixes #1635

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6a58931
- Fix parenting of enum
kwokcb Jan 4, 2024
25811a9
Finish coloring items / folders.
kwokcb Jan 4, 2024
d1a3e5b
Fix string to set `disabled` as `readonly` does not exist in API.
kwokcb Jan 4, 2024
5e18cc4
Remove changes for uiadvanced.
kwokcb Jan 5, 2024
98a19b8
Refine to still close ui-advanced so default shading mode inputs for …
kwokcb Jan 5, 2024
3563756
Omit closing of advanced folders
jstone-lucasfilm Jan 5, 2024
118e962
Merge branch 'main' into webviewer_formatting
jstone-lucasfilm Jan 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions javascript/MaterialXView/index.ejs
View file
Open in desktop
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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can easily be changed to modify the preferred colors.

background-color: #334444;
}
/* Property editor folder color */
.peditorfolder {
background-color: #333333;
}
</style>
</head>
<body style="margin: 0px; overflow: hidden;">
Expand Down
47 changes: 35 additions & 12 deletions javascript/MaterialXView/source/viewer.js
View file
Open in desktop
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,18 @@ 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);
}
currentFolder.domElement.classList.add('peditorfolder');
folderList[newFolderName] = currentFolder;
}
}
Expand Down Expand Up @@ -929,7 +945,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 +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
{
Expand All @@ -1017,8 +1035,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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was adding to the wrong parent. Should add to the current folder.

dropdownController.onChange(handleDropdownChange);
dropdownController.domElement.classList.add('peditoritem');
}
}
break;
Expand All @@ -1027,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;

Expand Down Expand Up @@ -1069,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;
Expand All @@ -1085,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;

Expand All @@ -1106,7 +1128,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');
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API readonly does not exist anymore.

}
break;
default:
Expand Down