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

Viewer material variants #15920

Merged
merged 6 commits into from
Dec 2, 2024
Merged

Viewer material variants #15920

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a4be734
Small refactor to pull out individual controls, making it easier to a…
ryantrem Nov 23, 2024
2d2f383
Merge branch 'master' into viewer-material-variants
ryantrem Nov 23, 2024
75c1058
Add callback option for material variants to get a 'controller'
ryantrem Nov 25, 2024
152929d
Add default UI for material variant selection
ryantrem Nov 25, 2024
ac4ca8c
Merge branch 'master' into viewer-material-variants
ryantrem Dec 2, 2024
d810cb4
Move MaterialVariantsController type def inline to satisfy the UMD bu…
ryantrem Dec 2, 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
96 changes: 69 additions & 27 deletions packages/dev/loaders/src/glTF/2.0/Extensions/KHR_materials_variants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,31 @@ import { registerGLTFExtension, unregisterGLTFExtension } from "../glTFLoaderExt

const NAME = "KHR_materials_variants";

export type MaterialVariantsController = {
/**
* The list of available variant names for this asset.
*/
readonly variants: string[];

/**
* Gets or sets the selected variant.
*/
selectedVariant: string;
};

declare module "../../glTFFileLoader" {
// eslint-disable-next-line jsdoc/require-jsdoc
export interface GLTFLoaderExtensionOptions {
/**
* Defines options for the KHR_materials_variants extension.
*/
// NOTE: Don't use NAME here as it will break the UMD type declarations.
["KHR_materials_variants"]: {};
["KHR_materials_variants"]: Partial<{
/**
* Defines a callback that will be called if material variants are loaded.
*/
onLoaded: (controller: MaterialVariantsController) => void;
}>;
}
}

Expand Down Expand Up @@ -68,11 +85,11 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {

/**
* Gets the list of available variant names for this asset.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @returns the list of all the variant names for this model
*/
public static GetAvailableVariants(rootMesh: Mesh): string[] {
const extensionMetadata = this._GetExtensionMetadata(rootMesh);
public static GetAvailableVariants(rootNode: TransformNode): string[] {
const extensionMetadata = this._GetExtensionMetadata(rootNode);
if (!extensionMetadata) {
return [];
}
Expand All @@ -82,20 +99,20 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {

/**
* Gets the list of available variant names for this asset.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @returns the list of all the variant names for this model
*/
public getAvailableVariants(rootMesh: Mesh): string[] {
return KHR_materials_variants.GetAvailableVariants(rootMesh);
public getAvailableVariants(rootNode: TransformNode): string[] {
return KHR_materials_variants.GetAvailableVariants(rootNode);
}

/**
* Select a variant given a variant name or a list of variant names.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @param variantName The variant name(s) to select.
*/
public static SelectVariant(rootMesh: Mesh, variantName: string | string[]): void {
const extensionMetadata = this._GetExtensionMetadata(rootMesh);
public static SelectVariant(rootNode: TransformNode, variantName: string | string[]): void {
const extensionMetadata = this._GetExtensionMetadata(rootNode);
if (!extensionMetadata) {
throw new Error(`Cannot select variant on a glTF mesh that does not have the ${NAME} extension`);
}
Expand All @@ -122,19 +139,19 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {

/**
* Select a variant given a variant name or a list of variant names.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @param variantName The variant name(s) to select.
*/
public selectVariant(rootMesh: Mesh, variantName: string | string[]): void {
KHR_materials_variants.SelectVariant(rootMesh, variantName);
public selectVariant(rootNode: TransformNode, variantName: string | string[]): void {
KHR_materials_variants.SelectVariant(rootNode, variantName);
}

/**
* Reset back to the original before selecting a variant.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
*/
public static Reset(rootMesh: Mesh): void {
const extensionMetadata = this._GetExtensionMetadata(rootMesh);
public static Reset(rootNode: TransformNode): void {
const extensionMetadata = this._GetExtensionMetadata(rootNode);
if (!extensionMetadata) {
throw new Error(`Cannot reset on a glTF mesh that does not have the ${NAME} extension`);
}
Expand All @@ -148,19 +165,19 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {

/**
* Reset back to the original before selecting a variant.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
*/
public reset(rootMesh: Mesh): void {
KHR_materials_variants.Reset(rootMesh);
public reset(rootNode: TransformNode): void {
KHR_materials_variants.Reset(rootNode);
}

/**
* Gets the last selected variant name(s) or null if original.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @returns The selected variant name(s).
*/
public static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]> {
const extensionMetadata = this._GetExtensionMetadata(rootMesh);
public static GetLastSelectedVariant(rootNode: TransformNode): Nullable<string | string[]> {
const extensionMetadata = this._GetExtensionMetadata(rootNode);
if (!extensionMetadata) {
throw new Error(`Cannot get the last selected variant on a glTF mesh that does not have the ${NAME} extension`);
}
Expand All @@ -170,15 +187,15 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {

/**
* Gets the last selected variant name(s) or null if original.
* @param rootMesh The glTF root mesh
* @param rootNode The glTF root node
* @returns The selected variant name(s).
*/
public getLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]> {
return KHR_materials_variants.GetLastSelectedVariant(rootMesh);
public getLastSelectedVariant(rootNode: TransformNode): Nullable<string | string[]> {
return KHR_materials_variants.GetLastSelectedVariant(rootNode);
}

private static _GetExtensionMetadata(rootMesh: Nullable<TransformNode>): Nullable<IExtensionMetadata> {
return rootMesh?._internalMetadata?.gltf?.[NAME] || null;
private static _GetExtensionMetadata(rootNode: Nullable<TransformNode>): Nullable<IExtensionMetadata> {
return rootNode?._internalMetadata?.gltf?.[NAME] || null;
}

/** @internal */
Expand All @@ -190,6 +207,31 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
}
}

/** @internal */
public onReady(): void {
const rootNode = this._loader.rootBabylonMesh;
if (rootNode) {
this._loader.parent.extensionOptions[NAME]?.onLoaded?.({
get variants() {
return KHR_materials_variants.GetAvailableVariants(rootNode);
},
get selectedVariant(): string {
const lastSelectedVariant = KHR_materials_variants.GetLastSelectedVariant(rootNode);
if (!lastSelectedVariant) {
sebavan marked this conversation as resolved.
Show resolved Hide resolved
return KHR_materials_variants.GetAvailableVariants(rootNode)[0];
}
if (Array.isArray(lastSelectedVariant)) {
return lastSelectedVariant[0];
}
return lastSelectedVariant;
},
set selectedVariant(variantName) {
KHR_materials_variants.SelectVariant(rootNode, variantName);
},
});
}
}

/**
* @internal
*/
Expand Down
74 changes: 61 additions & 13 deletions packages/tools/viewer-alpha/src/viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import type {
// eslint-disable-next-line import/no-internal-modules
} from "core/index";

import type { MaterialVariantsController } from "loaders/glTF/2.0/Extensions/KHR_materials_variants";

import { ArcRotateCamera } from "core/Cameras/arcRotateCamera";
import { HemisphericLight } from "core/Lights/hemisphericLight";
import { loadAssetContainerAsync } from "core/Loading/sceneLoader";
Expand Down Expand Up @@ -287,12 +289,18 @@ export class Viewer implements IDisposable {
*/
public readonly onAnimationProgressChanged = new Observable<void>();

/**
* Fired when the selected material variant changes.
*/
public readonly onSelectedMaterialVariantChanged = new Observable<void>();

private readonly _tempVectors = BuildTuple(4, Vector3.Zero);
private readonly _details: ViewerDetails;
private readonly _snapshotHelper: SnapshotRenderingHelper;
private readonly _autoRotationBehavior: AutoRotationBehavior;
private readonly _imageProcessingConfigurationObserver: Observer<ImageProcessingConfiguration>;
private _renderLoopController: Nullable<IDisposable> = null;
private _materialVariantsController: Nullable<MaterialVariantsController> = null;
private _skybox: Nullable<Mesh> = null;
private _skyboxBlur: number = 0.3;
private _light: Nullable<HemisphericLight> = null;
Expand Down Expand Up @@ -616,6 +624,29 @@ export class Viewer implements IDisposable {
return this._details.model?.animationGroups[this._selectedAnimation] ?? null;
}

/**
* The list of material variant names for the currently loaded model.
*/
public get materialVariants(): readonly string[] {
return this._materialVariantsController?.variants ?? [];
}

/**
* The currently selected material variant.
*/
public get selectedMaterialVariant(): Nullable<string> {
return this._materialVariantsController?.selectedVariant ?? null;
}

public set selectedMaterialVariant(value: string) {
if (value !== this.selectedMaterialVariant && this._materialVariantsController?.variants.includes(value)) {
this._snapshotHelper.disableSnapshotRendering();
this._materialVariantsController.selectedVariant = value;
this._snapshotHelper.enableSnapshotRendering();
this.onSelectedMaterialVariantChanged.notifyObservers();
}
}

/**
* Loads a 3D model from the specified URL.
* @remarks
Expand Down Expand Up @@ -648,21 +679,35 @@ export class Viewer implements IDisposable {
}
};

// Enable transparency as coverage by default to be 3D Commerce compliant by default.
// https://doc.babylonjs.com/setup/support/3D_commerce_certif
if (!options?.pluginOptions?.gltf?.transparencyAsCoverage) {
options = {
...options,
pluginOptions: {
...options?.pluginOptions,
gltf: {
...options?.pluginOptions?.gltf,
transparencyAsCoverage: true,
const originalOnMaterialVariantsLoaded = options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants?.onLoaded;
const onMaterialVariantsLoaded: typeof originalOnMaterialVariantsLoaded = (controller) => {
originalOnMaterialVariantsLoaded?.(controller);
this._materialVariantsController = controller;
};

options = {
...options,
pluginOptions: {
...options?.pluginOptions,
gltf: {
// Enable transparency as coverage by default to be 3D Commerce compliant by default.
// https://doc.babylonjs.com/setup/support/3D_commerce_certif
transparencyAsCoverage: true,
...options?.pluginOptions?.gltf,
extensionOptions: {
...options?.pluginOptions?.gltf?.extensionOptions,
// eslint-disable-next-line @typescript-eslint/naming-convention
KHR_materials_variants: {
...options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants,
// Capture the material variants controller when it is loaded.
onLoaded: onMaterialVariantsLoaded,
},
},
},
onProgress,
};
}
},
// Pass a progress callback to update the loading progress.
onProgress,
};

this._loadModelAbortController?.abort("New model is being loaded before previous model finished loading.");
const abortController = (this._loadModelAbortController = new AbortController());
Expand All @@ -672,6 +717,8 @@ export class Viewer implements IDisposable {
this._snapshotHelper.disableSnapshotRendering();
this._details.model?.dispose();
this._details.model = null;
this._materialVariantsController = null;
this.onSelectedMaterialVariantChanged.notifyObservers();
this.selectedAnimation = -1;

try {
Expand All @@ -680,6 +727,7 @@ export class Viewer implements IDisposable {
this._modelLoadingProgress = 0;
this.onLoadingProgressChanged.notifyObservers();
this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);
this.onSelectedMaterialVariantChanged.notifyObservers();
this._details.model.animationGroups.forEach((group) => {
group.start(true, this.animationSpeed);
group.pause();
Expand Down
Loading
Loading