feat: add normal material (#584)

Author: yuripourre

editor/src/editor/dialogs/command-palette/material.ts

@@ -1,6 +1,6 @@
 import { Editor } from "../../main";
 
-import { addPBRMaterial, addStandardMaterial, addNodeMaterial, addSkyMaterial, addGridMaterial } from "../../../project/add/material";
+import { addPBRMaterial, addStandardMaterial, addNodeMaterial, addSkyMaterial, addGridMaterial, addNormalMaterial } from "../../../project/add/material";
 
 import { ICommandPaletteType } from "./command-palette";
 
@@ -36,5 +36,11 @@ export function getMaterialCommands(editor?: Editor): ICommandPaletteType[] {
 			key: "add-grid-material",
 			action: () => editor && addGridMaterial(editor.layout.preview.scene),
 		},
+		{
+			text: "Normal Material",
+			label: "Add a new normal material to the scene",
+			key: "add-normal-material",
+			action: () => editor && addNormalMaterial(editor.layout.preview.scene),
+		},
 	];
 }

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

@@ -2,7 +2,7 @@ import { extname } from "path/posix";
 
 import { Component, DragEvent, ReactNode } from "react";
 
-import { SkyMaterial, GridMaterial } from "babylonjs-materials";
+import { SkyMaterial, GridMaterial, NormalMaterial } from "babylonjs-materials";
 import { Material, MultiMaterial, PBRMaterial, StandardMaterial } from "babylonjs";
 
 import { Table, TableBody, TableCaption, TableCell, TableRow } from "../../../../ui/shadcn/ui/table";
@@ -15,6 +15,7 @@ import { EditorInspectorSectionField } from "../fields/section";
 
 import { EditorSkyMaterialInspector } from "./sky";
 import { EditorGridMaterialInspector } from "./grid";
+import { EditorNormalMaterialInspector } from "./normal";
 import { EditorPBRMaterialInspector } from "./pbr";
 import { EditorStandardMaterialInspector } from "./standard";
 
@@ -121,6 +122,8 @@ export class EditorMultiMaterialInspector extends Component<IEditorPBRMaterialIn
 				return <EditorSkyMaterialInspector key={this.state.material.id} material={this.state.material as SkyMaterial} />;
 			case "GridMaterial":
 				return <EditorGridMaterialInspector key={this.state.material.id} material={this.state.material as GridMaterial} />;
+			case "NormalMaterial":
+				return <EditorNormalMaterialInspector key={this.state.material.id} material={this.state.material as NormalMaterial} />;
 		}
 	}
 }

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

@@ -0,0 +1,34 @@
+import { Component, ReactNode } from "react";
+
+import { AbstractMesh } from "babylonjs";
+import { NormalMaterial } from "babylonjs-materials";
+
+import { EditorInspectorStringField } from "../fields/string";
+import { EditorInspectorSwitchField } from "../fields/switch";
+import { EditorInspectorSectionField } from "../fields/section";
+
+import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
+
+export interface IEditorNormalMaterialInspectorProps {
+	mesh?: AbstractMesh;
+	material: NormalMaterial;
+}
+
+export class EditorNormalMaterialInspector extends Component<IEditorNormalMaterialInspectorProps> {
+	public constructor(props: IEditorNormalMaterialInspectorProps) {
+		super(props);
+	}
+
+	public render(): ReactNode {
+		return (
+			<>
+				<EditorInspectorSectionField title="Material" label={this.props.material.getClassName()}>
+					<EditorInspectorStringField label="Name" object={this.props.material} property="name" />
+					<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
+
+					<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
+				</EditorInspectorSectionField>
+			</>
+		);
+	}
+}

editor/src/editor/layout/inspector/mesh/mesh.tsx

@@ -5,7 +5,7 @@ import { FaCopy, FaLink } from "react-icons/fa6";
 import { IoAddSharp, IoCloseOutline } from "react-icons/io5";
 import { AiOutlinePlus } from "react-icons/ai";
 
-import { SkyMaterial, GridMaterial } from "babylonjs-materials";
+import { SkyMaterial, GridMaterial, NormalMaterial } from "babylonjs-materials";
 import { AbstractMesh, InstancedMesh, Material, Mesh, MorphTarget, MultiMaterial, Node, Observer, PBRMaterial, StandardMaterial, NodeMaterial } from "babylonjs";
 
 import { CollisionMesh } from "../../../nodes/collision";
@@ -40,6 +40,7 @@ import { IEditorInspectorImplementationProps } from "../inspector";
 import { EditorPBRMaterialInspector } from "../material/pbr";
 import { EditorSkyMaterialInspector } from "../material/sky";
 import { EditorGridMaterialInspector } from "../material/grid";
+import { EditorNormalMaterialInspector } from "../material/normal";
 import { EditorNodeMaterialInspector } from "../material/node";
 import { EditorMultiMaterialInspector } from "../material/multi";
 import { EditorStandardMaterialInspector } from "../material/standard";
@@ -307,6 +308,9 @@ export class EditorMeshInspector extends Component<IEditorInspectorImplementatio
 
 			case "GridMaterial":
 				return <EditorGridMaterialInspector mesh={this.props.object} material={this.props.object.material as GridMaterial} />;
+
+			case "NormalMaterial":
+				return <EditorNormalMaterialInspector mesh={this.props.object} material={this.props.object.material as NormalMaterial} />;
 		}
 	}
 

editor/src/project/add/material.ts

@@ -1,4 +1,4 @@
-import { SkyMaterial, GridMaterial } from "babylonjs-materials";
+import { SkyMaterial, GridMaterial, NormalMaterial } from "babylonjs-materials";
 import { Scene, Tools, PBRMaterial, StandardMaterial, NodeMaterial } from "babylonjs";
 
 import { UniqueNumber } from "../../tools/tools";
@@ -43,3 +43,11 @@ export function addGridMaterial(scene: Scene) {
 
 	return material;
 }
+
+export function addNormalMaterial(scene: Scene) {
+	const material = new NormalMaterial("New Normal Material", scene);
+	material.id = Tools.RandomId();
+	material.uniqueId = UniqueNumber.Get();
+
+	return material;
+}