diff --git a/studio-web/src/lib/inspector/entity-inspector.element.ts b/studio-web/src/lib/inspector/entity-inspector.element.ts
index fd20171..a8a5fa6 100644
--- a/studio-web/src/lib/inspector/entity-inspector.element.ts
+++ b/studio-web/src/lib/inspector/entity-inspector.element.ts
@@ -42,8 +42,8 @@ export class EntityInspectorElement extends LitElement {
const ordA = COMPONENT_SORT_ORDER.indexOf(a.name);
const ordB = COMPONENT_SORT_ORDER.indexOf(b.name);
- if (ordA === -1) return 1;
- if (ordB === -1) return -1;
+ if (ordA === -1) return Infinity;
+ if (ordB === -1) return -Infinity;
return ordA - ordB;
})
@@ -72,8 +72,11 @@ export class EntityInspectorElement extends LitElement {
return html`
`;
}
@@ -92,4 +95,5 @@ export class EntityInspectorElement extends LitElement {
const COMPONENT_SORT_ORDER: Array = [
"bevy_core::name::Name",
"bevy_transform::components::transform::Transform",
+ "bevy_pbr::pbr_material::StandardMaterial",
];
diff --git a/studio-web/src/lib/inspector/inspector.types.ts b/studio-web/src/lib/inspector/inspector.types.ts
index e117a06..d9f9fc4 100644
--- a/studio-web/src/lib/inspector/inspector.types.ts
+++ b/studio-web/src/lib/inspector/inspector.types.ts
@@ -35,6 +35,9 @@ export interface Vec3 {
export interface StandardMaterial {
base_color: BevyColor;
+ perceptual_roughness: number;
+ metallic: number;
+ reflectance: number;
}
export type BevyColor
diff --git a/studio-web/src/lib/inspector/material-inspector.element.ts b/studio-web/src/lib/inspector/material-inspector.element.ts
index 297e850..73a122d 100644
--- a/studio-web/src/lib/inspector/material-inspector.element.ts
+++ b/studio-web/src/lib/inspector/material-inspector.element.ts
@@ -4,7 +4,7 @@ import { LitElement, html, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import { v4 as uuid } from "uuid";
-import { type Rgba } from "./inspector.types";
+import { StandardMaterial, type Rgba } from "./inspector.types";
import styles from "./material-inspector.element.scss?inline";
@@ -18,12 +18,24 @@ export class MaterialInspectorElement extends LitElement {
@property()
inputColorSpace: "linear"|"srgb" = "linear";
+ @property({ type: Number })
+ roughness = 0.5;
+
+ @property({ type: Number })
+ metallic = 0.0;
+
+ @property({ type: Number })
+ reflectance = 0.5;
+
#baseColorId = uuid();
+ #roughnessId = uuid();
+ #metallicId = uuid();
+ #reflectanceId = uuid();
onBaseColorInput(event: InputEvent): void {
const hex = (event.target as HTMLInputElement).value;
const value = match (this.inputColorSpace, {
- "linear": () => RgbaLinear.fromHexSrgb(hex, this.baseColor.alpha),
+ "linear": () => RgbaLinear.fromHex(hex, this.baseColor.alpha),
"srgb": () => Srgba.fromHex(hex, this.baseColor.alpha),
});
@@ -34,14 +46,28 @@ export class MaterialInspectorElement extends LitElement {
});
}
+ updateField(reflectPath: Exclude) {
+ return ({ detail }: CustomEvent) => {
+ const value = parseFloat(detail);
+ if (Number.isFinite(value) && !Number.isNaN(value)) {
+ studio.updateComponentField({
+ component: "bevy_pbr::pbr_material::StandardMaterial",
+ reflectPath,
+ value,
+ });
+ }
+ }
+ }
+
protected override render() {
const [rgb, _] = match (this.inputColorSpace, {
- "linear": () => RgbaLinear.toHexSrgb(this.baseColor),
+ "linear": () => RgbaLinear.toHex(this.baseColor),
"srgb": () => Srgba.toHex(this.baseColor),
});
return html`
Material
+
@@ -51,6 +77,36 @@ export class MaterialInspectorElement extends LitElement {
.value=${rgb}
@input=${this.onBaseColorInput}
/>
+
+
+
+
+
+
+
+
+
`;
}
}
@@ -75,7 +131,7 @@ function channelFromHex(gamma: number) {
}
namespace RgbaLinear {
- export function toHexSrgb({ red, green, blue, alpha }: Rgba): [string, number] {
+ export function toHex({ red, green, blue, alpha }: Rgba): [string, number] {
const hexRgb = [red, green, blue]
.map(channelToHex(1 / 2.2))
.join("");
@@ -83,7 +139,7 @@ namespace RgbaLinear {
return [`#${hexRgb}`, alpha];
}
- export function fromHexSrgb(hex: string, alpha = 1): Rgba {
+ export function fromHex(hex: string, alpha = 1): Rgba {
const [red, green, blue] = hex
.match(HEX_PATTERN)!
.slice(1)
diff --git a/studio/src/ui/inspector.rs b/studio/src/ui/inspector.rs
index ceed338..3972318 100644
--- a/studio/src/ui/inspector.rs
+++ b/studio/src/ui/inspector.rs
@@ -542,12 +542,18 @@ fn auto_serialize_asset(
#[reflect(Default)]
struct ShortMaterial {
pub base_color: Color,
+ pub perceptual_roughness: f32,
+ pub metallic: f32,
+ pub reflectance: f32,
}
impl ShortMaterial {
pub fn new(material: &StandardMaterial) -> Self {
Self {
base_color: material.base_color,
+ perceptual_roughness: material.perceptual_roughness,
+ metallic: material.metallic,
+ reflectance: material.reflectance,
}
}
}