Creating Dynamic Terrain Deformation with React Three Fiber

On this tutorial, we’ll discover tips on how to dynamically deform terrain, a characteristic broadly utilized in fashionable video games. A while in the past, we realized about tips on how to create the PS1 jitter shader, taking a nostalgic journey into retro graphics. Transitioning from that retro vibe to cutting-edge methods has been thrilling to me, and I’m glad to see a lot curiosity in these matters.

This tutorial can be divided into two elements. Within the first half, we’ll concentrate on Dynamic Terrain Deformation, exploring tips on how to create and manipulate terrain interactively. Within the second half, we’ll take it a step additional by creating an limitless strolling zone utilizing the generated items, all whereas sustaining optimum efficiency.

Constructing Interactive Terrain Deformation Step by Step

After organising the scene, we’ll create a planeGeometry and apply the snow texture obtained from AmbientCG. To reinforce realism, we’ll enhance the displacementScale worth, making a extra dynamic and lifelike snowy surroundings. We’ll dive into CHUNKs later within the tutorial.

const [colorMap, normalMap, roughnessMap, aoMap, displacementMap] =
  useTexture([
    "/textures/snow/snow-color.jpg",
    "/textures/snow/snow-normal-gl.jpg",
    "/textures/snow/snow-roughness.jpg",
    "/textures/snow/snow-ambientocclusion.jpg",
    "/textures/snow/snow-displacement.jpg",
  ]);
 
 return <mesh
		rotation={[-Math.PI / 2, 0, 0]} // Rotate to make it horizontal
        place={[chunk.x * CHUNK_SIZE, 0, chunk.z * CHUNK_SIZE]}
	      >
          <planeGeometry
            args={[
              CHUNK_SIZE + CHUNK_OVERLAP * 2,
              CHUNK_SIZE + CHUNK_OVERLAP * 2,
              GRID_RESOLUTION,
              GRID_RESOLUTION,
            ]}
          />
        <meshStandardMaterial
          map={colorMap}
          normalMap={normalMap}
          roughnessMap={roughnessMap}
          aoMap={aoMap}
          displacementMap={displacementMap}
          displacementScale={2}
        />
      </mesh>
    ))}   

After creating the planeGeometry, we’ll discover the deformMesh operate—the core of this demo.

const deformMesh = useCallback(
  (mesh, level) => {
    if (!mesh) return;

    // Retrieve neighboring chunks across the level of deformation.
    const neighboringChunks = getNeighboringChunks(level, chunksRef);

    // Non permanent vector to carry vertex positions throughout calculations
    const tempVertex = new THREE.Vector3();

    // Array to maintain observe of geometries that require regular recomputation
    const geometriesToUpdate = [];

    // Iterate by means of every neighboring chunk to use deformations
    neighboringChunks.forEach((chunk) => {
      const geometry = chunk.geometry;

      // Validate that the chunk has legitimate geometry and place attributes
      if (!geometry || !geometry.attributes || !geometry.attributes.place)
        return;

      const positionAttribute = geometry.attributes.place;
      const vertices = positionAttribute.array;

      // Flag to find out if the present chunk has been deformed
      let hasDeformation = false;

      // Loop by means of every vertex within the chunk's geometry
      for (let i = 0; i < positionAttribute.depend; i++) {
        // Extract the present vertex's place from the array
        tempVertex.fromArray(vertices, i * 3);

        // Convert the vertex place from native to world coordinates
        chunk.localToWorld(tempVertex);

        // Calculate the gap between the vertex and the purpose of affect
        const distance = tempVertex.distanceTo(level);

        // Examine if the vertex is throughout the deformation radius
        if (distance < DEFORM_RADIUS) {
            // Calculate the affect of the deformation primarily based on distance.
            // The nearer the vertex is to the purpose, the better the affect.
            // Utilizing a cubic falloff for a easy transition.
          const affect = Math.pow(
            (DEFORM_RADIUS - distance) / DEFORM_RADIUS,
            3
          );

          // Calculate the vertical offset (y-axis) to use to the vertex.
          // This creates a melancholy impact that simulates influence or footprint.
          const yOffset = affect * 10;
          tempVertex.y -= yOffset * Math.sin((distance / DEFORM_RADIUS) * Math.PI);

          
          // Add a wave impact to the vertex's y-position.
          // This simulates ripples or disturbances brought on by the deformation.
          tempVertex.y += WAVE_AMPLITUDE * Math.sin(WAVE_FREQUENCY * distance);

          // Convert the modified vertex place again to native coordinates
          chunk.worldToLocal(tempVertex);

          // Replace the vertex place within the geometry's place array
          tempVertex.toArray(vertices, i * 3);

          // Mark that this chunk has undergone deformation
          hasDeformation = true;
        }
      }

      // If any vertex within the chunk was deformed, replace the geometry accordingly
      if (hasDeformation) {
        // Point out that the place attribute must be up to date
        positionAttribute.needsUpdate = true;

        // Add the geometry to the listing for batch regular recomputation
        geometriesToUpdate.push(geometry);

        // Save the deformation state for potential future use or persistence
        saveChunkDeformation(chunk);
      }
    });

     
     // After processing all neighboring chunks, recompute the vertex normals
     // for every affected geometry. This ensures that lighting and shading
     // precisely mirror the brand new geometry after deformation.
    if (geometriesToUpdate.size > 0) {
      geometriesToUpdate.forEach((geometry) => geometry.computeVertexNormals());
    }
  },
  [
    getNeighboringChunks, 
    chunksRef, 
    saveChunkDeformation, 
  ]
);

I added the “Add a refined wave impact for visible variation” half to this operate to deal with a difficulty that was limiting the pure look of the snow because the observe fashioned. The perimeters of the snow wanted to bulge barely. Right here’s what it seemed like earlier than I added it:

After creating the deformMesh operate, we’ll decide the place to make use of it to finish the Dynamic Terrain Deformation. Particularly, we’ll combine it into useFrame, deciding on the appropriate and left foot bones within the character animation and extracting their positions from matrixWorld.

useFrame((state, delta) => {
  // Different codes...

  // Get the bones representing the character's left and proper toes
  const leftFootBone = characterRef.present.getObjectByName("mixamorigLeftFoot");
  const rightFootBone = characterRef.present.getObjectByName("mixamorigRightFoot");

  if (leftFootBone) {
    // Get the world place of the left foot bone
    tempVector.setFromMatrixPosition(leftFootBone.matrixWorld);

    // Apply terrain deformation on the place of the left foot
    deformMesh(activeChunk, tempVector);
  }

  if (rightFootBone) {
    // Get the world place of the appropriate foot bone
    tempVector.setFromMatrixPosition(rightFootBone.matrixWorld);

    // Apply terrain deformation on the place of the appropriate foot
    deformMesh(activeChunk, tempVector);
  }

  // Different codes...
});

And there you’ve it: a easy, dynamic deformation in motion!

Limitless Strolling with CHUNKs

Within the code we’ve explored to this point, you may need observed the CHUNK elements. In easy phrases, we create snow blocks organized in a 3×3 grid. To make sure the character at all times stays within the middle, we take away the earlier CHUNKs primarily based on the path the character is shifting and generate new CHUNKs forward in the identical path. You possibly can see this course of in motion within the GIF beneath. Nonetheless, this technique launched a number of challenges.

Issues:

• Gaps seem on the joints between CHUNKs
• Vertex calculations are disrupted on the joints
• Tracks from the earlier CHUNK vanish immediately when transitioning to a brand new CHUNK

Options:

1. getChunkKey

// Generates a singular key for a piece primarily based on its present place.
// Makes use of globally accessible CHUNK_SIZE for calculations.
// Objective: Ensures every chunk might be uniquely recognized and managed in a Map.

const deformedChunksMapRef = useRef(new Map());

const getChunkKey = () =>
  `${Math.spherical(currentChunk.place.x / CHUNK_SIZE)},${Math.spherical(currentChunk.place.z / CHUNK_SIZE)}`;

2. saveChunkDeformation

// Saves the deformation state of the present chunk by storing its vertex positions.
// Objective: Preserves the deformation of a piece for later retrieval.
const saveChunkDeformation = () => {
  if (!currentChunk) return;

  // Generate the distinctive key for this chunk
  const chunkKey = getChunkKey();

  // Save the present vertex positions into the deformation map
  const place = currentChunk.geometry.attributes.place;
  deformedChunksMapRef.present.set(
    chunkKey,
    new Float32Array(place.array)
  );
};

3. loadChunkDeformation

// Restores the deformation state of the present chunk, if beforehand saved.
 // Objective: Ensures that deformed chunks retain their state when repositioned.
 
const loadChunkDeformation = () => {
  if (!currentChunk) return false;

  // Retrieve the distinctive key for this chunk
  const chunkKey = getChunkKey();

  // Get the saved deformation information for this chunk
  const savedDeformation = deformedChunksMapRef.present.get(chunkKey);

  if (savedDeformation) {
    const place = currentChunk.geometry.attributes.place;

    // Restore the saved vertex positions
    place.array.set(savedDeformation);
    place.needsUpdate = true;

    currentChunk.geometry.computeVertexNormals();
    return true;
  }
  return false;
};

4. getNeighboringChunks

// Finds chunks which can be near the present place.
// Objective: Limits deformation operations to solely related chunks, bettering efficiency.

const getNeighboringChunks = () => {
  return chunksRef.present.filter((chunk) => {
    // Calculate the gap between the chunk and the present place
    const distance = new THREE.Vector2(
      chunk.place.x - currentPosition.x,
      chunk.place.z - currentPosition.z
    ).size();

    // Embrace chunks throughout the deformation radius
    return distance < CHUNK_SIZE + DEFORM_RADIUS;
  });
};

5. recycleDistantChunks

// Recycles chunks which can be too removed from the character by resetting their deformation state.
// Objective: Prepares distant chunks for reuse, sustaining environment friendly useful resource utilization.

const recycleDistantChunks = () => {
  chunksRef.present.forEach((chunk) => {
    // Calculate the gap between the chunk and the character
    const distance = new THREE.Vector2(
      chunk.place.x - characterPosition.x,
      chunk.place.z - characterPosition.z
    ).size();

    // If the chunk is past the unload distance, reset its deformation
    if (distance > CHUNK_UNLOAD_DISTANCE) {
      const geometry = chunk.geometry;
      const originalPosition = geometry.userData.originalPosition;

      if (originalPosition) {
        // Reset vertex positions to their authentic state
        geometry.attributes.place.array.set(originalPosition);
        geometry.attributes.place.needsUpdate = true;

        // Recompute normals for proper lighting
        geometry.computeVertexNormals();
      }

      // Take away the deformation information for this chunk
      const chunkKey = getChunkKey(chunk.place.x, chunk.place.z);
      deformedChunksMapRef.present.delete(chunkKey);
    }
  });
};

With these features, we resolved the problems with CHUNKs, attaining the look we aimed for.

Conclusion

On this tutorial, we coated the fundamentals of making Dynamic Terrain Deformation utilizing React Three Fiber. From implementing sensible snow deformation to managing CHUNKs for limitless strolling zones, we explored some core methods and tackled frequent challenges alongside the best way.

Whereas this undertaking centered on the necessities, it offers a strong place to begin for constructing extra complicated options, resembling superior character controls or dynamic environments. The ideas of vertex manipulation and chunk administration are versatile and might be utilized to many different inventive initiatives.

Thanks for following alongside, and I hope this tutorial evokes you to create your individual interactive 3D experiences! When you’ve got any questions or suggestions, be happy to attain out me. Glad coding! 🎉

Credit