A complete grass system for Three.js and WebGPU, built for dense environments with terrain-aware placement, dynamic movement, and scalable detail.
const grassworks = await Grassworks.create({
camera,
scene,
renderer,
terrain,
tileSize: 25,
maxDistance: 200
});That's it. Three.js Grassworks takes care of the rest.
Everything you need to create realistic and stylized grass environments in Three.js.
Extend grass across large environments without covering your entire world with a massive grass mesh. Grassworks uses a dynamic tiled system that keeps the grass field centered around the camera, making expansive Three.js environments practical and scalable.
Grassworks is designed for rendering dense, detailed grass in real-time Three.js scenes. Distance-based visibility, configurable LODs, and optimized grass geometry give you control over how much detail your scene renders as the environment grows.
Start with grass inspired by real-world species including Kentucky Bluegrass, Perennial Ryegrass, Tall Fescue, and more, or explore stylized presets for creative environments. Switch between distinct grass looks without building your material and geometry configuration from scratch.
Choose between two fundamentally different approaches to rendering grass. Use detailed blade-based grass when geometry and close-up quality matter, or switch to billboard grass when you need a lighter solution for covering larger areas.
Grassworks understands the terrain beneath your grass, allowing it to follow slopes, elevation changes, and uneven surfaces naturally. Terrain data is prepared automatically so you can integrate grass into existing Three.js environments without manually conforming it to the surface.
Bring your grass to life with procedural wind movement that can be tuned to your scene. Control wind direction, intensity, noise scale, and simulation speed to create anything from subtle field movement to stronger environmental motion.
Make your grass respond to the objects moving through your environment. Grassworks supports configurable influence areas so characters, vehicles, and other objects can create natural deformation and movement as they interact with the field.
Use a Grass Map to define exactly where grass appears across your terrain and control how tall it grows. Create dense fields, sparse regions, paths, clearings, and natural transitions while keeping artistic control over the final result.
Shape your Grass Map directly on your terrain with an integrated painting workflow. Add grass, erase areas, adjust your brush, and build custom paths and clearings without leaving your Three.js environment.
Configure four levels of detail with independent control over grass density and geometric detail. Keep high-quality grass close to the camera while progressively reducing complexity at distance, giving you a practical balance between visual fidelity and rendering cost.
Your Grassworks package is ready when you are.
Everything you need to know before getting started with Three.js Grassworks.
Three.js Grassworks is a production-ready grass system built for Three.js and WebGPU. It provides everything you need to add realistic and stylized grass to real-time 3D environments.
Grassworks is built for WebGPU and does not include a separate WebGL implementation. It can use Three.js's built-in WebGL fallback, but WebGPU is the rendering path Grassworks is designed and optimized for.
You get the complete Grassworks source code, production build, presets, tools, and supporting files needed to integrate Grassworks into your projects.
Yes. The full, human-readable source code is included, so you can modify, extend, and adapt Grassworks for your own projects. A production-ready minified build is included as well.
Yes. Grassworks is licensed for use in commercial projects. For the complete terms and permitted usage, please see the Grassworks Commercial Software License Agreement.
Yes. Your purchase includes future Grassworks updates released by Tech Redux at no additional charge. You also get direct support through our customer portal, where you can ask questions, get help with integration, and submit feature requests for consideration in future updates.
See what developers are building with Three.js Grassworks.
Get Three.js Grassworks and bring production-ready grass to your next project.
One-time purchase · Future updates included · Customer support included