How to enable shadows for points (particles)?

[RvanderLaan]

Getting points to cast shadows has had some issues in ThreeJS itself: I came across this issue mrdoob/three.js#13749

Though it appears to work fine nowadays like in this fiddle posted in there http://jsfiddle.net/p61u2cm9/3/

I recreated a similar setup with react-three-fiber but the points do not cast shadows https://codesandbox.io/s/lively-fast-wh0q5r?file=/src/App.tsx

Am I doing something wrong? Or might there be a bug in this project?

[RvanderLaan]

I figured it out: it does work, but the shadows cast by the points do not scale with the size assigned to the points. With a much denser set of points of size 1, the shadows do appear:

It looks like it should be possible to scale them with a custom depth material. Otherwise, using instanced quads might be more suitable for this purpose

[RvanderLaan]

For anyone stumbling upon this: You can set the point size for shadows pretty easily using a custom depth material. Had to do some digging through the source code:

      <meshDepthMaterial
        attach="customDepthMaterial"
        args={[
          {
            depthPacking: RGBADepthPacking,
            alphaTest: 0.5,
            onBeforeCompile: (shader: Shader) => {
              shader.uniforms = {
                ...shader.uniforms,
                ...(shaderProps?.uniforms || {}),
              };

              // The default depth material does not set the point size, so we do it ourselves:
              shader.vertexShader =
                'uniform float size;\n' +
                ShaderLib.depth.vertexShader.replace(
                  '#include <project_vertex>',
                  `#include <project_vertex>
                   gl_PointSize = size;`,
                );
              shader.fragmentShader = ShaderLib.depth.fragmentShader;
            },
          } as any, // not supported properly in TypeScript, but it works!
        ]}
      />