Skip to content

Bamboo Grove ​

A bamboo grove can stay simple if you treat each stalk as one repeated template plus a few per-instance values.

Open the full Bamboo Grove demo

Minimal Pattern ​

javascript
import { MeshLine, straightLine } from 'makio-meshline'
import { attribute, Fn, vec3 } from 'three/tsl'

const stalkCount = 20

const stalks = new MeshLine()
	.lines( straightLine( 1, 32, true ) )
	.instances( stalkCount )
	.color( 0x497849 )
	.lineWidth( 0.1 )
	.widthFn( Fn( ( [width] ) => {
		return width.mul( attribute( 'instanceTransform', 'vec4' ).w )
	} ) )
	.shadow( true, true )
	.positionFn( Fn( ( [position, progress] ) => {
		const transform = attribute( 'instanceTransform', 'vec4' )
		const lean = attribute( 'instanceLean', 'vec3' )
		const leanAmount = lean.x.mul( progress.mul( progress ) )

		return vec3(
			transform.x.add( lean.y.mul( leanAmount ) ),
			position.y.mul( transform.z ),
			transform.y.add( lean.z.mul( leanAmount ) )
		)
	} ) )
	.build()

stalks.addInstanceAttributes( {
	instanceTransform: 4,
	instanceLean: 3,
} )

for ( let i = 0; i < stalkCount; i++ ) {
	stalks.setInstanceValue( 'instanceTransform', i, [x, z, height, width] )
	stalks.setInstanceValue( 'instanceLean', i, [lean, dirX, dirZ] )
}

scene.add( stalks )

The live demo repeats this pattern four times: straight templates for the stalks, twigs and leaves, and one circular template for the node rings. Every layer adds the same TSL sway offset for its stalk and height, so the whole grove moves together in the wind. Keep the template simple and push the variation into instance attributes.