feat: add support of decal map in standard and pbr material inspectors

Author: julien-moreau

editor/src/editor/layout/graph/remove.ts

@@ -207,6 +207,8 @@ export function removeNodes(editor: Editor) {
 			});
 		},
 	});
+
+	editor.layout.preview.selectionOutlineLayer.clearSelection();
 }
 
 function restoreNodeData(editor: Editor, data: _RemoveNodeData, scene: Scene) {

editor/src/editor/layout/inspector/material/components/detail.tsx

@@ -0,0 +1,46 @@
+import { Component, ReactNode } from "react";
+
+import { PBRMaterial, StandardMaterial } from "babylonjs";
+
+import { EditorInspectorSwitchField } from "../../fields/switch";
+import { EditorInspectorNumberField } from "../../fields/number";
+import { EditorInspectorSectionField } from "../../fields/section";
+import { EditorInspectorTextureField } from "../../fields/texture";
+
+export interface IEditorDetailMapInspectorProps {
+	material: StandardMaterial | PBRMaterial;
+}
+
+export interface IEditorDetailMapInspectorState {}
+
+export class EditorDetailMapInspector extends Component<IEditorDetailMapInspectorProps, IEditorDetailMapInspectorState> {
+	public constructor(props: IEditorDetailMapInspectorProps) {
+		super(props);
+
+		this.state = {};
+	}
+
+	public render(): ReactNode {
+		return (
+			<EditorInspectorSectionField title="Detail Map">
+				<EditorInspectorSwitchField object={this.props.material.detailMap} property="isEnabled" label="Enabled" onChange={() => this.forceUpdate()} />
+
+				{this.props.material.detailMap.isEnabled && (
+					<>
+						<EditorInspectorTextureField hideLevel scene={this.props.material.getScene()} object={this.props.material.detailMap} property="texture" title="Texture" />
+						<EditorInspectorNumberField object={this.props.material.detailMap} property="diffuseBlendLevel" label="Diffuse Blend Level" step={0.01} min={0} max={1} />
+						<EditorInspectorNumberField object={this.props.material.detailMap} property="bumpLevel" label="Bump Level" step={0.01} min={0} max={1} />
+						<EditorInspectorNumberField
+							object={this.props.material.detailMap}
+							property="roughnessBlendLevel"
+							label="Roughness Blend Level"
+							step={0.01}
+							min={0}
+							max={1}
+						/>
+					</>
+				)}
+			</EditorInspectorSectionField>
+		);
+	}
+}

editor/src/editor/layout/inspector/material/pbr.tsx

@@ -13,6 +13,7 @@ import { EditorInspectorTextureField } from "../fields/texture";
 import { EditorInspectorSectionField } from "../fields/section";
 
 import { EditorAlphaModeField } from "./components/alpha";
+import { EditorDetailMapInspector } from "./components/detail";
 import { EditorTransparencyModeField } from "./components/transparency";
 import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
 
@@ -245,6 +246,8 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
 					</EditorInspectorSectionField>
 				)}
 
+				<EditorDetailMapInspector material={this.props.material} />
+
 				<EditorInspectorSectionField title="Sub Surface">
 					<EditorInspectorSwitchField
 						noUndoRedo

editor/src/editor/layout/inspector/material/standard.tsx

@@ -10,6 +10,7 @@ import { EditorInspectorTextureField } from "../fields/texture";
 import { EditorInspectorSectionField } from "../fields/section";
 
 import { EditorAlphaModeField } from "./components/alpha";
+import { EditorDetailMapInspector } from "./components/detail";
 import { EditorTransparencyModeField } from "./components/transparency";
 import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
 
@@ -80,6 +81,8 @@ export function EditorStandardMaterialInspector(props: IEditorStandardMaterialIn
 				<EditorInspectorNumberField label="Specular Intensity" object={props.material} property="specularIntensity" min={0} />
 			</EditorInspectorSectionField>
 
+			<EditorDetailMapInspector material={props.material} />
+
 			<EditorInspectorSectionField title="Misc">
 				<EditorInspectorSwitchField label="Disable Lighting" object={props.material} property="disableLighting" />
 				<EditorInspectorSwitchField label="Use Specular Over Alpha" object={props.material} property="useSpecularOverAlpha" />

editor/src/editor/layout/preview.tsx

@@ -189,6 +189,7 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 	private _renderScene: boolean = true;
 	private _mouseDownPosition: Vector2 = Vector2.Zero();
 
+	private _lastPickedDecal: AbstractMesh | null = null;
 	private _objectUnderPointer: AbstractMesh | Sprite | null = null;
 
 	private _workingCanvas: HTMLCanvasElement | null = null;
@@ -767,34 +768,37 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 		}
 	}
 
-	private _getPickingInfo(x: number, y: number): PickingInfo {
-		const decalPick = this.scene.pick(
-			x,
-			y,
-			(m) => {
-				return m.metadata?.decal && m.isVisible && m.isEnabled();
-			},
-			false
-		);
+	private _decalMeshPredicate(m: AbstractMesh): boolean {
+		if (!m.isVisible || !m.isEnabled() || !m.metadata?.decal) {
+			return false;
+		}
 
-		const meshPick = this.scene.pick(
-			x,
-			y,
-			(m) => {
-				return !m._masterMesh && !isCollisionMesh(m) && !isCollisionInstancedMesh(m) && m.isVisible && m.isEnabled();
-			},
-			false
-		);
+		if (this._lastPickedDecal) {
+			return m !== this._lastPickedDecal;
+		}
 
+		return true;
+	}
+
+	private _meshPredicate(m: AbstractMesh): boolean {
+		return !m._masterMesh && !isCollisionMesh(m) && !isCollisionInstancedMesh(m) && m.isVisible && m.isEnabled();
+	}
+
+	private _getPickingInfo(x: number, y: number): PickingInfo {
+		const decalPick = this.scene.pick(x, y, (m) => this._decalMeshPredicate(m), false);
+		const meshPick = this.scene.pick(x, y, (m) => this._meshPredicate(m), false);
 		const spritePick = this.scene.pickSprite(x, y, (s) => isSprite(s), false);
 
+		this._lastPickedDecal = null;
+
 		let pickingInfo = meshPick;
 		if (decalPick?.pickedPoint && meshPick?.pickedPoint) {
 			const distance = Vector3.Distance(decalPick.pickedPoint, meshPick.pickedPoint);
 			const zOffset = decalPick.pickedMesh?.material?.zOffset ?? 0;
 
-			if (distance <= zOffset + 0.01) {
+			if (distance <= zOffset + 1) {
 				pickingInfo = decalPick;
+				this._lastPickedDecal = decalPick.pickedMesh;
 			}
 		}