@woosh/meep-engine 2.169.1 → 2.169.2

package/editor/tools/paint/TerrainPaintTool.js

@@ -10,6 +10,14 @@ import { Sampler2D } from "../../../src/engine/graphics/texture/sampler/Sampler2
 import sampler2d_to_html_canvas from "../../../src/engine/graphics/texture/sampler/sampler2d_to_html_canvas.js";
 import Tool from "../engine/Tool.js";
 
+/**
+ * Scratch for the brush footprint of the overlay preview. Read out before `paintImage`, so it
+ * cannot alias with a concurrent `paint`.
+ * @type {Float64Array}
+ */
+const scratch_uv_rect = new Float64Array(4);
+const scratch_texel_rect = new Float64Array(4);
+
 export class TerrainPaintTool extends Tool {
     constructor() {
         super();
@@ -121,29 +129,93 @@ export class TerrainPaintTool extends Tool {
         });
     }
 
-    updateOverlay() {
+    /**
+     * Footprint of the brush in terrain UV space (`[0,1]` across the terrain extent), written as
+     * `[x0, y0, x1, y1]`.
+     *
+     * Every consumer of the brush — the on-screen overlay preview and each subclass's `paint` —
+     * must derive its rect from this one definition, otherwise the preview stops matching what is
+     * actually painted.
+     *
+     * @param {Float64Array|number[]} result
+     */
+    computeBrushUVRect(result) {
+        const terrainSize = this.terrain.size;
 
-        const terrain = this.terrain;
+        const brushPosition = this.__brushPosition;
+        const brushSize = this.settings.brushSize;
 
-        const overlay = terrain.overlay;
+        const uv_x = brushPosition.x / terrainSize.x;
+        const uv_y = brushPosition.y / terrainSize.y;
 
-        overlay.clear();
+        const uv_w = brushSize / terrainSize.x;
+        const uv_h = brushSize / terrainSize.y;
 
-        const dx = overlay.size.x / terrain.size.x;
-        const dy = overlay.size.y / terrain.size.y;
+        result[0] = uv_x - uv_w / 2;
+        result[1] = uv_y - uv_h / 2;
+        result[2] = uv_x + uv_w / 2;
+        result[3] = uv_y + uv_h / 2;
+    }
 
-        const overlayPositionX = this.__brushPosition.x * dx;
-        const overlayPositionY = this.__brushPosition.y * dy;
+    /**
+     * Scale a UV rect into the continuous texel space of a sampler of the given dimensions.
+     *
+     * Kept separate from {@link TerrainPaintTool#computeBrushUVRect} because the terrain's
+     * heightmap, splat map and overlay all have different resolutions, and each one converts the
+     * same UV footprint into its own domain.
+     *
+     * `result` may be the same array as `uv_rect`.
+     *
+     * @param {Float64Array|number[]} result `[x0, y0, x1, y1]` in texels
+     * @param {Float64Array|number[]} uv_rect `[x0, y0, x1, y1]` in UV
+     * @param {number} width sampler width in texels
+     * @param {number} height sampler height in texels
+     */
+    static uvRectToTexelRect(result, uv_rect, width, height) {
+        result[0] = uv_rect[0] * width;
+        result[1] = uv_rect[1] * height;
+        result[2] = uv_rect[2] * width;
+        result[3] = uv_rect[3] * height;
+    }
 
-        const brushSize = this.settings.brushSize;
+    /**
+     * Snap a continuous texel rect to the integer texel range that lies fully inside it: low bounds
+     * round up, high bounds round down. Written out once because the two paint tools iterate the
+     * resulting range with `for (x = x0; x < x1; x++)` and must agree on which texels a brush
+     * covers.
+     *
+     * `result` may be the same array as `texel_rect`.
+     *
+     * @param {Float64Array|number[]} result `[x0, y0, x1, y1]`, x1/y1 exclusive
+     * @param {Float64Array|number[]} texel_rect `[x0, y0, x1, y1]`
+     */
+    static texelRectToIntegerRect(result, texel_rect) {
+        result[0] = Math.ceil(texel_rect[0]);
+        result[1] = Math.ceil(texel_rect[1]);
+        result[2] = Math.floor(texel_rect[2]);
+        result[3] = Math.floor(texel_rect[3]);
+    }
+
+    updateOverlay() {
+
+        const overlay = this.terrain.overlay;
+
+        overlay.clear();
 
-        const brushRadius = brushSize / 2;
+        this.computeBrushUVRect(scratch_uv_rect);
 
-        const brushSizeX = brushRadius * dx;
-        const brushSizeY = brushRadius * dy;
+        TerrainPaintTool.uvRectToTexelRect(scratch_texel_rect, scratch_uv_rect, overlay.size.x, overlay.size.y);
 
+        const x0 = scratch_texel_rect[0];
+        const y0 = scratch_texel_rect[1];
 
-        overlay.paintImage(this.__brushImage, overlayPositionX - brushSizeX, overlayPositionY - brushSizeY, brushSize * dx, brushSize * dy);
+        overlay.paintImage(
+            this.__brushImage,
+            x0,
+            y0,
+            scratch_texel_rect[2] - x0,
+            scratch_texel_rect[3] - y0
+        );
     }
 
     /**

package/editor/tools/paint/TerrainTexturePaintTool.js

@@ -5,6 +5,14 @@ import { ArrayCopyAction } from "../../actions/concrete/ArrayCopyAction.js";
 import { ModifyPatchTextureArray2DAction } from "../../actions/concrete/ModifyPatchTextureArray2DAction.js";
 import { TerrainPaintTool } from "./TerrainPaintTool.js";
 
+/**
+ * Scratch for the brush footprint. Both are read out into locals before any nested call, so they
+ * cannot alias.
+ * @type {Float64Array}
+ */
+const scratch_uv_rect = new Float64Array(4);
+const scratch_texel_rect = new Float64Array(4);
+
 export class TerrainTexturePaintTool extends TerrainPaintTool {
     constructor() {
         super();
@@ -100,25 +108,11 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
          */
         const terrain = this.terrain;
 
-        const brushPosition = this.__brushPosition;
-        const brushSize = this.settings.brushSize;
-
-        const terrainSize = terrain.size;
-
-        const terrainHeight = terrainSize.y;
-        const terrainWidth = terrainSize.x;
-
-        const uv_x = brushPosition.x / terrainWidth;
-        const uv_y = brushPosition.y / terrainHeight;
-
-        const uv_w = brushSize / terrainWidth;
-        const uv_h = brushSize / terrainHeight;
+        this.computeBrushUVRect(scratch_uv_rect);
 
-        const uv_x0 = uv_x - uv_w / 2;
-        const uv_x1 = uv_x + uv_w / 2;
-
-        const uv_y0 = uv_y - uv_h / 2;
-        const uv_y1 = uv_y + uv_h / 2;
+        // brush center in UV, the stamp is applied around it
+        const uv_x = (scratch_uv_rect[0] + scratch_uv_rect[2]) / 2;
+        const uv_y = (scratch_uv_rect[1] + scratch_uv_rect[3]) / 2;
 
         const marker = this.settings.marker;
 
@@ -141,18 +135,13 @@ export class TerrainTexturePaintTool extends TerrainPaintTool {
         const splatWidth = splat.size.x;
         const splatHeight = splat.size.y;
 
+        TerrainPaintTool.uvRectToTexelRect(scratch_texel_rect, scratch_uv_rect, splatWidth, splatHeight);
+        TerrainPaintTool.texelRectToIntegerRect(scratch_texel_rect, scratch_texel_rect);
 
-        const h_x0 = uv_x0 * splatWidth;
-        const h_x1 = uv_x1 * splatWidth;
-
-        const h_y0 = uv_y0 * splatHeight;
-        const h_y1 = uv_y1 * splatHeight;
-
-        const x0 = Math.ceil(h_x0);
-        const x1 = Math.floor(h_x1);
-
-        const y0 = Math.ceil(h_y0);
-        const y1 = Math.floor(h_y1);
+        const x0 = scratch_texel_rect[0];
+        const y0 = scratch_texel_rect[1];
+        const x1 = scratch_texel_rect[2];
+        const y1 = scratch_texel_rect[3];
 
         const splatIndex = this.settings.splatIndex;
 

package/editor/view/ecs/components/TerrainController.js

@@ -11,7 +11,6 @@ import { NativeListController } from "../../../../src/view/controller/controls/N
 import Vector2Control from "../../../../src/view/controller/controls/Vector2Control.js";
 import { CanvasView } from "../../../../src/view/elements/CanvasView.js";
 import EmptyView from "../../../../src/view/elements/EmptyView.js";
-import GroupView from "../../../../src/view/elements/Group.js";
 import View from "../../../../src/view/View.js";
 import DatGuiController from "./DatGuiController.js";
 
@@ -128,9 +127,7 @@ class LayersController extends View {
 
                     v.bindSignal(layer.size.onChanged, terrain.updateMaterial, terrain);
 
-                    const groupView = new GroupView();
-                    groupView.add(new LabelView('size'));
-                    groupView.add(vSize);
+                    const groupView = EmptyView.group([new LabelView('size'), vSize], { classList: ['group'] });
 
                     v.addChild(groupView);
 

package/package.json

@@ -6,7 +6,7 @@
   "description": "Pure JavaScript game engine. Fully featured and production ready.",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "2.169.1",
+  "version": "2.169.2",
   "main": "build/meep.module.js",
   "module": "build/meep.module.js",
   "exports": {