Runtime GUI

The runtime GUI is the fastest way to discover the configuration surface, tune a scene in real time and produce a configuration that can be moved into production code.

Workflow

  1. Open examples/basic.
  2. Call grassworks.createGUI().
  3. Tune the controls in real time.
  4. Use the generated/copyable configuration.
  5. Apply the final configuration with applyConfig().
js
grassworks.createGUI();

// After tuning: export/use the configuration
const finalConfig = grassworks.toJSON();
await grassworks.applyConfig(finalConfig);

GUI structure

The controls are organized as Grass, Appearance, Blade, Wind & Simulation, Variation, Interaction, LOD & Tiling and individual LOD levels.

Controls that do not apply to the active grass type are hidden. For example, the named preset selector is hidden for Billboard because the named preset library is Blade-only.

From experimentation to production

The GUI is an authoring surface, not a requirement for every deployed scene. Once a configuration is tuned, use toJSON() to inspect the resulting state and applyConfig() when you need to apply a finalized configuration programmatically.

Screenshot of the Grassworks GUI showing the folder hierarchy and a tuned grass configuration.