Mirrors/tinyusdz
0
0
Fork 0
mirror of https://github.com/lighttransport/tinyusdz.git synced 2026-01-18 01:11:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add material parameter improvements to MaterialX viewer

Browse Source 
- Rename "Sheen" to "Fuzz" throughout UI and texture maps for clearer terminology
- Add normal visualization mode using MeshNormalMaterial with smooth shading
- Add "Diffuse Roughness" parameter for OpenPBR base_diffuse_roughness (Oren-Nayar)
- Disable Iridescence parameter (commented out)
- Add UI toggle for normal display in Scene folder

Material parameter changes:
- Diffuse Roughness checks multiple data structure locations (flat, grouped, shader formats)
- Stores value in customParams for easier GUI binding
- Updates all possible data locations when modified

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Syoyo Fujita
2025-12-02 09:19:08 +09:00
parent 8a3e9d21de
commit 3412e762f0
1 changed files with 86 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
web/js/materialx.js
View File

@@ -26,6 +26,8 @@ let materialData = [];
let textureCache = new Map();
let currentFileUpAxis = 'Y'; // Store the current file's upAxis (Y or Z)
let currentSceneMetadata = null; // Store current USD scene metadata
let showingNormals = false; // Track if normal visualization is active
let originalMaterialsMap = new Map(); // Store original materials when showing normals
// Settings
const settings = {
@@ -35,7 +37,8 @@ const settings = {
showBackground: true,
exposure: 1.0,
toneMapping: 'aces',
applyUpAxisConversion: true // Apply Z-up to Y-up conversion by default
applyUpAxisConversion: true, // Apply Z-up to Y-up conversion by default
showNormals: false // Show normals visualization
};
// Environment map presets
@@ -182,6 +185,9 @@ function setupGUI() {
sceneFolder.add(settings, 'applyUpAxisConversion')
.name('Z-up to Y-up Fix')
.onChange(toggleUpAxisConversion);
sceneFolder.add(settings, 'showNormals')
.name('Show Normals')
.onChange(toggleNormalDisplay);
// Material type selector
const materialTypeFolder = gui.addFolder('Material Type');
@@ -332,6 +338,44 @@ function toggleUpAxisConversion() {
applyUpAxisConversion();
}
// ============================================================================
// Normal Display Mode
// ============================================================================
function toggleNormalDisplay() {
if (!sceneRoot) {
console.warn('Cannot toggle normal display: sceneRoot is null');
return;
}
if (settings.showNormals) {
// Switch to normal visualization
showingNormals = true;
sceneRoot.traverse(obj => {
if (obj.isMesh && obj.material) {
// Store original material
originalMaterialsMap.set(obj, obj.material);
// Replace with normal material
obj.material = new THREE.MeshNormalMaterial({
flatShading: false
});
}
});
console.log('Normal visualization enabled');
} else {
// Restore original materials
showingNormals = false;
sceneRoot.traverse(obj => {
if (obj.isMesh && originalMaterialsMap.has(obj)) {
// Restore original material
obj.material = originalMaterialsMap.get(obj);
}
});
originalMaterialsMap.clear();
console.log('Normal visualization disabled');
}
}
// ============================================================================
// USD Loading
// ============================================================================
@@ -685,16 +729,51 @@ function updateMaterialUI() {
matFolder.add(mat, 'transmission', 0, 1, 0.01).name('Transmission');
}
// Sheen
// Fuzz (formerly Sheen)
if (mat.sheen !== undefined) {
matFolder.add(mat, 'sheen', 0, 1, 0.01).name('Sheen');
matFolder.add(mat, 'sheen', 0, 1, 0.01).name('Fuzz');
}
// Iridescence
if (mat.iridescence !== undefined) {
matFolder.add(mat, 'iridescence', 0, 1, 0.01).name('Iridescence');
// Diffuse Roughness (base_diffuse_roughness) - OpenPBR Oren-Nayar parameter
// Check multiple possible locations for the value
let diffuseRoughnessValue = undefined;
if (mat.userData.rawData?.base_diffuse_roughness !== undefined) {
diffuseRoughnessValue = mat.userData.rawData.base_diffuse_roughness;
} else if (mat.userData.rawData?.openPBR?.base_diffuse_roughness !== undefined) {
diffuseRoughnessValue = mat.userData.rawData.openPBR.base_diffuse_roughness;
} else if (mat.userData.rawData?.openPBRShader?.base_diffuse_roughness !== undefined) {
diffuseRoughnessValue = mat.userData.rawData.openPBRShader.base_diffuse_roughness;
}
if (diffuseRoughnessValue !== undefined) {
// Store as custom property on material for easy access
if (!mat.userData.customParams) {
mat.userData.customParams = {};
}
mat.userData.customParams.baseDiffuseRoughness = diffuseRoughnessValue;
matFolder.add(mat.userData.customParams, 'baseDiffuseRoughness', 0, 1, 0.01)
.name('Diffuse Roughness')
.onChange(v => {
// Update in all possible locations
if (mat.userData.rawData?.base_diffuse_roughness !== undefined) {
mat.userData.rawData.base_diffuse_roughness = v;
}
if (mat.userData.rawData?.openPBR?.base_diffuse_roughness !== undefined) {
mat.userData.rawData.openPBR.base_diffuse_roughness = v;
}
if (mat.userData.rawData?.openPBRShader?.base_diffuse_roughness !== undefined) {
mat.userData.rawData.openPBRShader.base_diffuse_roughness = v;
}
mat.needsUpdate = true;
});
}
// Iridescence (disabled)
// if (mat.iridescence !== undefined) {
// matFolder.add(mat, 'iridescence', 0, 1, 0.01).name('Iridescence');
// }
// Emissive
if (mat.emissive) {
// Convert from linear (material internal) to sRGB for display in color picker
@@ -730,7 +809,7 @@ function addTextureUI(material, index) {
{ prop: 'alphaMap', name: 'Alpha' },
{ prop: 'clearcoatMap', name: 'Clearcoat' },
{ prop: 'clearcoatRoughnessMap', name: 'Clearcoat Roughness' },
{ prop: 'sheenColorMap', name: 'Sheen Color' },
{ prop: 'sheenColorMap', name: 'Fuzz Color' },
{ prop: 'iridescenceMap', name: 'Iridescence' }
];