Skip to content
three.js game extensions for fast grass.
Branch: master
Clone or download
Latest commit da2b959 Apr 12, 2014
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples ported to three.js r66 Apr 12, 2014
images more work Apr 11, 2014
LICENSE more work Apr 11, 2014
Makefile more work Apr 11, 2014 more work Apr 11, 2014
package.require.js more work Apr 11, 2014
threex.grass.js clean up Apr 12, 2014


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

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)

You are done!

References and Credits


  • 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
You can’t perform that action at this time.