Search code examples
three.jsglslparticle-systemparticles

Lighting a Particle System in THREEJS/GLSL


I made a particle system with buffergeometry in threejs. I want the particles to receive light. Is this difficult (impossible?) because the geometry doesn't actually have faces to light?

I'm working with this mostly in a shader I created. I just created the geometry in threejs.

Are particles not in world space? Are they in camera space only?

What is a simple GLSL fragment shader equation for lighting particles?


Solution

  • It depends on what kind of material you are using for the particles. If you are using shaderMaterial and write your own fragmentshader, then you have to implement lighting yourself in the shader code. For example, to lighten particles that are close to the light source, simply lighten their color by the distance between each particle and the light position:

    vec3 lightPosition = vec3(1.0, 2.0, 3.0);
    float lightStrength = 0.1;
    
    float distanceToLightSource = distance(particlePosition, lightPosition);
    
    vec4 lighterColor = particleColor * distanceToLightSource * lightStrength;