Crop Circle Crew – draw crop circles with a UFO in three.js (~200k GPU-bent stalks, mobile)

Showcase
, , ,
1

Hi everyone! I made a small game where you are three tiny aliens in a flying saucer. You fly over a moonlit field and hold the tractor beam to press the crop flat, copying a glowing pattern before sunrise, without the farmer taking a photo of you. At dawn the camera rises into the sky to reveal your crop circle, and the morning newspaper writes about it.

cover_1920x1080
cover_1920x10801920×1080 693 KB

:play_button: Play (free, desktop and mobile): Crop Circle Crew – Play free online | Glowbit Games

There are 12 nights on 4 farms (wheat, lavender, canola, barley). There is a stake-and-rope tool for perfect rings, a wide and a narrow beam, watchers with flashlights and searchlights, and cows you can beam up. A Pattern Lab lets you design your own circles and share them as text codes.

Some technical bits

  • The crop is one big data texture: the field is a 256×256 mask that stores how flat each cell is and which way it was laid. The crop shader reads it in the vertex stage, so pressing the crop only means writing bytes into a DataTexture. No geometry gets rebuilt.
  • Up to ~200k instanced stalks, bent on the GPU: each stalk is an instance in chunked InstancedBufferGeometry, using a MeshStandardMaterial patched with onBeforeCompile. The vertex shader bends it by the laid direction, wind sway and the saucer’s downdraft. The instances in each chunk are shuffled, so lowering instanceCount thins distant chunks evenly as a cheap distance LOD.
  • The pattern guide is a hologram in the same shader: a second mask texture with the target pattern glows on top of the standing crop and the soil, so you can see where to fly.
  • Performance on integrated GPUs: the stalk count was not the main cost. Soft PCF shadows and MSAA on the half-float composer were. The stalks don’t receive shadows; the saucer’s shadow on the crop is a fake circle in the crop shader. That doubled the frame rate on an Intel iGPU. Medium and Low use SMAA instead of MSAA, and Auto quality moves between levels with hysteresis. Medium runs at about 68 fps and Low at about 118 fps on that iGPU at 1600×900.
  • Render-free simulation: the field mask, shapes, saucer and stake physics, watchers and their light cones, cows and scoring are plain TypeScript with no three.js. Unit tests and an autopilot bot run in Node, and the star goals come from the bot’s scores. The same bot flies the menu demo.
  • Look and sound: moonlit night that blends into dawn for the reveal, with postprocessing bloom, AgX tone mapping, vignette and film grain. All sound is Web Audio: saucer hum, beam, crop crunch, moos, barks, camera shutters and a tune for each farm. The JS is about 285 KB gzipped, with no texture or model files.

Stack: three.js r186, TypeScript, Vite, postprocessing.

I’d love to see your crop circles, and to hear how it runs on your devices!

1 Like