Skip to content

Commit 4d921a9

Browse files
julien-moreaujulien-moreau
committed
feat: add Iridescence and Sheen properties to PBR material inspector
1 parent ce7bbb2 commit 4d921a9

5 files changed

Lines changed: 153 additions & 26 deletions

File tree

‎editor/src/editor/layout/inspector/light/directional.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { EditorInspectorSectionField } from "../fields/section";
1818
import { ScriptInspectorComponent } from "../script/script";
1919
import { CustomMetadataInspector } from "../metadata/custom-metadata";
2020

21+
import { EditorLightPBRInspector } from "./pbr";
2122
import { EditorLightShadowsInspector } from "./shadows";
2223

2324
export class EditorDirectionalLightInspector extends Component<IEditorInspectorImplementationProps<DirectionalLight>> {
@@ -75,6 +76,10 @@ export class EditorDirectionalLightInspector extends Component<IEditorInspectorI
7576
<Divider />
7677

7778
<EditorInspectorNumberField label="Intensity" object={this.props.object} property="intensity" />
79+
80+
<Divider />
81+
82+
<EditorLightPBRInspector object={this.props.object} />
7883
</EditorInspectorSectionField>
7984

8085
<ScriptInspectorComponent editor={this.props.editor} object={this.props.object} />

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Light } from "babylonjs";
2+
3+
import { EditorInspectorListField } from "../fields/list";
4+
import { EditorInspectorNumberField } from "../fields/number";
5+
6+
export interface IEditorLightPBRInspectorProps {
7+
object: Light;
8+
}
9+
10+
export function EditorLightPBRInspector(props: IEditorLightPBRInspectorProps) {
11+
return (
12+
<>
13+
<EditorInspectorListField
14+
object={props.object}
15+
property="intensityMode"
16+
label="Intensity Mode"
17+
items={[
18+
{ text: "Automatic", value: Light.INTENSITYMODE_AUTOMATIC },
19+
{ text: "Luminous Power", value: Light.INTENSITYMODE_LUMINOUSPOWER, label: "Lumen (lm)" },
20+
{ text: "Luminous Intensity", value: Light.INTENSITYMODE_LUMINOUSINTENSITY, label: "Candela (lm/sr)" },
21+
{ text: "Illuminance", value: Light.INTENSITYMODE_ILLUMINANCE, label: "Lux (lm/m^2)" },
22+
{ text: "Luminance", value: Light.INTENSITYMODE_LUMINANCE, label: "Nit (cd/m^2)" },
23+
]}
24+
/>
25+
26+
<EditorInspectorNumberField label="Radius" object={props.object} property="radius" />
27+
</>
28+
);
29+
}

‎editor/src/editor/layout/inspector/light/point.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { EditorInspectorSectionField } from "../fields/section";
1818
import { ScriptInspectorComponent } from "../script/script";
1919
import { CustomMetadataInspector } from "../metadata/custom-metadata";
2020

21+
import { EditorLightPBRInspector } from "./pbr";
2122
import { EditorLightShadowsInspector } from "./shadows";
2223

2324
export class EditorPointLightInspector extends Component<IEditorInspectorImplementationProps<PointLight>> {
@@ -78,6 +79,10 @@ export class EditorPointLightInspector extends Component<IEditorInspectorImpleme
7879
updatePointLightShadowMapRenderListPredicate(this.props.object);
7980
}}
8081
/>
82+
83+
<Divider />
84+
85+
<EditorLightPBRInspector object={this.props.object} />
8186
</EditorInspectorSectionField>
8287

8388
<ScriptInspectorComponent editor={this.props.editor} object={this.props.object} />

‎editor/src/editor/layout/inspector/light/spot.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { EditorInspectorSectionField } from "../fields/section";
1919
import { ScriptInspectorComponent } from "../script/script";
2020
import { CustomMetadataInspector } from "../metadata/custom-metadata";
2121

22+
import { EditorLightPBRInspector } from "./pbr";
2223
import { EditorLightShadowsInspector } from "./shadows";
2324

2425
export class EditorSpotLightInspector extends Component<IEditorInspectorImplementationProps<SpotLight>> {
@@ -91,6 +92,13 @@ export class EditorSpotLightInspector extends Component<IEditorInspectorImplemen
9192
<Divider />
9293

9394
<EditorInspectorNumberField label="Intensity" object={this.props.object} property="intensity" />
95+
96+
<Divider />
97+
98+
<EditorLightPBRInspector object={this.props.object} />
99+
100+
<Divider />
101+
94102
<EditorInspectorNumberField asDegrees label="Angle" object={this.props.object} property="angle" min={0} max={Math.PI} step={0.1} />
95103
<EditorInspectorNumberField label="Exponent" object={this.props.object} property="exponent" />
96104
</EditorInspectorSectionField>

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

Lines changed: 106 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,17 @@ export interface IEditorPBRMaterialInspectorProps {
2121
material: PBRMaterial;
2222
}
2323

24-
export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInspectorProps> {
24+
export interface IEditorPBRMaterialInspectorState {
25+
subSurfaceEnabled: boolean;
26+
}
27+
28+
export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInspectorProps, IEditorPBRMaterialInspectorState> {
2529
public constructor(props: IEditorPBRMaterialInspectorProps) {
2630
super(props);
31+
32+
this.state = {
33+
subSurfaceEnabled: this.props.material.subSurface.isRefractionEnabled || this.props.material.subSurface.isTranslucencyEnabled,
34+
};
2735
}
2836

2937
public render(): ReactNode {
@@ -238,36 +246,96 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
238246
)}
239247

240248
<EditorInspectorSectionField title="Sub Surface">
241-
<EditorInspectorTextureField scene={scene} object={this.props.material.subSurface} property="thicknessTexture" title="Thickness Texture">
242-
<EditorInspectorSwitchField label="Use Mask From Thickness Texture" object={this.props.material.subSurface} property="useMaskFromThicknessTexture" />
243-
<EditorInspectorNumberField label="Minimum Thickness" object={this.props.material.subSurface} property="minimumThickness" min={0} />
244-
<EditorInspectorNumberField label="Maximum Thickness" object={this.props.material.subSurface} property="maximumThickness" min={0} />
245-
</EditorInspectorTextureField>
249+
<EditorInspectorSwitchField object={this.state} property="subSurfaceEnabled" label="Enabled" onChange={(v) => this._handleSubSurfaceEnabledChange(v)} />
246250

247-
<EditorInspectorColorField label={<div className="w-14">Tint</div>} object={this.props.material.subSurface} property="tintColor" />
251+
{this.state.subSurfaceEnabled && (
252+
<>
253+
<EditorInspectorColorField label={<div className="w-14">Tint</div>} object={this.props.material.subSurface} property="tintColor" />
248254

249-
<EditorInspectorBlockField>
250-
<div className="font-semibold text-base text-center">Refraction</div>
251-
<EditorInspectorSwitchField label="Enabled" object={this.props.material.subSurface} property="isRefractionEnabled" onChange={() => this.forceUpdate()} />
255+
<EditorInspectorTextureField scene={scene} object={this.props.material.subSurface} property="thicknessTexture" title="Thickness Texture">
256+
<EditorInspectorSwitchField
257+
label="Use Mask From Thickness Texture"
258+
object={this.props.material.subSurface}
259+
property="useMaskFromThicknessTexture"
260+
/>
261+
<EditorInspectorNumberField label="Minimum Thickness" object={this.props.material.subSurface} property="minimumThickness" min={0} />
262+
<EditorInspectorNumberField label="Maximum Thickness" object={this.props.material.subSurface} property="maximumThickness" min={0} />
263+
</EditorInspectorTextureField>
252264

253-
{this.props.material.subSurface.isRefractionEnabled && (
254-
<>
255-
<EditorInspectorNumberField label="Intensity" object={this.props.material.subSurface} property="refractionIntensity" min={0} />
256-
<EditorInspectorNumberField label="Index of Refraction" object={this.props.material.subSurface} property="indexOfRefraction" min={0} />
257-
</>
258-
)}
259-
</EditorInspectorBlockField>
265+
<EditorInspectorBlockField>
266+
<div className="font-semibold text-base text-center">Refraction</div>
267+
<EditorInspectorSwitchField
268+
label="Enabled"
269+
object={this.props.material.subSurface}
270+
property="isRefractionEnabled"
271+
onChange={() => this.forceUpdate()}
272+
/>
260273

261-
<EditorInspectorBlockField>
262-
<div className="font-semibold text-base text-center">Translucency</div>
263-
<EditorInspectorSwitchField label="Enabled" object={this.props.material.subSurface} property="isTranslucencyEnabled" onChange={() => this.forceUpdate()} />
274+
{this.props.material.subSurface.isRefractionEnabled && (
275+
<>
276+
<EditorInspectorNumberField label="Intensity" object={this.props.material.subSurface} property="refractionIntensity" min={0} />
277+
<EditorInspectorNumberField label="Index of Refraction" object={this.props.material.subSurface} property="indexOfRefraction" min={0} />
278+
</>
279+
)}
280+
</EditorInspectorBlockField>
264281

265-
{this.props.material.subSurface.isTranslucencyEnabled && (
266-
<>
267-
<EditorInspectorNumberField label="Intensity" object={this.props.material.subSurface} property="translucencyIntensity" min={0} />
268-
</>
269-
)}
270-
</EditorInspectorBlockField>
282+
<EditorInspectorBlockField>
283+
<div className="font-semibold text-base text-center">Translucency</div>
284+
<EditorInspectorSwitchField
285+
label="Enabled"
286+
object={this.props.material.subSurface}
287+
property="isTranslucencyEnabled"
288+
onChange={() => this.forceUpdate()}
289+
/>
290+
291+
{this.props.material.subSurface.isTranslucencyEnabled && (
292+
<>
293+
<EditorInspectorNumberField label="Intensity" object={this.props.material.subSurface} property="translucencyIntensity" min={0} />
294+
</>
295+
)}
296+
</EditorInspectorBlockField>
297+
</>
298+
)}
299+
</EditorInspectorSectionField>
300+
301+
<EditorInspectorSectionField title="Iridescence">
302+
<EditorInspectorSwitchField label="Enabled" object={this.props.material.iridescence} property="isEnabled" onChange={() => this.forceUpdate()} />
303+
304+
{this.props.material.iridescence.isEnabled && (
305+
<>
306+
<EditorInspectorNumberField label="Intensity" object={this.props.material.iridescence} property="intensity" min={0} />
307+
<EditorInspectorNumberField label="Index of Refraction" object={this.props.material.iridescence} property="indexOfRefraction" min={0} />
308+
<EditorInspectorNumberField label="Minimum Thickness" object={this.props.material.iridescence} property="minimumThickness" min={0} />
309+
<EditorInspectorNumberField label="Maximum Thickness" object={this.props.material.iridescence} property="maximumThickness" min={0} />
310+
311+
<EditorInspectorTextureField scene={scene} object={this.props.material.iridescence} property="texture" title="Intensity Texture" />
312+
<EditorInspectorTextureField scene={scene} object={this.props.material.iridescence} property="thicknessTexture" title="Thickness Texture" />
313+
</>
314+
)}
315+
</EditorInspectorSectionField>
316+
317+
<EditorInspectorSectionField title="Sheen">
318+
<EditorInspectorSwitchField label="Enabled" object={this.props.material.sheen} property="isEnabled" onChange={() => this.forceUpdate()} />
319+
320+
{this.props.material.sheen.isEnabled && (
321+
<>
322+
<EditorInspectorNumberField label="Intensity" object={this.props.material.sheen} property="intensity" min={0} />
323+
<EditorInspectorColorField label={<div className="w-14">Color</div>} object={this.props.material.sheen} property="color" />
324+
325+
<EditorInspectorTextureField scene={scene} object={this.props.material.sheen} property="texture" title="Tint Texture">
326+
<EditorInspectorSwitchField
327+
label="Use Roughness From Main Texture"
328+
object={this.props.material.sheen}
329+
property="useRoughnessFromMainTexture"
330+
onChange={() => this.forceUpdate()}
331+
/>
332+
</EditorInspectorTextureField>
333+
334+
{!this.props.material.sheen.useRoughnessFromMainTexture && (
335+
<EditorInspectorTextureField scene={scene} object={this.props.material.sheen} property="textureRoughness" title="Roughness Texture" />
336+
)}
337+
</>
338+
)}
271339
</EditorInspectorSectionField>
272340

273341
<EditorInspectorSectionField title="Intensity Properties">
@@ -285,6 +353,7 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
285353
<EditorInspectorSwitchField label="Use Radiance Occlusion" object={this.props.material} property="useRadianceOcclusion" />
286354
<EditorInspectorSwitchField label="Use Horizon Occlusion" object={this.props.material} property="useHorizonOcclusion" />
287355
<EditorInspectorSwitchField label="Use Physical Light Falloff" object={this.props.material} property="usePhysicalLightFalloff" />
356+
<EditorInspectorSwitchField label="Use Spherical Harmonics" object={this.props.material.brdf} property="useSphericalHarmonics" />
288357
<EditorInspectorSwitchField label="Use Radiance Over Alpha" object={this.props.material} property="useRadianceOverAlpha" />
289358
<EditorInspectorSwitchField label="Use Specular Over Alpha" object={this.props.material} property="useSpecularOverAlpha" />
290359
<EditorInspectorSwitchField label="Separate Culling Pass" object={this.props.material} property="separateCullingPass" />
@@ -297,4 +366,15 @@ export class EditorPBRMaterialInspector extends Component<IEditorPBRMaterialInsp
297366
</>
298367
);
299368
}
369+
370+
private _handleSubSurfaceEnabledChange(v: boolean): void {
371+
if (!v) {
372+
this.props.material.subSurface.isRefractionEnabled = false;
373+
this.props.material.subSurface.isTranslucencyEnabled = false;
374+
}
375+
376+
this.setState({
377+
subSurfaceEnabled: v,
378+
});
379+
}
300380
}

0 commit comments

Comments
 (0)