Resolution Issue with UnrealBloomPass

The low resolution issue you're experiencing with the UnrealBloomPass is likely related to the resolution scaling of the render targets used by the EffectComposer.

Possible Solution

When using post-processing effects like UnrealBloomPass with EffectComposer, you need to ensure that the resolution of the render targets is appropriate. The EffectComposer creates internal render targets that might be using a lower resolution by default for performance reasons.

Try adjusting the resolution scale in your code. Based on the information available in the Three.js documentation, you can try the following approaches:

1. Make sure your EffectComposer is using the correct pixel ratio:

JAVASCRIPTCopied
// Create the composer with the correct size and pixel ratio
const composer = new EffectComposer(renderer);
composer.setSize(width, height);
composer.setPixelRatio(window.devicePixelRatio);

2. If you're using a WebGLRenderer, check the transmission resolution scale:

JAVASCRIPTCopied
// Set to 1 for full resolution (default)
renderer.transmissionResolutionScale = 1;

3. When creating your UnrealBloomPass, make sure to use the correct resolution:

JAVASCRIPTCopied
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5,  // strength
  0.4,  // radius
  0.85  // threshold
);

4. Ensure your renderer is properly handling window resizing:

JAVASCRIPTCopied
window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  
  renderer.setSize(width, height);
  composer.setSize(width, height);
});

These adjustments should help improve the resolution quality when using the UnrealBloomPass with your renderer.