Fast Rough-Edge Shadows Pseudocode

fast-rough-edge-shadow.glsl

// Your shadow map comparison, this is builtin to ThreeJS
float texture2DCompare( sampler2D depths, vec2 uv, float compare ) {
  return step( compare, unpackRGBAToDepth( texture2D( depths, uv ) ) );
}

float getShadow () {
  float texelSize = 1.0 / shadowMapPixelDimension;

  float shadowStepSize = 0.5; // adjust to taste

  // gaussNoise is a gaussian noise texture generated by photoshop
  // each channel stores 0..1 gaussian noise independently
  vec3 rgbNoise = texture2D(gaussNoise, vUv).rgb * 2.0 - 1.0;
  float a0 = rgbNoise.x * PI * 2.0;
  float a1 = rgbNoise.y * PI * 2.0;
  float a2 = rgbNoise.z * PI * 2.0;

  // A, B, C samples, you can choose to only take 1, 2, or 3 samples
  vec2 dxA = vec2(cos(a0), sin(a0)) * shadowRadius * shadowStepSize * texelSize;
  vec2 dxB = vec2(cos(a1), sin(a1)) * shadowRadius * shadowStepSize * texelSize;
  vec2 dxC = vec2(cos(a2), sin(a2)) * shadowRadius * shadowStepSize * texelSize;

  float shadow = (
    texture2DCompare(shadowMap, shadowCoord.xy + dxA, shadowCoord.z) +
    texture2DCompare(shadowMap, shadowCoord.xy + dxB, shadowCoord.z) +
    texture2DCompare(shadowMap, shadowCoord.xy + dxC, shadowCoord.z)
  ) * (1.0 / 3.0);

  return shadow;
}

gauss-noise-rgb.png