PhysicallyBasedMaterialX.js

Go to the documentation of this file.

 
// Modal popup logic for iframe viewer
const iframeModal = document.getElementById('iframeModal');
const closeIframeModal = document.getElementById('closeIframeModal');
 
// IframeMessenger logic with modal as parent
let messenger = null;
function updateViewer(parent = null, target) {
    if (!messenger) {
        messenger = new IframeMessenger(parent, target);
    } 
    // Get text from editor
    text = cmeditor.getValue();
    message = JSON.stringify({ type: "document", value: text });
    messenger.post(message);
}
 
// Set up loaded. Initialize MaterialX with standard libraries
const loader = new JsPhysicallyBasedMaterialLoader();
loader.loadStandardLibraries();
 
let cmeditor = setupXMLSyntax();
let jsonRemapEditor = setupJSONRemappingSyntax();
let jsoneditor = setupJSONSyntax();
let selected_references = [];
 
async function fetchData() {
    const data = await loader.getPhysicallyBasedMaterials();
    if (data) {
        console.log('PhysicallyBased material count:', loader.materials.length);
 
        let result = JSON.stringify(data, null, 4);
        //document.getElementById('jsonMaterials').textContent = result;
        jsoneditor.setValue(result);
 
        let remappingMap = loader.getInputRemappingMap();
        let remapResult = JSON.stringify(remappingMap, null, 4);
        //document.getElementById('jsonRemapping').textContent = remapResult;
        jsonRemapEditor.setValue(remapResult);
 
        displayReferences();
    }
}
 
 
 
function clearSelection() {
    selected_references = [];
    // Clear borders
    const referencesContainer = document.getElementById('PBReferencesImages');
    Array.from(referencesContainer.children).forEach(child => {
        child.style.background = '';
    });
}
 
function setShadingModel(option) {
    // Set name of menu shadingModelButton
    const shadingModelButton = document.getElementById('shadingModelButton');
    if (shadingModelButton) {
        shadingModelButton.textContent = option;
        console.log('Set shading model to:', option);
    }
}
 
function selectReference(addToSelection, col, refname) {
    if (!addToSelection) {
        clearSelection();
    }
 
    //console.log('Selected reference:', refname);
    if (!selected_references.includes(refname)) {
        selected_references.push(refname);
        col.style.background = '#3a99d0';
        col.style.color = '#FFFFFF';
    } else {
        // Deselect
        selected_references = selected_references.filter(name => name !== refname);
        col.style.background = '';
    }
}
 
function displayReferences(filteredTags = null) {
    let references = loader.getReferenceList();
 
    // If filtering, filter references by partial match in tags or name
    if (filteredTags && filteredTags.length > 0) {
        const lowerTags = filteredTags.map(tag => tag.toLowerCase());
        references = references.filter(ref => {
            const name = (ref.name || '').toLowerCase();
            const tagsArr = (ref.tags && Array.isArray(ref.tags)) ? ref.tags.map(t => t.toLowerCase()) : [];
            // Match if any filter string is a substring of the name or any tag
            return lowerTags.some(tag => name.includes(tag) || tagsArr.some(t => t.includes(tag)));
        });
    }
 
    // If an item is selected add it to the list
    display_references = []
    for (let i = 0; i < selected_references.length; i++) {
        const selName = selected_references[i];
        if (!references.find(ref => ref.name === selName)) {
            // Find in full list
            const fullRef = loader.getReferenceList().find(ref => ref.name === selName);
            if (fullRef) {
                display_references.push(fullRef);
            }
        }
    }
    for (let i = 0; i < references.length; i++) {
        display_references.push(references[i]);
    }
    // Sort
    display_references.sort((a, b) => a.name.localeCompare(b.name));
 
    if (display_references.length > 0) {
        const referencesContainer = document.getElementById('PBReferencesImages');
        referencesContainer.innerHTML = ''; // Clear previous references
 
        display_references.forEach(ref => {
            const col = document.createElement('div');
            col.className = 'rounded col-sm mx-auto ml-4 mb-2'; // Optional bottom margin
            col.id = ref.name;
            // Add tags as data attribute for easier filtering
            if (ref.tags && Array.isArray(ref.tags)) {
                col.setAttribute('data-tags', ref.tags.join(','));
            } else {
                col.setAttribute('data-tags', '');
            }
            // Highlight if selected
            if (selected_references.includes(ref.name)) {
                col.style.background = '#0072B2';
            } else {
                col.style.background = '';
            }
            col.addEventListener('click', (event) => {
                // Check for shift key for multi-selection
                let isMultiSelect = event.shiftKey;
                selectReference(isMultiSelect, col, ref.name);
            });
 
            // Create a paragraph for the name
            const name = document.createElement('p');
            name.textContent = ref.name || 'Reference Image';
            name.style.marginBottom = '2px';
            col.appendChild(name);
 
            // Create the image
            const img = document.createElement('img');
            img.src = ref.reference;
            //img.style.maxWidth = '256';
            img.style.width = '100%';
            img.style.minWidth = '128px';
            img.style.display = 'block';  // Ensures image appears below text
            img.style.marginBottom = '10px';
 
            // Append image to the column
            col.appendChild(img);
 
            // Show tags as Bootstrap pills in a line under the name
            if (ref.tags && Array.isArray(ref.tags) && ref.tags.length > 0) {
                const tagLine = document.createElement('div');
                tagLine.style.marginBottom = '0px';
                ref.tags.forEach(tag => {
                    const pill = document.createElement('div');
                    pill.className = 'badge bg-white text-dark mt-1 me-1 mb-1';
                    pill.textContent = tag;
                    tagLine.appendChild(pill);
                });
                col.appendChild(tagLine);
            }
 
            // Append the column to the references container
            referencesContainer.appendChild(col);
        });
    }
}
 
function convertToMaterialX(materialNames = []) {
    // Get the shading mode option
    let shadingModel = 'standard_surface';
    const shadingModelOption = document.getElementById('shadingModelButton').textContent;
    if (shadingModelOption) {
        if (shadingModelOption) {
            shadingModel = shadingModelOption.toLowerCase().replace(/ /g, '_');
            console.log('>>>>>>>>>>>>>>>>>>> Selected shading model:', shadingModel);
        }
    }
 
    console.log('> Generate for shading Model:', shadingModel);
    let references = [];
    let addAllInputs = false; // Always false since the JS API is missing addInputsFromNodeDef()
    let remapKeys = {};
    let shaderPrefix = '';
 
    if (loader.convertToMaterialX(shadingModel, references, addAllInputs,
        materialNames, remapKeys, shaderPrefix)) {
 
        let [validateDocument, errors] = loader.validateDocument();
        console.log('> MaterialX validation:', validateDocument, errors);
        let docString = loader.getMaterialXString();
        if (docString.length > 0) {
            //document.getElementById('MaterialXMaterials').textContent = docString;
            cmeditor.setValue(docString);
        }
    }
}
 
 
function setupXMLSyntax() {
    // Initialize CodeMirror for XML syntax highlighting
    const materialXTextArea = document.getElementById('MaterialXMaterials');
    let cmeditor = CodeMirror.fromTextArea(materialXTextArea, {
        mode: 'application/xml',
        lineNumbers: true,
        dragDrop: true,
        theme: 'night',
    });
 
    // Optional: Set an initial value for the textarea
    const initialXML = '';
    materialXTextArea.value = initialXML;
    cmeditor.setValue(initialXML);
 
    // Update CodeMirror whenever the textarea content changes
    cmeditor.on('change', (e) => {
        materialXTextArea.value = cmeditor.getValue();
    });
 
    return cmeditor;
}
 
function setupJSONSyntax() {
    const jsonTextArea = document.getElementById('jsonMaterials');
    let cmeditor2 = null;
    if (jsonTextArea) {
        cmeditor2 = CodeMirror.fromTextArea(jsonTextArea, {
            mode: 'application/json',
            lineNumbers: true,
            dragDrop: false,
            theme: 'dracula'
        });
 
        // Optional: Set an initial value for the textarea
        const initialjson = '';
        jsonTextArea.value = initialjson;
        cmeditor2.setValue(initialjson);
 
        // Update CodeMirror whenever the textarea content changes
        cmeditor2.on('change', (e) => {
            jsonTextArea.value = cmeditor2.getValue();
        });
    }
    return cmeditor2;
}
 
 
function setupJSONRemappingSyntax() {
    const jsonTextArea3 = document.getElementById('jsonRemapping');
    let cmeditor3 = null;
    if (jsonTextArea3) {
        cmeditor3 = CodeMirror.fromTextArea(jsonTextArea3, {
            mode: 'application/json',
            lineNumbers: true,
            dragDrop: false,
            theme: 'dracula',
            lineWrapping: true,  // This is key
            viewportMargin: Infinity  // Helps with rendering
        });
 
        // Optional: Set an initial value for the textarea
        const initialjson3 = '';
        jsonTextArea3.value = initialjson3;
        cmeditor3.setValue(initialjson3);
 
        // Update CodeMirror whenever the textarea content changes
        cmeditor3.on('change', (e) => {
            jsonTextArea3.value = cmeditor3.getValue();
        });
    }
    return cmeditor3;
}
 
function startup()
{
    document.body.setAttribute('data-bs-theme', 'dark');
 
    // Filter by tags or name
    document.getElementById('materialFilter').addEventListener('input', function (e) {
        const filterValue = e.target.value.trim();
        let tags = [];
        if (filterValue.length > 0) {
            // Allow comma or space separated tags
            tags = filterValue.split(/[, ]+/).filter(Boolean);
        }
        displayReferences(tags.length > 0 ? tags : null);
    });
 
 
    document.getElementById('shadingModelOption').addEventListener('click', async (e) => {
        setShadingModel(e.target.textContent);
    });
 
    document.getElementById('clearSelection').addEventListener('click', async () => {
        clearSelection();
    });
 
    document.getElementById('fetchData').addEventListener('click', async () => {
        await fetchData();
    });
    fetchData();
 
    document.getElementById('genMaterialX').addEventListener('click', async () => {
        convertToMaterialX(selected_references);
    });
 
    let = viewer = document.getElementById("viewer");
    let targetURL = "https://kwokcb.github.io/MaterialXLab/javascript/shader_utilities/dist/index.html?viewerOnly=1";
    viewer.src = targetURL;
 
    let modalDialog = null; 
 
    // Show the modal with iframe when the View button is clicked
    // Remove Bootstrap modal triggers so modal cannot be opened by data attributes
    viewerButton = document.getElementById('openViewer');
    viewerButton.removeAttribute('data-bs-toggle');
    viewerButton.removeAttribute('data-bs-target');
 
    function showModal() {
        if (!cmeditor.getValue().trim()) {
            alert('No shaders to display.');
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
        // Open the modal programmatically using Bootstrap's JS API
        var modalEl = document.getElementById('viewPopup');
        if (window.bootstrap && modalEl) {
            if (!modalDialog)
                modalDialog = window.bootstrap.Modal.getOrCreateInstance(modalEl);
            modalDialog.show();
        }
        // Update the viewer after modal is shown
        viewer.style.display = 'block';
        updateViewer(viewer, targetURL);
    }
 
    viewerButton.addEventListener('click', async (e) => {
        showModal();
    });
}
 
// Initialize on page load
window.onload = startup;