use spritemap for 3D plant icons

Author: gabrielburnworth

frontend/three_d_garden/__tests__/garden_model_test.tsx

@@ -2,6 +2,7 @@ let mockIsDesktop = false;
 let mockIsMobile = false;
 
 import React from "react";
+import { useTexture } from "@react-three/drei";
 import { GardenModelProps, GardenModel } from "../garden_model";
 import { clone } from "lodash";
 import { INITIAL, INITIAL_POSITION, SurfaceDebugOption } from "../config";
@@ -20,6 +21,7 @@ import {
   createRenderer,
   unmountRenderer,
 } from "../../__test_support__/test_renderer";
+import { PLANT_ICON_ATLAS } from "../garden/plant_icon_atlas";
 
 let isDesktopSpy: jest.SpyInstance;
 let isMobileSpy: jest.SpyInstance;
@@ -56,6 +58,7 @@ describe("<GardenModel />", () => {
     useStateSpy.mockRestore();
     isDesktopSpy.mockRestore();
     isMobileSpy.mockRestore();
+    delete PLANT_ICON_ATLAS["/crops/icons/beet.avif"];
     location.pathname = originalPathname;
   });
 
@@ -109,6 +112,26 @@ describe("<GardenModel />", () => {
     expect(plantLabels.length).toEqual(1);
   });
 
+  it("preloads the atlas texture for mapped plant icons", () => {
+    PLANT_ICON_ATLAS["/crops/icons/beet.avif"] = {
+      atlasUrl: "/crops/icons/atlas.avif",
+      textureWidth: 256,
+      textureHeight: 256,
+      x: 0,
+      y: 0,
+      width: 64,
+      height: 64,
+    };
+    const p = fakeProps();
+    const plant = fakePlant();
+    plant.body.name = "Beet";
+    p.threeDPlants = convertPlants(p.config, [plant]);
+
+    render(<GardenModel {...p} />);
+
+    expect(useTexture).toHaveBeenCalledWith("/crops/icons/atlas.avif");
+  });
+
   it("doesn't render hover labels without a hovered plant", () => {
     const p = fakeProps();
     const plant = fakePlant();

frontend/three_d_garden/bed/objects/__tests__/pointer_objects_test.tsx

@@ -1,5 +1,6 @@
 let mockIsMobile = false;
 import React from "react";
+import { useTexture } from "@react-three/drei";
 import {
   ActivePositionRef,
   BillboardRef,
@@ -22,6 +23,7 @@ import { Vector3 } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import * as plantActions from "../../../../farm_designer/map/layers/plants/plant_actions";
 import * as screenSize from "../../../../screen_size";
+import { PLANT_ICON_ATLAS } from "../../../garden/plant_icon_atlas";
 
 let dropPlantSpy: jest.SpyInstance;
 let isMobileSpy: jest.SpyInstance;
@@ -44,6 +46,7 @@ afterEach(() => {
   dropPlantSpy.mockRestore();
   isMobileSpy.mockRestore();
   requestAnimationFrameSpy.mockRestore();
+  delete PLANT_ICON_ATLAS["/crops/icons/mint.avif"];
 });
 
 describe("<PointerObjects />", () => {
@@ -65,7 +68,25 @@ describe("<PointerObjects />", () => {
     location.pathname = Path.mock(Path.cropSearch("mint"));
     mockIsMobile = false;
     const { container } = render(<PointerObjects {...fakeProps()} />);
-    expect(container).toContainHTML("mint");
+    expect(container).toContainHTML("pointerPlant");
+  });
+
+  it("loads the atlas texture for the pointer plant preview", () => {
+    PLANT_ICON_ATLAS["/crops/icons/mint.avif"] = {
+      atlasUrl: "/crops/icons/atlas.avif",
+      textureWidth: 256,
+      textureHeight: 256,
+      x: 0,
+      y: 0,
+      width: 64,
+      height: 64,
+    };
+    location.pathname = Path.mock(Path.cropSearch("mint"));
+    mockIsMobile = false;
+
+    render(<PointerObjects {...fakeProps()} />);
+
+    expect(useTexture).toHaveBeenCalledWith("/crops/icons/atlas.avif");
   });
 });
 

frontend/three_d_garden/bed/objects/pointer_objects.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { Group, MeshPhongMaterial } from "../../components";
-import { Billboard, Line, Image, Sphere } from "@react-three/drei";
+import {
+  Group, MeshPhongMaterial, Mesh, PlaneGeometry, MeshBasicMaterial,
+} from "../../components";
+import { Billboard, Line, Sphere, useTexture } from "@react-three/drei";
 import { findCrop, findIcon } from "../../../crops/find";
 import { Mode } from "../../../farm_designer/map/interfaces";
 import { getMode, round, xyDistance } from "../../../farm_designer/map/util";
@@ -35,6 +37,10 @@ import { Actions } from "../../../constants";
 import { NavigateFunction } from "react-router";
 import { DrawnPointPayl } from "../../../farm_designer/interfaces";
 import { Line2 } from "three/examples/jsm/lines/Line2.js";
+import {
+  getPlantIconTexture,
+  getPlantIconTextureUrl,
+} from "../../garden/plant_icon_atlas";
 
 export type PointerPlantRef = React.RefObject<GroupType | null>;
 export type RadiusRef = React.RefObject<MeshType | null>;
@@ -71,6 +77,11 @@ export const PointerObjects = (props: PointerObjectsProps) => {
   const zero = zeroFunc(config);
   const extents = extentsFunc(config);
   const iconSize = (addPlantProps.designer.cropRadius || DEFAULT_PLANT_RADIUS) * 2;
+  const icon = findIcon(Path.getCropSlug());
+  const baseTexture = useTexture(getPlantIconTextureUrl(icon));
+  const plantIconTexture = React.useMemo(
+    () => getPlantIconTexture(baseTexture, icon),
+    [baseTexture, icon]);
 
   const { drawnPoint } = addPlantProps.designer;
   const settingRadius =
@@ -127,12 +138,15 @@ export const PointerObjects = (props: PointerObjectsProps) => {
           {getMode() == Mode.clickToAdd &&
             <Group>
               <Billboard follow={true} position={[0, 0, iconSize / 2]}>
-                <Image
+                <Mesh
                   name={"pointerPlant"}
-                  url={findIcon(Path.getCropSlug())}
-                  scale={iconSize}
-                  transparent={true}
-                  renderOrder={RenderOrder.pointerPlant} />
+                  renderOrder={RenderOrder.pointerPlant}>
+                  <PlaneGeometry args={[iconSize, iconSize]} />
+                  <MeshBasicMaterial
+                    map={plantIconTexture}
+                    alphaTest={0.1}
+                    transparent={true} />
+                </Mesh>
               </Billboard>
               <Sphere args={[findCrop(Path.getCropSlug()).spread / 2 * 10, 32, 32]}>
                 <MeshPhongMaterial

frontend/three_d_garden/garden/__tests__/plant_icon_atlas_test.ts

@@ -0,0 +1,56 @@
+import {
+  PLANT_ICON_ATLAS,
+  getPlantIconTexture,
+  getPlantIconTextureTransform,
+  getPlantIconTextureUrl,
+} from "../plant_icon_atlas";
+import { Texture } from "three";
+
+describe("plant icon atlas helpers", () => {
+  const icon = "/crops/icons/mint.avif";
+
+  afterEach(() => {
+    delete PLANT_ICON_ATLAS[icon];
+  });
+
+  it("falls back to the original icon url", () => {
+    delete PLANT_ICON_ATLAS[icon];
+    expect(getPlantIconTextureUrl(icon)).toEqual(icon);
+    expect(getPlantIconTextureTransform(icon)).toBeUndefined();
+  });
+
+  it("resolves atlas url and UV transform", () => {
+    PLANT_ICON_ATLAS[icon] = {
+      atlasUrl: "/crops/icons/atlas.avif",
+      textureWidth: 256,
+      textureHeight: 128,
+      x: 64,
+      y: 16,
+      width: 32,
+      height: 48,
+    };
+
+    expect(getPlantIconTextureUrl(icon)).toEqual("/crops/icons/atlas.avif");
+    expect(getPlantIconTextureTransform(icon)).toEqual({
+      offset: [0.25, 0.5],
+      repeat: [0.125, 0.375],
+    });
+  });
+
+  it("gets atlas textures per base texture and icon", () => {
+    PLANT_ICON_ATLAS[icon] = {
+      atlasUrl: "/crops/icons/atlas.avif",
+      textureWidth: 256,
+      textureHeight: 128,
+      x: 64,
+      y: 16,
+      width: 32,
+      height: 48,
+    };
+    const baseTexture = new Texture();
+
+    const texture = getPlantIconTexture(baseTexture, icon);
+
+    expect(texture).not.toBe(baseTexture);
+  });
+});

frontend/three_d_garden/garden/__tests__/plant_instances_test.tsx

@@ -20,6 +20,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import { clone } from "lodash";
 import { useFrame } from "@react-three/fiber";
+import { useTexture } from "@react-three/drei";
 import { Quaternion } from "three";
 import { fakePlant } from "../../../__test_support__/fake_state/resources";
 import { INITIAL } from "../../config";
@@ -33,6 +34,7 @@ import { Actions } from "../../../constants";
 import { convertPlants } from "../../../farm_designer/three_d_garden_map";
 import { mockDispatch } from "../../../__test_support__/fake_dispatch";
 import { setMockInstanceId } from "../../../__test_support__/three_d_mocks";
+import { PLANT_ICON_ATLAS } from "../plant_icon_atlas";
 
 describe("<PlantInstances />", () => {
   let reactUseRefSpy: jest.SpyInstance;
@@ -42,6 +44,7 @@ describe("<PlantInstances />", () => {
       .mockImplementation(() => mockRefImpl() as never);
     location.pathname = Path.mock(Path.designer());
     (useFrame as jest.Mock).mockClear();
+    (useTexture as unknown as jest.Mock).mockClear();
     (useFrame as jest.Mock).mockImplementation((frameFn: Function) => frameFn({
       clock: { getElapsedTime: jest.fn(() => 0) },
       camera: { quaternion: new Quaternion() },
@@ -50,6 +53,7 @@ describe("<PlantInstances />", () => {
 
   afterEach(() => {
     reactUseRefSpy.mockRestore();
+    delete PLANT_ICON_ATLAS["/crops/icons/beet.avif"];
   });
 
   const fakeProps = (): PlantInstancesProps => {
@@ -76,6 +80,20 @@ describe("<PlantInstances />", () => {
     expect(meshes.length).toBe(2);
   });
 
+  it("loads the atlas texture when an icon is mapped", () => {
+    PLANT_ICON_ATLAS["/crops/icons/beet.avif"] = {
+      atlasUrl: "/crops/icons/atlas.avif",
+      textureWidth: 256,
+      textureHeight: 256,
+      x: 0,
+      y: 0,
+      width: 64,
+      height: 64,
+    };
+    render(<PlantInstances {...fakeProps()} />);
+    expect(useTexture).toHaveBeenCalledWith("/crops/icons/atlas.avif");
+  });
+
   it("clamps plant icon brightness", () => {
     expect(plantIconBrightness(undefined)).toEqual(1);
     expect(plantIconBrightness(0)).toEqual(0.25);