// Based on https://codepen.io/al-ro/pen/jJJygQ by al-ro, but rewritten in react-three-fiber import * as THREE from "three" import React, { useRef, useMemo, useEffect } from "react" import { useFrame, useLoader } from "@react-three/fiber" //These have been taken from "Realistic real-time grass rendering" by Eddie Lee, 2010 import "GrassMaterial" // SimplexNoise implementation const SimplexNoise = function(r) { if (r == undefined) r = Math; this.grad3 = [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],[1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]]; this.p = []; for (var i=0; i<256; i++) { // Fix for the random function - ensure we're using Math.random() directly this.p[i] = Math.floor(Math.random()*256); } // To remove the need for index wrapping, double the permutation table length this.perm = []; for(var i=0; i<512; i++) { this.perm[i]=this.p[i & 255]; } }; SimplexNoise.prototype.dot = function(g, x, y) { return g[0]*x + g[1]*y; }; SimplexNoise.prototype.noise2D = function(xin, yin) { var n0, n1, n2; // Noise contributions from the three corners // Skew the input space to determine which simplex cell we're in var F2 = 0.5*(Math.sqrt(3.0)-1.0); var s = (xin+yin)*F2; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var G2 = (3.0-Math.sqrt(3.0))/6.0; var t = (i+j)*G2; var X0 = i-t; // Unskew the cell origin back to (x,y) space var Y0 = j-t; var x0 = xin-X0; // The x,y distances from the cell origin var y0 = yin-Y0; // For the 2D case, the simplex shape is an equilateral triangle. // Determine which simplex we are in. var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords if(x0>y0) {i1=1; j1=0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1) else {i1=0; j1=1;} // upper triangle, YX order: (0,0)->(0,1)->(1,1) // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where // c = (3-sqrt(3))/6 var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords var y1 = y0 - j1 + G2; var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords var y2 = y0 - 1.0 + 2.0 * G2; // Work out the hashed gradient indices of the three simplex corners var ii = i & 255; var jj = j & 255; var gi0 = this.perm[ii+this.perm[jj]] % 12; var gi1 = this.perm[ii+i1+this.perm[jj+j1]] % 12; var gi2 = this.perm[ii+1+this.perm[jj+1]] % 12; // Calculate the contribution from the three corners var t0 = 0.5 - x0*x0-y0*y0; if(t0<0) n0 = 0.0; else { t0 *= t0; n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.5 - x1*x1-y1*y1; if(t1<0) n1 = 0.0; else { t1 *= t1; n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1); } var t2 = 0.5 - x2*x2-y2*y2; if(t2<0) n2 = 0.0; else { t2 *= t2; n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 70.0 * (n0 + n1 + n2); }; const simplex = new SimplexNoise() // Remove the Math.random parameter, let it use Math by default export default function Grass({ options = { bW: 0.12, bH: 1, joints: 5 }, width = 100, instances = 50000, ...props }) { const { bW, bH, joints } = options const materialRef = useRef() const frustumCulled = useRef(true) // Enable frustum culling const [texture, alphaMap] = useLoader(THREE.TextureLoader, [ "https://develop.play.rosebud.ai/assets/blade_diffuse.jpg?zkaz", "https://develop.play.rosebud.ai/assets/blade_alpha.jpg?PJBM" ]) // Configure how shadows are cast and received useEffect(() => { // Find the mesh in the group after it's created const group = groupRef.current; if (group) { group.traverse((object) => { if (object.isMesh) { object.castShadow = true; object.receiveShadow = true; if (object.material) { // Configure material for better shadow quality object.material.shadowSide = THREE.FrontSide; } } }); } }, []); const groupRef = useRef(); // Use lower joint count for grass blade geometry const attributeData = useMemo(() => getAttributeData(instances, width), [instances, width]) const baseGeom = useMemo(() => new THREE.PlaneGeometry(bW, bH, 1, Math.max(2, joints - 1)).translate(0, bH / 2, 0), [bW, bH, joints]) // Create ground plane geometry with hills const groundGeo = useMemo(() => { // Make ground slightly larger than the grass distribution area with optimized resolution const planeGeometry = new THREE.PlaneGeometry(width * 1.55, width * 1.55, 48, 48); // Create a rotation matrix to look at y-up (convert from vertical to horizontal) const lookAtMatrix = new THREE.Matrix4(); lookAtMatrix.lookAt( new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1) ); // Apply rotation to vertices to make it horizontal planeGeometry.applyMatrix4(lookAtMatrix); // Apply height map to create rolling hills const positions = planeGeometry.attributes.position; const vertexCount = positions.count; for (let i = 0; i < vertexCount; i++) { const x = positions.getX(i); const z = positions.getZ(i); // Set Y position based on our terrain function positions.setY(i, getYPosition(x, z)); } // Update normals after changing the geometry planeGeometry.computeVertexNormals(); return planeGeometry; }, [width]) useFrame((state) => { if (materialRef.current) { materialRef.current.uniforms.time.value = state.clock.elapsedTime / 4 } // More efficient frustum culling that doesn't interfere with animations // Only perform culling check every 10 frames to reduce CPU overhead if (state.frame % 10 === 0) { const frustum = new THREE.Frustum() const matrix = new THREE.Matrix4().multiplyMatrices( state.camera.projectionMatrix, state.camera.matrixWorldInverse ) frustum.setFromProjectionMatrix(matrix) // Create a bounding sphere for more accurate culling const boundingSphere = new THREE.Sphere(new THREE.Vector3(0, 0, 0), width * 0.75) const inView = frustum.intersectsSphere(boundingSphere) // Only update culling if value has changed if (inView !== frustumCulled.current) { frustumCulled.current = inView // Apply optimized culling to child objects if (groupRef.current) { // Only apply to grass instances, not the ground plane const grassMesh = groupRef.current.children.find(child => child.isMesh && child.geometry.type === 'InstancedBufferGeometry' ) if (grassMesh) { // Dynamic visible range based on camera distance const cameraDistance = state.camera.position.distanceTo(new THREE.Vector3(0, 0, 0)) const visibleRange = Math.min(width, cameraDistance * 1.5) // Set visibility on the grass mesh itself // This allows animation to continue while controlling render workload grassMesh.visible = inView } // Ground is always visible when in view const ground = groupRef.current.children.find(child => child.isMesh && child.geometry.type === 'PlaneGeometry' ) if (ground) { ground.frustumCulled = true // Enable three.js built-in culling } } } } }) return ( {/* Ground plane with rolling hills */} { // Add vertex colors based on height for a more realistic terrain look shader.vertexShader = shader.vertexShader.replace( '#include ', `#include varying float vHeight;` ); shader.vertexShader = shader.vertexShader.replace( '#include ', `#include vHeight = position.y;` ); shader.fragmentShader = shader.fragmentShader.replace( '#include ', `#include varying float vHeight; vec3 grassColor = vec3(0.376, 0.141, 0.043); vec3 hillColor = vec3(0.282, 0.22, 0.165); vec3 peakColor = vec3(0.5, 0.5, 0.5); vec3 snowColor = vec3(0.95, 0.95, 0.95);` ); shader.fragmentShader = shader.fragmentShader.replace( '#include ', `#include // Interpolate between colors based on height with adjusted thresholds for taller hills float hillFactor = smoothstep(0.0, 2.5, vHeight); float peakFactor = smoothstep(2.5, 4.0, vHeight); float snowFactor = smoothstep(4.0, 4.5, vHeight); // Mix between grass color at low heights and hill color at medium heights vec3 terrainColor = mix(grassColor, hillColor, hillFactor); // Mix in peak color for the higher points terrainColor = mix(terrainColor, peakColor, peakFactor); // Add snow to the highest peaks terrainColor = mix(terrainColor, snowColor, snowFactor); diffuseColor.rgb *= terrainColor;` ); }} /> ) } function getAttributeData(instances, width) { const offsets = [] const orientations = [] const stretches = [] const halfRootAngleSin = [] const halfRootAngleCos = [] let quaternion_0 = new THREE.Vector4() let quaternion_1 = new THREE.Vector4() //The min and max angle for the growth direction (in radians) const min = -0.25 const max = 0.25 // Expanded width for grass distribution (to reach the edges) const groundWidth = width * 1.5 const halfGroundWidth = groundWidth / 2 //For each instance of the grass blade for (let i = 0; i < instances; i++) { //Offset of the roots - use uniform distribution across the entire ground plane const offsetX = (Math.random() * 2 - 1) * halfGroundWidth const offsetZ = (Math.random() * 2 - 1) * halfGroundWidth const offsetY = getYPosition(offsetX, offsetZ) // Get height from our terrain function offsets.push(offsetX, offsetY, offsetZ) //Define random growth directions //Rotate around Y let angle = Math.PI - Math.random() * (2 * Math.PI) halfRootAngleSin.push(Math.sin(0.5 * angle)) halfRootAngleCos.push(Math.cos(0.5 * angle)) let RotationAxis = new THREE.Vector3(0, 1, 0) let x = RotationAxis.x * Math.sin(angle / 2.0) let y = RotationAxis.y * Math.sin(angle / 2.0) let z = RotationAxis.z * Math.sin(angle / 2.0) let w = Math.cos(angle / 2.0) quaternion_0.set(x, y, z, w).normalize() //Rotate around X angle = Math.random() * (max - min) + min RotationAxis = new THREE.Vector3(1, 0, 0) x = RotationAxis.x * Math.sin(angle / 2.0) y = RotationAxis.y * Math.sin(angle / 2.0) z = RotationAxis.z * Math.sin(angle / 2.0) w = Math.cos(angle / 2.0) quaternion_1.set(x, y, z, w).normalize() //Combine rotations to a single quaternion quaternion_0 = multiplyQuaternions(quaternion_0, quaternion_1) //Rotate around Z angle = Math.random() * (max - min) + min RotationAxis = new THREE.Vector3(0, 0, 1) x = RotationAxis.x * Math.sin(angle / 2.0) y = RotationAxis.y * Math.sin(angle / 2.0) z = RotationAxis.z * Math.sin(angle / 2.0) w = Math.cos(angle / 2.0) quaternion_1.set(x, y, z, w).normalize() //Combine rotations to a single quaternion quaternion_0 = multiplyQuaternions(quaternion_0, quaternion_1) orientations.push(quaternion_0.x, quaternion_0.y, quaternion_0.z, quaternion_0.w) //Define variety in height while ensuring more consistent thickness if (i < instances / 3) { stretches.push(0.8 + Math.random()) } else { stretches.push(0.6 + Math.random() * 0.6) } } return { offsets, orientations, stretches, halfRootAngleCos, halfRootAngleSin, } } function multiplyQuaternions(q1, q2) { const x = q1.x * q2.w + q1.y * q2.z - q1.z * q2.y + q1.w * q2.x const y = -q1.x * q2.z + q1.y * q2.w + q1.z * q2.x + q1.w * q2.y const z = q1.x * q2.y - q1.y * q2.x + q1.z * q2.w + q1.w * q2.z const w = -q1.x * q2.x - q1.y * q2.y - q1.z * q2.z + q1.w * q2.w return new THREE.Vector4(x, y, z, w) } function getYPosition(x, z) { // Create smoother and taller rolling hills using simplex noise const frequency = 0.01; // Reduced frequency for smoother, wider hills const amplitude = 4.5; // Increased amplitude for taller hills // Use simplex noise with multiple octaves for more natural terrain let y = 0; // First octave - main terrain features y += amplitude * simplex.noise2D(x * frequency, z * frequency); // Second octave - smaller details (higher frequency, lower amplitude) y += (amplitude * 0.3) * simplex.noise2D(x * frequency * 2, z * frequency * 2); // Third octave - fine details y += (amplitude * 0.1) * simplex.noise2D(x * frequency * 4, z * frequency * 4); return y; }