style: misc visual changes

src/app/page.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
 import { Environment, OrbitControls, PerspectiveCamera } from '@react-three/drei';
 import { Canvas, useLoader, useFrame } from '@react-three/fiber';
-import { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
+import { useLayoutEffect, useMemo, useRef } from 'react';
 
 import {
 	BufferAttribute,
@@ -27,7 +26,9 @@ import {
 	Bloom,
 	EffectComposer,
 	Noise,
-	Pixelation
+	Pixelation,
+	Vignette,
+	DepthOfField
 } from '@react-three/postprocessing';
 
 interface Shader {
@@ -466,8 +467,8 @@ function TerrainChunk({
 				ref={meshRef}
 				geometry={geometry}
 				position={[x * size, 0, y * size]}
-				// receiveShadow
-				// castShadow
+			// receiveShadow
+			// castShadow
 			>
 				<meshStandardMaterial
 					vertexColors
@@ -599,18 +600,18 @@ export default function Home() {
 	return (
 		<Canvas
 			shadows
-			camera={{ position: [0, 5, 15], fov: 50 }}
+			camera={{ position: [0, 5, 15], fov: 50, far: 100 }}
 			gl={{ antialias: true }}
 			className='canvas'
 		>
 			<EffectComposer>
 				<Noise opacity={0.1} />
 				<Bloom
-					intensity={2}
+					intensity={2.2}
 					luminanceThreshold={0.5}
 					luminanceSmoothing={0.1}
 				/>
-				<Pixelation />
+				{/* <Pixelation granularity={10} /> */}
 				<Vignette />
 				<DepthOfField target={[0, 5, 0]} focalLength={50} bokehScale={5} />
 			</EffectComposer>
@@ -618,7 +619,7 @@ export default function Home() {
 			<Environment files={'hdr/sky.hdr'} environmentIntensity={1} background />
 
 			<Terrain
-				chunks={8.0}
+				chunks={16}
 				chunkSize={10.0}
 				resolution={8.0}
 				scale={1}
@@ -627,7 +628,7 @@ export default function Home() {
 				detailScale={1.0}
 				detailHeight={0.1}
 				wireframe={false}
-				grassCount={6000}
+				grassCount={4000}
 				grassSize={0.6}
 				grassLOD={80}
 			/>
@@ -637,8 +638,8 @@ export default function Home() {
 				target={[0, 5, 0]}
 				enablePan={false}
 				makeDefault
-				minDistance={5}
-				maxDistance={30}
+				minDistance={2}
+				maxDistance={10}
 			/>
 		</Canvas>
 	);