# Can't get Outer glow to work with UnrealBloomPass

**URL:** <https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [June 10, 2023, 8:26am UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643 "2023-06-10T08:26:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![IcarusD](https://avatars.discourse-cdn.com/v4/letter/i/779978/32.png) [@IcarusD](https://discourse.threejs.org/u/IcarusD)\
**Post date:** [June 10, 2023, 8:26am UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643/1 "2023-06-10T08:26:41Z")

</div>

I can’t seem to figure out how to get my outer glow to work. I’m trying to use UnrealBloomPass.  
I want all the spheres / stars to have a white outer glow.  
The scene renders and everything works with no errors but the outer glow is not present.

Any help would be greatly appreciated!

```javascript
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';

// Setup

// Define your custom vertex shader code
const vertexShader = `
  // Your vertex shader code here
`;

// Define your custom fragment shader code
const fragmentShader = `
  uniform vec3 glowColor;
  
  void main() {
    gl_FragColor = vec4(glowColor, 1.0);
  }
`;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
  antialias: true
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera.position.setX(-3);

renderer.render(scene, camera);

window.addEventListener('resize', onWindowResize, false);
// Function to handle window resize
function onWindowResize() {
  // Update camera aspect ratio
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // Update renderer size
  renderer.setSize(window.innerWidth, window.innerHeight);

  // Call any additional resize-related logic or updates here
  // ...
}

// Lights

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(pointLight, ambientLight);

// Helpers

// const lightHelper = new THREE.PointLightHelper(pointLight)
// const gridHelper = new THREE.GridHelper(200, 50);
// scene.add(lightHelper, gridHelper)

// const controls = new OrbitControls(camera, renderer.domElement);

// Add the UnrealBloomPass effect
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(bloomPass);
bloomPass.threshold = 0;
bloomPass.strength = 5;
bloomPass.radius = 0.5;
bloomPass.renderToScreen = true;

function addStar() {
  const geometry = new THREE.SphereGeometry(0.02, 15, 15);
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
  const star = new THREE.Mesh(geometry, material);

  const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100));

  star.position.set(x, y, z);
  scene.add(star);

  // Create the outer glow effect using a ShaderMaterial
  const outerGlowGeometry = new THREE.SphereGeometry(0.04, 15, 15);
  const outerGlowMaterial = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      glowColor: { value: new THREE.Color(0xffffff) }, // Set the outer glow color to white
    },
  });
  const outerGlow = new THREE.Mesh(outerGlowGeometry, outerGlowMaterial);
  outerGlow.position.copy(star.position);
  scene.add(outerGlow);
}

// Add the star and outer glow to the scene
Array(10000).fill().forEach(addStar);

// Background

const spaceTexture = new THREE.TextureLoader().load('space.jpg');
scene.background = spaceTexture;

// Moon

const moonTexture = new THREE.TextureLoader().load('moon.jpg');
const normalTexture = new THREE.TextureLoader().load('normal.jpg');

const moon = new THREE.Mesh(
  new THREE.SphereGeometry(3, 32, 32),
  new THREE.MeshStandardMaterial({
    map: moonTexture,
    normalMap: normalTexture,
  })
);

scene.add(moon);

moon.position.z = 1;
moon.position.setX(-10);

function moveCamera() {
  const t = document.body.getBoundingClientRect().top;
  
  camera.position.z = t * -0.01;
  camera.position.x = t * -0.0002;
  camera.rotation.y = t * -0.0002;
}

document.body.onscroll = moveCamera;
moveCamera();

// Animation Loop
function animate() {
  requestAnimationFrame(animate);

  moon.rotation.x += 0.005;

  // Move the camera automatically
  const autoMoveSpeed = -0.007; // Adjust this value to control the automatic movement speed
  camera.position.z -= autoMoveSpeed;
  camera.position.x -= -0.00014;
  camera.rotation.y -= -0.00014;

  renderer.render(scene, camera);
}

animate();

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 10, 2023, 8:41am UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643/2 "2023-06-10T08:41:37Z")

</div>

The bloom pass does not work correctly without `OutputPass` at the end of your pass chain. So please setup `EffectComposer` like in the official example:

[https://threejs.org/examples/webgl\_postprocessing\_unreal\_bloom](https://threejs.org/examples/webgl_postprocessing_unreal_bloom)

`OutputPass` performs tone mapping (the key for good looking bloom) and the output color space conversion to sRGB.

Also make sure that all color textures (`moonTexture` and `spaceTexture`) are configured as sRGB textures. Meaning:

```js
spaceTexture.colorSpace = THREE.SRGBColorSpace;

```

This is _not_ required for normal maps (since these are no color textures).

---

<div class="post-metadata">

**Author:** ![IcarusD](https://avatars.discourse-cdn.com/v4/letter/i/779978/32.png) [@IcarusD](https://discourse.threejs.org/u/IcarusD)\
**Post date:** [June 11, 2023, 11:14pm UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643/3 "2023-06-11T23:14:59Z")

</div>

Thanks so much! Was stuck on this for ages.  
Got it sorted by following that example.  
Does UnrealBloom just add a glow to everything? I removed the Outerglow object around the spheres and the spheres still glow which is great, seems like it would be better for performance. But just curious to know why that is?  
Can I somehow crank up the UnrealBloom glow effect on a specific object? eg. the moon.  
Does this look right to you? I notice if the Bloom strength is any higher it starts to look a bit pixelated and also gets cropped to a square around the sphere, is that just to do with the threshold and radius?  
dxp.zencreative.com.au  
Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 12, 2023, 8:28am UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643/4 "2023-06-12T08:28:22Z")

</div>

> [@IcarusD](#):
>
> Does UnrealBloom just add a glow to everything?

Yes, the bloom pass affects the entire scene.

> [@IcarusD](#):
>
> I removed the Outerglow object around the spheres and the spheres still glow which is great, seems like it would be better for performance. But just curious to know why that is?

You normally don’t need additional glow mesh structures around your actual meshes when using bloom via post-processing. You get more glow if objects are bright (e.g. by using a bright `color` or `emissive` value).

> [@IcarusD](#):
>
> Does this look right to you?

A bloom strength of `5` is quite high. I suggest you use a value around `1` or lower. Normally, that should be sufficient.

> [@IcarusD](#):
>
> Can I somehow crank up the UnrealBloom glow effect on a specific object? eg. the moon.

There is an example for this however it needs some extra work: [three.js webgl - postprocessing - unreal bloom selective](https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective)

> [@IcarusD](#):
>
> I notice if the Bloom strength is any higher it starts to look a bit pixelated and also gets cropped to a square around the sphere, is that just to do with the threshold and radius?

Yes, if that happens, radius and strength are set to too high values. It also happens if the exposure of your tone mapping is set to a too high value.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 12, 2023, 10:13am UTC](https://discourse.threejs.org/t/cant-get-outer-glow-to-work-with-unrealbloompass/52643/5 "2023-06-12T10:13:03Z")

</div>

the official example linked above is imo super confusing. selective bloom is inbuilt and there is nothing that needs to be done, you select bloom for specific meshes with the materials. you don’t need copy passes, scene traverse, masking, extra renders and all that.

here’s an example using jsm/effect composer

```jsx
const target = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
})
target.samples = 8
const composer = new EffectComposer(renderer, target)
composer.addPass(new RenderPass(scene, camera))

// Setting threshold to 1 will make sure nothing glows
composer.addPass(new UnrealBloomPass(undefined, 1, 1, 1))

// This mesh will glow because emissive leaves 0-1 range, everything else won't
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshStandardMaterial({
    toneMapped: false,
    emissive: "red",
    emissiveIntensity: 10

```

and a sandbox demonstrating it [glass flower - CodeSandbox](https://codesandbox.io/s/glass-flower-dq6wwe) btw that one uses [pmndrs/postprocessing](https://github.com/pmndrs/postprocessing) which imo you should use anyway. it is a better vanilla threejs effect composer (although the example above is react, that library is not).

selecting bloom for specific meshes is the same there. you just crank a color out of 0-1 range.

color.set(“red”) // ❌ won’t glow  
color.setRBG(10, 0, 0) // ✅ will glow  
etc