+ v-bind:style="[tabContent === false && activeTab === 2 ? {'height': '100%'} : {}]">
glTF Validator
+
+ Number of warnings: {{validationReport?.issues?.numWarnings ?? 0}}
Number of infos: {{validationReport?.issues?.numInfos ?? 0}}
+
+
Powered by glTF-Validator
diff --git a/src/logic/uimodel.js b/src/logic/uimodel.js
index f4c2bf9c..3d96dfa8 100644
--- a/src/logic/uimodel.js
+++ b/src/logic/uimodel.js
@@ -230,9 +230,53 @@ 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;
+ 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..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 6606a49e..02f7d81e 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,
@@ -222,25 +223,71 @@ const appCreated = createApp({
element.click();
document.body.removeChild(element);
},
- getValidationCounter: function(){
- let number = 0;
+
+ /**
+ * 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 (this.validationReport?.issues?.numErrors > 0) {
- number = this.validationReport?.issues?.numErrors;
+ if (issues.numErrors > 0) {
+ info = `${issues.numErrors}`;
color = "red";
- } else if (this.validationReport?.issues?.numWarnings > 0) {
- number = this.validationReport?.issues?.numWarnings;
- color = "yellow";
- } else if (this.validationReport?.issues?.numInfos > 0) {
- number = this.validationReport?.issues?.numInfos;
+ } 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 (number !== 0) {
- return `{{validationReportDescription?.message}}
+${number}
`;
+ if (info.length > 3) {
+ info = "999+";
}
- if (this.tabsHidden === false && this.activeTab === 2) {
- return `
`;
+ if (info === "") {
+ return "";
+ }
+ const padding = this.isMobile ? "right:-3px;top:-18px;" : "right:-18px;top:-18px;";
+ const infoDiv =
+ `${info}
`;
+ return infoDiv;
+ },
+
+ getValidationCounter: function(){
+ const infoDiv = this.getValidationInfoDiv(this.validationReport?.issues);
+ if (this.tabContentHidden === false && this.activeTab === 2) {
+ return ``
+ + ``
+ + infoDiv
+ + `
`;
}
- return '`
+ + infoDiv
+ + `
';
+ return ``
+ + ``
+ + infoDiv
+ + `
`;
},
setAnimationState: function(value)
{
`
+ + infoDiv
+ + `