Add Grid Material

Author: yuripourre

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

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

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

@@ -0,0 +1,52 @@
+import { Component, ReactNode } from "react";
+
+import { AbstractMesh } from "babylonjs";
+import { GridMaterial } from "babylonjs-materials";
+
+import { EditorInspectorStringField } from "../fields/string";
+import { EditorInspectorSwitchField } from "../fields/switch";
+import { EditorInspectorNumberField } from "../fields/number";
+import { EditorInspectorVectorField } from "../fields/vector";
+import { EditorInspectorSectionField } from "../fields/section";
+import { EditorInspectorColorField } from "../fields/color";
+
+import { EditorMaterialInspectorUtilsComponent } from "./utils";
+
+export interface IEditorGridMaterialInspectorProps {
+	mesh?: AbstractMesh;
+	material: GridMaterial;
+}
+
+export class EditorGridMaterialInspector extends Component<IEditorGridMaterialInspectorProps> {
+	public constructor(props: IEditorGridMaterialInspectorProps) {
+		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>
+
+				<EditorInspectorSectionField title="Material Grid">
+					<EditorInspectorVectorField object={this.props.material} property="gridOffset" label="Grid Offset" />
+					<EditorInspectorNumberField object={this.props.material} property="gridRatio" label="Grid Ratio" min={0} max={10} />
+					<EditorInspectorNumberField object={this.props.material} property="majorUnitFrequency" label="Major Unit Frequency" min={0} max={100} />
+					<EditorInspectorNumberField object={this.props.material} property="minorUnitVisibility" label="Minor Unit Visibility" min={0} max={1} />
+					<EditorInspectorNumberField object={this.props.material} property="gridVisibility" label="Grid Visibility" min={0} max={1} />
+					<EditorInspectorNumberField object={this.props.material} property="opacity" label="Opacity" min={0} max={1} />
+					<EditorInspectorSwitchField object={this.props.material} property="preMultiplyAlpha" label="Pre-multiply Alpha" />
+				</EditorInspectorSectionField>
+
+				<EditorInspectorSectionField title="Material Colors">
+					<EditorInspectorColorField object={this.props.material} property="mainColor" label="Main Color" />
+					<EditorInspectorColorField object={this.props.material} property="lineColor" label="Line Color" />
+				</EditorInspectorSectionField>
+			</>
+		);
+	}
+}

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 } from "babylonjs-materials";
+import { SkyMaterial, GridMaterial } from "babylonjs-materials";
 import { Material, MultiMaterial, PBRMaterial, StandardMaterial } from "babylonjs";
 
 import { Table, TableBody, TableCaption, TableCell, TableRow } from "../../../../ui/shadcn/ui/table";
@@ -14,6 +14,7 @@ import { registerUndoRedo } from "../../../../tools/undoredo";
 import { EditorInspectorSectionField } from "../fields/section";
 
 import { EditorSkyMaterialInspector } from "./sky";
+import { EditorGridMaterialInspector } from "./grid";
 import { EditorPBRMaterialInspector } from "./pbr";
 import { EditorStandardMaterialInspector } from "./standard";
 
@@ -118,6 +119,8 @@ export class EditorMultiMaterialInspector extends Component<IEditorPBRMaterialIn
 				return <EditorStandardMaterialInspector key={this.state.material.id} material={this.state.material as StandardMaterial} />;
 			case "SkyMaterial":
 				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} />;
 		}
 	}
 }

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 } from "babylonjs-materials";
+import { SkyMaterial, GridMaterial } from "babylonjs-materials";
 import { AbstractMesh, InstancedMesh, Material, Mesh, MorphTarget, MultiMaterial, Node, Observer, PBRMaterial, StandardMaterial, NodeMaterial } from "babylonjs";
 
 import { CollisionMesh } from "../../../nodes/collision";
@@ -39,6 +39,7 @@ import { IEditorInspectorImplementationProps } from "../inspector";
 
 import { EditorPBRMaterialInspector } from "../material/pbr";
 import { EditorSkyMaterialInspector } from "../material/sky";
+import { EditorGridMaterialInspector } from "../material/grid";
 import { EditorNodeMaterialInspector } from "../material/node";
 import { EditorMultiMaterialInspector } from "../material/multi";
 import { EditorStandardMaterialInspector } from "../material/standard";
@@ -303,6 +304,9 @@ export class EditorMeshInspector extends Component<IEditorInspectorImplementatio
 
 			case "SkyMaterial":
 				return <EditorSkyMaterialInspector mesh={this.props.object} material={this.props.object.material as SkyMaterial} />;
+
+			case "GridMaterial":
+				return <EditorGridMaterialInspector mesh={this.props.object} material={this.props.object.material as GridMaterial} />;
 		}
 	}
 

editor/src/project/add/material.ts

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