feat: add "scaling" tool type to thin instances painting tool

BabylonJS · julien-moreau · Apr 22, 2023 · Feb 7, 2023 · Mar 1, 2023 · Mar 1, 2023
commit 7573b7c705747b9f0528e220ac5c0d76fa3c68e7
diff --git a/src/renderer/editor/painting/foliage/foliage.ts b/src/renderer/editor/painting/foliage/foliage.ts
@@ -16,6 +16,13 @@ import { Decal } from "../tools/decal";
 
 import { AbstractPaintingTool } from "../abstract-tool";
 
+/**
+ * Defines the possible types for the painting tool.
+ * - `add`: allows to add/remove painted thin instances.
+ * - `scale`: allows to rescale existing thin instances.
+ */
+export type FoliageToolType = "add" | "scale";
+
 const vectorTen = new Vector3(10, 10, 10);
 
 const meshScale = Vector3.Zero();
@@ -27,9 +34,9 @@ const targetScaling = Vector3.Zero();
 const targetPosition = Vector3.Zero();
 const targetRotation = Quaternion.Identity();
 
-// const scaling = Vector3.Zero();
-// const position = Vector3.Zero();
-// const rotation = Quaternion.Identity();
+const scaling = Vector3.Zero();
+const position = Vector3.Zero();
+const rotation = Quaternion.Identity();
 
 const translation = Vector3.Zero();
 const targetScaledPosition = Vector3.Zero();
@@ -78,6 +85,18 @@ export class FoliagePainter extends AbstractPaintingTool {
      */
     public randomRotationMax: Vector3 = new Vector3(0, Math.PI, 0);
 
+    /**
+     * Defines the type of tool used when painting thin instances.
+     * - `add`: allows to add/remove painted thin instances.
+     * - `scale`: allows to rescale existing thin instances.
+     */
+    public toolType: FoliageToolType = "add";
+
+    /**
+     * Defines the vector applied on the scale of the existing thin instances in the radius of
+     * the tool in case the tool type is equal to `scale`.
+     */
+    public rescaleValue: Vector3 = new Vector3(0.01, 0.01, 0.01);
 
     /** @hidden */
     public _selectedMeshes: Mesh[] = [];
@@ -279,6 +298,59 @@ export class FoliagePainter extends AbstractPaintingTool {
      * Paints the thin instance at the current position of the cloned mesh.
      */
     private _paint(): void {
+        if (this.toolType === "add") {
+            return this._addOrRemove();
+        }
+
+        if (this.toolType === "scale") {
+            return this._rescale();
+        }
+    }
+
+    /**
+     * Rescales the thin instances. Called on the tool type is equal to `scale`.
+     */
+    private _rescale(): void {
+        const radius = this._size * 0.5;
+
+        this._selectedMeshes.forEach((m) => {
+            if (!m.thinInstanceCount) {
+                return;
+            }
+
+            const targetMatrix = this._getFinalMatrix(m, this._pick!.pickedPoint!, Vector3.Up());
+            targetMatrix.decompose(targetScaling, targetRotation, targetPosition);
+
+            const matrices = this._existingWorldMatrices.get(m)!;
+
+            for (let i = 0, len = matrices.length; i < len; ++i) {
+                const matrix = matrices[i];
+
+                matrix.getTranslationToRef(translation);
+                targetScaledPosition.copyFrom(targetPosition);
+
+                if (Vector3.Distance(targetScaledPosition.multiplyInPlace(m.scaling), translation.multiplyInPlace(m.scaling)) < radius) {
+                    matrix.decompose(scaling, rotation, position);
+
+                    if (this._removing) {
+                        scaling.subtractInPlace(this.rescaleValue);
+                    } else {
+                        scaling.addInPlace(this.rescaleValue);
+                    }
+
+                    Matrix.ComposeToRef(scaling, rotation, position, matrix);
+                }
+            }
+
+            this._configureMeshMatrices(m, matrices);
+        });
+    }
+
+    /**
+     * Called when the user tries to add or removes instances.
+     * Called on the tool type is equal to `add`.
+     */
+    private _addOrRemove(): void {
         // Remove
         if (this._removing) {
             return this._selectedMeshes.forEach((m) => {
@@ -311,6 +383,9 @@ export class FoliagePainter extends AbstractPaintingTool {
         });
     }
 
+    /**
+     * Adds a thin instance at the given position.
+     */
     private _add(center: Vector3, map: Map<Mesh, Matrix[]>): unknown {
         const mesh = this._selectedMeshes[(this._selectedMeshes.length * Math.random()) >> 0];
 
@@ -386,6 +461,9 @@ export class FoliagePainter extends AbstractPaintingTool {
         existingWorldMatrices.push(targetMatrix);
     }
 
+    /**
+     * Called on the user wants to remove existing thin instances.
+     */
     private _remove(mesh: Mesh, absolutePosition: Vector3): void {
         const targetMatrix = this._getFinalMatrix(mesh, absolutePosition, Vector3.Up());
         targetMatrix.decompose(targetScaling, targetRotation, targetPosition);
@@ -402,7 +480,7 @@ export class FoliagePainter extends AbstractPaintingTool {
             for (let i = 0, len = matrices.length; i < len; ++i) {
                 const matrix = matrices[i];
 
-                matrix.getTranslationToRef(translation)
+                matrix.getTranslationToRef(translation);
                 targetScaledPosition.copyFrom(targetPosition);
 
                 if (Vector3.Distance(targetScaledPosition.multiplyInPlace(mesh.scaling), translation.multiplyInPlace(mesh.scaling)) < radius) {

diff --git a/src/renderer/tools/painting/foliage/inspector.tsx b/src/renderer/tools/painting/foliage/inspector.tsx
@@ -1,7 +1,7 @@
 import { Nullable } from "../../../../shared/types";
 
 import * as React from "react";
-import { Divider, H4, NonIdealState } from "@blueprintjs/core";
+import { Divider, H4, NonIdealState, Tab, Tabs } from "@blueprintjs/core";
 
 import { Mesh } from "babylonjs";
 
@@ -12,14 +12,19 @@ import { InspectorBoolean } from "../../../editor/gui/inspector/fields/boolean";
 
 import { Tools } from "../../../editor/tools/tools";
 
-import { FoliagePainter } from "../../../editor/painting/foliage/foliage";
+import { FoliagePainter, FoliageToolType } from "../../../editor/painting/foliage/foliage";
 
 import { IObjectInspectorProps } from "../../../editor/components/inspector";
 import { AbstractInspector } from "../../../editor/components/inspectors/abstract-inspector";
 
 import { FoliageAssetItem } from "./item";
 
 export interface IFoliagePainterState {
+    /**
+     * Defines the current id of the selected tab.
+     */
+    selectedTabId: FoliageToolType;
+
     /**
      * Defines the preview of the mesh.
      */
@@ -49,6 +54,8 @@ export class FoliagePainterInspector extends AbstractInspector<FoliagePainter, I
         }
 
         this.state = {
+            selectedTabId: "add",
+
             assetPreviews: [],
             selectedMeshes: [],
         };
@@ -71,6 +78,36 @@ export class FoliagePainterInspector extends AbstractInspector<FoliagePainter, I
                     </div>
                 </InspectorSection>
 
+                <div style={{ display: "flex", justifyContent: "center" }}>
+                    <Tabs
+                        animate
+                        selectedTabId={this.state.selectedTabId}
+                        onChange={(id) => {
+                            this.selectedObject.toolType = id as FoliageToolType;
+                            this.setState({ selectedTabId: id as FoliageToolType });
+                        }}
+                    >
+                        <Tab id="add" title="Add" />
+                        <Tab id="scale" title="Scale" />
+                    </Tabs>
+                </div>
+
+                {this.getAddInspector()}
+                {this.getScaleInspector()}
+            </>
+        );
+    }
+
+    /**
+     * Returns the inspector used to add / remove instances.
+     */
+    protected getAddInspector(): React.ReactNode {
+        if (this.state.selectedTabId !== "add") {
+            return undefined;
+        }
+
+        return (
+            <>
                 <InspectorSection title="Random Rotation">
                     <InspectorVector3 object={this.selectedObject} property="randomRotationMin" label="Random Min Rotation" step={0.01} />
                     <InspectorVector3 object={this.selectedObject} property="randomRotationMax" label="Random Max Rotation" step={0.01} />
@@ -95,6 +132,23 @@ export class FoliagePainterInspector extends AbstractInspector<FoliagePainter, I
         );
     }
 
+    /**
+     * Returns the inspector used to scale existing instances.
+     */
+    protected getScaleInspector(): React.ReactNode {
+        if (this.state.selectedTabId !== "scale") {
+            return undefined;
+        }
+
+        return (
+            <>
+                <InspectorSection title="Value">
+                    <InspectorVector3 object={this.selectedObject} property="rescaleValue" label="Value" step={0.01} />
+                </InspectorSection>
+            </>
+        );
+    }
+
     /**
      * Called on the component did mount.
      */