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
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
- 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