Three.js Terrain Scatter: Fix Floating, Then Fix Clumping
AI-assisted disclosure: Codex assisted with research, code and writing. Measurements, failure cases and limitations are retained from the original article. Originally published by Alicia on 2026-10-25: Digital Garden by Alicia . Putting an instance on the terrain and keeping it away from its neighbors are separate jobs. In this desktop test, ordinary downward raycasting and its BVH accelerated…
This report details the issues of floating terrain instances and their clumping in Three.js, focusing on tests conducted using the Three.js 0.186.1 and three-mesh-bvh 0.9.16 libraries. The experiments were performed on an 80 by 80 metre height field with 4,225 vertices and 8,192 triangles, using a Ryzen 9 9950X processor and an RTX 5070 Ti graphics card. The terrain was created in Houdini and exported to JSON format as a GLB file.
Two methods of placing instances on the terrain were compared: downward raycasting (both plain and BVH accelerated) and the MeshSurfaceSampler. The BVH accelerated raycasting method showed a significant reduction in placement time, with median CPU placement times of 2.5-10.2 milliseconds for 1,000 points and 10,000 points, compared to 218.0-2,047.9 milliseconds for plain raycasting. However, the BVH method did not improve the distribution of instances, as both methods still produced clumping.
The MeshSurfaceSampler, which samples the geometry's attributes, showed a median nearest-neighbor distance of 0.369 meters at 10,000 points, with a significant number of points having neighbors closer than 0.5 meters. This indicates that the sampler does not guarantee separation of instances on the terrain surface.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
