Skip to content

Rice Field

This scene stays manageable by repeating one very small blade template many times with instancing.

Open the full Rice Field demo

Minimal Pattern

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

const bladeCount = 2000

const rice = new MeshLine()
	.lines( straightLine( 1, 24 ) )
	.instances( bladeCount )
	.lineWidth( 0.03 )
	.color( 0x6fbf4b )
	.positionFn( Fn( ( [position] ) => {
		const transform = attribute( 'instanceTransform', 'vec4' )
		const x = transform.x
		const z = transform.y
		const height = transform.z
		const bend = transform.w

		return vec3(
			x.add( position.y.mul( bend ) ),
			position.y.mul( height ),
			z
		)
	} ) )

rice.addInstanceAttribute( 'instanceTransform', 4 )

for ( let i = 0; i < bladeCount; i++ ) {
	rice.setInstanceValue( 'instanceTransform', i, [x, z, height, bend] )
}

rice.build()
scene.add( rice )

The live demo adds a second MeshLine for the field borders, a quadtree layout, compute-driven motion, a sky gradient, and a reflector. The core idea is still one simple blade shape plus per-instance transforms.