Inspector V2 Physics properties (BabylonJS#16800)

- [x] Motion type
- [x] Prestep type
- [x] Mass
- [x] Linear/angular damping edit
- [x] Linear/angular velocity value

This PR contains basic support for physics body properties (from a
TransformNode.physicsBody). If there is no physicsBody, right now it
just uses a placeholder line component. Later, we are thinking we can
provide some info and maybe a link to docs.

I (@ryantrem) also included some additional changes/fixes in this PR:
- "Flatten" AccordionPane. There is really no reason at this layer to
have an array of content, since the original purpose of that in the
context of PropertiesPane was to make it so the delegate doesn't have to
be duplicated, but at this layer there is no delegate.
- Update `useProperty` to return undefined if `target` is undefined,
which is more consistent with getting undefined when the property does
not exist.
- Update `DropdownProps.options` to be a readonly array (otherwise there
is a compile error if you try to pass in a readonly array because it
thinks the Dropdown needs to be able to mutate the array).
- Update `Dropdown` to use `useMemo` instead of `useState` so it updates
with props changes.

---------

Co-authored-by: Ryan Tremblay <[email protected]>

Author: 2 people

package-lock.json

@@ -16,9 +16,9 @@
         "watch:dev": "npm run watch"
     },
     "devDependencies": {
+        "@dev/addons": "^1.0.0",
         "@dev/core": "1.0.0",
         "@dev/loaders": "1.0.0",
-        "@dev/addons": "^1.0.0",
         "@dev/materials": "^1.0.0",
         "@fluentui/react-components": "^9.62.0",
         "@fluentui/react-icons": "^2.0.271",
@@ -31,5 +31,8 @@
         "usehooks-ts": "^3.1.1",
         "webpack": "^5.98.0",
         "webpack-cli": "^5.1.0"
+    },
+    "dependencies": {
+        "@babylonjs/havok": "^1.3.10"
     }
 }

packages/dev/inspector-v2/package.json

@@ -33,25 +33,20 @@ export type AccordionSectionContent<ContextT> = Readonly<{
     key: string;
 
     /**
-     * The content that is added to individual sections.
+     * The section this content belongs to.
      */
-    content: readonly Readonly<{
-        /**
-         * The section this content belongs to.
-         */
-        section: symbol;
-
-        /**
-         * An optional order for the content within the section.
-         * Defaults to 0.
-         */
-        order?: number;
-
-        /**
-         * The React component that will be rendered for this content.
-         */
-        component: ComponentType<{ context: ContextT }>;
-    }>[];
+    section: symbol;
+
+    /**
+     * An optional order for the content within the section.
+     * Defaults to 0.
+     */
+    order?: number;
+
+    /**
+     * The React component that will be rendered for this content.
+     */
+    component: ComponentType<{ context: ContextT }>;
 }>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -113,12 +108,8 @@ export function AccordionPane<ContextT = unknown>(
                     const childProps = child.props as AccordionSectionProps;
                     defaultSectionContent.push({
                         key: child.key ?? childProps.title,
-                        content: [
-                            {
-                                section: defaultSections[index].identity,
-                                component: () => child,
-                            },
-                        ],
+                        section: defaultSections[index].identity,
+                        component: () => child,
                     });
                 }
             });
@@ -142,9 +133,7 @@ export function AccordionPane<ContextT = unknown>(
         return mergedSections
             .map((section) => {
                 // Get a flat list of the section content, preserving the key so it can be used when each component for each section is rendered.
-                const contentForSection = mergedSectionContent
-                    .flatMap((entry) => entry.content.map((content) => ({ key: entry.key, ...content })))
-                    .filter((content) => content.section === section.identity);
+                const contentForSection = mergedSectionContent.filter((content) => content.section === section.identity);
 
                 // If there is no content for this section, we skip it.
                 if (contentForSection.length === 0) {

packages/dev/inspector-v2/src/components/accordionPane.tsx

@@ -0,0 +1,138 @@
+import type { FunctionComponent } from "react";
+
+import type { PhysicsBody } from "core/index";
+import type { DropdownOption } from "shared-ui-components/fluent/primitives/dropdown";
+
+import { useCallback } from "react";
+
+import { Vector3 } from "core/Maths/math.vector";
+import { PhysicsMotionType, PhysicsPrestepType } from "core/Physics/v2/IPhysicsEnginePlugin";
+import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
+import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
+import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
+import { useVector3Property } from "../../hooks/compoundPropertyHooks";
+import { useInterceptObservable } from "../../hooks/instrumentationHooks";
+import { useObservableState } from "../../hooks/observableHooks";
+
+import "core/Physics/v2/physicsEngineComponent";
+
+const MotionOptions = [
+    { label: "Static", value: PhysicsMotionType.STATIC },
+    { label: "Animated", value: PhysicsMotionType.ANIMATED },
+    { label: "Dynamic", value: PhysicsMotionType.DYNAMIC },
+] as const satisfies readonly DropdownOption[];
+
+const PrestepOptions = [
+    { label: "Disabled", value: PhysicsPrestepType.DISABLED },
+    { label: "Teleport", value: PhysicsPrestepType.TELEPORT },
+    { label: "Action", value: PhysicsPrestepType.ACTION },
+] as const satisfies readonly DropdownOption[];
+
+/**
+ * Physics properties
+ * @param props transform node
+ * @returns controls
+ */
+export const PhysicsBodyProperties: FunctionComponent<{ physicsBody: PhysicsBody }> = (props) => {
+    const { physicsBody } = props;
+
+    const massProperties = useObservableState(
+        useCallback(() => physicsBody.getMassProperties(), [physicsBody]),
+        useInterceptObservable("function", physicsBody, "setMassProperties")
+    );
+
+    const centerOfMass = useVector3Property(massProperties, "centerOfMass") ?? Vector3.Zero();
+    const inertia = useVector3Property(massProperties, "inertia") ?? Vector3.Zero();
+
+    // Get current damping values
+    const linearDamping = useObservableState(() => physicsBody.getLinearDamping(), useInterceptObservable("function", physicsBody, "setLinearDamping"));
+    const angularDamping = useObservableState(() => physicsBody.getAngularDamping(), useInterceptObservable("function", physicsBody, "setAngularDamping"));
+
+    // Get motion and prestep types
+    const motionType = useObservableState(() => physicsBody.getMotionType(), useInterceptObservable("function", physicsBody, "setMotionType"));
+    const prestepType = useObservableState(() => physicsBody.getPrestepType(), useInterceptObservable("function", physicsBody, "setPrestepType"));
+
+    // Get current velocities
+    const linearVelocity = useObservableState(
+        useCallback(() => physicsBody.getLinearVelocity(), [physicsBody]),
+        useInterceptObservable("function", physicsBody, "setLinearVelocity")
+    );
+    const angularVelocity = useObservableState(
+        useCallback(() => physicsBody.getAngularVelocity(), [physicsBody]),
+        useInterceptObservable("function", physicsBody, "setAngularVelocity")
+    );
+
+    return (
+        <>
+            <NumberDropdownPropertyLine
+                key="MotionType"
+                label="Motion Type"
+                options={MotionOptions}
+                value={motionType}
+                onChange={(value) => {
+                    return physicsBody.setMotionType(value as PhysicsMotionType);
+                }}
+            />
+            <NumberDropdownPropertyLine
+                label="Prestep Type"
+                options={PrestepOptions}
+                value={prestepType}
+                onChange={(value) => {
+                    return physicsBody.setPrestepType(value as PhysicsPrestepType);
+                }}
+            />
+            {/* Linear Damping */}
+            <FloatInputPropertyLine
+                label="Linear Damping"
+                min={0}
+                max={1}
+                step={0.01}
+                value={linearDamping}
+                onChange={(e) => {
+                    physicsBody.setLinearDamping(e);
+                }}
+            />
+            {/* Angular Damping */}
+            <FloatInputPropertyLine
+                label="Angular Damping"
+                min={0}
+                max={1}
+                step={0.01}
+                value={angularDamping}
+                onChange={(e) => {
+                    physicsBody.setAngularDamping(e);
+                }}
+            />
+            <Vector3PropertyLine label="Linear Velocity" value={linearVelocity} onChange={(value) => physicsBody.setLinearVelocity(value)} />
+            <Vector3PropertyLine label="Angular Velocity" value={angularVelocity} onChange={(value) => physicsBody.setAngularVelocity(value)} />
+            {/* Physics Mass Properties Controls */}
+            {massProperties && (
+                <>
+                    <FloatInputPropertyLine
+                        label="Mass"
+                        value={massProperties.mass ?? 0}
+                        min={0}
+                        step={0.01}
+                        onChange={(value) => {
+                            physicsBody.setMassProperties({ ...massProperties, mass: value });
+                        }}
+                    />
+                    <Vector3PropertyLine
+                        label="Center of Mass"
+                        value={centerOfMass}
+                        onChange={(value) => {
+                            physicsBody.setMassProperties({ ...massProperties, centerOfMass: value });
+                        }}
+                    />
+                    <Vector3PropertyLine
+                        label="Inertia"
+                        value={inertia}
+                        onChange={(value) => {
+                            physicsBody.setMassProperties({ ...massProperties, inertia: value });
+                        }}
+                    />
+                </>
+            )}
+        </>
+    );
+};

packages/dev/inspector-v2/src/components/properties/physicsProperties.tsx

@@ -1,17 +1,17 @@
-import type { Vector3, Color3, Color4, Nullable, Quaternion } from "core/index";
+import type { Vector3, Color3, Color4, Quaternion } from "core/index";
 
 import { useCallback } from "react";
 
 import { useInterceptObservable } from "./instrumentationHooks";
 import { useObservableState } from "./observableHooks";
 
-type PropertyKeys<TargetT, PropertyT> = { [PropertyKeyT in keyof TargetT]: TargetT[PropertyKeyT] extends Nullable<PropertyT> ? PropertyKeyT : never }[keyof TargetT];
+type PropertyKeys<TargetT, PropertyT> = { [PropertyKeyT in keyof TargetT]: TargetT[PropertyKeyT] extends PropertyT | null | undefined ? PropertyKeyT : never }[keyof TargetT];
 
 export function useProperty<TargetT extends object, PropertyKeyT extends keyof TargetT>(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT];
 export function useProperty<TargetT extends object, PropertyKeyT extends keyof TargetT>(
     target: TargetT | null | undefined,
     propertyKey: PropertyKeyT
-): TargetT[PropertyKeyT] | null;
+): TargetT[PropertyKeyT] | undefined;
 /**
  * Translates a property value to react state, updating the state whenever the property changes.
  * @param target The object containing the property to observe.
@@ -20,7 +20,7 @@ export function useProperty<TargetT extends object, PropertyKeyT extends keyof T
  */
 export function useProperty<TargetT extends object, PropertyKeyT extends keyof TargetT>(target: TargetT | null | undefined, propertyKey: PropertyKeyT) {
     return useObservableState(
-        useCallback(() => (target ? target[propertyKey] : null), [target, propertyKey]),
+        useCallback(() => (target ? target[propertyKey] : undefined), [target, propertyKey]),
         useInterceptObservable("property", target, propertyKey)
     );
 }
@@ -29,7 +29,7 @@ export function useVector3Property<TargetT extends object, PropertyKeyT extends
 export function useVector3Property<TargetT extends object, PropertyKeyT extends PropertyKeys<TargetT, Vector3>>(
     target: TargetT | null | undefined,
     propertyKey: PropertyKeyT
-): TargetT[PropertyKeyT] | null;
+): TargetT[PropertyKeyT] | undefined;
 /**
  * Translates a Vector3 property value to react state, updating the state whenever the property changes or when the x/y/z components of the Vector3 change.
  * @param target The object containing the property to observe.
@@ -48,7 +48,7 @@ export function useColor3Property<TargetT extends object, PropertyKeyT extends P
 export function useColor3Property<TargetT extends object, PropertyKeyT extends PropertyKeys<TargetT, Color3>>(
     target: TargetT | null | undefined,
     propertyKey: PropertyKeyT
-): TargetT[PropertyKeyT] | null;
+): TargetT[PropertyKeyT] | undefined;
 /**
  * Translates a Color3 property value to react state, updating the state whenever the property changes or when the r/g/b components of the Color3 change.
  * @param target The object containing the property to observe.
@@ -90,7 +90,7 @@ export function useQuaternionProperty<TargetT extends object, PropertyKeyT exten
 export function useQuaternionProperty<TargetT extends object, PropertyKeyT extends PropertyKeys<TargetT, Quaternion>>(
     target: TargetT | null | undefined,
     propertyKey: PropertyKeyT
-): TargetT[PropertyKeyT] | null;
+): TargetT[PropertyKeyT] | undefined;
 /**
  * Translates a Quaternion property value to react state, updating the state whenever the property changes or when the x/y/z/w components of the Quaternion change.
  * @param target The object containing the property to observe.

packages/dev/inspector-v2/src/hooks/compoundPropertyHooks.ts

@@ -26,6 +26,7 @@ import { PropertiesServiceDefinition } from "./services/panes/properties/propert
 import { SkeletonPropertiesServiceDefinition } from "./services/panes/properties/skeletonPropertiesService";
 import { SpritePropertiesServiceDefinition } from "./services/panes/properties/spritePropertiesService";
 import { TransformNodePropertiesServiceDefinition } from "./services/panes/properties/transformNodePropertiesService";
+import { PhysicsPropertiesServiceDefinition } from "./services/panes/properties/physicsPropertiesService";
 import { MaterialExplorerServiceDefinition } from "./services/panes/scene/materialExplorerService";
 import { NodeHierarchyServiceDefinition } from "./services/panes/scene/nodeExplorerService";
 import { SceneExplorerServiceDefinition } from "./services/panes/scene/sceneExplorerService";
@@ -190,6 +191,7 @@ function _ShowInspector(scene: Nullable<Scene>, options: Partial<IInspectorOptio
             NodePropertiesServiceDefinition,
             MeshPropertiesServiceDefinition,
             TransformNodePropertiesServiceDefinition,
+            PhysicsPropertiesServiceDefinition,
             SkeletonPropertiesServiceDefinition,
             BonePropertiesServiceDefinition,
             MaterialPropertiesServiceDefinition,

packages/dev/inspector-v2/src/inspector.tsx

@@ -0,0 +1,50 @@
+import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
+import type { IPropertiesService } from "./propertiesService";
+
+import { TransformNode } from "core/Meshes/transformNode";
+
+import { PropertiesServiceIdentity } from "./propertiesService";
+import { PhysicsBodyProperties } from "../../../components/properties/physicsProperties";
+import { useProperty } from "../../../hooks/compoundPropertyHooks";
+import { PlaceholderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLine";
+
+export const PhysicsPropertiesSectionIdentity = Symbol("Physics");
+
+export const PhysicsPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]> = {
+    friendlyName: "Physics Properties",
+    consumes: [PropertiesServiceIdentity],
+    factory: (propertiesService) => {
+        const physicsSectionRegistration = propertiesService.addSection({
+            order: 5,
+            identity: PhysicsPropertiesSectionIdentity,
+        });
+
+        const contentRegistration = propertiesService.addSectionContent({
+            key: "Physics Properties",
+            predicate: (entity: unknown) => entity instanceof TransformNode,
+            content: [
+                // "Physics" section.
+                {
+                    section: PhysicsPropertiesSectionIdentity,
+                    order: 0,
+                    component: ({ context: node }) => {
+                        const physicsBody = useProperty(node, "physicsBody");
+
+                        if (!physicsBody) {
+                            return <PlaceholderPropertyLine label="No Physics Body" value={undefined} onChange={() => {}} />;
+                        }
+
+                        return <PhysicsBodyProperties physicsBody={physicsBody} />;
+                    },
+                },
+            ],
+        });
+
+        return {
+            dispose: () => {
+                contentRegistration.dispose();
+                physicsSectionRegistration.dispose();
+            },
+        };
+    },
+};