Projects

prompt-ocean — Type a Sea, Watch It Exist

Active
Next.jsTypeScriptThree.jsGLSLOllama (llama3.2)
Product demo

Problem

Generative interfaces usually hand a model the wheel and hope. Let an LLM write shader code or scene state directly and one hallucination breaks the render — which is why most text-to-3D demos snap between presets instead of responding continuously.

Business Impact

A clean demonstration of the pattern generative interfaces should use: let the model choose parameters inside a validated contract, and let deterministic code own the rendering. The result degrades to a rules engine instead of failing, which is what makes it shippable.

System Approach

  • Seven summed Gerstner (trochoidal) waves in a vertex shader — horizontal crest displacement gives storm seas their heaving shape
  • Deep-water dispersion relation so long waves physically outrun short ones
  • Finite-difference normals, fresnel plus Blinn specular, crest foam, and subsurface glow in the fragment shader
  • Prompt goes to a local LLM if present, else a regex rules engine — both emit the same clamped parameter JSON
  • Every parameter validated and clamped before it reaches the renderer
  • Sky, sun, and stars driven per-frame from the same parameters with no React re-renders
  • Prompts morph the ocean continuously rather than snapping between presets

Key Decisions & Trade-offs

  • Model emits numbers, never code — the blast radius of a bad generation is a strange-looking sea, not a broken page
  • Publish the parameter contract so any model or service can drive the renderer
  • Rules-engine fallback so the project runs with zero keys and zero setup
  • Gerstner over sine waves; sine waves cannot make a storm look like a storm
  • Drive the atmosphere outside React so prompt changes never cost a re-render

Current Status

Public and open source at github.com/rohitguta2432/prompt-ocean. Shader, morphing parameter interpolation, atmosphere response, LLM interpretation, and the rules-engine fallback all working. Runs with npm install and npm run dev, no API key required.

Roadmap

  • Shareable permalinks that encode a sea's parameters
  • Buoyant objects riding the wave field
  • Wider parameter contract — swell direction, wind fetch

What I'd Improve Next

  • Level-of-detail on the wave mesh for low-end GPUs
  • A parameter inspector so viewers can see what the prompt produced

Explore More