fix: overlap and texture wrapping

src/components/World.tsx

@@ -1,10 +1,17 @@
-import { RepeatWrapping, TextureLoader, Vector2, Vector3 } from "three";
+import {
+  ClampToEdgeWrapping,
+  RepeatWrapping,
+  TextureLoader,
+  Vector2,
+  Vector3,
+} from "three";
 import { ImprovedNoise } from "three/examples/jsm/Addons.js";
 
 export function World(props: { position: Vector2; seed: number }): JSX.Element {
   const size = 100;
   const scale = 3;
   const amplitude = 30;
+  const overlap = 0.5; // Amount of overlap between chunks
 
   const noise = (x: number, y: number): number => {
     const noise = new ImprovedNoise();
@@ -12,22 +19,29 @@ export function World(props: { position: Vector2; seed: number }): JSX.Element {
   };
 
   const canvas = document.createElement("canvas");
-  canvas.width = size;
-  canvas.height = size;
+  canvas.width = size + overlap * 2;
+  canvas.height = size + overlap * 2;
   const context = canvas.getContext("2d");
   if (!context) throw new Error("Canvas context not found");
-  const imageData = context.getImageData(0, 0, size, size);
+
+  const offsetX = -overlap + props.position.x;
+  const offsetY = -overlap + props.position.y;
+
+  const imageData = context.getImageData(
+    0,
+    0,
+    size + overlap * 2,
+    size + overlap * 2
+  );
   const data = imageData.data;
-  for (let x = 0; x < size; x++) {
-    for (let y = 0; y < size; y++) {
+
+  for (let x = 0; x < size + overlap * 2; x++) {
+    for (let y = 0; y < size + overlap * 2; y++) {
       const n =
-        noise(
-          (x + props.position.x) / (size / scale),
-          (y + props.position.y) / (size / scale)
-        ) *
+        noise((x + offsetX) / (size / scale), (y + offsetY) / (size / scale)) *
           127 +
         127;
-      const id = (x + y * size) * 4;
+      const id = (x + y * (size + overlap * 2)) * 4;
       data[id] = n;
       data[id + 1] = n;
       data[id + 2] = n;
@@ -36,8 +50,7 @@ export function World(props: { position: Vector2; seed: number }): JSX.Element {
   }
   context.putImageData(imageData, 0, 0);
   const displacementMap = new TextureLoader().load(canvas.toDataURL());
-  displacementMap.wrapS = displacementMap.wrapT = RepeatWrapping;
-  displacementMap.wrapT = displacementMap.wrapS = RepeatWrapping;
+  displacementMap.wrapS = displacementMap.wrapT = ClampToEdgeWrapping;
 
   const grassTexture = new TextureLoader().load("./texture_grass.jpg");
   grassTexture.wrapS = grassTexture.wrapT = RepeatWrapping;
@@ -53,10 +66,9 @@ export function World(props: { position: Vector2; seed: number }): JSX.Element {
       >
         <planeGeometry
           attach="geometry"
-          args={[100, 100, 100, 100]}
+          args={[100, 100, 100 + overlap * 2, 100 + overlap * 2]}
         ></planeGeometry>
         <meshStandardMaterial
-          wireframe
           toneMapped={false}
           attach="material"
           map={grassTexture}