I create the depth rain effect with mesh, in the case , when the scene is enough big , the rain need to cover it , will cost many performance. I want to create rain which attach to the screen , It will cost less performance , in this case I dont care about the size of the scene , but I have no idea to complete it , it seems like postprocessing , may be my problem is how to build myself postprocessing render ? there are any persons who can help me , thans very much
What I want is the picture 2 , the rain will attach to the screen , so how large the scene is , the rain cost the same performance , even it will lose depth
then it could be a simple plane with glsl shader, for example
wow ! I like the first one,It’s what I want， but how to combine it with three scene . i can’t just create a simple plane
I usually do such combinations via rendertargets and “div”
https://threejs.org/examples/?q=multi#webgpu_multiple_rendertargets
https://threejs.org/examples/?q=multi#webgl_multiple_elements
My stupid idea is that ， I can create the second canvas cover the first canvas , i can render the screen rain on the second canvas and set the second canvas alpha = true , pointer-events = “none” , but it always didn’t fit me. I think the better resolution is using postprocessing , render the scene, and render the rain. the problem is ，at now , my knowledge do not support I build myself pass , where i can learn about that ?
I can use ShaderPass complete screen rain , I am trying
for exampe
rain.zip (2.6 KB)
thanks for your help , now , I have a clear way of thinking .
I used this example and added a rain shader there
https://threejs.org/examples/?q=FX#webgl_postprocessing_fxaa
Hello, all, do we have to create plane with code and apply the shader to this? or apply to a real plane placed before, in software? Thank you.
No difference - plane is a plane. But creating one in code could be smoother and faster, since you won’t rely on asynchronous loading of the model.
apply the shader to screen , use shaderPass can help me to do this .
