fix: update color in Path component, adjust position in Agents component, enhance texture scaling in Domain component, modify shadow bias in Light component, and refine fog parameters in Stage component

Author: Kevin

src/components/Agent.tsx

@@ -128,7 +128,7 @@ export function Path({
                 dashScale={5}
                 depthTest={false}
                 lineWidth={s.scale.to((s) => s * 6)}
-                color="white"
+                color="black"
                 points={path}
                 dashed
               />

src/components/Agents.tsx

@@ -29,11 +29,12 @@ export function Agents() {
       <Instances
         frustumCulled={false}
         castShadow
+        receiveShadow
         geometry={geometry}
         material={material}
       >
         {range(contents?.count ?? 0).map((i) => (
-          <group position={[0, 0.05, 0]}>
+          <group position={[0, 0.1, 0]}>
             <Agent i={i} key={i} scale={2} />
           </group>
         ))}

src/components/Domain.tsx

@@ -1,16 +1,17 @@
 import { Grid, Instance, Instances, useTexture } from "@react-three/drei";
 import { useModel } from "hooks/useModel";
-import { memo, ReactNode } from "react";
+import { memo, ReactNode, Suspense } from "react";
 import {
+  DoubleSide,
   LinearMipmapNearestFilter,
   NearestFilter,
   RepeatWrapping,
   Vector2,
 } from "three";
 
+import { useThree } from "@react-three/fiber";
 import "./checkerMaterial";
 import { checkerMaterial } from "./checkerMaterial";
-import { useThree } from "@react-three/fiber";
 
 const Obstacles = memo(
   ({
@@ -21,15 +22,15 @@ const Obstacles = memo(
     const { geometry: hull } = useModel("./box-hull.gltf");
     const roughness = useTexture("/tile-roughness.png", (t) => {
       t.anisotropy = gl.capabilities.getMaxAnisotropy();
-      t.repeat = new Vector2(width, height);
+      t.repeat = new Vector2(width * 2, height * 2);
       t.wrapS = RepeatWrapping;
       t.wrapT = RepeatWrapping;
       t.minFilter = LinearMipmapNearestFilter;
       t.magFilter = NearestFilter;
     });
     const texture = useTexture("/tile.png", (t) => {
       t.anisotropy = gl.capabilities.getMaxAnisotropy();
-      t.repeat = new Vector2(width, height);
+      t.repeat = new Vector2(width * 2, height * 2);
       t.wrapS = RepeatWrapping;
       t.wrapT = RepeatWrapping;
       t.minFilter = LinearMipmapNearestFilter;
@@ -38,17 +39,17 @@ const Obstacles = memo(
     return (
       <group>
         <Instances
-          scale={[-1, 1, -1]}
+          scale={[-1, 0.5, -1]}
           rotation={[0, Math.PI / 2, 0]}
           limit={items?.length ?? 0}
           castShadow
           position={[height / 2, 0, -width / 2]}
-          material={checkerMaterial(4)}
+          material={checkerMaterial(1)}
         >
           <boxGeometry />
           {items?.map?.((item, i) => (
             <Instance
-              color="#444"
+              color="#555"
               key={i}
               scale={[item.width, 0.5, item.height]}
               position={[
@@ -60,17 +61,16 @@ const Obstacles = memo(
           ))}
         </Instances>
         <mesh
-          receiveShadow
           geometry={hull}
           rotation={[0, Math.PI / 2, 0]}
           scale={[width / 2, 0.3, height / 2]}
           position={[0, -0.3, 0]}
         >
-          <meshStandardMaterial color="#666" />
+          <meshStandardMaterial color="#666" side={DoubleSide} />
         </mesh>
         <mesh receiveShadow rotation={[-Math.PI / 2, 0, -Math.PI / 2]}>
           <meshStandardMaterial
-            color="#AAA"
+            color="#ccc"
             map={texture}
             roughnessMap={roughness}
           />
@@ -103,17 +103,25 @@ export function Domain({
 } & DomainProps) {
   return (
     <>
-      {items.length ? (
-        <Obstacles items={items} size={size} />
-      ) : (
-        <Grid args={[10, 10]} />
-      )}
-      <group
-        scale={[1, 1, 1]}
-        position={[(size?.height ?? 0) / 2 - 1, 0, -(size?.width ?? 0) / 2 + 1]}
-      >
-        {children}
-      </group>
+      <Grid
+        position={[0, -0.6, 0]}
+        args={[4096, 4096]}
+        cellColor={"#aaa"}
+        sectionColor={"#ccc"}
+      />
+      <Suspense fallback={null}>
+        {items.length && <Obstacles items={items} size={size} />}
+        <group
+          scale={[1, 1, 1]}
+          position={[
+            (size?.height ?? 0) / 2 - 1,
+            0,
+            -(size?.width ?? 0) / 2 + 1,
+          ]}
+        >
+          {children}
+        </group>
+      </Suspense>
     </>
   );
 }

src/components/Light.tsx

@@ -35,7 +35,7 @@ export function Light() {
         ref={light}
         color="#fff2d9"
         castShadow
-        shadow-bias={0.0001}
+        shadow-bias={-0.0001}
         shadow-mapSize={[2048 * 1.5, 2048 * 1.5]}
         intensity={4}
       />

src/components/Stage.tsx

@@ -19,7 +19,7 @@ export function Stage() {
         position: [0, 5, 10],
       }}
     >
-      <fog attach="fog" args={["#eff2f3", 0, 100]} />
+      <fog attach="fog" args={["#eff2f3", 20, 100]} />
       <color attach="background" args={["#afc3cc"]} />
       <Light />
       <Sky inclination={0.52} sunPosition={[100, 100, 50]} />

src/components/checkerMaterial.tsx

@@ -8,40 +8,42 @@ import {
   Texture,
 } from "three";
 
-export const checkerMaterial = memoize((scale: number = 1) => {
-  const map = new Texture();
-  const material = new MeshStandardMaterial({
-    map,
-    color: new Color(0xffffff),
-    roughness: 0.5,
-    roughnessMap: new Texture(),
-  });
-
-  // Setup texture tiling and filtering
-  map.wrapS = RepeatWrapping;
-  map.wrapT = RepeatWrapping;
-  map.magFilter = NearestFilter;
-  map.minFilter = NearestMipMapNearestFilter;
-
-  material.onBeforeCompile = (shader) => {
-    // Add varyings
-    shader.vertexShader =
-      `
+export const checkerMaterial = memoize(
+  (scale: number = 1, materialOptions = {}) => {
+    const map = new Texture();
+    const material = new MeshStandardMaterial({
+      color: new Color(0xffffff),
+      roughness: 0.5,
+      ...materialOptions,
+      map,
+      roughnessMap: new Texture(),
+    });
+
+    // Setup texture tiling and filtering
+    map.wrapS = RepeatWrapping;
+    map.wrapT = RepeatWrapping;
+    map.magFilter = NearestFilter;
+    map.minFilter = NearestMipMapNearestFilter;
+
+    material.onBeforeCompile = (shader) => {
+      // Add varyings
+      shader.vertexShader =
+        `
       varying vec3 vWorldPosition;
       varying vec3 vWorldNormal;
     ` +
-      shader.vertexShader.replace(
-        "#include <worldpos_vertex>",
-        `
+        shader.vertexShader.replace(
+          "#include <worldpos_vertex>",
+          `
         #include <worldpos_vertex>
         vWorldPosition = worldPosition.xyz;
         vWorldNormal = normalize(round(normalMatrix * normal));
       `
-      );
+        );
 
-    // Add uniforms and function
-    shader.fragmentShader =
-      `
+      // Add uniforms and function
+      shader.fragmentShader =
+        `
       varying vec3 vWorldPosition;
       varying vec3 vWorldNormal;
       uniform float uTileScale;
@@ -73,35 +75,37 @@ export const checkerMaterial = memoize((scale: number = 1) => {
       }
 
       float sampleWorld(sampler2D tex, vec3 worldPos, vec3 normal, float scale) {
-        return noise(vec3(floor(worldPos.x * 64.0), floor(worldPos.y * 64.0), floor(worldPos.z * 64.0)));
+        return noise(vec3(floor(worldPos.x * 64.0 * scale), floor(worldPos.y * 64.0 * scale), floor(worldPos.z * 64.0 * scale)));
 }
     ` + shader.fragmentShader;
 
-    // Replace default UV-based sampling
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "#include <map_fragment>",
-      `
+      // Replace default UV-based sampling
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "#include <map_fragment>",
+        `
         float fac = sampleWorld(map, vWorldPosition, vWorldNormal, uTileScale);
         float fac2 = sampleWorld(map, vec3(vWorldPosition.x+1.0, vWorldPosition.y+1.0, vWorldPosition.z+1.0), vWorldNormal, uTileScale);
-        diffuseColor *= 0.8 + fac * 0.05;
+        diffuseColor *= 0.8 + fac * 0.1;
       `
-    );
+      );
 
-    // Replace roughness map sampling
-    shader.fragmentShader = shader.fragmentShader.replace(
-      "#include <roughnessmap_fragment>",
-      `
+      // Replace roughness map sampling
+      shader.fragmentShader = shader.fragmentShader.replace(
+        "#include <roughnessmap_fragment>",
+        `
       float roughnessFactor = 0.5;
       #ifdef USE_ROUGHNESSMAP
-        roughnessFactor *= 0.6 + fac2 * 0.2;
+        roughnessFactor *= 0.6 + fac2 * 0.4;
       #endif
     `
-    );
+      );
 
-    // Uniform for tile scale
-    shader.uniforms.uTileScale = { value: scale };
-    material.userData.shader = shader;
-  };
+      // Uniform for tile scale
+      shader.uniforms.uTileScale = { value: scale };
+      material.userData.shader = shader;
+    };
 
-  return material;
-});
+    return material;
+  },
+  JSON.stringify
+);