Color Maps

A color map is an RGB image that colors the grass by position across the terrain. It works for both Blade and Billboard grass.

Source and mapping

colorMap accepts a path or URL and Grassworks loads it internally. JPEG/JPG, PNG and WebP are supported, and the image is treated as sRGB color. A square 1:1 aspect ratio is recommended.

Mapping follows the same terrain-space UV mapping as the Grass Map: the image covers the terrain bounds, so the physical terrain dimensions do not need to match the image pixel dimensions.

js
const grassworks = await Grassworks.create({
  camera, scene, renderer, terrain,
  tileSize: 25,
  maxDistance: 200,
  colorMap: "/assets/color-map.png",
  grassParams: { baseColorDarkness: 0.3 }
});

How the color is applied

  • The map color is applied from the base to the tip of each grass element.
  • A small amount (about 15%) of variationColor is mixed in, so colorVariationIntensity and colorNoiseScale still add natural variation on top of the map.
  • baseColorDarkness controls how dark the base is relative to the map color: 1 keeps the full map color, 0 makes the base black. The default is 0.5.
  • On Billboard grass, useTextureColor: true makes the atlas texture color override the color map.

No color map

If you do not provide a colorMap, the normal procedural colors (baseColor, tipColor and variationColor) are used. baseColorDarkness only has an effect when a colorMap is set.

Starting from the default green

Pass colorMap: true to enable the color map without an image. The grass starts as flat green (#4a8f1e), which is a good starting point for painting a color map from scratch with the Terrain Painter.

js
const grassworks = await Grassworks.create({
  camera, scene, renderer, terrain,
  tileSize: 25,
  maxDistance: 200,
  colorMap: true,
  painter: { enabled: true }
});