@zephyr3d/scene 0.9.26 → 0.10.0

package/dist/scene/terrain-cm/grass.js

@@ -1,18 +1,20 @@
-import { Disposable, DRef, AABB, ClipState, nextPowerOf2, DWeakRef } from '@zephyr3d/base';
-import '../../values.js';
-import '../../render/render_queue.js';
+import { Disposable, DRef, AABB, Vector3, Vector4, ClipState, DWeakRef, nextPowerOf2 } from '@zephyr3d/base';
+import { RENDER_PASS_TYPE_SHADOWMAP } from '../../values.js';
 import { getDevice } from '../../app/api.js';
+import { warnUnsupported } from '../../utility/unsupported.js';
+import '../../render/render_queue.js';
 import { Primitive } from '../../render/primitive.js';
 import '@zephyr3d/device';
 import '../../material/shader/helper.js';
 import '../../material/lambert.js';
 import '../../material/blinn.js';
 import '../../material/unlit.js';
+import '../../material/meshmaterial.js';
 import '../../material/particle.js';
 import '../../material/subsurfaceprofile.js';
-import '../../material/skin.js';
+import '../../material/sssprofile.js';
+import '../../material/sss.js';
 import '../../material/eye.js';
-import '../../material/meshmaterial.js';
 import '../../material/hair.js';
 import '../../material/hairstrand.js';
 import '../../material/grassmaterial.js';
@@ -29,25 +31,60 @@ import '../../render/lightpass.js';
 import '../../render/sky.js';
 import '../../render/clipmap.js';
 import '../../render/envlight.js';
+import '../../render/lod.js';
 import '../../render/dualdepthpeeling_oit.js';
 import '../../shaders/atmosphere.js';
+import '../../render/water_interaction.js';
 import '../../render/rendergraph/scene_render_context.js';
+import '../../render/sdf/scene_sdf.js';
+import '../../render/sdf/global_sdf.js';
+import '../../render/gi/voxelize_pass.js';
 import { ClipmapGrassMaterial } from './grassmaterial.js';
+import { GrassGpuPlacement, grassHash, GrassOcclusionMode, GRASS_CULL_PLANES } from './grass_gpu.js';
+import { DirectionalLight } from '../light.js';
+import { ClipmapBladeGrassMaterial, createBladeIndices, BLADE_LOD_INDEX_COUNTS } from './bladegrassmaterial.js';
 
 const INSTANCE_BYTES = 4 * 4;
 /** Number of placement cells along each axis of a grass tile */ const TILE_CELLS = 64;
 /** Default number of placement cells per density map texel along each axis */ const DEFAULT_CELLS_PER_TEXEL = 2;
 const MAX_CELLS_PER_TEXEL = 8;
+/** Default distance from the camera beyond which grass is not drawn */ const DEFAULT_DRAW_DISTANCE = 150;
+/** Default fraction of blades kept at the draw distance */ const DEFAULT_FAR_DENSITY = 0.25;
+/**
+ * Number of the nearest cascades of the sun's shadow map procedural blades cast shadows into.
+ * Farther cascades have texels too coarse for single blades.
+ */ const GRASS_SHADOW_CASCADES = 2;
+/** Default shape and clumping of procedural blades, see GrassBladeShape */ const DEFAULT_BLADE_SHAPE = [
+    1.5,
+    0.3,
+    0.08,
+    0.2,
+    0.25,
+    0.2,
+    0.15,
+    0.1,
+    1.9,
+    0.48,
+    0.2,
+    0.3,
+    0.2,
+    0.5,
+    0.15,
+    80
+];
+/**
+ * Default width of procedural blades
+ * @internal
+ */ const DEFAULT_BLADE_WIDTH = 0.08;
 /**
- * Deterministic 2D integer hash, returns a value in [0, 1).
- * Grass placement derives everything (jitter, survival threshold, rotation)
- * from this hash so that blade positions are stable across edits and reloads.
- */ function hashCell(x, z, seed) {
-    let h = Math.imul(x, 0x27d4eb2d) ^ Math.imul(z, 0x165667b1) ^ Math.imul(seed, 0x9e3779b9) | 0;
-    h = Math.imul(h ^ h >>> 15, 0x85ebca6b);
-    h = Math.imul(h ^ h >>> 13, 0xc2b2ae35);
-    h ^= h >>> 16;
-    return (h >>> 0) / 4294967296;
+ * Default height of procedural blades
+ * @internal
+ */ const DEFAULT_BLADE_HEIGHT = 1.5;
+function distanceSqToAABB(x, y, z, aabb) {
+    const dx = Math.max(aabb.minPoint.x - x, 0, x - aabb.maxPoint.x);
+    const dy = Math.max(aabb.minPoint.y - y, 0, y - aabb.maxPoint.y);
+    const dz = Math.max(aabb.minPoint.z - z, 0, z - aabb.maxPoint.z);
+    return dx * dx + dy * dy + dz * dz;
 }
 /**
  * Grass blade instance buffer for a single tile
@@ -121,10 +158,15 @@ const MAX_CELLS_PER_TEXEL = 8;
  * @public
  */ class GrassLayer extends Disposable {
     static _indexBuffer = new DRef();
+    static _bladeIndexBuffer = new DRef();
+    static _bladeVertexBuffer = new DRef();
     static _cullAABB = new AABB();
+    static _cameraPos = new Vector3();
     static _visibleTiles = [];
     static _instanceData = new Float32Array(TILE_CELLS * TILE_CELLS * 4);
+    _kind;
     _material;
+    _bladeShape;
     _seed;
     _bladeWidth;
     _bladeHeight;
@@ -137,19 +179,33 @@ const MAX_CELLS_PER_TEXEL = 8;
     _tilesX;
     _tilesZ;
     _numBlades;
+    _drawDistance;
+    _farDensity;
+    /** Set on WebGPU with indirect draw: blades are placed on the GPU instead of in CPU tiles */ _gpu;
+    /** Number of shadow maps the blades were placed for by the last updatePerCamera() call */ _numShadowTargets;
     /**
    * Creates an instance of GrassLayer
    * @param terrain - Clipmap terrain object
    * @param seed - Seed for deterministic blade placement, usually the layer index
    * @param bladeWidth - Grass blade width
    * @param bladeHeight - Grass blade height
-   * @param albedoMap - Albedo texture for the blade
-   */ constructor(terrain, seed, bladeWidth, bladeHeight, albedoMap){
+   * @param albedoMap - Albedo texture for the blade, card layers only
+   * @param kind - Textured cards, or procedural blades (drawn on WebGPU only)
+   */ constructor(terrain, seed, bladeWidth, bladeHeight, albedoMap, kind = 'card'){
         super();
-        this._material = new DRef(new ClipmapGrassMaterial(terrain));
-        this._material.get().albedoTexture = albedoMap ?? null;
-        if (albedoMap) {
-            this._material.get().setTextureSize(albedoMap.width, albedoMap.height);
+        this._kind = kind;
+        this._bladeShape = new Float32Array(DEFAULT_BLADE_SHAPE);
+        if (kind === 'blade') {
+            const material = new ClipmapBladeGrassMaterial(terrain);
+            material.colorMap = albedoMap ?? null;
+            this._material = new DRef(material);
+        } else {
+            const material = new ClipmapGrassMaterial(terrain);
+            material.albedoTexture = albedoMap ?? null;
+            if (albedoMap) {
+                material.setTextureSize(albedoMap.width, albedoMap.height);
+            }
+            this._material = new DRef(material);
         }
         this._seed = seed;
         this._bladeWidth = bladeWidth;
@@ -163,27 +219,402 @@ const MAX_CELLS_PER_TEXEL = 8;
         this._tilesX = 0;
         this._tilesZ = 0;
         this._numBlades = 0;
+        this._drawDistance = 0;
+        this._farDensity = 1;
+        this._numShadowTargets = 0;
+        if (!GrassGpuPlacement.isSupported()) {
+            this._gpu = null;
+            if (kind === 'blade') {
+                warnUnsupported("Procedural grass blades (grass layer kind 'blade')", 'WebGPU with indirect draw', 'blade layers are not drawn');
+            }
+        } else if (kind === 'blade') {
+            this._gpu = new GrassGpuPlacement('blade', GrassLayer._getBladeVertexBuffer(), GrassLayer._getBladeIndexBuffer(), BLADE_LOD_INDEX_COUNTS);
+        } else {
+            this._gpu = new GrassGpuPlacement('card', this._baseVertexBuffer.get(), GrassLayer._getIndexBuffer());
+        }
+        if (kind === 'blade') {
+            this._bladeShape[0] = bladeHeight;
+            this._bladeShape[2] = bladeWidth;
+            this.bladeMaterial.lodDistance = this._bladeShape[15];
+        }
+        this._gpu?.setDensity(this._densityWidth, this._densityHeight, this._densityMap);
+        this.drawDistance = DEFAULT_DRAW_DISTANCE;
+        this.farDensity = DEFAULT_FAR_DENSITY;
         this.updateTileGrid();
     }
+    /**
+   * Distance from the camera beyond which blades of this layer are not drawn. Blades shrink
+   * into the ground over the last quarter of it. Zero draws the layer at any distance.
+   */ get drawDistance() {
+        return this._drawDistance;
+    }
+    set drawDistance(val) {
+        val = Math.max(0, Number(val) || 0);
+        if (val !== this._drawDistance) {
+            this._drawDistance = val;
+            this._material.get().setDrawDistance(val);
+        }
+    }
+    /**
+   * Fraction of the blades of this layer still drawn at the draw distance, 1 to draw them all.
+   *
+   * From a quarter of the draw distance on, blades thin out towards this fraction, each leaving
+   * at its own fixed distance, and the remaining ones widen to keep the ground covered. Saves
+   * most of the distant grass geometry where blades are placed on the GPU (WebGPU); elsewhere
+   * the dropped blades are still drawn, only shrunk to nothing. Has no effect without a draw
+   * distance, nor on blade layers, which thin out by their detail levels (see
+   * {@link GrassLayer.lodDistance}).
+   */ get farDensity() {
+        return this._farDensity;
+    }
+    set farDensity(val) {
+        val = Math.min(1, Math.max(0.01, Number(val) || 0));
+        if (val !== this._farDensity) {
+            this._farDensity = val;
+            this._material.get().setFarDensity(val);
+        }
+    }
+    /** Kind of the blades of this layer, fixed at creation */ get kind() {
+        return this._kind;
+    }
     /** @internal */ updateMaterial() {
         this._material.get().uniformChanged();
     }
     /**
-   * Sets the albedo texture of grass blades in this layer
+   * Sets the albedo texture of grass blades in this layer: the card texture of card layers, the
+   * color map of blade layers (see {@link GrassLayer.colorMap})
    * @param albedoMap - Albedo texture to set
    */ setAlbedoMap(albedoMap) {
-        this._material.get().albedoTexture = albedoMap;
-        if (albedoMap) {
-            this._material.get().setTextureSize(albedoMap.width, albedoMap.height);
+        const material = this._material.get();
+        if (material instanceof ClipmapGrassMaterial) {
+            material.albedoTexture = albedoMap;
+            if (albedoMap) {
+                material.setTextureSize(albedoMap.width, albedoMap.height);
+            }
+        } else {
+            material.colorMap = albedoMap;
         }
     }
     /**
    * Gets the albedo texture of grass blades in this layer
-   * @returns - Albedo texture of grass blades in this layer
+   * @returns - The card texture of card layers, the color map of blade layers
    */ getAlbedoMap() {
-        return this._material.get().albedoTexture;
+        const material = this._material.get();
+        return material instanceof ClipmapGrassMaterial ? material.albedoTexture : material.colorMap;
+    }
+    /** @internal */ get bladeMaterial() {
+        const material = this._material.get();
+        return material instanceof ClipmapBladeGrassMaterial ? material : null;
+    }
+    /** @internal */ setShape(index, value) {
+        if (Number.isFinite(value)) {
+            this._bladeShape[index] = value;
+        }
+    }
+    /**
+   * How much blade heights vary around the layer's blade height, as a fraction of it.
+   * Blade layers only.
+   */ get heightRandomness() {
+        return this._bladeShape[1];
+    }
+    set heightRandomness(val) {
+        this.setShape(1, Math.min(1, Math.max(0, val)));
+    }
+    /** How much blade widths vary around the layer's blade width, as a fraction of it. Blade layers only. */ get widthRandomness() {
+        return this._bladeShape[3];
+    }
+    set widthRandomness(val) {
+        this.setShape(3, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How far the blades lean over: 0 stands them upright, 1 lays their tips on the ground.
+   * Blade layers only.
+   */ get tilt() {
+        return this._bladeShape[4];
+    }
+    set tilt(val) {
+        this.setShape(4, Math.min(1, Math.max(0, val)));
+    }
+    /** How much the lean varies from blade to blade. Blade layers only. */ get tiltRandomness() {
+        return this._bladeShape[5];
+    }
+    set tiltRandomness(val) {
+        this.setShape(5, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How much the blades arch: 0 keeps them straight, higher values bow the middle up so the tips
+   * droop. Blade layers only.
+   */ get bend() {
+        return this._bladeShape[6];
+    }
+    set bend(val) {
+        this.setShape(6, Math.min(1, Math.max(-1, val)));
+    }
+    /** How much the arch varies from blade to blade. Blade layers only. */ get bendRandomness() {
+        return this._bladeShape[7];
+    }
+    set bendRandomness(val) {
+        this.setShape(7, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * Typical size of a clump of blades, in world units. Blades of a clump share their height,
+   * direction and color, so the field breaks up into patches this big. Blade layers only.
+   */ get clumpSize() {
+        return this._bladeShape[8];
+    }
+    set clumpSize(val) {
+        this.setShape(8, Math.max(0.01, val));
+    }
+    /**
+   * How much the height changes from clump to clump: 0 keeps every patch the same height,
+   * higher values give taller and shorter patches. Blade layers only.
+   */ get clumpHeightVariation() {
+        return this._bladeShape[9];
+    }
+    set clumpHeightVariation(val) {
+        this.setShape(9, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How much the blades of a clump gather toward its center: 0 spreads them evenly, 1 bunches
+   * them into tufts. Blade layers only.
+   */ get clumpPull() {
+        return this._bladeShape[10];
+    }
+    set clumpPull(val) {
+        this.setShape(10, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How much the blades of a clump lean the same way: 0 lets each blade face its own random way,
+   * 1 combs the whole patch in one direction. Blade layers only.
+   */ get clumpSameDirection() {
+        return this._bladeShape[11];
+    }
+    set clumpSameDirection(val) {
+        this.setShape(11, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How much the blades lean out from the center of their clump, so each patch splays open like a
+   * tuft. Blade layers only.
+   */ get clumpFaceAway() {
+        return this._bladeShape[12];
+    }
+    set clumpFaceAway(val) {
+        this.setShape(12, Math.min(1, Math.max(0, val)));
+    }
+    /**
+   * How much the brightness changes from clump to clump, giving the field a patchy look.
+   * Blade layers only.
+   */ get clumpColorVariation() {
+        return this.bladeMaterial?.clumpColorVariation ?? 0;
+    }
+    set clumpColorVariation(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.clumpColorVariation = val;
+        }
+    }
+    /**
+   * Optional color texture of the blades: V runs from the root (0) to the tip (1), U picks a
+   * column per clump. Replaces the root and tip colors when set. Blade layers only.
+   */ get colorMap() {
+        return this.bladeMaterial?.colorMap ?? null;
+    }
+    set colorMap(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.colorMap = val;
+        }
+    }
+    /**
+   * How much the ambient light darkens toward the root, where the neighboring blades hide the
+   * sky: 0 lights the whole blade evenly, 1 leaves the root black. Blade layers only.
+   */ get rootOcclusion() {
+        return this.bladeMaterial?.rootOcclusion ?? 0;
+    }
+    set rootOcclusion(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.rootOcclusion = val;
+        }
+    }
+    /**
+   * How much the blades narrow toward the tip: 0 keeps them wide to the end, 1 narrows them evenly
+   * to a point. Blade layers only.
+   */ get taper() {
+        return this.bladeMaterial?.taper ?? 0;
+    }
+    set taper(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.taper = val;
+        }
+    }
+    /**
+   * Spends more of each blade's vertices near the tip, where it curves most. 1 spaces them
+   * evenly; higher values give smoother drooping tips. Blade layers only.
+   */ get tipDetail() {
+        return this.bladeMaterial?.tipDetail ?? 1;
+    }
+    set tipDetail(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.tipDetail = val;
+        }
+    }
+    /**
+   * How much the blade normals tilt outward across the width, so flat blades shade as if
+   * curved. 0 shades them flat. Blade layers only.
+   */ get roundness() {
+        return this.bladeMaterial?.roundness ?? 0;
+    }
+    set roundness(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.roundness = val;
+        }
+    }
+    /**
+   * How much blades seen edge-on widen toward the viewer, keeping fields full from low
+   * angles. 0 disables it. Blade layers only.
+   */ get viewThickening() {
+        return this.bladeMaterial?.viewThickening ?? 0;
+    }
+    set viewThickening(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.viewThickening = val;
+        }
+    }
+    /**
+   * Distance at which the blades start shading as one surface per clump, which calms the
+   * glitter of distant fields. Blade layers only.
+   */ get farNormalStart() {
+        return this.bladeMaterial?.farNormalStart ?? 0;
+    }
+    set farNormalStart(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.farNormalStart = val;
+        }
+    }
+    /**
+   * Distance beyond which the blades shade fully as one surface per clump. Blade layers only.
+   */ get farNormalEnd() {
+        return this.bladeMaterial?.farNormalEnd ?? 0;
+    }
+    set farNormalEnd(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.farNormalEnd = val;
+        }
+    }
+    /**
+   * How dull the highlights of distant blades get, reached at the far normal end distance. Blade layers only.
+   */ get farRoughness() {
+        return this.bladeMaterial?.farRoughness ?? 0;
+    }
+    set farRoughness(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.farRoughness = val;
+        }
+    }
+    /**
+   * Minimum width of a blade on screen, in pixels: distant blades are widened to it instead of
+   * thinning below a pixel, which makes them flicker. Larger values calm the flicker more but make
+   * distant fields look thicker. 0 disables it. Blade layers only.
+   */ get minScreenWidth() {
+        return this.bladeMaterial?.minScreenWidth ?? 0;
+    }
+    set minScreenWidth(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.minScreenWidth = val;
+        }
+    }
+    /**
+   * How much the wind turns the blades to lean downwind, per unit of wind push: 0 keeps their own
+   * directions, higher values comb the field along the wind. Blade layers only.
+   */ get windFacing() {
+        return this._bladeShape[13];
+    }
+    set windFacing(val) {
+        this.setShape(13, Math.min(4, Math.max(0, val)));
+    }
+    /**
+   * How far the wind lays the blades over, per unit of wind push: 0 leaves them standing, higher
+   * values flatten them in strong gusts.
+   */ get windLean() {
+        return this._material.get().windLean;
+    }
+    set windLean(val) {
+        this._material.get().windLean = val;
+    }
+    /** How far the blade tips bob in the wind, as a fraction of their height per unit of wind push */ get swayAmplitude() {
+        return this._material.get().swayAmplitude;
+    }
+    set swayAmplitude(val) {
+        const material = this._material.get();
+        material.swayAmplitude = val;
+        this.setShape(14, material.swayAmplitude);
+    }
+    /**
+   * Distance from the camera at which blades switch to their low detail level: a quarter as many
+   * blades, each four times as wide and with fewer vertices, blending in over the last quarter of this
+   * distance. 0 keeps every blade at high detail up to the draw distance. Blade layers only.
+   */ get lodDistance() {
+        return this._bladeShape[15];
     }
-    /** How many grass blades are currently generated in this layer */ get numBlades() {
+    set lodDistance(val) {
+        val = Math.max(0, Number(val) || 0);
+        this.setShape(15, val);
+        const material = this.bladeMaterial;
+        if (material) {
+            material.lodDistance = val;
+        }
+    }
+    /** How fast the blades bob in the wind, in radians per second */ get swaySpeed() {
+        return this._material.get().swaySpeed;
+    }
+    set swaySpeed(val) {
+        this._material.get().swaySpeed = val;
+    }
+    /** Color at the root of the blades. Blade layers only. */ get rootColor() {
+        return this.bladeMaterial?.rootColor ?? Vector4.one();
+    }
+    set rootColor(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.rootColor = val;
+        }
+    }
+    /** Color at the tip of the blades. Blade layers only. */ get tipColor() {
+        return this.bladeMaterial?.tipColor ?? Vector4.one();
+    }
+    set tipColor(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.tipColor = val;
+        }
+    }
+    /**
+   * Color of the light the blades let through when lit from behind, strongest at the tips, so a
+   * field glows against a low sun. Black lets no light through. Blade layers only.
+   */ get transmissionColor() {
+        return this.bladeMaterial?.transmissionColor ?? Vector4.zero();
+    }
+    set transmissionColor(val) {
+        const material = this.bladeMaterial;
+        if (material) {
+            material.transmissionColor = val;
+        }
+    }
+    /**
+   * How many grass blades are currently generated in this layer.
+   *
+   * Only counts the CPU placement path. Where blades are placed on the GPU (WebGPU) they are
+   * generated around the camera every frame and this stays 0.
+   */ get numBlades() {
         return this._numBlades;
     }
     /**
@@ -237,6 +668,13 @@ const MAX_CELLS_PER_TEXEL = 8;
    * @param maxTexelX - Maximum x texel of the region (exclusive)
    * @param maxTexelZ - Maximum z texel of the region (exclusive)
    */ updateDensityRegion(minTexelX, minTexelZ, maxTexelX, maxTexelZ) {
+        if (this._kind === 'blade' && !this._gpu) {
+            return;
+        }
+        if (this._gpu) {
+            this._gpu.updateDensityRegion(this._densityMap, this._densityWidth, Math.max(0, minTexelX), Math.max(0, minTexelZ), Math.min(this._densityWidth, maxTexelX), Math.min(this._densityHeight, maxTexelZ));
+            return;
+        }
         const k = this._cellsPerTexel;
         // expand by one texel to cover the bilinear sampling footprint
         const cx0 = Math.max(0, (minTexelX - 1) * k);
@@ -265,6 +703,13 @@ const MAX_CELLS_PER_TEXEL = 8;
         this._tiles.clear();
         this._numBlades = 0;
         this.updateTileGrid();
+        if (this._gpu) {
+            this._gpu.setDensity(this._densityWidth, this._densityHeight, this._densityMap);
+            return;
+        }
+        if (this._kind === 'blade') {
+            return;
+        }
         for(let tz = 0; tz < this._tilesZ; tz++){
             for(let tx = 0; tx < this._tilesX; tx++){
                 this.generateTile(tx, tz);
@@ -291,10 +736,16 @@ const MAX_CELLS_PER_TEXEL = 8;
         if (width !== this._bladeWidth || height !== this._bladeHeight) {
             this._bladeWidth = width;
             this._bladeHeight = height;
+            if (this._kind === 'blade') {
+                this._bladeShape[0] = height;
+                this._bladeShape[2] = width;
+                return;
+            }
             this._baseVertexBuffer.set(this.createBaseVertexBuffer(this._bladeWidth, this._bladeHeight));
             for (const tile of this._tiles.values()){
                 tile.setBaseVertexBuffer(this._baseVertexBuffer.get());
             }
+            this._gpu?.setBaseVertexBuffer(this._baseVertexBuffer.get());
         }
     }
     /** @internal */ updateTileGrid() {
@@ -354,14 +805,15 @@ const MAX_CELLS_PER_TEXEL = 8;
         let count = 0;
         for(let cz = cz0; cz < cz1; cz++){
             for(let cx = cx0; cx < cx1; cx++){
-                const u = (cx + hashCell(cx, cz, seed)) / cw;
-                const v = (cz + hashCell(cx, cz, seed + 1)) / ch;
-                if (this.sampleDensity(u, v) > hashCell(cx, cz, seed + 2)) {
-                    const angle = hashCell(cx, cz, seed + 3) * Math.PI * 2;
+                const u = (cx + grassHash(cx, cz, seed)) / cw;
+                const v = (cz + grassHash(cx, cz, seed + 1)) / ch;
+                if (this.sampleDensity(u, v) > grassHash(cx, cz, seed + 2)) {
+                    const angle = grassHash(cx, cz, seed + 3) * Math.PI * 2;
                     data[count * 4 + 0] = u;
                     data[count * 4 + 1] = v;
-                    data[count * 4 + 2] = Math.sin(angle);
-                    data[count * 4 + 3] = Math.cos(angle);
+                    data[count * 4 + 2] = angle;
+                    // Density LOD hash, see ClipmapGrassMaterial
+                    data[count * 4 + 3] = grassHash(cx, cz, seed + 4);
                     count++;
                 }
             }
@@ -405,6 +857,22 @@ const MAX_CELLS_PER_TEXEL = 8;
         }
         return this._indexBuffer.get();
     }
+    /** @internal */ static _getBladeIndexBuffer() {
+        if (!this._bladeIndexBuffer.get()) {
+            this._bladeIndexBuffer.set(getDevice().createIndexBuffer(createBladeIndices()));
+        }
+        return this._bladeIndexBuffer.get();
+    }
+    /**
+   * Procedural blades read nothing from their vertex buffer, but a draw still needs a vertex
+   * layout, which one vertex establishes
+   * @internal
+   */ static _getBladeVertexBuffer() {
+        if (!this._bladeVertexBuffer.get()) {
+            this._bladeVertexBuffer.set(getDevice().createVertexBuffer('position_f32x3', new Float32Array(3)));
+        }
+        return this._bladeVertexBuffer.get();
+    }
     /** @internal */ createBaseVertexBuffer(bladeWidth, bladeHeight) {
         const device = getDevice();
         const r = bladeWidth * 0.5;
@@ -478,7 +946,50 @@ const MAX_CELLS_PER_TEXEL = 8;
             'tex0_f32x2'
         ], vertices);
     }
+    /**
+   * Places the blades seen from a camera on the GPU path; nothing to do on the CPU one.
+   * @param shadowCullPlanes - For each shadow map the blades cast shadows into, the planes
+   *   bounding where its casters can be (see GrassRenderer); blade layers only
+   * @param shadowFade - View depths over which the shadow casting blades thin out
+   * @internal
+   */ updatePerCamera(camera, terrain, occlusionMode, shadowCullPlanes, shadowFade) {
+        if (!this._gpu) {
+            return;
+        }
+        const wind = terrain.scene?.env.wind.shaderParams ?? null;
+        const place = (target, mode, planes, fade)=>this._gpu.generate(camera, terrain, this._seed, this._cellsPerTexel, this._drawDistance, this._bladeWidth, this._bladeHeight, mode, this._farDensity, this._bladeShape, wind, target, planes, fade);
+        place(0, occlusionMode, null, null);
+        // Target i + 1 holds the casters of shadow map i. Blades hidden behind the terrain from the
+        // camera still cast shadows, so these skip the occlusion culling.
+        const numShadowTargets = this._kind === 'blade' ? shadowCullPlanes.length : 0;
+        for(let i = 0; i < numShadowTargets; i++){
+            place(i + 1, GrassOcclusionMode.Off, shadowCullPlanes[i], shadowFade);
+        }
+        this._gpu.trimTargets(numShadowTargets + 1);
+        this._numShadowTargets = numShadowTargets;
+    }
+    /**
+   * Draws the shadow casters of the shadow map the blades were placed for by the last
+   * updatePerCamera() call
+   * @param shadowMap - Index of the shadow map
+   * @internal
+   */ drawShadow(ctx, shadowMap) {
+        if (shadowMap < this._numShadowTargets) {
+            this.drawGpu(ctx, shadowMap + 1);
+        }
+    }
+    /** @internal */ setOcclusionDebug(val) {
+        this._material.get().occlusionDebug = val;
+    }
     /** @internal */ draw(ctx, region, minY, maxY) {
+        if (this._kind === 'blade' && !this._gpu) {
+            return;
+        }
+        if (this._gpu) {
+            this.drawGpu(ctx, 0);
+            return;
+        }
+        const wind = ctx.scene?.env.wind ?? null;
         const visible = GrassLayer._visibleTiles;
         visible.length = 0;
         const camera = ctx.camera;
@@ -489,6 +1000,10 @@ const MAX_CELLS_PER_TEXEL = 8;
         const rz = region.y;
         const rw = region.z - region.x;
         const rh = region.w - region.y;
+        const cameraPos = camera.getWorldPosition(GrassLayer._cameraPos);
+        const maxDistSq = this._drawDistance > 0 ? this._drawDistance * this._drawDistance : Infinity;
+        // The wind can lay the cards over by up to their height
+        const windPad = wind && wind.strength > 0 ? this._bladeHeight : 0;
         for (const [key, tile] of this._tiles){
             const tx = key % this._tilesX;
             const tz = (key - tx) / this._tilesX;
@@ -496,8 +1011,11 @@ const MAX_CELLS_PER_TEXEL = 8;
             const v0 = tz * TILE_CELLS / cellsH;
             const u1 = Math.min(1, (tx + 1) * TILE_CELLS / cellsW);
             const v1 = Math.min(1, (tz + 1) * TILE_CELLS / cellsH);
-            cullAABB.minPoint.setXYZ(rx + u0 * rw, minY, rz + v0 * rh);
-            cullAABB.maxPoint.setXYZ(rx + u1 * rw, maxY, rz + v1 * rh);
+            cullAABB.minPoint.setXYZ(rx + u0 * rw - windPad, minY, rz + v0 * rh - windPad);
+            cullAABB.maxPoint.setXYZ(rx + u1 * rw + windPad, maxY, rz + v1 * rh + windPad);
+            if (distanceSqToAABB(cameraPos.x, cameraPos.y, cameraPos.z, cullAABB) > maxDistSq) {
+                continue;
+            }
             const clipState = camera.clipMask ? cullAABB.getClipStateWithFrustumMask(camera.frustum, camera.clipMask) : cullAABB.getClipStateWithFrustum(camera.frustum);
             if (clipState !== ClipState.NOT_CLIPPED) {
                 visible.push(tile);
@@ -506,15 +1024,41 @@ const MAX_CELLS_PER_TEXEL = 8;
         if (visible.length === 0) {
             return;
         }
-        this._material.get().apply(ctx);
-        for(let pass = 0; pass < this._material.get().numPasses; pass++){
-            this._material.get().bind(ctx.device, pass);
+        const material = this._material.get();
+        material.prepareDraw(wind);
+        material.apply(ctx);
+        for(let pass = 0; pass < material.numPasses; pass++){
+            material.bind(ctx.device, pass);
             for (const tile of visible){
                 tile.draw();
             }
         }
         visible.length = 0;
     }
+    /** Draws the blades placed on the GPU into a target, see GrassGpuPlacement */ drawGpu(ctx, target) {
+        // From the scene, not ctx.env: the depth pass clears ctx.env, and the depth prepass and the
+        // light pass must bend the grass by the same wind or the light pass's equal depth test
+        // rejects it
+        const wind = ctx.scene?.env.wind ?? null;
+        const gpu = this._gpu;
+        const material = this._material.get();
+        if (material instanceof ClipmapBladeGrassMaterial) {
+            const instances = gpu.getInstanceBuffer(target);
+            if (!instances) {
+                return;
+            }
+            material.setInstanceBuffer(instances, gpu.getLowListBase(target));
+            // The camera the blades were placed for, also in the shadow map passes
+            material.prepareDraw(ctx.camera, wind, ctx.renderPass.type === RENDER_PASS_TYPE_SHADOWMAP ? 0 : ctx.renderHeight);
+        } else {
+            material.prepareDraw(wind);
+        }
+        material.apply(ctx);
+        for(let pass = 0; pass < material.numPasses; pass++){
+            material.bind(ctx.device, pass);
+            gpu.draw(target);
+        }
+    }
     /** @internal */ onDispose() {
         super.onDispose();
         this._material.dispose();
@@ -523,14 +1067,43 @@ const MAX_CELLS_PER_TEXEL = 8;
         }
         this._tiles.clear();
         this._baseVertexBuffer.dispose();
+        this._gpu?.dispose();
     }
 }
 /**
  * Grass renderer for clipmap terrain
  * @public
  */ class GrassRenderer extends Disposable {
+    static _lightDir = new Vector3();
+    static _forward = new Vector3();
+    static _eye = new Vector3();
+    static _center = new Vector3();
+    static _tmp = new Vector3();
+    static _edge0 = new Vector3();
+    static _edge1 = new Vector3();
+    static _normal = new Vector3();
+    static _corners = Array.from({
+        length: 8
+    }, ()=>new Vector3());
+    static _faceDots = [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0
+    ];
+    static _facePlane = new Float32Array(4);
+    static _shadowCullPlanes = [];
     _terrain;
     _layers;
+    _occlusionCulling;
+    _occlusionDebug;
+    _suspendOcclusionCulling;
+    _castShadow;
+    _shadowFadeFraction;
+    /** View depths over which the blades casting shadows thin out, see calcShadowCullPlanes */ _shadowFade;
+    /** The light whose shadow map casters the blades were last placed for */ _shadowLight;
     /**
    * Creates an instance of GrassRenderer
    * @param terrain - Clipmap terrain object
@@ -538,12 +1111,226 @@ const MAX_CELLS_PER_TEXEL = 8;
         super();
         this._terrain = new DWeakRef(terrain);
         this._layers = [];
+        this._occlusionCulling = true;
+        this._occlusionDebug = false;
+        this._suspendOcclusionCulling = false;
+        this._castShadow = true;
+        this._shadowFadeFraction = 0.5;
+        this._shadowFade = null;
+        this._shadowLight = new DWeakRef();
+    }
+    /**
+   * Whether to skip grass hidden behind the terrain itself (WebGPU only).
+   *
+   * Tested against the terrain height field every frame, so it never culls grass that is
+   * visible, but it does not see occluders other than the terrain.
+   */ get occlusionCulling() {
+        return this._occlusionCulling;
+    }
+    set occlusionCulling(val) {
+        this._occlusionCulling = !!val;
+    }
+    /**
+   * Draws the grass the terrain occlusion culling would skip in red instead of skipping it
+   */ get occlusionDebug() {
+        return this._occlusionDebug;
+    }
+    set occlusionDebug(val) {
+        this._occlusionDebug = !!val;
+        for (const layer of this._layers){
+            layer.setOcclusionDebug(this._occlusionDebug);
+        }
+    }
+    /**
+   * Pauses the terrain occlusion culling while the height map is being edited, since the
+   * height pyramid it relies on is only rebuilt afterwards.
+   * @internal
+   */ get suspendOcclusionCulling() {
+        return this._suspendOcclusionCulling;
+    }
+    set suspendOcclusionCulling(val) {
+        this._suspendOcclusionCulling = !!val;
     }
     /** @internal */ updateMaterial() {
         for (const layer of this._layers){
             layer.updateMaterial();
         }
     }
+    /**
+   * Whether procedural blades cast shadows from the sun into the nearest cascades of its shadow
+   * map (WebGPU only). Also needs the terrain to cast shadows.
+   */ get castShadow() {
+        return this._castShadow;
+    }
+    set castShadow(val) {
+        this._castShadow = !!val;
+    }
+    /**
+   * Fraction of the last shadow cascade the blades cast shadows into over which their shadows
+   * fade out toward its far end, blade by blade. 0 ends them on a line at the far end.
+   */ get shadowFadeFraction() {
+        return this._shadowFadeFraction;
+    }
+    set shadowFadeFraction(val) {
+        this._shadowFadeFraction = Math.min(1, Math.max(0, Number(val) || 0));
+    }
+    /** @internal */ updatePerCamera(camera) {
+        const terrain = this._terrain.get();
+        if (terrain) {
+            const mode = !this._occlusionCulling || this._suspendOcclusionCulling ? GrassOcclusionMode.Off : this._occlusionDebug ? GrassOcclusionMode.Debug : GrassOcclusionMode.Cull;
+            const shadowCullPlanes = this.calcShadowCullPlanes(camera, terrain);
+            for (const layer of this._layers){
+                layer.updatePerCamera(camera, terrain, mode, shadowCullPlanes, this._shadowFade);
+            }
+        }
+    }
+    /**
+   * Culling planes of the blades casting shadows into each of the nearest cascades of the sun's
+   * shadow map, and remembers the sun as the light the blades were placed for.
+   */ calcShadowCullPlanes(camera, terrain) {
+        this._shadowLight.set(null);
+        this._shadowFade = null;
+        const scene = terrain.scene;
+        const sun = scene ? DirectionalLight.getSunLight(scene) : null;
+        if (!this._castShadow || !terrain.castShadow || !sun || !sun.castShadow || !GrassGpuPlacement.isSupported() || !this._layers.some((layer)=>layer.kind === 'blade')) {
+            return [];
+        }
+        this._shadowLight.set(sun);
+        const distances = sun.shadow.getCascadeDistances(camera);
+        const numCascades = Math.min(GRASS_SHADOW_CASCADES, distances.length - 1);
+        // The blades thin out over the far part of the last cascade they cast shadows into, so the
+        // shadowed ground does not end on a line at its far split
+        const fadeEnd = distances[numCascades];
+        const fadeStart = fadeEnd - (fadeEnd - distances[numCascades - 1]) * this._shadowFadeFraction;
+        this._shadowFade = fadeEnd > fadeStart ? [
+            fadeStart,
+            fadeEnd
+        ] : null;
+        // Direction the light travels in
+        const lightDir = GrassRenderer._lightDir;
+        lightDir.set(sun.directionAndCutoff.xyz());
+        lightDir.inplaceNormalize();
+        const m = camera.worldMatrix;
+        // Camera forward, the view axis the split distances are measured along
+        const forward = GrassRenderer._forward.setXYZ(-m.m02, -m.m12, -m.m22).inplaceNormalize();
+        const eye = camera.getWorldPosition(GrassRenderer._eye);
+        const perspective = camera.isPerspective();
+        const nearCorners = camera.frustum.corners;
+        const corners = GrassRenderer._corners;
+        const center = GrassRenderer._center;
+        const tmp = GrassRenderer._tmp;
+        const result = [];
+        for(let i = 0; i < numCascades; i++){
+            // Corners of the slice, indexed as the frustum corners: x << 2 | y << 1 | far. Each lies on
+            // the ray through the matching near plane corner, at the split distance along the view axis.
+            center.setXYZ(0, 0, 0);
+            for(let c = 0; c < 8; c++){
+                const near = nearCorners[c & 6];
+                const d = distances[i + (c & 1)];
+                Vector3.sub(near, eye, tmp);
+                const depth = Vector3.dot(tmp, forward);
+                if (perspective) {
+                    Vector3.add(eye, Vector3.scale(tmp, d / depth, tmp), corners[c]);
+                } else {
+                    Vector3.add(near, Vector3.scale(forward, d - depth, tmp), corners[c]);
+                }
+                Vector3.add(center, corners[c], center);
+            }
+            center.scaleBy(1 / 8);
+            // Faces of the slice: the four corners sharing one bit, normals pointing inward
+            const faceDots = GrassRenderer._faceDots;
+            const planes = GrassRenderer._shadowCullPlanes[i] ??= new Float32Array(GRASS_CULL_PLANES * 4);
+            let numPlanes = 0;
+            const addPlane = (a, b, c)=>{
+                if (numPlanes < GRASS_CULL_PLANES) {
+                    if (GrassRenderer.planeThrough(a, b, c, center, planes, numPlanes * 4)) {
+                        numPlanes++;
+                    }
+                }
+            };
+            for(let face = 0; face < 6; face++){
+                const bit = 1 << (face >> 1);
+                const side = face & 1 ? bit : 0;
+                const others = [
+                    0,
+                    1,
+                    2,
+                    3
+                ].map((k)=>{
+                    // The two free bits of the face, in order
+                    const free = [
+                        1,
+                        2,
+                        4
+                    ].filter((b)=>b !== bit);
+                    return side | (k & 1 ? free[0] : 0) | (k & 2 ? free[1] : 0);
+                });
+                GrassRenderer.planeThrough(corners[others[0]], corners[others[1]], corners[others[3]], center, GrassRenderer._facePlane, 0);
+                const facePlane = GrassRenderer._facePlane;
+                faceDots[face] = facePlane[0] * lightDir.x + facePlane[1] * lightDir.y + facePlane[2] * lightDir.z;
+                // Faces the light travels away from, or along, bound the swept slice
+                if (faceDots[face] <= 0 && numPlanes < GRASS_CULL_PLANES) {
+                    planes.set(facePlane, numPlanes * 4);
+                    numPlanes++;
+                }
+            }
+            // Silhouette edges: shared by a face kept and a face dropped. Two faces are adjacent when
+            // they fix different corner bits; their edge is the two corners with both bits fixed.
+            for(let fa = 0; fa < 6; fa++){
+                for(let fb = fa + 1; fb < 6; fb++){
+                    const bitA = 1 << (fa >> 1);
+                    const bitB = 1 << (fb >> 1);
+                    const keptA = faceDots[fa] <= 0;
+                    const keptB = faceDots[fb] <= 0;
+                    if (bitA === bitB || keptA === keptB) {
+                        continue;
+                    }
+                    const fixed = (fa & 1 ? bitA : 0) | (fb & 1 ? bitB : 0);
+                    const freeBit = 7 & ~bitA & ~bitB;
+                    const a = corners[fixed];
+                    const b = corners[fixed | freeBit];
+                    // The third point extends the edge along the light, scaled by the edge length for
+                    Vector3.add(a, Vector3.scale(lightDir, Vector3.distance(a, b), tmp), tmp);
+                    addPlane(a, b, tmp);
+                }
+            }
+            // The rest are planes everything is inside of
+            for(let k = numPlanes; k < GRASS_CULL_PLANES; k++){
+                planes.set([
+                    0,
+                    0,
+                    0,
+                    1e30
+                ], k * 4);
+            }
+            result.push(planes);
+        }
+        return result;
+    }
+    /**
+   * Writes the plane through three points, normal turned toward an inside point, as (a, b, c, d)
+   * at an offset of an array
+   * @returns false if the points are degenerate
+   */ static planeThrough(p0, p1, p2, inside, out, offset) {
+        const e0 = Vector3.sub(p1, p0, GrassRenderer._edge0);
+        const e1 = Vector3.sub(p2, p0, GrassRenderer._edge1);
+        const n = Vector3.cross(e0, e1, GrassRenderer._normal);
+        const len = n.magnitude;
+        if (len < 1e-12) {
+            return false;
+        }
+        n.scaleBy(1 / len);
+        let d = -Vector3.dot(n, p0);
+        if (Vector3.dot(n, inside) + d < 0) {
+            n.scaleBy(-1);
+            d = -d;
+        }
+        out[offset] = n.x;
+        out[offset + 1] = n.y;
+        out[offset + 2] = n.z;
+        out[offset + 3] = d;
+        return true;
+    }
     /** How many grass blades */ get numGrassBlades() {
         return this._layers.reduce((sum, layer)=>sum + layer.numBlades, 0);
     }
@@ -561,10 +1348,12 @@ const MAX_CELLS_PER_TEXEL = 8;
    * Adds a grass layer
    * @param bladeWidth - Width of grass blades in this layer
    * @param bladeHeight - Height of grass blades in this layer
-   * @param albedoMap - Albedo texture of grass blades in this layer
+   * @param albedoMap - Albedo texture of grass blades in this layer, card layers only
+   * @param kind - Textured cards (default), or procedural blades drawn on WebGPU only
    * @returns Index of the added grass layer
-   */ addLayer(bladeWidth, bladeHeight, albedoMap) {
-        const layer = new GrassLayer(this._terrain.get(), this._layers.length, bladeWidth, bladeHeight, albedoMap);
+   */ addLayer(bladeWidth, bladeHeight, albedoMap, kind = 'card') {
+        const layer = new GrassLayer(this._terrain.get(), this._layers.length, bladeWidth, bladeHeight, albedoMap, kind);
+        layer.setOcclusionDebug(this._occlusionDebug);
         this._layers.push(layer);
         return this._layers.length - 1;
     }
@@ -588,6 +1377,44 @@ const MAX_CELLS_PER_TEXEL = 8;
         }
     }
     /**
+   * Gets the draw distance of the grass layer at given index
+   * @param layer - Index of the grass layer
+   * @returns Distance from the camera beyond which the layer is not drawn, 0 for unlimited
+   */ getDrawDistance(layer) {
+        return this._layers[layer]?.drawDistance ?? 0;
+    }
+    /**
+   * Sets the draw distance of the grass layer at given index
+   * @param layer - Index of the grass layer
+   * @param distance - Distance from the camera beyond which the layer is not drawn, 0 for unlimited
+   */ setDrawDistance(layer, distance) {
+        const grassLayer = this._layers[layer];
+        if (grassLayer) {
+            grassLayer.drawDistance = distance;
+        } else {
+            console.error(`Invalid grass layer: ${layer}`);
+        }
+    }
+    /**
+   * Gets the fraction of blades kept at the draw distance for the grass layer at given index
+   * @param layer - Index of the grass layer
+   * @returns Fraction of blades drawn at the draw distance, see GrassLayer.farDensity
+   */ getFarDensity(layer) {
+        return this._layers[layer]?.farDensity ?? 1;
+    }
+    /**
+   * Sets the fraction of blades kept at the draw distance for the grass layer at given index
+   * @param layer - Index of the grass layer
+   * @param farDensity - Fraction of blades drawn at the draw distance, see GrassLayer.farDensity
+   */ setFarDensity(layer, farDensity) {
+        const grassLayer = this._layers[layer];
+        if (grassLayer) {
+            grassLayer.farDensity = farDensity;
+        } else {
+            console.error(`Invalid grass layer: ${layer}`);
+        }
+    }
+    /**
    * Gets width of the grass blades in the grass layer at given index
    * @param layer - Index of the grass layer
    * @returns Width of the grass blades in the layer
@@ -615,6 +1442,17 @@ const MAX_CELLS_PER_TEXEL = 8;
         }
     }
     /** @internal */ draw(ctx) {
+        if (ctx.renderPass.type === RENDER_PASS_TYPE_SHADOWMAP) {
+            // Only into the cascades of the light the blades were placed for
+            const light = ctx.renderPass.light;
+            if (light && light === this._shadowLight.get()) {
+                const cascade = ctx.shadowMapInfo?.get(light)?.cascadeIndex ?? 0;
+                for (const layer of this._layers){
+                    layer.drawShadow(ctx, cascade);
+                }
+            }
+            return;
+        }
         const bv = this._terrain.get().getWorldBoundingVolume().toAABB();
         const minY = bv.minPoint.y;
         const maxY = bv.maxPoint.y;
@@ -625,11 +1463,12 @@ const MAX_CELLS_PER_TEXEL = 8;
     onDispose() {
         super.onDispose();
         this._terrain.dispose();
+        this._shadowLight.dispose();
         for (const layer of this._layers){
             layer.dispose();
         }
     }
 }
 
-export { GrassInstances, GrassLayer, GrassRenderer };
+export { DEFAULT_BLADE_HEIGHT, DEFAULT_BLADE_WIDTH, GrassInstances, GrassLayer, GrassRenderer };
 //# sourceMappingURL=grass.js.map