Build a single-page web toy called "Beach Two": a real-time 3D scene rendered as pixel art — a beach volleyball court on a floating island with the sea in front. three.js r160 via import map (jsDelivr), English UI, original design only (no real brands).
RENDERING PIPELINE
- Orthographic camera at an isometric angle (≈31° down, azimuth π/4, rotatable in 90° steps with easing; drag sideways or buttons; wheel/pinch zoom 0.7–2.8). Fit the island outline plus palm tops into the screen area left free by the UI; snap the camera so the world origin lands on a whole art pixel.
- Render into a small half-float WebGLRenderTarget (nearest filtering, depth texture), ~480×300 art pixels at pixel size 3, no anti-aliasing.
- A mirrored reflection pass first (scene.scale.y = −1 about the water plane, hiding the sand, water and particles) into its own target; the water samples it in screen space.
- Post pass: texelFetch whole-pixel upscale, depth outlines (neighbour > 0.5 m nearer → darken ×0.5), nearest-of-~65 palette colours in OKLab (L weighted ×1.35), optional 4×4 Bayer dither, empty depth = page background. "Raw 3D" toggle shows the full-res MSAA render. Pixel size slider 2–6, palette/dither/outline checkboxes.
- Palette: foam whites and greys, sand from dry to wet, sea from shallow turquoise to deep blue, sky blues and night, sunset peach/coral/rose/violet, palm greens, team coral and teal, yellow/blue accents, skin and wood, lamp and fire yellows.
WORLD
- Island 33×26 m with rounded corners, cut like a cake: a sand heightfield grid pressed into the outline (dunes at the back, flat court, slope under the sea along a gently curving shoreline), coloured face by face with sand speckle and a wet band, smooth analytic normals. The cut side shows sand bands, and where the sea is a wall of water in depth layers; soil and rock below.
- Sea: a grid of waves updated every frame (rolling swells, chop, shoaling near shore), vertex colours by depth, foam where crests break in the shallows and along the swash line; shader mixes its own tinted colour with the mirrored beach (slight wobble) and adds sun/moon glints from facet normals. Buoys on a rope bob on the waves.
- Court 16×8 m with blue straps, net (alpha grid texture, white tapes, red-white antennae, padded posts, guy ropes).
- Palms with ringed curved trunks and drooping fronds swaying with the wind; dune grass; a boardwalk; a snack kiosk with striped awning, sign, lit hatch at night, surfboards, cooler and stools; benches; a beach shower; a lifeguard tower with a wind flag; striped umbrellas, towels, a deck chair, a sandcastle, a rowboat, a fire pit with logs; string lights on posts; two floodlights.
- Footprints and ball marks as instanced dents in the sand that fade back over time.
PEOPLE
- Box rigs (~18 boxes) posed every frame with two-bone IK: run on sand, ready stance, bump platform, setting window, spike (cock–whip–follow-through, airborne), serve with toss, block with arms up, sprawling dive, celebrate and high five, hold/throw the ball. Players have caps, glasses, buns.
- Beachgoers: one sunbathing on a towel, one in a deck chair, two standing who clap/cheer on points, a kid patting a sandcastle, two sitting by the fire. Gulls circle, flapping or gliding, casting shadows.
GAME (rally scoring to 15, win by 2, sets counted)
- Ball physics in substeps: gravity, quadratic air drag, wind with gusts, float-serve wobble; net crossing → tape dribble-over or drops into the net; posts; antennae fault; landing on sand with a puff and short roll; floating and drifting in the sea.
- AI: predict the ball's real flight; for the side it comes down on, pick who can reach the contact height in time (zones break ties); types pass/dig, set (or bump set), attack (or free ball), dive when slightly late; leave balls clearly going out; occasional "seam" where both leave the serve.
- Shot aiming by iterative simulation (lob to an apex, or a drive at a speed with bisection on launch angle plus drift correction), allowing for ~70% of the wind. Pass errors grow with incoming speed, wind and lateness; shanks on hard balls.
- Attack: run-up timed so the jump peaks at contact; candidate targets (line/cross deep, cut shots, pokes) scored by distance from the defender and block, with a taste for spiking; net-clearance check, small chances of long or net errors.
- Defence: one blocker jumps with the hitter in his lane (stuff, soft touch counting as first touch, or off the fingers), one deep defender shading away from the block.
- Serves: lobbed floats or hard flat serves; small error rates. Between rallies the nearest player fetches the ball (anywhere, even in the sea), lobs it to the server, who walks to the line.
UI
- Lit pixel-font scoreboard (CORAL vs TEAL, set number, status, serve dots, sets won). Rail: Time (Day/Sunset/Night), Wind (Calm/Breeze/Gusty + live m/s), Attack style (Auto/Spike/Shots), New match, Pause, View. Click the sand to call where the next attack goes (marker X). Light/dark themes; stacked layout on phones; "How it's drawn" panel. Prompt by @vib3coded , posted on X on 2026-10-22. x.com/vib3coded/status/2113300152677027929 . Copies include this credit. 