Skip to content

Commit 63bb5d9

Browse files
yuripourreyuripourre
authored
Add more properties to Standard Materials (#578)
1 parent 98c2f39 commit 63bb5d9

File tree

7 files changed

+148
-99
lines changed

7 files changed

+148
-99
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { ReactNode } from "react";
2+
import { Constants } from "babylonjs";
3+
import { EditorInspectorListField } from "../../fields/list";
4+
5+
export interface IEditorAlphaModeFieldProps {
6+
object: any;
7+
onChange?: () => void;
8+
}
9+
10+
export function EditorAlphaModeField(props: IEditorAlphaModeFieldProps): ReactNode {
11+
return (
12+
<EditorInspectorListField
13+
label="Alpha Mode"
14+
object={props.object}
15+
property="alphaMode"
16+
onChange={props.onChange}
17+
items={[
18+
{ text: "Disable", value: Constants.ALPHA_DISABLE },
19+
{ text: "Add", value: Constants.ALPHA_ADD },
20+
{ text: "Combine", value: Constants.ALPHA_COMBINE },
21+
{ text: "Subtract", value: Constants.ALPHA_SUBTRACT },
22+
{ text: "Multiply", value: Constants.ALPHA_MULTIPLY },
23+
{ text: "Maximized", value: Constants.ALPHA_MAXIMIZED },
24+
{ text: "One-one", value: Constants.ALPHA_ONEONE },
25+
{ text: "Premultiplied", value: Constants.ALPHA_PREMULTIPLIED },
26+
{ text: "Premultiplied Porterduff", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },
27+
{ text: "Interpolate", value: Constants.ALPHA_INTERPOLATE },
28+
{ text: "Screen Mode", value: Constants.ALPHA_SCREENMODE },
29+
]}
30+
/>
31+
);
32+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { ReactNode } from "react";
2+
import { EditorInspectorListField } from "../../fields/list";
3+
import { Material, StandardMaterial, PBRMaterial } from "babylonjs";
4+
5+
export interface IEditorTransparencyModeFieldProps {
6+
object: StandardMaterial | PBRMaterial;
7+
onChange?: () => void;
8+
}
9+
10+
export function EditorTransparencyModeField(props: IEditorTransparencyModeFieldProps): ReactNode {
11+
return (
12+
<EditorInspectorListField
13+
label="Transparency Mode"
14+
object={props.object}
15+
property="transparencyMode"
16+
onChange={props.onChange}
17+
items={[
18+
{ text: "None", value: null },
19+
{ text: "Opaque", value: Material.MATERIAL_OPAQUE },
20+
{ text: "Alpha Test", value: Material.MATERIAL_ALPHATEST },
21+
{ text: "Alpha Blend", value: Material.MATERIAL_ALPHABLEND },
22+
{ text: "Alpha Test and Blend", value: Material.MATERIAL_ALPHATESTANDBLEND },
23+
]}
24+
/>
25+
);
26+
}

‎editor/src/editor/layout/inspector/material/utils.tsx‎ renamed to ‎editor/src/editor/layout/inspector/material/components/utils.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import { toast } from "sonner";
77

88
import { Material, AbstractMesh } from "babylonjs";
99

10-
import { saveSingleFileDialog } from "../../../../tools/dialog";
11-
import { onRedoObservable, registerUndoRedo } from "../../../../tools/undoredo";
10+
import { saveSingleFileDialog } from "../../../../../tools/dialog";
11+
import { onRedoObservable, registerUndoRedo } from "../../../../../tools/undoredo";
1212

13-
import { showConfirm } from "../../../../ui/dialog";
13+
import { showConfirm } from "../../../../../ui/dialog";
1414

15-
import { Button } from "../../../../ui/shadcn/ui/button";
16-
import { projectConfiguration } from "../../../../project/configuration";
15+
import { Button } from "../../../../../ui/shadcn/ui/button";
16+
import { projectConfiguration } from "../../../../../project/configuration";
1717

1818
export interface IEditorMaterialInspectorUtilsComponentProps {
1919
mesh?: AbstractMesh;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { EditorInspectorVectorField } from "../fields/vector";
2222
import { EditorInspectorNumberField } from "../fields/number";
2323
import { EditorInspectorSectionField } from "../fields/section";
2424

25-
import { EditorMaterialInspectorUtilsComponent } from "./utils";
25+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
2626

2727
export interface IEditorNodeMaterialInspectorProps {
2828
mesh?: AbstractMesh;

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

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import { Component, ReactNode } from "react";
22

3-
import { Constants, PBRMaterial, AbstractMesh } from "babylonjs";
3+
import { PBRMaterial, AbstractMesh } from "babylonjs";
44

55
import { registerSimpleUndoRedo } from "../../../../tools/undoredo";
66

7-
import { EditorInspectorListField } from "../fields/list";
87
import { EditorInspectorColorField } from "../fields/color";
98
import { EditorInspectorStringField } from "../fields/string";
109
import { EditorInspectorNumberField } from "../fields/number";
1110
import { EditorInspectorSwitchField } from "../fields/switch";
1211
import { EditorInspectorTextureField } from "../fields/texture";
1312
import { EditorInspectorSectionField } from "../fields/section";
1413

15-
import { EditorMaterialInspectorUtilsComponent } from "./utils";
14+
import { EditorAlphaModeField } from "./components/alpha";
15+
import { EditorTransparencyModeField } from "./components/transparency";
16+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
1617

1718
export interface IEditorPBRMaterialInspectorProps {
1819
mesh?: AbstractMesh;
@@ -32,38 +33,9 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
3233
<EditorInspectorSwitchField label="Back Face Culling" object={this.props.material} property="backFaceCulling" />
3334
<EditorInspectorNumberField label="Alpha" object={this.props.material} property="alpha" min={0} max={1} />
3435

35-
<EditorInspectorListField
36-
label="Alpha Mode"
37-
object={this.props.material}
38-
property="alphaMode"
39-
onChange={() => this.forceUpdate()}
40-
items={[
41-
{ text: "Disable", value: Constants.ALPHA_DISABLE },
42-
{ text: "Add", value: Constants.ALPHA_ADD },
43-
{ text: "Combine", value: Constants.ALPHA_COMBINE },
44-
{ text: "Subtract", value: Constants.ALPHA_SUBTRACT },
45-
{ text: "Multiply", value: Constants.ALPHA_MULTIPLY },
46-
{ text: "Maximized", value: Constants.ALPHA_MAXIMIZED },
47-
{ text: "One-one", value: Constants.ALPHA_ONEONE },
48-
{ text: "Premultiplied", value: Constants.ALPHA_PREMULTIPLIED },
49-
{ text: "Premultiplied Porterduff", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },
50-
{ text: "Interpolate", value: Constants.ALPHA_INTERPOLATE },
51-
{ text: "Screen Mode", value: Constants.ALPHA_SCREENMODE },
52-
]}
53-
/>
36+
<EditorAlphaModeField object={this.props.material} />
5437

55-
<EditorInspectorListField
56-
label="Transparency Mode"
57-
object={this.props.material}
58-
property="transparencyMode"
59-
items={[
60-
{ text: "None", value: null },
61-
{ text: "Opaque", value: PBRMaterial.MATERIAL_OPAQUE },
62-
{ text: "Alpha Test", value: PBRMaterial.MATERIAL_ALPHATEST },
63-
{ text: "Alpha Blend", value: PBRMaterial.MATERIAL_ALPHABLEND },
64-
{ text: "Alpha Test and Blend", value: PBRMaterial.MATERIAL_ALPHATESTANDBLEND },
65-
]}
66-
/>
38+
<EditorTransparencyModeField object={this.props.material} />
6739

6840
<EditorMaterialInspectorUtilsComponent mesh={this.props.mesh} material={this.props.material} />
6941
</EditorInspectorSectionField>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { EditorInspectorSwitchField } from "../fields/switch";
88
import { EditorInspectorNumberField } from "../fields/number";
99
import { EditorInspectorSectionField } from "../fields/section";
1010

11-
import { EditorMaterialInspectorUtilsComponent } from "./utils";
11+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
1212

1313
export interface IEditorSkyMaterialInspectorProps {
1414
mesh?: AbstractMesh;

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

Lines changed: 77 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, ReactNode } from "react";
1+
import { ReactNode } from "react";
22

33
import { StandardMaterial, AbstractMesh } from "babylonjs";
44

@@ -9,67 +9,86 @@ import { EditorInspectorNumberField } from "../fields/number";
99
import { EditorInspectorTextureField } from "../fields/texture";
1010
import { EditorInspectorSectionField } from "../fields/section";
1111

12-
import { EditorMaterialInspectorUtilsComponent } from "./utils";
12+
import { EditorAlphaModeField } from "./components/alpha";
13+
import { EditorTransparencyModeField } from "./components/transparency";
14+
import { EditorMaterialInspectorUtilsComponent } from "./components/utils";
1315

1416
export interface IEditorStandardMaterialInspectorProps {
1517
mesh?: AbstractMesh;
1618
material: StandardMaterial;
1719
}
1820

19-
export class EditorStandardMaterialInspector extends Component<IEditorStandardMaterialInspectorProps> {
20-
public constructor(props: IEditorStandardMaterialInspectorProps) {
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="Material Textures">
35-
<EditorInspectorTextureField object={this.props.material} title="Diffuse Texture" property="diffuseTexture" onChange={() => this.forceUpdate()}>
36-
<EditorInspectorSwitchField label="Use Alpha" object={this.props.material} property="useAlphaFromDiffuseTexture" />
37-
</EditorInspectorTextureField>
38-
39-
<EditorInspectorTextureField object={this.props.material} title="Bump Texture" property="bumpTexture" onChange={() => this.forceUpdate()}>
40-
<EditorInspectorSwitchField label="Invert X" object={this.props.material} property="invertNormalMapX" />
41-
<EditorInspectorSwitchField label="Invert Y" object={this.props.material} property="invertNormalMapY" />
42-
<EditorInspectorSwitchField label="Use Parallax" object={this.props.material} property="useParallax" onChange={() => this.forceUpdate()} />
43-
44-
{this.props.material.useParallax && (
45-
<>
46-
<EditorInspectorSwitchField label="Use Parallax Occlusion" object={this.props.material} property="useParallaxOcclusion" />
47-
<EditorInspectorNumberField label="Parallax Scale Bias" object={this.props.material} property="parallaxScaleBias" />
48-
</>
49-
)}
50-
</EditorInspectorTextureField>
51-
52-
<EditorInspectorTextureField object={this.props.material} title="Specular Texture" property="specularTexture" />
53-
<EditorInspectorTextureField object={this.props.material} title="Ambient Texture" property="ambientTexture" />
54-
<EditorInspectorTextureField object={this.props.material} title="Opacity Texture" property="opacityTexture" />
55-
<EditorInspectorTextureField object={this.props.material} title="Emissive Texture" property="emissiveTexture" />
56-
57-
<EditorInspectorTextureField
58-
object={this.props.material}
59-
title="Reflection Texture"
60-
property="reflectionTexture"
61-
acceptCubeTexture
62-
onChange={() => this.forceUpdate()}
63-
/>
64-
</EditorInspectorSectionField>
65-
66-
<EditorInspectorSectionField title="Material Colors">
67-
<EditorInspectorColorField label={<div className="w-14">Diffuse</div>} object={this.props.material} property="diffuseColor" />
68-
<EditorInspectorColorField label={<div className="w-14">Specular</div>} object={this.props.material} property="specularColor" />
69-
<EditorInspectorColorField label={<div className="w-14">Ambient</div>} object={this.props.material} property="ambientColor" />
70-
<EditorInspectorColorField label={<div className="w-14">Emissive</div>} object={this.props.material} property="emissiveColor" />
71-
</EditorInspectorSectionField>
72-
</>
73-
);
74-
}
21+
export function EditorStandardMaterialInspector(props: IEditorStandardMaterialInspectorProps): ReactNode {
22+
return (
23+
<>
24+
<EditorInspectorSectionField title="Material" label={props.material.getClassName()}>
25+
<EditorInspectorStringField label="Name" object={props.material} property="name" />
26+
<EditorInspectorSwitchField label="Back Face Culling" object={props.material} property="backFaceCulling" />
27+
<EditorInspectorNumberField label="Alpha" object={props.material} property="alpha" min={0} max={1} />
28+
29+
<EditorAlphaModeField object={props.material} />
30+
31+
<EditorTransparencyModeField object={props.material} />
32+
33+
<EditorMaterialInspectorUtilsComponent mesh={props.mesh} material={props.material} />
34+
</EditorInspectorSectionField>
35+
36+
<EditorInspectorSectionField title="Material Textures">
37+
<EditorInspectorTextureField object={props.material} title="Diffuse Texture" property="diffuseTexture" onChange={() => {}}>
38+
<EditorInspectorSwitchField label="Use Alpha" object={props.material} property="useAlphaFromDiffuseTexture" />
39+
</EditorInspectorTextureField>
40+
41+
<EditorInspectorTextureField object={props.material} title="Bump Texture" property="bumpTexture" onChange={() => {}}>
42+
<EditorInspectorSwitchField label="Invert X" object={props.material} property="invertNormalMapX" />
43+
<EditorInspectorSwitchField label="Invert Y" object={props.material} property="invertNormalMapY" />
44+
<EditorInspectorSwitchField label="Use Parallax" object={props.material} property="useParallax" onChange={() => {}} />
45+
46+
{props.material.useParallax && (
47+
<>
48+
<EditorInspectorSwitchField label="Use Parallax Occlusion" object={props.material} property="useParallaxOcclusion" />
49+
<EditorInspectorNumberField label="Parallax Scale Bias" object={props.material} property="parallaxScaleBias" />
50+
</>
51+
)}
52+
</EditorInspectorTextureField>
53+
54+
<EditorInspectorTextureField object={props.material} title="Specular Texture" property="specularTexture" />
55+
<EditorInspectorTextureField object={props.material} title="Ambient Texture" property="ambientTexture" onChange={() => {}}>
56+
{props.material.ambientTexture && (
57+
<>
58+
<EditorInspectorSwitchField label="Use Gray Scale" object={props.material} property="useAmbientInGrayScale" />
59+
<EditorInspectorNumberField label="Strength" object={props.material} property="ambientTextureStrength" min={0} />
60+
</>
61+
)}
62+
</EditorInspectorTextureField>
63+
<EditorInspectorTextureField object={props.material} title="Opacity Texture" property="opacityTexture" />
64+
<EditorInspectorTextureField object={props.material} title="Emissive Texture" property="emissiveTexture" />
65+
66+
<EditorInspectorTextureField object={props.material} title="Reflection Texture" property="reflectionTexture" acceptCubeTexture onChange={() => {}} />
67+
</EditorInspectorSectionField>
68+
69+
<EditorInspectorSectionField title="Material Colors">
70+
<EditorInspectorColorField label={<div className="w-14">Diffuse</div>} object={props.material} property="diffuseColor" />
71+
<EditorInspectorColorField label={<div className="w-14">Specular</div>} object={props.material} property="specularColor" />
72+
<EditorInspectorColorField label={<div className="w-14">Ambient</div>} object={props.material} property="ambientColor" />
73+
<EditorInspectorColorField label={<div className="w-14">Emissive</div>} object={props.material} property="emissiveColor" />
74+
</EditorInspectorSectionField>
75+
76+
<EditorInspectorSectionField title="Specular Properties">
77+
<EditorInspectorNumberField label="Specular Power" object={props.material} property="specularPower" min={0} />
78+
<EditorInspectorNumberField label="Direct Intensity" object={props.material} property="directIntensity" min={0} />
79+
<EditorInspectorNumberField label="Environment Intensity" object={props.material} property="environmentIntensity" min={0} />
80+
<EditorInspectorNumberField label="Emissive Intensity" object={props.material} property="emissiveIntensity" min={0} />
81+
<EditorInspectorNumberField label="Specular Intensity" object={props.material} property="specularIntensity" min={0} />
82+
</EditorInspectorSectionField>
83+
84+
<EditorInspectorSectionField title="Misc">
85+
<EditorInspectorSwitchField label="Disable Lighting" object={props.material} property="disableLighting" />
86+
<EditorInspectorSwitchField label="Use Specular Over Alpha" object={props.material} property="useSpecularOverAlpha" />
87+
<EditorInspectorSwitchField label="Separate Culling Pass" object={props.material} property="separateCullingPass" />
88+
<EditorInspectorNumberField label="Z Offset" object={props.material} property="zOffset" />
89+
<EditorInspectorNumberField label="Z Offset Units" object={props.material} property="zOffsetUnits" />
90+
<EditorInspectorSwitchField label="Fog Enabled" object={props.material} property="fogEnabled" />
91+
</EditorInspectorSectionField>
92+
</>
93+
);
7594
}

0 commit comments

Comments
 (0)