feat: increment grass segments, add extra taper at ends

src/app/page.tsx

@@ -123,8 +123,6 @@ function Grass({
 		) {
 			(materialRef.current.userData.shader as Shader).uniforms.uTime.value =
 				state.clock.getElapsedTime();
-			(materialRef.current.userData.shader as Shader).uniforms.uLOD.value =
-				grassLOD;
 		}
 	});
 
@@ -133,37 +131,38 @@ function Grass({
 
 		const w = 0.5;
 		const h = 2;
+		const segments = 4;
 
-		const positions = [
-			-w,
-			0,
-			0,
-			w,
-			0,
-			0,
-			-w,
-			h,
-			0,
-			w,
-			h,
-			0,
-			0,
-			0,
-			w,
-			0,
-			0,
-			-w,
-			0,
-			h,
-			w,
-			0,
-			h,
-			-w
-		];
+		const positions: number[] = [];
+		const uvs: number[] = [];
+		const indices: number[] = [];
 
-		const uvs = [0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 1];
+		for (let i = 0; i < 3; i++) {
+			const angle = (Math.PI / 3) * i;
+			const sinA = Math.sin(angle);
+			const cosA = Math.cos(angle);
 
-		const indices = [0, 1, 2, 2, 1, 3, 4, 5, 6, 6, 5, 7];
+			const offset = positions.length / 3;
+
+			for (let y = 0; y <= segments; y++) {
+				const v = y / segments;
+				const yPos = v * h;
+
+				positions.push(-w * cosA, yPos, -w * sinA);
+				uvs.push(0, v);
+
+				positions.push(w * cosA, yPos, w * sinA);
+				uvs.push(1, v);
+			}
+
+			for (let y = 0; y < segments; y++) {
+				const row1 = offset + y * 2;
+				const row2 = offset + (y + 1) * 2;
+
+				indices.push(row1, row1 + 1, row2);
+				indices.push(row1 + 1, row2 + 1, row2);
+			}
+		}
 
 		geo.setAttribute(
 			'position',
@@ -187,10 +186,32 @@ function Grass({
 		const lushColor = new Color('#348a34');
 		const dryColor = new Color('#556b19');
 
+		const chunkRadius = size * Math.sqrt(2);
+
+		let instanceIndex = 0;
+
 		for (let i = 0; i < count; i++) {
 			const localX = (Math.random() - 0.5) * size;
 			const localZ = (Math.random() - 0.5) * size;
 
+			const globalX = worldXBase + localX;
+			const globalZ = worldZBase + localZ;
+
+			const dist = Math.sqrt(globalX * globalX + globalZ * globalZ);
+
+			const maxDist = grassLOD;
+
+			const falloffStart = maxDist * 0.1;
+			const falloffEnd = maxDist;
+
+			let fallofFactor = (dist - falloffStart) / (falloffEnd - falloffStart);
+			fallofFactor = Math.max(0, Math.min(1, fallofFactor));
+
+			const density = (1.0 - fallofFactor) * (1.0 - fallofFactor);
+
+			if (Math.random() > density)
+				continue;
+
 			const localY = getTerrainHeight(
 				localX,
 				localZ,
@@ -215,10 +236,8 @@ function Grass({
 			dummy.scale.set(baseScale, baseScale * heightMult, baseScale);
 
 			dummy.updateMatrix();
-			meshRef.current.setMatrixAt(i, dummy.matrix);
+			meshRef.current.setMatrixAt(instanceIndex, dummy.matrix);
 
-			const globalX = worldXBase + localX;
-			const globalZ = worldZBase + localZ;
 			const noiseVal = noise2D(globalX * 0.02, globalZ * 0.02);
 
 			const t = (noiseVal + 1) / 2;
@@ -228,8 +247,12 @@ function Grass({
 
 			color.lerpColors(dryColor, lushColor, finalT);
 
-			meshRef.current.setColorAt(i, color);
+			meshRef.current.setColorAt(instanceIndex, color);
+
+			instanceIndex++;
 		}
+		meshRef.current.count = instanceIndex;
+
 		meshRef.current.instanceMatrix.needsUpdate = true;
 		if (meshRef.current.instanceColor)
 			meshRef.current.instanceColor.needsUpdate = true;
@@ -251,11 +274,9 @@ function Grass({
 	const onBeforeCompile = useMemo(
 		() => (shader: Shader) => {
 			shader.uniforms.uTime = { value: 0 };
-			shader.uniforms.uLOD = { value: grassLOD };
 
 			shader.vertexShader = `
 			uniform float uTime;
-			uniform float uLOD;
 			varying vec2 vGrassUv;
 			
 			float hash(vec2 p) {
@@ -374,28 +395,11 @@ function TerrainChunk({
 	grassSize,
 	grassLOD
 }: TerrainChunkProps) {
-	const [showGrass, setShowGrass] = useState(false);
+	const chunkDist = Math.sqrt((x * size) ** 2 + (y * size) ** 2);
+	const shouldRenderGrass = chunkDist < grassLOD + size;
+
 	const meshRef = useRef<Mesh>(null);
 
-	useFrame((state) => {
-		const camPos = state.camera.position;
-		const chunkPosX = x * size;
-		const chunkPosZ = y * size;
-
-		const dx = camPos.x - chunkPosX;
-		const dz = camPos.z - chunkPosZ;
-		const distSq = dx * dx + dz * dz;
-
-		// Use grassLOD as the distance threshold
-		const threshold = grassLOD * grassLOD;
-
-		if (distSq < threshold) {
-			if (!showGrass) setShowGrass(true);
-		} else {
-			if (showGrass) setShowGrass(false);
-		}
-	});
-
 	const geometry = useMemo(() => {
 		const geo = new BufferGeometry();
 
@@ -506,7 +510,7 @@ function TerrainChunk({
 					wireframe={wireframe}
 				/>
 			</mesh>
-			{!wireframe && showGrass && (
+			{!wireframe && shouldRenderGrass && (
 				<Grass
 					x={x}
 					y={y}
@@ -604,7 +608,7 @@ const SealCube = forwardRef<Mesh>((props, ref) => {
 	});
 
 	return (
-		<mesh ref={meshRef} position={[0, 5, 0]} castShadow receiveShadow>
+		<mesh ref={meshRef} position={[0, 2, 0]} castShadow receiveShadow>
 			<boxGeometry args={[0.85, 0.85, 0.85]} />
 			<meshBasicMaterial map={texture} />
 		</mesh>
@@ -641,7 +645,6 @@ export default function Home() {
 		>
 			<EffectComposer>
 				{/* <DepthOfField target={[0, 5, 0]} focalLength={10} bokehScale={5} /> */}
-				{/* <Pixelation granularity={6} /> */}
 				<Vignette />
 				<Noise opacity={0.05} />
 				<Bloom
@@ -675,22 +678,24 @@ export default function Home() {
 				resolution={8.0}
 				scale={1}
 				hillScale={0.1}
-				hillHeight={6.0}
+				hillHeight={0.0}
+				// hillHeight={6.0}
 				detailScale={1.0}
-				detailHeight={0.1}
+				// detailHeight={0.1}
+				detailHeight={0.0}
 				wireframe={false}
 				grassCount={8000}
 				grassSize={0.6}
-				grassLOD={80}
+				grassLOD={60}
 			/>
-			{/* <SealCube
+			<SealCube
 				ref={(mesh) => {
 					if (mesh && !sealMesh) setSealMesh(mesh);
 				}}
-			/> */}
+			/>
 
 			<OrbitControls
-				target={[0, 5, 0]}
+				target={[0, 2, 0]}
 				enablePan={false}
 				makeDefault
 				minDistance={2}