neru/neru.rip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: increment grass segments, add extra taper at ends

Browse Source
This commit is contained in:
neru
2026-01-02 03:37:45 -03:00
parent 35f3c74663
commit dd249aabbd
2 changed files with 75 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/page.tsx
+70 -65
View File
@@ -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}
src/app/shaders/grass.vert
+5 -23
View File
@@ -1,16 +1,6 @@
float worldX = instanceMatrix[3][0];
float worldZ = instanceMatrix[3][2];
float worldY = instanceMatrix[3][1];
vec3 worldPos = vec3(worldX, worldY, worldZ);
float dist = distance(cameraPosition, worldPos);
float fadeStart = uLOD * 0.6;
float fadeRange = uLOD * 0.4;
float distFactor = 1.0 - clamp((dist - fadeStart) / fadeRange, 0.0, 1.0);
float noiseVal = fbm(vec2(worldX, worldZ) * 0.5);
distFactor = clamp(distFactor + (noiseVal - 0.5) * 0.2, 0.0, 1.0);
float windSpeed = 0.3;
float windScale = 0.04;
@@ -29,28 +19,20 @@ vec2 windDir = vec2(
);
windDir = normalize(windDir - 0.5) * 0.8;
// Tapering
// Reduce width based on Y (height)
// As Y increases (from 0 to 1 in UV space roughly), width decreases.
// uv.y is height.
float taper = 1.0 - uv.y;
taper = mix(1.0, taper, 0.5); // Control how sharp the taper is. 0.5 = moderate taper.
float taperFactor = pow(uv.y, 4.0); // Stays near 0 for long, then shoots to 1 at tip
float taper = 1.0 - taperFactor * 0.6; // Width goes from 1.0 to 0.4 at tip
transformed.x *= taper;
transformed.z *= taper;
// Curvature - Simple quadratic bend
// Bend more as we go up.
float curveAmount = uv.y * uv.y * 2.0;
float curveStrength = 5.0 + noiseVal * 2.0;
float curveAmount = uv.y * uv.y * curveStrength;
vec2 curveDir = normalize(vec2(noiseVal, fbm(vec2(worldZ, worldX))) - 0.5); // Randomize curve direction
transformed.x += curveAmount * curveDir.x * 0.5;
transformed.z += curveAmount * curveDir.y * 0.5;
// Apply wind sway
float swayAmount = (windStrength + turbulence) * uv.y * uv.y;
transformed.x += swayAmount * windDir.x;
transformed.z += swayAmount * windDir.y;
transformed.y -= abs(swayAmount) * 0.2;
// Apply distance scaling
transformed *= distFactor;