Triangle Particles Not Casting Shadow

Questions
, ,
1

Hello!

Stack: Angular 10
Three Version: 121

I am in the process of trying to mimic Edan Kwan’s The Spirit but in Angular/Typescript. Of course he’s not using Angular and his three version is 0.73 I believe.

Well I essentially mimicked his home brewed GPGU engine (simulator.class.ts) and used his triangle particle mesh concept. I got everything working in terms of the movement of particles, but I can’t seem to get the shadow casting correctly on the floor.

I believe I have everything set up correctly (I think). Below is an overview:
simulator.class.ts is the web gpgu engine that outputs position onto a render target
particles.class.ts is the particle mesh that takes the output of the simulator to position particles made from a buffer geometry.

  • pointLight.castShadow = true
  • renderer.shadowMap.enabled = true
  • particles.class.ts has a customDistanceShader material (b/c using point light)
  • mesh.castShadow = true & mesh.receiveShadow = true
  • floor.receiveShadow = true

Below is a stackblitz link to the demo:

My hunch is that I am doing something wrong with the customDistanceMaterial shader code or there’s something wrong with the buffer geometry.

Any suggestions? Thank you!!

2

Hey!

I had one similar problem. Instead of my problem beeing with the particles, it was with my floor. I saw that you made the floor with PlaneBufferGeometry. Try using the BoxGeometry and setting a minimal depth.

Another reason it might be is that your shadow camera from your light is not covering the object on the scene. I never used the PointLight, but in DirectionalLight you need to set the cameras size and the “far” and “near” properties.

You could use the Helper from https://threejs.org/docs/#api/en/helpers/PointLightHelper for better testing.

1 Like
3

Hey Gustavo!

Thanks for the reply. I did adjust the settings for the custom distance mesh parameters & light shadow camera. It worked for a regular cube mesh but not with my particles. I ended up just ditching the triangle particles, and used an updated version of Edan’s custom distance fragment shader. It ended up working.

1 Like