Skip to content

Commit 25b07ca

Browse files
Julien Moreau-Mathisjulien-moreau
Julien Moreau-Mathis
authored and
julien-moreau
committed
feat: add materials from materials library of Babylon.js
1 parent 2a3f45c commit 25b07ca

File tree

16 files changed

+428
-22
lines changed

16 files changed

+428
-22
lines changed

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

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
import { Editor } from "../../main";
22

3-
import { addPBRMaterial, addStandardMaterial, addNodeMaterial, addSkyMaterial, addGridMaterial, addNormalMaterial, addWaterMaterial } from "../../../project/add/material";
3+
import {
4+
addPBRMaterial,
5+
addStandardMaterial,
6+
addNodeMaterial,
7+
addSkyMaterial,
8+
addGridMaterial,
9+
addNormalMaterial,
10+
addWaterMaterial,
11+
addLavaMaterial,
12+
addTriPlanarMaterial,
13+
addCellMaterial,
14+
addFireMaterial,
15+
} from "../../../project/add/material";
416

517
import { ICommandPaletteType } from "./command-palette";
618

@@ -24,6 +36,11 @@ export function getMaterialCommands(editor?: Editor): ICommandPaletteType[] {
2436
key: "add-node-material",
2537
action: () => editor && addNodeMaterial(editor.layout.preview.scene),
2638
},
39+
];
40+
}
41+
42+
export function getMaterialsLibraryCommands(editor?: Editor): ICommandPaletteType[] {
43+
return [
2744
{
2845
text: "Sky Material",
2946
label: "Add a new sky material to the scene",
@@ -48,5 +65,29 @@ export function getMaterialCommands(editor?: Editor): ICommandPaletteType[] {
4865
key: "add-water-material",
4966
action: () => editor && addWaterMaterial(editor.layout.preview.scene),
5067
},
68+
{
69+
text: "Lava Material",
70+
label: "Add a new lava material to the scene",
71+
key: "add-lava-material",
72+
action: () => editor && addLavaMaterial(editor.layout.preview.scene),
73+
},
74+
{
75+
text: "Tri-Planar Material",
76+
label: "Add a new Tri-Planar material to the scene",
77+
key: "add-tri-planar-material",
78+
action: () => editor && addTriPlanarMaterial(editor.layout.preview.scene),
79+
},
80+
{
81+
text: "Cell Material",
82+
label: "Add a new Cell material to the scene",
83+
key: "add-cell-material",
84+
action: () => editor && addCellMaterial(editor.layout.preview.scene),
85+
},
86+
{
87+
text: "Fire Material",
88+
label: "Add a new Fire material to the scene",
89+
key: "add-fire-material",
90+
action: () => editor && addFireMaterial(editor.layout.preview.scene),
91+
},
5192
];
5293
}

‎editor/src/editor/layout/assets-browser.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ import { findAvailableFilename, normalizedGlob } from "../../tools/fs";
3838
import { loadSavedThumbnailsCache } from "../../tools/assets/thumbnail";
3939
import { checkProjectCachedCompressedTextures, processingCompressedTextures } from "../../tools/assets/ktx";
4040

41-
import { getMaterialCommands } from "../dialogs/command-palette/material";
4241
import { ICommandPaletteType } from "../dialogs/command-palette/command-palette";
42+
import { getMaterialCommands, getMaterialsLibraryCommands } from "../dialogs/command-palette/material";
4343

4444
import { loadScene } from "../../project/load/scene";
4545
import { saveProject } from "../../project/save/save";
@@ -727,6 +727,18 @@ export class EditorAssetsBrowser extends Component<IEditorAssetsBrowserProps, IE
727727

728728
<ContextMenuSeparator />
729729
<ContextMenuItem onClick={() => this._handleAddNodeMaterialFromSnippet()}>Node Material From Snippet...</ContextMenuItem>
730+
<ContextMenuSeparator />
731+
732+
<ContextMenuSub>
733+
<ContextMenuSubTrigger className="flex items-center gap-2">Materials Library</ContextMenuSubTrigger>
734+
<ContextMenuSubContent>
735+
{getMaterialsLibraryCommands(this.props.editor).map((command) => (
736+
<ContextMenuItem key={command.key} onClick={() => this._handleAddMaterial(command)}>
737+
{command.text}
738+
</ContextMenuItem>
739+
))}
740+
</ContextMenuSubContent>
741+
</ContextMenuSub>
730742

731743
{this.props.editor.state.enableExperimentalFeatures && (
732744
<>

‎editor/src/editor/layout/inspector/material/cell.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Component, ReactNode } from "react";
2+
3+
import { AbstractMesh } from "babylonjs";
4+
import { CellMaterial } from "babylonjs-materials";
5+
6+
import { EditorInspectorColorField } from "../fields/color";
7+
import { EditorInspectorStringField } from "../fields/string";
8+
import { EditorInspectorNumberField } from "../fields/number";
9+
import { EditorInspectorSwitchField } from "../fields/switch";
10+
import { EditorInspectorTextureField } from "../fields/texture";
11+
import { EditorInspectorSectionField } from "../fields/section";
12+
13+
import { EditorAlphaModeField } from "./components/alpha";
14+
import { EditorTransparencyModeField } from "./components/transparency";
15+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
16+
17+
export interface IEditorCellMaterialInspectorProps {
18+
mesh?: AbstractMesh;
19+
material: CellMaterial;
20+
}
21+
22+
export class EditorCellMaterialInspector extends Component<IEditorCellMaterialInspectorProps> {
23+
public constructor(props: IEditorCellMaterialInspectorProps) {
24+
super(props);
25+
}
26+
27+
public render(): ReactNode {
28+
return (
29+
<>
30+
<EditorInspectorSectionField title="Material" label={this.props.material.getClassName()}>
31+
<EditorInspectorStringField label="Name" object={this.props.material} property="name" />
32+
<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
33+
34+
<EditorInspectorNumberField label="Alpha" object={this.props.material} property="alpha" min={0} max={1} />
35+
<EditorAlphaModeField object={this.props.material} />
36+
<EditorTransparencyModeField object={this.props.material} />
37+
38+
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
39+
</EditorInspectorSectionField>
40+
41+
<EditorInspectorSectionField title="Cell">
42+
<EditorInspectorSwitchField label="High Level" object={this.props.material} property="computeHighLevel" />
43+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Texture" property="diffuseTexture" />
44+
<EditorInspectorColorField label={<div className="w-14">Color</div>} object={this.props.material} property="diffuseColor" />
45+
</EditorInspectorSectionField>
46+
47+
<EditorInspectorSectionField title="Misc">
48+
<EditorInspectorSwitchField label="Disable Lighting" object={this.props.material} property="disableLighting" />
49+
</EditorInspectorSectionField>
50+
</>
51+
);
52+
}
53+
}

‎editor/src/editor/layout/inspector/material/components/transparency.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ReactNode } from "react";
2+
3+
import { Material } from "babylonjs";
4+
25
import { EditorInspectorListField } from "../../fields/list";
3-
import { Material, StandardMaterial, PBRMaterial } from "babylonjs";
46

57
export interface IEditorTransparencyModeFieldProps {
6-
object: StandardMaterial | PBRMaterial;
8+
object: Material;
79
onChange?: () => void;
810
}
911

‎editor/src/editor/layout/inspector/material/fire.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, ReactNode } from "react";
2+
3+
import { AbstractMesh } from "babylonjs";
4+
import { FireMaterial } from "babylonjs-materials";
5+
6+
import { EditorInspectorStringField } from "../fields/string";
7+
import { EditorInspectorSwitchField } from "../fields/switch";
8+
import { EditorInspectorNumberField } from "../fields/number";
9+
import { EditorInspectorTextureField } from "../fields/texture";
10+
import { EditorInspectorSectionField } from "../fields/section";
11+
12+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
13+
14+
export interface IEditorFireMaterialInspectorProps {
15+
mesh?: AbstractMesh;
16+
material: FireMaterial;
17+
}
18+
19+
export class EditorFireMaterialInspector extends Component<IEditorFireMaterialInspectorProps> {
20+
public constructor(props: IEditorFireMaterialInspectorProps) {
21+
super(props);
22+
}
23+
24+
public render(): ReactNode {
25+
return (
26+
<>
27+
<EditorInspectorSectionField title="Material" label={this.props.material.getClassName()}>
28+
<EditorInspectorStringField label="Name" object={this.props.material} property="name" />
29+
<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
30+
31+
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
32+
</EditorInspectorSectionField>
33+
34+
<EditorInspectorSectionField title="Fire">
35+
<EditorInspectorNumberField object={this.props.material} property="speed" label="Speed" />
36+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Diffuse Texture" property="diffuseTexture" />
37+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Distortion Texture" property="distortionTexture" />
38+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Opacity Texture" property="opacityTexture" />
39+
</EditorInspectorSectionField>
40+
</>
41+
);
42+
}
43+
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,19 @@ export class EditorGridMaterialInspector extends Component<IEditorGridMaterialIn
3232
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
3333
</EditorInspectorSectionField>
3434

35-
<EditorInspectorSectionField title="Material Grid">
36-
<EditorInspectorVectorField object={this.props.material} property="gridOffset" label="Grid Offset" />
37-
<EditorInspectorNumberField object={this.props.material} property="gridRatio" label="Grid Ratio" min={0} max={10} />
35+
<EditorInspectorSectionField title="Grid">
36+
<EditorInspectorVectorField object={this.props.material} property="gridOffset" label="Offset" />
37+
<EditorInspectorNumberField object={this.props.material} property="gridRatio" label="Ratio" min={0} max={10} />
3838
<EditorInspectorNumberField object={this.props.material} property="majorUnitFrequency" label="Major Unit Frequency" min={0} max={100} />
3939
<EditorInspectorNumberField object={this.props.material} property="minorUnitVisibility" label="Minor Unit Visibility" min={0} max={1} />
40-
<EditorInspectorNumberField object={this.props.material} property="gridVisibility" label="Grid Visibility" min={0} max={1} />
40+
<EditorInspectorNumberField object={this.props.material} property="gridVisibility" label="Visibility" min={0} max={1} />
4141
<EditorInspectorNumberField object={this.props.material} property="opacity" label="Opacity" min={0} max={1} />
4242
<EditorInspectorSwitchField object={this.props.material} property="preMultiplyAlpha" label="Pre-multiply Alpha" />
4343
</EditorInspectorSectionField>
4444

45-
<EditorInspectorSectionField title="Material Colors">
46-
<EditorInspectorColorField object={this.props.material} property="mainColor" label="Main Color" />
47-
<EditorInspectorColorField object={this.props.material} property="lineColor" label="Line Color" />
45+
<EditorInspectorSectionField title="Colors">
46+
<EditorInspectorColorField object={this.props.material} property="mainColor" label="Main" />
47+
<EditorInspectorColorField object={this.props.material} property="lineColor" label="Line" />
4848
</EditorInspectorSectionField>
4949
</>
5050
);

‎editor/src/editor/layout/inspector/material/lava.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component, ReactNode } from "react";
2+
3+
import { AbstractMesh } from "babylonjs";
4+
import { LavaMaterial } from "babylonjs-materials";
5+
6+
import { EditorInspectorColorField } from "../fields/color";
7+
import { EditorInspectorStringField } from "../fields/string";
8+
import { EditorInspectorSwitchField } from "../fields/switch";
9+
import { EditorInspectorNumberField } from "../fields/number";
10+
import { EditorInspectorTextureField } from "../fields/texture";
11+
import { EditorInspectorSectionField } from "../fields/section";
12+
13+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
14+
15+
export interface IEditorLavaMaterialInspectorProps {
16+
mesh?: AbstractMesh;
17+
material: LavaMaterial;
18+
}
19+
20+
export class EditorLavaMaterialInspector extends Component<IEditorLavaMaterialInspectorProps> {
21+
public constructor(props: IEditorLavaMaterialInspectorProps) {
22+
super(props);
23+
}
24+
25+
public render(): ReactNode {
26+
return (
27+
<>
28+
<EditorInspectorSectionField title="Material" label={this.props.material.getClassName()}>
29+
<EditorInspectorStringField label="Name" object={this.props.material} property="name" />
30+
<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
31+
32+
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
33+
</EditorInspectorSectionField>
34+
35+
<EditorInspectorSectionField title="Lava">
36+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Diffuse Texture" property="diffuseTexture" />
37+
<EditorInspectorTextureField hideLevel object={this.props.material} title="Noise Texture" property="noiseTexture" />
38+
39+
<EditorInspectorNumberField object={this.props.material} property="speed" label="Speed" />
40+
<EditorInspectorNumberField object={this.props.material} property="movingSpeed" label="Moving Speed" />
41+
<EditorInspectorNumberField object={this.props.material} property="lowFrequencySpeed" label="Low Frequency Speed" />
42+
</EditorInspectorSectionField>
43+
44+
<EditorInspectorSectionField title="Fog">
45+
<EditorInspectorColorField object={this.props.material} property="fogColor" label="Color" />
46+
<EditorInspectorNumberField object={this.props.material} property="fogDensity" label="Density" />
47+
</EditorInspectorSectionField>
48+
49+
<EditorInspectorSectionField title="Misc">
50+
<EditorInspectorSwitchField label="Unlit" object={this.props.material} property="unlit" />
51+
<EditorInspectorSwitchField label="Disable Lighting" object={this.props.material} property="disableLighting" />
52+
</EditorInspectorSectionField>
53+
</>
54+
);
55+
}
56+
}

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { extname } from "path/posix";
33
import { Component, DragEvent, ReactNode } from "react";
44

55
import { Material, MultiMaterial, PBRMaterial, StandardMaterial } from "babylonjs";
6-
import { SkyMaterial, GridMaterial, NormalMaterial, WaterMaterial } from "babylonjs-materials";
6+
import { SkyMaterial, GridMaterial, NormalMaterial, WaterMaterial, TriPlanarMaterial, LavaMaterial, CellMaterial, FireMaterial } from "babylonjs-materials";
77

88
import { Table, TableBody, TableCaption, TableCell, TableRow } from "../../../../ui/shadcn/ui/table";
99

@@ -15,10 +15,14 @@ import { EditorInspectorSectionField } from "../fields/section";
1515

1616
import { EditorSkyMaterialInspector } from "./sky";
1717
import { EditorPBRMaterialInspector } from "./pbr";
18+
import { EditorCellMaterialInspector } from "./cell";
1819
import { EditorGridMaterialInspector } from "./grid";
20+
import { EditorFireMaterialInspector } from "./fire";
21+
import { EditorLavaMaterialInspector } from "./lava";
1922
import { EditorWaterMaterialInspector } from "./water";
2023
import { EditorNormalMaterialInspector } from "./normal";
2124
import { EditorStandardMaterialInspector } from "./standard";
25+
import { EditorTriPlanarMaterialInspector } from "./tri-planar";
2226

2327
export interface IEditorPBRMaterialInspectorProps {
2428
material: MultiMaterial;
@@ -132,6 +136,18 @@ export class EditorMultiMaterialInspector extends Component<IEditorPBRMaterialIn
132136

133137
case "WaterMaterial":
134138
return <EditorWaterMaterialInspector key={this.state.material.id} material={this.state.material as WaterMaterial} />;
139+
140+
case "LavaMaterial":
141+
return <EditorLavaMaterialInspector key={this.state.material.id} material={this.state.material as LavaMaterial} />;
142+
143+
case "TriPlanarMaterial":
144+
return <EditorTriPlanarMaterialInspector key={this.state.material.id} material={this.state.material as TriPlanarMaterial} />;
145+
146+
case "CellMaterial":
147+
return <EditorCellMaterialInspector key={this.state.material.id} material={this.state.material as CellMaterial} />;
148+
149+
case "FireMaterial":
150+
return <EditorFireMaterialInspector key={this.state.material.id} material={this.state.material as FireMaterial} />;
135151
}
136152
}
137153
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
3131
<EditorInspectorSectionField title="Material" label={this.props.material.getClassName()}>
3232
<EditorInspectorStringField label="Name" object={this.props.material} property="name" />
3333
<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
34-
<EditorInspectorNumberField label="Alpha" object={this.props.material} property="alpha" min={0} max={1} />
3534

35+
<EditorInspectorNumberField label="Alpha" object={this.props.material} property="alpha" min={0} max={1} />
3636
<EditorAlphaModeField object={this.props.material} />
37-
3837
<EditorTransparencyModeField object={this.props.material} />
3938

4039
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,9 @@ export function EditorStandardMaterialInspector(props: IEditorStandardMaterialIn
2424
<EditorInspectorSectionField title="Material" label={props.material.getClassName()}>
2525
<EditorInspectorStringField label="Name" object={props.material} property="name" />
2626
<EditorInspectorSwitchField label="Back Face Culling" object={props.material} property="backFaceCulling" />
27-
<EditorInspectorNumberField label="Alpha" object={props.material} property="alpha" min={0} max={1} />
2827

28+
<EditorInspectorNumberField label="Alpha" object={props.material} property="alpha" min={0} max={1} />
2929
<EditorAlphaModeField object={props.material} />
30-
3130
<EditorTransparencyModeField object={props.material} />
3231

3332
<EditorMaterialInspectorUtilsComponent mesh={props.mesh} material={props.material} />

0 commit comments

Comments
 (0)