Fixing Instanced Mesh Shadows and Positioning in Three.js

I've identified two main issues in your code that are causing the problems with shadows and positioning:

Issue 1: Instances Not Being Positioned Randomly

The problem is that you're not actually setting random positions for your instances. In your loop:

JAVASCRIPTCopied
for (let i = 0; i < countgrass; i++) {
  dummy.updateMatrix();
  meshgrass.setMatrixAt(i, dummy.matrix);
}

You're using the same dummy object without modifying its position between iterations, so all instances receive the same matrix.

Issue 2: Shadows Not Rendering

Your shadow setup has a few issues, particularly with how the custom shaders are handling the instance transformations.

Solution

Here's how to fix both issues:

1. Randomize Instance Positions

JAVASCRIPTCopied
const dummy = new THREE.Object3D();

for (let i = 0; i < countgrass; i++) {
  // Set random position
  dummy.position.set(
    (Math.random() - 0.5) * 100, // Adjust range as needed
    0, // Y position (on ground)
    (Math.random() - 0.5) * 100  // Adjust range as needed
  );
  
  // Optional: Add random rotation if desired
  dummy.rotation.y = Math.random() * Math.PI * 2;
  
  // Update matrix and apply to instance
  dummy.updateMatrix();
  meshgrass.setMatrixAt(i, dummy.matrix);
}

// Important: Update the instance matrix buffer
meshgrass.instanceMatrix.needsUpdate = true;

2. Fix Shadow Rendering

First, make sure your renderer has shadows enabled:

JAVASCRIPTCopied
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Optional: for softer shadows

For the instanced mesh, you need to modify your shader code to correctly handle shadows:

JAVASCRIPTCopied
instanceMaterial.onBeforeCompile = (shader) => {
  shader.vertexShader = `
    attribute vec3 offset;
    attribute vec4 orientation;

    vec3 applyQuaternionToVector(vec4 q, vec3 v) {
      return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
    }
  ` + shader.vertexShader;
  
  shader.vertexShader = shader.vertexShader.replace(
    "#include <project_vertex>",
    `
    vec3 vPosition = applyQuaternionToVector(orientation, transformed);
    vec3 instPos = offset + vPosition;
    
    vec4 mvPosition = modelViewMatrix * vec4(instPos, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    `
  );
  
  // Make sure the shadow code uses the same transformations
  shader.vertexShader = shader.vertexShader.replace(
    "#include <worldpos_vertex>",
    `
    vec3 instPos = offset + applyQuaternionToVector(orientation, transformed);
    #if defined(USE_ENVMAP) || defined(DISTANCE) || defined(USE_SHADOWMAP) || defined(USE_TRANSMISSION)
      vec4 worldPosition = modelMatrix * vec4(instPos, 1.0);
    #endif
    `
  );
};

For the custom distance material, make similar adjustments:

JAVASCRIPTCopied
meshgrass.customDistanceMaterial.onBeforeCompile = (shader) => {
  shader.vertexShader = `
    #define DEPTH_PACKING 3201
    attribute vec3 offset;
    attribute vec4 orientation;
    
    vec3 applyQuaternionToVector(vec4 q, vec3 v) {
      return v + 2.0 * cross(q.xyz, cross(q.xyz, v) + q.w * v);
    }
  ` + shader.vertexShader;
  
  shader.vertexShader = shader.vertexShader.replace(
    "#include <project_vertex>",
    `
    vec3 vPosition = applyQuaternionToVector(orientation, transformed);
    vec3 instPos = offset + vPosition;
    
    vec4 mvPosition = modelViewMatrix * vec4(instPos, 1.0);
    gl_Position = projectionMatrix * mvPosition;
    `
  );
  
  shader.fragmentShader = "#define DEPTH_PACKING 3201\n" + shader.fragmentShader;
};

3. Set Up Instance Attributes

You need to set up the offset and orientation attributes for your instanced mesh:

JAVASCRIPTCopied
// Create buffer attributes for instance positions and orientations
const offsets = new Float32Array(countgrass * 3);
const orientations = new Float32Array(countgrass * 4);

// Fill with random positions and orientations
for (let i = 0; i < countgrass; i++) {
  const i3 = i * 3;
  const i4 = i * 4;
  
  // Position
  offsets[i3] = (Math.random() - 0.5) * 100;
  offsets[i3 + 1] = 0; // Y position
  offsets[i3 + 2] = (Math.random() - 0.5) * 100;
  
  // Orientation (quaternion)
  const quaternion = new THREE.Quaternion();
  quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.random() * Math.PI * 2);
  orientations[i4] = quaternion.x;
  orientations[i4 + 1] = quaternion.y;
  orientations[i4 + 2] = quaternion.z;
  orientations[i4 + 3] = quaternion.w;
}

// Add attributes to the geometry
child.geometry.setAttribute('offset', new THREE.InstancedBufferAttribute(offsets, 3));
child.geometry.setAttribute('orientation', new THREE.InstancedBufferAttribute(orientations, 4));

These changes should fix both your positioning and shadow issues with the instanced mesh.