ehtick / threex.grass

three.js game extensions for fast grass.

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