kellycode/threex.grass

three.js game extensions for fast grass. (fork)

Update 13/2/2023

1. Update to latest THREE r147 (last revision before forced module use)
2. Camera controls added for easier looking around
3. Organization mostly for readability
4. geometry.merge (no longer available) replaced with group.add (easy peasy)

threex.grass

threex.grass is a three.js extension which provides fast grass tufts. It has tweaked normals for better lighting, and a merged geometry to better performance. It is loosely based on "Rendering Countless Blades of Waving Grass" GPUGem.

Show Don't Tell

• examples/demo.html [view source] : It shows a demo of how to use this game extension
• examples/basic.html [view source] : It shows the most basic usage.

How To Install It

You can install it via script tag

<script src='threex.grass.js'></script>

Or you can install with bower, as you wish.

bower install threex.grass

How To Use It

To create a full grass, first you determine the positions of each grass tufts you want and put that in a array. Like this.

var positions	= []
positions.push(new THREE.Vector3(-1,0,0))
positions.push(new THREE.Vector3(+1,0,0))

So you got one tuft on the left at (-1,0,0) and another on the right at (+1,0,0). Now let's create a mesh with a tufts at each of those positions.

var mesh	= new THREEx.createGrassTufts(positions)
scene.add(mesh)

You are done!

References and Credits

• thanks a lot to bai on irc for the textures and the helps during the tunning
• "Rendering Grass in Real Time with Dynamic Lighting"
• "Rendering Countless Blades of Waving Grass" GPUGem
• "Procedural grass rendering"
• "Airborn – Trees" post for normal tweaking

TODO

• make a demo with minecraft walking in it, with daynight cycle and later swarm
• make a version which use THREE.ParticlesSystem. it is fast and may work well when the grass is far.
  • CON: use gl-pointsize so very limited size on screen
  • CON: particle arent lite. one could set a color per particle to simulate ligthing. if middle of the day, use white. if the night, use grey. something like that
  • PRO: likely faster