Custom Depth map for Point/Particle

Hi Everyone

Context

I’m new here, and just started learning threejs. I’ve been trying a lot of things, and recently I’m stuck with creating Sphere imposters: https://paroj.github.io/gltut/Illumination/Tutorial%2013.html I’m trying to create a Sphere imposter for a Point/Particle in Three.Points() mesh. My thought process here is to write my custom shader for the point (for now it’s just a tile 1x1, but I’ll replace it with some sdf code to mimic sphere), and am trying to cast that tile’s shadow on my plane. I am updating mesh.customDepthMaterial as per blogs/references I found online, but with my own custom shader glsl code (not by extending MeshDepthMaterial).

Question

The only doubt I have is how can I calculate depth of a tile? Should I pass in the ThreeJS’s light position to this custom shader and calculate it. I can do that, but I was trying to somehow use the existing uniforms that ThreeJS has for directional lights. How can I get them? And also I couldn’t understand in a RGBA texture, which channel signifies the depth, and should the depth value be the exact distance between the light and the point?

Also I’ve seen people using function packDepthToRGBA , which I couldn’t understand. What is it’s purpose?

1 Like