feat: enhance terrain rendering with biome map integration and color definitions

Author: gtanczyk

games/tribe2/src/components/game-world-controller.tsx

@@ -96,6 +96,7 @@ export const GameWorldController: React.FC<GameWorldControllerProps> = ({ mode,
         await renderer.initTerrain(
           webgpuCanvas,
           gameStateRef.current.heightMap,
+          gameStateRef.current.biomeMap,
           gameStateRef.current.mapDimensions,
           HEIGHT_MAP_RESOLUTION,
         );

games/tribe2/src/context/webgpu-renderer-context.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, ReactNode, useCallback, useRef } from 'react';
 import { Vector2D } from '../game/types/math-types';
+import { BiomeType } from '../game/types/world-types';
 import { Vector3D, WebGPUTerrainState } from '../game/types/rendering-types';
 import { initWebGPUTerrain, renderWebGPUTerrain } from '../game/renderer/webgpu-renderer';
 import { HEIGHT_SCALE, TERRAIN_DISPLACEMENT_FACTOR } from '../game/constants/rendering-constants';
@@ -8,6 +9,7 @@ interface WebGpuRendererContextType {
   initTerrain: (
     canvas: HTMLCanvasElement,
     heightMap: number[][],
+    biomeMap: BiomeType[][],
     mapDimensions: { width: number; height: number },
     cellSize: number,
     lighting?: { lightDir?: Vector3D; heightScale?: number; ambient?: number; displacementFactor?: number },
@@ -25,11 +27,12 @@ export const WebGpuRendererProvider: React.FC<{ children: ReactNode }> = ({ chil
     async (
       canvas: HTMLCanvasElement,
       heightMap: number[][],
+      biomeMap: BiomeType[][],
       mapDimensions: { width: number; height: number },
       cellSize: number,
       lighting?: { lightDir?: Vector3D; heightScale?: number; ambient?: number; displacementFactor?: number },
     ) => {
-      const gpuState = await initWebGPUTerrain(canvas, heightMap, mapDimensions, cellSize, lighting);
+      const gpuState = await initWebGPUTerrain(canvas, heightMap, biomeMap, mapDimensions, cellSize, lighting);
       webGpuStateRef.current = gpuState;
     },
     [],

games/tribe2/src/game/constants/rendering-constants.ts

@@ -24,6 +24,21 @@ export const WATER_FOAM_COLOR = { r: 0.9, g: 0.95, b: 1.0 };
 /** The width of the foam at the shoreline, as a normalized value (0-1). */
 export const WATER_FOAM_WIDTH = 0.03;
 
+/** The color of ground terrain. */
+export const GROUND_COLOR = { r: 0.4, g: 0.3, b: 0.2 };
+
+/** The color of sand terrain. */
+export const SAND_COLOR = { r: 0.8, g: 0.7, b: 0.5 };
+
+/** The color of grass terrain. */
+export const GRASS_COLOR = { r: 0.25, g: 0.6, b: 0.3 };
+
+/** The color of rock terrain. */
+export const ROCK_COLOR = { r: 0.5, g: 0.5, b: 0.5 };
+
+/** The color of snow terrain. */
+export const SNOW_COLOR = { r: 0.95, g: 0.98, b: 1.0 };
+
 // Viewport and Camera Constants
 /** The amount the zoom level changes per mouse scroll event. */
 export const ZOOM_SPEED = 0.1;

games/tribe2/src/game/renderer/shaders/terrain.wgsl

@@ -9,11 +9,20 @@ struct Uniforms {
   c2: vec4f,
   // c3: ambient, waterLevel, time, displacementFactor
   c3: vec4f,
+  // c4: GROUND.rgb, SAND.r
+  c4: vec4f,
+  // c5: SAND.gb, GRASS.rg
+  c5: vec4f,
+  // c6: GRASS.b, ROCK.rgb
+  c6: vec4f,
+  // c7: SNOW.rgb, padding
+  c7: vec4f,
 };
 
 @group(0) @binding(0) var<uniform> uniforms: Uniforms;
 @group(0) @binding(1) var heightTex: texture_2d<f32>;
 @group(0) @binding(2) var heightSampler: sampler;
+@group(0) @binding(3) var biomeTex: texture_2d<f32>;
 
 struct VSOut {
   @builtin(position) position: vec4f,
@@ -31,11 +40,47 @@ fn vs_main(@builtin(vertex_index) vid: u32) -> VSOut {
   return out;
 }
 
-fn base_color(h: f32) -> vec3f {
-  // Simple green gradient by height
-  let low = vec3f(0.05, 0.2, 0.08);
-  let high = vec3f(0.25, 0.6, 0.3);
-  return mix(low, high, clamp(h, 0.0, 1.0));
+// Decodes biome colors from the uniform buffer with interpolation
+// biomeValue is a normalized float [0, 1] from the biome texture
+fn getBiomeColor(biomeValue: f32) -> vec3f {
+  // Scale back to biome ID range [0, 4]
+  let scaledValue = biomeValue * 4.0;
+  
+  // Get integer biome IDs for interpolation
+  let biomeId0 = u32(floor(scaledValue));
+  let biomeId1 = u32(ceil(scaledValue));
+  let t = fract(scaledValue); // Interpolation factor
+  
+  // Get colors for both biomes
+  var color0: vec3f;
+  var color1: vec3f;
+  
+  if (biomeId0 == 0u) {
+    color0 = uniforms.c4.xyz; // Ground
+  } else if (biomeId0 == 1u) {
+    color0 = vec3f(uniforms.c4.w, uniforms.c5.x, uniforms.c5.y); // Sand
+  } else if (biomeId0 == 2u) {
+    color0 = vec3f(uniforms.c5.z, uniforms.c5.w, uniforms.c6.x); // Grass
+  } else if (biomeId0 == 3u) {
+    color0 = uniforms.c6.yzw; // Rock
+  } else {
+    color0 = uniforms.c7.xyz; // Snow
+  }
+  
+  if (biomeId1 == 0u) {
+    color1 = uniforms.c4.xyz; // Ground
+  } else if (biomeId1 == 1u) {
+    color1 = vec3f(uniforms.c4.w, uniforms.c5.x, uniforms.c5.y); // Sand
+  } else if (biomeId1 == 2u) {
+    color1 = vec3f(uniforms.c5.z, uniforms.c5.w, uniforms.c6.x); // Grass
+  } else if (biomeId1 == 3u) {
+    color1 = uniforms.c6.yzw; // Rock
+  } else {
+    color1 = uniforms.c7.xyz; // Snow
+  }
+  
+  // Interpolate between the two biome colors
+  return mix(color0, color1, t);
 }
 
 // Cartoon water effect - slow, peaceful, zoom-dependent
@@ -54,8 +99,6 @@ fn cartoon_water(worldPos: vec2f, depth: f32, time: f32, zoom: f32) -> vec4f {
   var waterColor = mix(shallowColor, deepColor, depthFactor);
 
   // Zoom-dependent detail level
-  // At low zoom (zoomed out), water is flat and simple
-  // At high zoom (zoomed in), water shows wave patterns
   let detailLevel = clamp((zoom - 0.5) / 2.5, 0.0, 1.0); // 0 at zoom=0.5, 1 at zoom=3.0
 
   if (detailLevel > 0.01) {
@@ -198,7 +241,10 @@ fn fs_main(@builtin(position) fragCoord: vec4f) -> @location(0) vec4f {
     let n_r = normalize(vec3f(-dzdx_r, -dzdy_r, 1.0));
     let ndl_r = max(dot(n_r, lightDir), 0.0);
     let lighting_r = ambient + (1.0 - ambient) * ndl_r;
-    let terrainColor = base_color(h_refracted) * lighting_r;
+
+    // Get biome color for refracted terrain with interpolation
+    let biomeValue_r = textureSampleLevel(biomeTex, heightSampler, refracted_uv, 0.0).x;
+    let terrainColor = getBiomeColor(biomeValue_r) * lighting_r;
 
     // Get cartoon water color
     let waterCol = cartoon_water(wrapped, waterDepth, time, zoom);
@@ -215,7 +261,8 @@ fn fs_main(@builtin(position) fragCoord: vec4f) -> @location(0) vec4f {
     return vec4f(finalColor, 1.0);
   } else if (waterDepth > -shorelineWidth) {
     // This fragment is just above water (wet shore)
-    let terrainColor = base_color(h) * lighting;
+    let biomeValue = textureSampleLevel(biomeTex, heightSampler, uv, 0.0).x;
+    let terrainColor = getBiomeColor(biomeValue) * lighting;
 
     // Calculate how close we are to water level
     let wetFactor = clamp(1.0 + (waterDepth / shorelineWidth), 0.0, 1.0);
@@ -227,7 +274,8 @@ fn fs_main(@builtin(position) fragCoord: vec4f) -> @location(0) vec4f {
     return vec4f(darkenedColor, 1.0);
   } else {
     // Above water - render terrain normally
-    let color = base_color(h) * lighting;
+    let biomeValue = textureSampleLevel(biomeTex, heightSampler, uv, 0.0).x;
+    let color = getBiomeColor(biomeValue) * lighting;
     return vec4f(color, 1.0);
   }
 }

games/tribe2/src/game/renderer/webgpu-renderer.ts

@@ -2,7 +2,15 @@ import terrainShaderWGSL from './shaders/terrain.wgsl?raw';
 import { Vector2D } from '../../game/types/math-types';
 import { WebGPUTerrainState, Vector3D } from '../types/rendering-types';
 import { WATER_LEVEL } from '../constants/world-constants';
-import { TERRAIN_DISPLACEMENT_FACTOR } from '../constants/rendering-constants';
+import {
+  TERRAIN_DISPLACEMENT_FACTOR,
+  GROUND_COLOR,
+  SAND_COLOR,
+  GRASS_COLOR,
+  ROCK_COLOR,
+  SNOW_COLOR,
+} from '../constants/rendering-constants';
+import { BiomeType } from '../types/world-types';
 
 function isWebGPUSupported() {
   return typeof navigator !== 'undefined' && 'gpu' in navigator;
@@ -23,9 +31,46 @@ function flattenHeightMapToR8(heightMap: number[][]): { data: Uint8Array; width:
   return { data, width: w, height: h };
 }
 
+// Flattens the biome map to a Uint8Array where each biome ID [0-4] is
+// normalized to the [0-255] range for use in an r8unorm texture.
+function flattenBiomeMapToR8Unorm(biomeMap: BiomeType[][]): { data: Uint8Array; width: number; height: number } {
+  const h = biomeMap.length;
+  const w = biomeMap[0]?.length ?? 0;
+  const data = new Uint8Array(w * h);
+  let i = 0;
+  for (let y = 0; y < h; y++) {
+    const row = biomeMap[y];
+    for (let x = 0; x < w; x++) {
+      let biomeValue = 0; // Default to GROUND
+      switch (row[x]) {
+        case BiomeType.GROUND:
+          biomeValue = 0;
+          break;
+        case BiomeType.SAND:
+          biomeValue = 1;
+          break;
+        case BiomeType.GRASS:
+          biomeValue = 2;
+          break;
+        case BiomeType.ROCK:
+          biomeValue = 3;
+          break;
+        case BiomeType.SNOW:
+          biomeValue = 4;
+          break;
+      }
+      // Normalize the value from [0, 4] to [0, 255] for r8unorm texture.
+      // The shader will receive this as a float in [0.0, 1.0].
+      data[i++] = Math.round((biomeValue / 4.0) * 255);
+    }
+  }
+  return { data, width: w, height: h };
+}
+
 export async function initWebGPUTerrain(
   canvas: HTMLCanvasElement,
   heightMap: number[][],
+  biomeMap: BiomeType[][],
   mapDimensions: { width: number; height: number },
   cellSize: number,
   lighting?: { lightDir?: Vector3D; heightScale?: number; ambient?: number; displacementFactor?: number },
@@ -52,6 +97,7 @@ export async function initWebGPUTerrain(
       { binding: 0, visibility: GPUShaderStage.FRAGMENT, buffer: { type: 'uniform' } },
       { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
       { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: { type: 'filtering' } },
+      { binding: 3, visibility: GPUShaderStage.FRAGMENT, texture: { sampleType: 'float' } },
     ],
   });
 
@@ -64,28 +110,43 @@ export async function initWebGPUTerrain(
     primitive: { topology: 'triangle-list' },
   });
 
-  // Uniform buffer (4 vec4 = 64 bytes)
-  const uniformBufferSize = 4 * 4 * 4;
+  // Uniform buffer (8 vec4 = 128 bytes)
+  const uniformBufferSize = 8 * 4 * 4;
   const uniformBuffer = device.createBuffer({
     size: uniformBufferSize,
     usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
   });
 
   // Height map texture
-  const { data, width: gridW, height: gridH } = flattenHeightMapToR8(heightMap);
+  const { data: heightData, width: gridW, height: gridH } = flattenHeightMapToR8(heightMap);
   const heightTexture = device.createTexture({
     size: { width: gridW, height: gridH },
     format: 'r8unorm',
     usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
   });
   device.queue.writeTexture(
     { texture: heightTexture },
-    data.buffer,
-    { offset: data.byteOffset, bytesPerRow: gridW, rowsPerImage: gridH },
+    heightData.buffer,
+    { offset: heightData.byteOffset, bytesPerRow: gridW, rowsPerImage: gridH },
     { width: gridW, height: gridH },
   );
   const heightTextureView = heightTexture.createView();
 
+  // Biome map texture
+  const { data: biomeData } = flattenBiomeMapToR8Unorm(biomeMap);
+  const biomeTexture = device.createTexture({
+    size: { width: gridW, height: gridH },
+    format: 'r8unorm',
+    usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
+  });
+  device.queue.writeTexture(
+    { texture: biomeTexture },
+    biomeData.buffer,
+    { offset: biomeData.byteOffset, bytesPerRow: gridW, rowsPerImage: gridH },
+    { width: gridW, height: gridH },
+  );
+  const biomeTextureView = biomeTexture.createView();
+
   const sampler = device.createSampler({
     addressModeU: 'repeat',
     addressModeV: 'repeat',
@@ -99,6 +160,7 @@ export async function initWebGPUTerrain(
       { binding: 0, resource: { buffer: uniformBuffer } },
       { binding: 1, resource: heightTextureView },
       { binding: 2, resource: sampler },
+      { binding: 3, resource: biomeTextureView },
     ],
   });
 
@@ -113,6 +175,8 @@ export async function initWebGPUTerrain(
     sampler,
     heightTexture,
     heightTextureView,
+    biomeTexture,
+    biomeTextureView,
     gridSize: { width: gridW, height: gridH },
     mapDimensions,
     cellSize,
@@ -158,7 +222,7 @@ export function renderWebGPUTerrain(
   const canvasWidth = canvas.width;
   const canvasHeight = canvas.height;
 
-  const u = new Float32Array(16);
+  const u = new Float32Array(32);
   // c0: center.x, center.y, zoom, cellSize
   u[0] = center.x;
   u[1] = center.y;
@@ -181,6 +245,28 @@ export function renderWebGPUTerrain(
   u[14] = time;
   u[15] = displacementFactor;
 
+  // c4-c7: Biome colors
+  // c4: GROUND.rgb, SAND.r
+  u[16] = GROUND_COLOR.r;
+  u[17] = GROUND_COLOR.g;
+  u[18] = GROUND_COLOR.b;
+  u[19] = SAND_COLOR.r;
+  // c5: SAND.gb, GRASS.rg
+  u[20] = SAND_COLOR.g;
+  u[21] = SAND_COLOR.b;
+  u[22] = GRASS_COLOR.r;
+  u[23] = GRASS_COLOR.g;
+  // c6: GRASS.b, ROCK.rgb
+  u[24] = GRASS_COLOR.b;
+  u[25] = ROCK_COLOR.r;
+  u[26] = ROCK_COLOR.g;
+  u[27] = ROCK_COLOR.b;
+  // c7: SNOW.rgb, padding
+  u[28] = SNOW_COLOR.r;
+  u[29] = SNOW_COLOR.g;
+  u[30] = SNOW_COLOR.b;
+  u[31] = 0.0;
+
   device.queue.writeBuffer(uniformBuffer, 0, u.buffer);
 
   const pass = encoder.beginRenderPass({

games/tribe2/src/game/types/rendering-types.ts

@@ -21,6 +21,8 @@ export interface WebGPUTerrainState {
   sampler: GPUSampler;
   heightTexture: GPUTexture;
   heightTextureView: GPUTextureView;
+  biomeTexture: GPUTexture;
+  biomeTextureView: GPUTextureView;
   gridSize: { width: number; height: number };
   mapDimensions: { width: number; height: number };
   cellSize: number; // world units per height texel (HEIGHT_MAP_RESOLUTION)