I now have my machine guns firing on my demo program with 16 tiny meshes acting as tracer bullets. But I am having a hard time seeing the white tracers against a bright daytime sky. When I change them to the correct color (red), I have a hard time seeing them at all.
Is there an easy way to make them glow like real tracers?
I have tried using MeshBasicMaterial and emissive colors. I have tried PointLights and that looks pretty cool, but that really slowed things down (probably something I did) I really donât need the to emit a lot of light like a rocket. I looked at using Bloom (including luminosity), but that seems like overkill for a few lousy bullets.
Is there a simple solution I am missing? (I am using WebGPU if that opens up some possibilities.)
ADDITION
For those readers who donât want to scroll down, here is what I have done (as described several messages below):
I was able to obviate the need for bloom by making the following changes:
- I changed the points to lines to increase overall visibility. This makes sense since the muzzle velocity of a M2 Browning .50 caliber is 887 meters per second.
- I also added a set of black lines next to the white lines. So when the bullets are seen against a dark background, you see the white lines and when they are seen against a dark background you see the black lines.
- With these changes, I discovered that I could see red/pink tracers, so I am using a combination of light red (e.g. magenta) and dark red.
- I have not been able to add bloom, but that may not be necessary and may make the tracers look like lasers - an effect that I definitely donât want.
But there are excellent responses to my question, so it would be well worth your time to scroll down and read them and look at the examples provided.
1 Like
Why? Bloom postprocessing is quite way cheaper than using lights - if itâd give you a desired result, you should definitely choose it over adding more lights to the scene (N-lights added to the scene will multiply the complexity of every non-Basic material in the scene N-times. And thereâs a hard limit on the amount of lights you can add to the scene.)
2 Likes
Really? I assumed that post-processing had to scan the entire scene. Can it apply only to a single texture?
SECOND EDIT I tried extracting the code from the WebGPU volcano example and from the bloom selective example. Neither worked. I posted my faulty code from both, but see no reason to display my ignorance or possibly confuse others. So I have deleted that.
Another possibility might be to use a visual trick using Sprites and a Sprite material that has a dark border. The contrast might make the center color appear brighter and to black border might help make it stand out from the sky. But I suspect that using Bloom would yield a better result.
[EDIT: Some improvement but bloom would be better if I can get it to working.]
Bloom has a roughly fixed cost, since its a screenspace effect.
It gets a bad rap because you used to have to do multipass to get selective bloom, but now that the shading model doesnât clamp colors, the threshold makes it controllable.
2 Likes
Done with bloom?
I played around a bit with the bloom selective example and discovered that I might be expecting too much. If I change the background to white, all the objects almost become invisible. And if I reduce their size to only a few pixels, they will be gone.
But that may be how things are in real life. Tracers are more visible against a dark background. And most tracer colors may disappear against a bright sky - just like a golf ball can disappear against the clouds.
Is there a post processing method that analyzes specific materials and compares them to their immediate surroundings and adjusts the material color accordingly? I realize that is a bit unrealistic, but it would help. So far, the results from my two-tone textures are meh.
It is unreal bloom not selective. InstancedBufferGeometry of particles with custom shader.
Added trace:
3 Likes
Thanks. While considering options, one that I considered was something that left a smoke trail. The official examples used to have some examples of those. These emitters should be even easier to create in WebGPU. Is there a reference in the program to a three.js unreal bloom - or did you create that effect yourself with the shader?
Thanks to everyone who responded. I have learned a lot and I now understand that bloom could be a great solution.
For now, I have solved the problem in a low-tech way. I changed the points to lines to increase overall visibility. This makes sense since the muzzle velocity of a M2 Browning .50 caliber is 887 meters per second. I also added a set of black lines next to the white lines. So when the bullets are seen against a dark background, you see the white lines and when they are seen against a dark background you see the black lines.
Eventually, I might be able to improve the appearance by adding bloom to the white lines. But, for now, the two-color solution works fine.
First screen is unreal bloom: three.js examples
With settings: threshold=1; strength=2; radius=0;
Bullet trace can be without bloom, just bright texture and maybe multiplied to increase brightness like in my codepen example. Or extruded sphere
1 Like
I was able to strip down the âwebgpu - bloom selectiveâ example so that it displays 2 lines, one with bloom and the other without. This appears to confirm that you can selectively use bloom with lines and with LineBasicNodeMaterial. The CodePen example is here [ADD] When I run this there are no error messages.
Note that there are 3 sections in the program with bloom-related commands. However, when I copy and paste those sections into my program, I get the following error messages:
The color attachment [TextureView of Texture âbloomIntensityâ] sample count (1) does not match the sample count of the other attachments (4).
- While validating colorAttachments[1].
- While encoding [CommandEncoder ârenderContext_19â].BeginRenderPass([null]).
[Invalid CommandBuffer from CommandEncorder ârenderContext_19â] is invalid.
- While calling [Queue].Submit([[Invalid CommandBuffer from CommandEncoder ârenderContext19â]])
Any idea what might be causing this?
ADD
If I change:
let bloomIntensityPass = scenePass.getTextureNode('bloomIntensity');
to
let bloomIntensityPass = scenePass.getTextureNode();
The warnings go away. But the entire page is blurred.
MORE ADD
Actually, I should not be changing what the line above references (i.e. âbloomIntensityâ). The question is what value it returns (i.e. bloomIntensityPass). This value is used in the program in the next line:
let bloomPass = outputPass.mul(bloomIntensityPass).bloom();
I tried changing bloomIntensityPass to various integer values and that yielded different results, including where bloom applied to the entire scene.
But when I used console.log to print the value of bloomIntensityPass or bloomPass, I got gibberish. So I am clearly dealing with forces beyond my comprehension and will have to leave it at that.
You mention bullet trace? There are so many things going on in your demo that I may have been looking at the wrong thing. I was mostly looking at the shooting âmeteorâ. But maybe you meant one of the stationary lines? Where are they referenced in the demo? One of my constraints has been that I have been using LineBasicNodeMaterial, which may not have all the options available to a regular BasicNodeMaterial, like increasing brightness.
My trail done with one plane and rotation to camera.
1 Like
