From 373eff34191e5c9f0b39c6d18ff21b28eddbadcf Mon Sep 17 00:00:00 2001 From: Marco Hutter Date: Fri, 22 Nov 2024 22:01:44 +0100 Subject: [PATCH 1/7] Draft for handling ignored validation warnings --- index.html | 5 +++++ src/logic/uimodel.js | 32 +++++++++++++++++++++++++++++++- src/main.js | 2 +- src/ui/ui.js | 33 ++++++++++++++++++++++++--------- 4 files changed, 61 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 7b819fc9..33deb262 100644 --- a/index.html +++ b/index.html @@ -307,6 +307,11 @@

glTF Validator

Number of warnings: {{validationReport?.issues?.numWarnings ?? 0}}

Number of infos: {{validationReport?.issues?.numInfos ?? 0}}

+ +
+

{{validationReportDescription?.message}}

+
+ Powered by glTF-Validator diff --git a/src/logic/uimodel.js b/src/logic/uimodel.js index f4c2bf9c..0eb8d4b7 100644 --- a/src/logic/uimodel.js +++ b/src/logic/uimodel.js @@ -230,9 +230,39 @@ class UIModel ); } + createValidationReportDescription(validationReport) { + const issues = validationReport?.issues; + const messages = issues?.messages; + const numWarnings = issues?.numWarnings ?? 0; + if (!issues || !messages || numWarnings === 0) { + return {}; + } + let numIgnoredWarnings = 0; + for (const message of messages) { + if (message.code === "MESH_PRIMITIVE_GENERATED_TANGENT_SPACE") { + numIgnoredWarnings++; + } + } + if (numIgnoredWarnings === 0) { + return {}; + } + return { + numIgnoredWarnings: numIgnoredWarnings, + message: `The validation generated ${issues.numWarnings} warnings. ` + +`${numIgnoredWarnings} of these warnings have been about missing ` + +`tangent space information. Omitting the tangent space information ` + +`may be a conscious decision by the designer, but it may limit ` + +`the portability of the asset. The glTF-Sample-Viewer generates ` + +`tangents using the default MikkTSpace algorithm in this case.` + }; + } + updateValidationReport(validationReportObservable) { - validationReportObservable.subscribe(data => this.app.validationReport = data); + validationReportObservable.subscribe(data => { + this.app.validationReport = data; + this.app.validationReportDescription = this.createValidationReportDescription(data); + }); } disabledAnimations(disabledAnimationsObservable) diff --git a/src/main.js b/src/main.js index 16d2b65f..2b59e771 100644 --- a/src/main.js +++ b/src/main.js @@ -13,7 +13,7 @@ import {validateBytes} from "gltf-validator"; const ignoredIssues = [ // This sample renderer supports tangent space generation. - "MESH_PRIMITIVE_GENERATED_TANGENT_SPACE" + //"MESH_PRIMITIVE_GENERATED_TANGENT_SPACE" ]; export default async () => { diff --git a/src/ui/ui.js b/src/ui/ui.js index 4f6ec86c..b8ee161b 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -74,6 +74,7 @@ const appCreated = createApp({ disabledAnimations: [], validationReport: {}, + validationReportDescription: {}, ibl: true, iblIntensity: 0.0, @@ -223,24 +224,38 @@ const appCreated = createApp({ document.body.removeChild(element); }, getValidationCounter: function(){ - let number = 0; + let info = ""; let color = "white"; if (this.validationReport?.issues?.numErrors > 0) { - number = this.validationReport?.issues?.numErrors; + info = `${this.validationReport?.issues?.numErrors}`; color = "red"; } else if (this.validationReport?.issues?.numWarnings > 0) { - number = this.validationReport?.issues?.numWarnings; - color = "yellow"; + if (this.validationReportDescription.numIgnoredWarnings == this.validationReport?.issues?.numWarnings) { + color = "lightBlue"; + info = "i"; + } else { + info = `${this.validationReport?.issues?.numWarnings}`; + color = "yellow"; + } } else if (this.validationReport?.issues?.numInfos > 0) { - number = this.validationReport?.issues?.numInfos; + info = `${info = this.validationReport?.issues?.numInfos}`; } - if (number !== 0) { - return `
${number}
`; + let infoDiv = ""; + if (info !== "") { + infoDiv = `
${info}
`; } if (this.tabsHidden === false && this.activeTab === 2) { - return ``; + return `
` + + `` + + infoDiv + + `
`; } - return ''; + return `
` + + `` + + infoDiv + + `
`; }, setAnimationState: function(value) { From 7a1d9833e4b46d275efaeb57f9e30202b236d7be Mon Sep 17 00:00:00 2001 From: Marco Hutter Date: Sat, 23 Nov 2024 17:23:21 +0100 Subject: [PATCH 2/7] Fix typo in string creation --- src/ui/ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/ui.js b/src/ui/ui.js index b8ee161b..e0dfc968 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -238,7 +238,7 @@ const appCreated = createApp({ color = "yellow"; } } else if (this.validationReport?.issues?.numInfos > 0) { - info = `${info = this.validationReport?.issues?.numInfos}`; + info = `${this.validationReport?.issues?.numInfos}`; } let infoDiv = ""; if (info !== "") { From e9c4ec95884b974894910fae0e91f7bd0749fd75 Mon Sep 17 00:00:00 2001 From: Marco Hutter Date: Sat, 23 Nov 2024 17:54:52 +0100 Subject: [PATCH 3/7] Minor cleanup --- src/ui/ui.js | 46 ++++++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/ui/ui.js b/src/ui/ui.js index e0dfc968..d6728ebc 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -224,27 +224,33 @@ const appCreated = createApp({ document.body.removeChild(element); }, getValidationCounter: function(){ - let info = ""; - let color = "white"; - if (this.validationReport?.issues?.numErrors > 0) { - info = `${this.validationReport?.issues?.numErrors}`; - color = "red"; - } else if (this.validationReport?.issues?.numWarnings > 0) { - if (this.validationReportDescription.numIgnoredWarnings == this.validationReport?.issues?.numWarnings) { - color = "lightBlue"; - info = "i"; - } else { - info = `${this.validationReport?.issues?.numWarnings}`; - color = "yellow"; - } - } else if (this.validationReport?.issues?.numInfos > 0) { - info = `${this.validationReport?.issues?.numInfos}`; - } let infoDiv = ""; - if (info !== "") { - infoDiv = `
${info}
`; + const issues = this.validationReport?.issues; + if (issues) { + let info = ""; + let color = "white"; + if (issues.numErrors > 0) { + info = `${issues.numErrors}`; + color = "red"; + } else if (issues.numWarnings > 0) { + const allIgnored = issues.numWarnings === + this.validationReportDescription?.numIgnoredWarnings; + if (allIgnored) { + info = "i"; + color = "lightBlue"; + } else { + info = `${issues.numWarnings}`; + color = "yellow"; + } + } else if (issues.numInfos > 0) { + info = `${issues.numInfos}`; + } + if (info !== "") { + infoDiv = + `
${info}
`; + } } if (this.tabsHidden === false && this.activeTab === 2) { return `
` From 9042d08c9315637e7f5d68f26558523b20df9679 Mon Sep 17 00:00:00 2001 From: Marco Hutter Date: Sat, 1 Feb 2025 15:55:21 +0100 Subject: [PATCH 4/7] Minor cleanup for ignored validation warnings --- glTF-Sample-Renderer | 2 +- index.html | 2 +- src/logic/uimodel.js | 14 ++++++++ src/main.js | 11 ++----- src/ui/ui.js | 76 ++++++++++++++++++++++++++++---------------- 5 files changed, 67 insertions(+), 38 deletions(-) diff --git a/glTF-Sample-Renderer b/glTF-Sample-Renderer index 63b7c128..e5646a2b 160000 --- a/glTF-Sample-Renderer +++ b/glTF-Sample-Renderer @@ -1 +1 @@ -Subproject commit 63b7c128266cfd86bbd3f25caf8b3db3fe854015 +Subproject commit e5646a2bf87b0871ba3f826fc2335fe117a11411 diff --git a/index.html b/index.html index f395c47c..3298b9f8 100644 --- a/index.html +++ b/index.html @@ -326,7 +326,7 @@

glTF Validator

Number of infos: {{validationReport?.issues?.numInfos ?? 0}}

-
+

{{validationReportDescription?.message}}

diff --git a/src/logic/uimodel.js b/src/logic/uimodel.js index 0eb8d4b7..3d96dfa8 100644 --- a/src/logic/uimodel.js +++ b/src/logic/uimodel.js @@ -230,6 +230,20 @@ class UIModel ); } + /** + * Creates a descriptive summary of the given validation report. + * + * If there are no issues, messages, or warnings in the given + * report, then an empty object is returned. + * + * Otherwise, the result will be an object that contains + * `numIgnoredWarnings:number` that counts the number of warnings + * that are ignored by the sample viewer, and a `message:string` + * that explains why these warnings are ignored. + * + * @param {any} validationReport The glTF validator validation report + * @returns The description + */ createValidationReportDescription(validationReport) { const issues = validationReport?.issues; const messages = issues?.messages; diff --git a/src/main.js b/src/main.js index 2b59e771..5192ac8d 100644 --- a/src/main.js +++ b/src/main.js @@ -11,11 +11,6 @@ import { import {validateBytes} from "gltf-validator"; -const ignoredIssues = [ - // This sample renderer supports tangent space generation. - //"MESH_PRIMITIVE_GENERATED_TANGENT_SPACE" -]; - export default async () => { const canvas = document.getElementById("canvas"); const context = canvas.getContext("webgl2", { @@ -75,8 +70,7 @@ export default async () => { const buffer = await response.arrayBuffer(); return await validateBytes(new Uint8Array(buffer), { externalResourceFunction: externalRefFunction, - uri: model.mainFile, - ignoredIssues + uri: model.mainFile }); } else if (Array.isArray(model.mainFile)) { const externalRefFunction = (uri) => { @@ -106,8 +100,7 @@ export default async () => { return await validateBytes(new Uint8Array(buffer), { externalResourceFunction: externalRefFunction, - uri: model.mainFile[0], - ignoredIssues + uri: model.mainFile[0] }); } } catch (error) { diff --git a/src/ui/ui.js b/src/ui/ui.js index f492591c..7456191b 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -223,35 +223,57 @@ const appCreated = createApp({ element.click(); document.body.removeChild(element); }, - getValidationCounter: function(){ - let infoDiv = ""; - const issues = this.validationReport?.issues; - if (issues) { - let info = ""; - let color = "white"; - if (issues.numErrors > 0) { - info = `${issues.numErrors}`; - color = "red"; - } else if (issues.numWarnings > 0) { - const allIgnored = issues.numWarnings === - this.validationReportDescription?.numIgnoredWarnings; - if (allIgnored) { - info = "i"; - color = "lightBlue"; - } else { - info = `${issues.numWarnings}`; - color = "yellow"; - } - } else if (issues.numInfos > 0) { - info = `${issues.numInfos}`; - } - if (info !== "") { - infoDiv = - `
${info}
`; + + /** + * Creates a div string summarizing the given issues. + * + * If the given issues are empty or do not contain any errors, + * warnings, or infos, then the empty string is returned. + * + * Otherwise, the div contains the number of errors/warnings/infos + * with an appropriate background color. When all warnings of + * the given report are ignored, then this will only be a + * small "info" div. Clicking on that will expand the details + * about the ignored warnings. + * + * @param {any} issues The `issues` property that is part of + * the validation report of the glTF Validator + * @returns The div string + */ + getValidationInfoDiv : function(issues) { + if (!issues) { + return ""; + } + let info = ""; + let color = "white"; + if (issues.numErrors > 0) { + info = `${issues.numErrors}`; + color = "red"; + } else if (issues.numWarnings > 0) { + const allIgnored = issues.numWarnings === + this.validationReportDescription?.numIgnoredWarnings; + if (allIgnored) { + info = "i"; + color = "lightBlue"; + } else { + info = `${issues.numWarnings}`; + color = "yellow"; } + } else if (issues.numInfos > 0) { + info = `${issues.numInfos}`; + } + if (info === "") { + return ""; } + const infoDiv = + `
${info}
`; + return infoDiv; + }, + + getValidationCounter: function(){ + const infoDiv = this.getValidationInfoDiv(this.validationReport?.issues); if (this.tabsHidden === false && this.activeTab === 2) { return `
` + `` From 19937347729e897b72b413ebc996e3ea0ac5aab2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20H=C3=A4rtl?= Date: Mon, 3 Feb 2025 16:09:34 +0100 Subject: [PATCH 5/7] Use correct version of submodule --- glTF-Sample-Renderer | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/glTF-Sample-Renderer b/glTF-Sample-Renderer index e5646a2b..63b7c128 160000 --- a/glTF-Sample-Renderer +++ b/glTF-Sample-Renderer @@ -1 +1 @@ -Subproject commit e5646a2bf87b0871ba3f826fc2335fe117a11411 +Subproject commit 63b7c128266cfd86bbd3f25caf8b3db3fe854015 From d9384d2d78ed6c70539a026c0877c9d6f1d80e05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20H=C3=A4rtl?= Date: Mon, 3 Feb 2025 18:00:59 +0100 Subject: [PATCH 6/7] Cap number and adjust position --- src/ui/ui.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/ui/ui.js b/src/ui/ui.js index 7456191b..ec2dee8d 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -262,12 +262,16 @@ const appCreated = createApp({ } else if (issues.numInfos > 0) { info = `${issues.numInfos}`; } + if (info.length > 3) { + info = "999+"; + } if (info === "") { return ""; } + const padding = this.isMobile ? "right:0%;top:15%;" : "right:15%;top:0%;"; const infoDiv = - `
${info}
`; return infoDiv; }, From 0255dbf52654a501c799f6768b161884a2bd0835 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20H=C3=A4rtl?= Date: Tue, 4 Feb 2025 17:33:36 +0100 Subject: [PATCH 7/7] Fix styling --- index.html | 2 +- src/ui/ui.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3298b9f8..72383b96 100644 --- a/index.html +++ b/index.html @@ -305,7 +305,7 @@

Display