Merge pull request #28 from Cygnusfear/alex/feat-perf-upgrade

Alex/feat perf upgrade
Cygnusfear · Oct 15, 2023 · fd500de · fd500de
2 parents 4d88134 + 54330da
commit fd500de
Show file tree

Hide file tree

Showing 20 changed files with 440 additions and 144 deletions.
diff --git a/packages/client/public/models/facilities.glb b/packages/client/public/models/facilities.glb
diff --git a/packages/client/src/components/loadingScreen/loadingScreen.css b/packages/client/src/components/loadingScreen/loadingScreen.css
@@ -4,7 +4,7 @@
 
 .loading-background {
   @apply fixed left-0 top-0 flex h-screen w-screen items-center justify-center overflow-hidden text-clip bg-[#76ADAB] bg-clip-border flex-col;
-  transition: all 1s ease-in-out;
+  transition: opacity 1s ease-in-out;
 }
 
 .game-title {

diff --git a/packages/client/src/components/loadingScreen/loadingScreen.tsx b/packages/client/src/components/loadingScreen/loadingScreen.tsx
@@ -9,9 +9,9 @@ function LoadingScreen() {
   const [loading, setLoading] = useState(true);
   const { progress } = useNProgress({
     isAnimating: loading,
-    animationDuration: 300,
-    incrementDuration: 200,
-    minimum: 0.1,
+    animationDuration: 1300,
+    incrementDuration: 50,
+    minimum: 0.01,
   });
 
   useEffect(() => {

diff --git a/packages/client/src/game/data/entities.ts b/packages/client/src/game/data/entities.ts
@@ -26,6 +26,7 @@ export const entityTags = [
   "producesGravity",
   "producesPopulation",
   "hasWires",
+  "hasPlants",
   "startingItem",
 ] as const;
 export type EntityTag = (typeof entityTags)[number];
@@ -40,7 +41,7 @@ const EntityData = {
       image: "gravity.webp",
       costs: [["lapu", 500]],
       produces: [["gravity", 7, 1]],
-      variants: [ModelData.well00],
+      variants: ModelData.well,
       tags: ["groundLevel", "hasWires", "producesGravity", "startingItem"],
     },
     dynamo: {
@@ -52,7 +53,7 @@ const EntityData = {
       image: "engine.webp",
       costs: [["lapu", 200]],
       produces: [["power", 25, 1]],
-      variants: [ModelData.engine00],
+      variants: ModelData.engine,
       tags: ["hasWires"],
     },
     residence: {
@@ -64,8 +65,8 @@ const EntityData = {
       image: "residence.webp",
       costs: [["lapu", 100]],
       produces: [["population", 5, 1]],
-      variants: [ModelData.block00, ModelData.block01, ModelData.block02],
-      tags: [],
+      variants: ModelData.residence,
+      tags: ["hasPlants"],
     },
   } as { [key: string]: FacilityDataType },
   resources: {
@@ -78,7 +79,7 @@ const EntityData = {
       image: "crystal.webp",
       resourceType: "crystal",
       produces: [["gravity", 25, 1]],
-      variants: [ModelData.rock00, ModelData.crystal01, ModelData.crystal02],
+      variants: [...ModelData.rock, ...ModelData.crystal],
       tags: [],
     },
   } as { [key: string]: ResourceDataType },

diff --git a/packages/client/src/game/data/models.ts b/packages/client/src/game/data/models.ts
@@ -5,74 +5,100 @@ export type ModelDataType = {
   colors: string[];
 };
 
+export type ModelDataGroupType = {
+  [key: string]: ModelDataType[];
+};
+
 export const importModels = [
   "/models/plants.glb",
   "/models/facilities.glb",
   "/models/resources.glb",
 ];
 export const importTextures = ["/textures/box01.webp"];
 
-const ModelData: { [key: string]: ModelDataType } = {
-  block00: {
-    name: "GenericBlock00",
-    nodes: ["CubaBase", "Block02"],
-    materials: ["Block.Material.001", "Block.Material.001"],
-    colors: ["primary", "primary"],
-  },
-  block01: {
-    name: "GenericBlock01",
-    nodes: ["CubaBase", "Block02"],
-    materials: ["Block.Material.001", "Block.Material.001"],
-    colors: ["primary", "secondary"],
-  },
-  block02: {
-    name: "GenericBlock02",
-    nodes: ["CubaBase", "Block01"],
-    materials: ["Block.Material.001", "Block.Material.001"],
-    colors: ["primary", "primary"],
-  },
-  engine00: {
-    name: "Engine00",
-    nodes: ["dynamo00", "dynamo00001"],
-    materials: [],
-    colors: ["secondary", "primary"],
-  },
-  doubleside00: {
-    name: "DoubleSide00",
-    nodes: ["Double00", "Double00001"],
-    materials: [],
-    colors: ["secondary", "primary"],
-  },
-  well00: {
-    name: "Well00",
-    nodes: ["Well00", "Well00001"],
-    materials: ["Well"],
-    colors: ["secondary", "primary"],
-  },
-  crystal00: {
-    name: "Crystal000",
-    nodes: ["Crystal000"],
-    materials: ["MAT_crystal"],
-    colors: [],
-  },
-  crystal01: {
-    name: "Crystal001",
-    nodes: ["Crystal001"],
-    materials: ["MAT_crystal"],
-    colors: [],
-  },
-  crystal02: {
-    name: "Crystal002",
-    nodes: ["Crystal002"],
-    materials: ["MAT_crystal"],
-    colors: [],
-  },
-  rock00: {
-    name: "Rock000",
-    nodes: ["Rock000"],
-    materials: ["MAT_rock"],
-    colors: [],
-  },
+const ModelData: ModelDataGroupType = {
+  residence: [
+    {
+      name: "Residence00",
+      nodes: ["CubaMid000", "CubaTop000"],
+      materials: [],
+      colors: ["secondary", "primary"],
+    },
+    {
+      name: "Residence01",
+      nodes: ["CubaMid000", "CubaTop001"],
+      materials: [],
+      colors: ["secondary", "primary"],
+    },
+    {
+      name: "Residence02",
+      nodes: ["CubaMid000", "CubaTop001", "CubaBottom000"],
+      materials: [],
+      colors: ["secondary", "primary", "primary"],
+    },
+    {
+      name: "Residence03",
+      nodes: ["CubaMid001", "CubaTop000", "CubaBottom000", "CubaPole000"],
+      materials: [],
+      colors: ["secondary", "primary", "primary", "primary"],
+    },
+    {
+      name: "Residence04",
+      nodes: ["CubaMid002", "CubaTop001", "CubaBottom000"],
+      materials: [],
+      colors: ["secondary", "primary", "primary"],
+    },
+    {
+      name: "Residence05",
+      nodes: ["CubaMid003", "CubaTop000", "CubaBottom000", "CubaPole001"],
+      materials: [],
+      colors: ["secondary", "primary", "primary", "primary"],
+    },
+  ],
+  engine: [
+    {
+      name: "Engine00",
+      nodes: ["dynamo00", "dynamo00001"],
+      materials: [],
+      colors: ["secondary", "primary"],
+    },
+  ],
+  well: [
+    {
+      name: "Well00",
+      nodes: ["Well00", "Well00001"],
+      materials: ["Well"],
+      colors: ["secondary", "primary"],
+    },
+  ],
+  crystal: [
+    {
+      name: "Crystal000",
+      nodes: ["Crystal000"],
+      materials: ["MAT_crystal"],
+      colors: [],
+    },
+    {
+      name: "Crystal001",
+      nodes: ["Crystal001"],
+      materials: ["MAT_crystal"],
+      colors: [],
+    },
+    {
+      name: "Crystal002",
+      nodes: ["Crystal002"],
+      materials: ["MAT_crystal"],
+      colors: [],
+    },
+  ],
+  rock: [
+    {
+      name: "Rock000",
+      nodes: ["Rock000"],
+      materials: ["MAT_rock"],
+      colors: [],
+    },
+  ],
 } as const;
 
 export type TModelData = typeof ModelData;

diff --git a/packages/client/src/game/data/resources.ts b/packages/client/src/game/data/resources.ts
@@ -3,6 +3,7 @@ import { HiTicket } from "react-icons/hi";
 import { HiBolt } from "react-icons/hi2";
 import { IoFastFood } from "react-icons/io5";
 import { FaPersonRays } from "react-icons/fa6";
+import { DoubleSide, MeshStandardMaterial } from "three";
 
 export type ResourceType =
   | "power"
@@ -23,4 +24,15 @@ const ResourceIcons: { [key in ResourceType]: typeof IoFastFood } = {
   population: FaPersonRays,
 };
 
+export const DefaultMaterials = {
+  PlantsMat: new MeshStandardMaterial({
+    roughness: 0.5,
+    metalness: 0.6,
+    side: DoubleSide,
+    emissiveIntensity: 0.8,
+    transparent: true,
+    opacity: 0.95,
+  }),
+} as const;
+
 export { ResourceIcons };
diff --git a/packages/client/src/game/entities/background.tsx b/packages/client/src/game/entities/background.tsx
@@ -23,7 +23,7 @@ function Background() {
           color="#C59885"
           fade={120}
           position={[0, -5, 0]}
-          opacity={0.23}
+          opacity={0.3}
           speed={0.02}
           concentrate={"inside"}
         />

diff --git a/packages/client/src/game/entities/camera.tsx b/packages/client/src/game/entities/camera.tsx
@@ -4,6 +4,7 @@ import {
   OrbitControlsProps,
   PerspectiveCamera,
 } from "@react-three/drei";
+import { useOnce } from "@/lib/useOnce";
 
 function Camera() {
   const orbitRef = useRef<OrbitControlsProps>(null!);
@@ -16,9 +17,9 @@ function Camera() {
     }
   };
 
-  useEffect(() => {
+  useOnce(() => {
     setCameraAngle();
-  }, [orbitRef]);
+  });
 
   useEffect(() => {
     document.addEventListener("gameLoaded", setCameraAngle);

diff --git a/packages/client/src/game/entities/facility.tsx b/packages/client/src/game/entities/facility.tsx
@@ -1,9 +1,8 @@
-import { RefObject, useMemo, useState } from "react";
+import { RefObject, useMemo } from "react";
 import { useStore } from "../store";
-import { AdditiveBlending, DoubleSide, Mesh } from "three";
+import { Mesh } from "three";
 import { animated, useSpring } from "@react-spring/three";
 import { MouseInputEvent, useInput } from "../input/useInput";
-import { palette } from "../utils/palette";
 import { Directions, faceDirections } from "@/lib/utils";
 import { IFacility } from "../types/entities";
 import prand from "pure-rand";
@@ -22,25 +21,23 @@ import useConstruction from "../systems/useConstruction";
 const Facility = (props: IFacility) => {
   const { position, entityRef } = props;
   const { constructFacility } = useConstruction();
-  const [faceIndex, setFaceIndex] = useState<number | undefined>(undefined);
   const {
     input: { cursor },
   } = useStore();
 
   const { onMouseMove } = useInput((event: MouseInputEvent) => {
-    if (faceIndex === undefined) return;
-    const direction = event.position.clone().add(faceDirections[faceIndex!]);
+    if (event.event.faceIndex === undefined) return;
+    const idx = Math.floor(event.event.faceIndex / 2);
+    const direction = event.position.clone().add(faceDirections[idx!]);
     cursor.setCursor({
       position: direction,
-      direction: faceDirections[faceIndex!].clone().negate(),
+      direction: faceDirections[idx!].clone().negate(),
     });
     event.event.stopPropagation();
   }, entityRef);
 
   const { onMouseDown, onMouseClick } = useInput((event) => {
-    if (faceIndex === undefined) return;
     constructFacility(cursor.position);
-    setFaceIndex(undefined);
     event.event.stopPropagation();
   }, entityRef);
 
@@ -62,41 +59,14 @@ const Facility = (props: IFacility) => {
         onPointerDown={onMouseDown}
         onPointerUp={onMouseClick}
         onPointerMove={(e) => {
-          // make sure we match the correct object
-          if (e.object === e.eventObject) {
-            if (faceIndex !== e?.face?.materialIndex) {
-              setFaceIndex(
-                e?.face?.materialIndex !== undefined
-                  ? e.face.materialIndex
-                  : undefined
-              );
-            }
+          if (e.object === e.eventObject && e.faceIndex !== undefined) {
             onMouseMove(e);
             e.stopPropagation();
           }
         }}
-        onPointerLeave={() => {
-          if (faceIndex !== undefined) setFaceIndex(undefined);
-        }}
       >
         <boxGeometry attach="geometry" args={[1, 1, 1]} />
-        {[...Array(6)].map((_, index) => (
-          <meshLambertMaterial
-            attach={`material-${index}`}
-            key={index}
-            color={
-              faceIndex !== undefined && faceIndex === index
-                ? palette.cursor
-                : "black"
-            }
-            visible={false}
-            transparent={true}
-            // TODO: Remove the face highlighting completely, or use alternative face highlighting like in Townscraper
-            opacity={0}
-            blending={AdditiveBlending}
-            side={DoubleSide}
-          />
-        ))}
+        <meshBasicMaterial attach="material" visible={false} />
         <Renderer {...props} />
       </animated.mesh>
       <FacilitySound />
@@ -166,10 +136,13 @@ const Renderer = (props: IFacility) => {
       scale={[1, 1, 1]}
       position={[0, 0, 0]}
       rotation={[0, rotation.y, 0]}
+      matrixAutoUpdate={false}
+      matrixWorldAutoUpdate={false}
     >
       {prototypes!.map((proto, index) => {
-        let color = variant.colors[index];
-        switch (variant.colors[index]) {
+        const variantIndex = variant.nodes.indexOf(proto.name);
+        let color = variant.colors[variantIndex];
+        switch (variant.colors[variantIndex]) {
           case "primary":
             color = colorPrimary!;
             break;