Skip to content

SoftShadows broken with three.js r182 (unpackRGBAToDepth removed) #2583

@xhorntail

Description

@xhorntail
  • three version: 0.182.0 (works on 0.181.0)
  • @react-three/fiber version: 9.4.2
  • @react-three/drei version: 10.7.7
  • node version: 24.10.0
  • npm (or yarn) version: npm 11.6.4

Problem description:

<SoftShadows /> throws shader compilation errors with three.js r182.

three.js r182 modernized shadow mapping (PRs #32181, #32303, #32407, #32443), switching from RGBA-packed depth to native depth textures. The unpackRGBAToDepth() function was removed from the shader chunks as a result.

drei's PCSS shader still calls unpackRGBAToDepth() to sample shadow maps:

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Material Type: MeshStandardMaterial

FRAGMENT
ERROR: 0:1304: 'unpackRGBAToDepth' : no matching overloaded function found

Relevant code:

import { SoftShadows } from '@react-three/drei'

<Canvas shadows>
  <SoftShadows />
  {/* any scene with shadows */}
</Canvas>

The problematic code is in src/core/softShadows.tsx , which injects:

depth = unpackRGBAToDepth( texture2D( shadowMap, uv + offset));

Suggested solution:

Update the PCSS shader to sample depth textures directly:

depth = texture2D(shadowMap, uv + offset).r;

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions