Part of the particle glow

Questions
1

image
image816×331 40.9 KB

This is my example:

Here’s what I think:

How do I get the particles in the diffusion range to glow, shine, halo in addition to the brightness that’s already achieved,like this
image

1 Like
2

I think bloom postprocessing (alternatively this one) is what you’re looking for :eyes: (then you just apply emissiveIntensity = 1.0 // or higher to the particles you’d like to glow.)

3

@mjurczyk
Hello, thanks for your answer. I have read the examples you provided, they seem to glow as a whole, but in my example, I want the middle part of the inner ring and the outer ring to glow,and I have tried the emissiveIntensity attribute, which does not exist in ShaderMaterial

4

oh,The second link seems to be what I want, I look into it

5

@mjurczyk
Hello, can you please in my example on the basis of the implementation, I do not understand post-processing, don’t know how to deal with this, Home | postprocessing document looks too difficult

6

This is a very good library.

I prefer to use that good old double EffectComposer technique (pretty close to this example, modified and more complicated though :smile: )

изображение
изображение947×860 158 KB

Demo: https://codepen.io/prisoner849/full/vYVXdgV

4 Likes
7

Thank you. Thank all. I look at the examples

8

@prisoner849 hi,thank you case,now,I changed it to look like this
https://codepen.io/zhuweijian/pen/ZEqpRmJ
The glow of the particles is what I want, but I still don’t know how to make part of the particles not glow, part glow, right :joy:

9

I would recommend to use this postprocessing library
Put some effort in studying of it :handshake:

10

Thank you very much. I learned a lot. It worked. I’m going to take a look at this library :smile:

11

You can also simply paint glow on each point geometry:

image
image765×557 121 KB

your slightly modified shaders (output colors are multiplied by pnt_dst and gl_PointSize is increased for a better visual):

let vertexShader = `
        varying vec3 uPosition;
			  void main()
			  {
                uPosition = position;
		 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
          gl_PointSize = 1.5;
          gl_PointSize *= 500.0 / -(modelViewMatrix * vec4(position, 1.0)).z;
			  }
			  `

        let fragmentShader = `
        uniform float near;
        varying vec3 uPosition;

       float fn(float x) {
  return (x <= 1.0) ? x : 2.0 - x;
}

      void main(){
            vec2 pnt_pos = 2.0 * (gl_PointCoord.st - 0.5);
            float pnt_dst = 1.0 - length(pnt_pos);
            
            float total = 10.0;
            float far = near + total;
            float dis = distance(vec2(0.0),uPosition.xz);
            if(dis >= near && dis <= far){
                 float center = total / 2.0;
                 float progress = fn((far - dis) / center) * 0.7;
                 gl_FragColor = pnt_dst * vec4( (0.3 + progress) *  vec3( 1.0,0,0 ), 1 );
            }else{
                 gl_FragColor = pnt_dst * vec4( 0.3 *  vec3( 1.0,0,0 ), 1 );
            }
        
      }`

on a second thought, using exp will give you a better quality effect:

image
image683×512 79.3 KB 

vert

gl_PointSize *= 1000.0 / -(modelViewMatrix * vec4(position, 1.0)).z;

fragm

float pnt_dst = exp(-3.0 * length(pnt_pos));
3 Likes
12

Wow, you are a very thoughtful person，i like it