Changing Opacity of a Single Transparent Sprite in a Group of Transparent Sprites

Questions
,
1

I have created an undercast of clouds by applying an identical transparent texture to sprites which are then grouped together. Example

I have seen some discussion that suggests it might be possible to change the opacity of individual sprites by using a formula for opacity based on distance and/or using nodes.

That seems like it might be extremely useful if I could decrease the opacity of the more distant sprites, so that the individual sprites would fade into or out of view. This could allow me to reduce the number of sprites and maybe avoid having to render sprites which are transparent.

Is that possible in three.js?

2

I believe the effect you’re trying to achieve (fading opacity when far from the camera) is possible out of the box with the THREE.Fog class, as shown in this demo: https://threejs.org/examples/?q=fog#webgl_geometry_terrain_fog

However, the approach you’re suggesting is also possible, but it takes a bit more work. If you’re ready to learn how to write custom shaders, I recommend you take this approach because writing your own shaders introduces a huge world of creative possibilities.

  1. Learn GLSL (shader language) through https://thebookofshaders.com/
  2. Follow this example’s code to see how to use custom shader code in Three.js with THREE.ShaderMaterial.
  3. You can use mvPosition.z in the shader to determine distance to the camera and thus change its opacity.

Good luck!

3

Thanks for the quick response.

The fog might work because, the way I have it drawn, I am generally fading to a white horizon background. So I might be able to use a white fog.

I’ve been looking at shaders quite a bit, but concluded (based on drawing times for ShaderToy examples) that they would not be a good option for creating clouds from scratch on lower performance computers.

However, what you are proposing sounds like it might be a shader with a more limited purpose, of changing the alpha value of the pixels in a single sprite.

Any idea how I would be able to make it work with three.js sprite software? For example, I assume that I would need to get the distance of each sprite, and then get the gl_position for each sprite pixel and adjust the alpha value of each pixel?

Thanks,
Phil

4

No no, I wasn’t suggesting drawing procedural clouds in shaders. That’s too resource-intensive. I was simply suggesting calculating the sprite depth to change its alpha value, while keeping your texture cloud10.png.

I believe I already explained that in my original response. You can follow the example in step 2. Then you can use mvPosition.z to get the sprite’s distance from the camera. You can use this to change the alpha value of gl_FragColor in the fragment shader through a varying.

5

Okay. Got it. Thanks!
Phil

6

I had forgotten that you cannot use a shader texture with 3JS sprites. The texture is not rotated, resized, etc. There is an example online of how to create your own custom routine for drawing sprites.

In the meantime, I’ll give the fog option a try.

Phil

7

I am trying the fog option in a scene that includes a skybox.
Is there a way to prevent the fog from blanking out the skybox?
Or, alternatively, is there a way to make the fog affect only the cloud sprites?
Thanks,
Phil