glsl - Blur a Instanced Mesh in Three.js

Question

I want to blur the material color of my instanced meshes. The left side is the original design, it's looks like a blurred shadow and on the right side you see my current situation. The problem is that I don't know how to blur an instanced mesh. I tried different things in my vertex and fragment shader, but it didn't work. Does anybody know how to fix this without post-processing?

This is my vertex

varying vec3 vNormal;
attribute vec4 color;
varying vec4 vColor;
varying float intensity;

void main() {
  vec3 vNormal = vec3(instanceMatrix * vec4(normal, 0.0));
  vec4 mvPosition = instanceMatrix * vec4( position, 1.0 );
  vec4 modelViewPosition = modelViewMatrix * mvPosition;
  intensity = pow(0.2 - dot(normalize(cameraPosition), vNormal), 4.0);
  gl_Position = projectionMatrix * modelViewPosition;
  vColor = color;
}

This is my fragment

varying float intensity;

void main() {
  vec3 glow = vec3(0.0, 0.0, 0.0);
  gl_FragColor = vec4(glow, 1.0);
}

question from:https://stackoverflow.com/questions/65893213/blur-a-instanced-mesh-in-three-js

Answer 1

Waitting for answers