Optimizing Bloom Effect in Three.js for Vehicle Lights

Questions
, ,
1

Hi everyone,

I’m working on implementing bloom effects for vehicle lights in a Three.js project. Below is the class VehicleLight that I’ve created to manage the lights on a vehicle:

import * as THREE from 'three';

export class VehicleLight {
  private lightObject: THREE.Object3D;
  private Material: THREE.MeshStandardMaterial;
  private onColor: number;
  private offColor: number;

  constructor(
    object: THREE.Object3D,
    Material: THREE.MeshStandardMaterial,
    onColor: number,
    offColor: number
  ) {
    this.lightObject = object;
    this.lightObject.layers.enable(1);
    this.Material = Material;
    this.onColor = onColor;
    this.offColor = offColor;
    this.lightObject.traverse((child) => {
      if ((child as THREE.Mesh).isMesh) {
        (child as THREE.Mesh).material = this.Material;
      }
    });
  }

  toggleLight(state: boolean) {
    if (state) {
      this.Material.emissiveIntensity = 1;
      this.Material.emissive.set(this.onColor);
      this.Material.color.set(this.onColor);
    } else {
      this.Material.emissiveIntensity = 0;
      this.Material.emissive.set(this.offColor);
      this.Material.color.set(this.offColor);
    }
  }
}

I use the https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective from Three.js as a reference to apply the bloom effect. I suspect this might be a costly process, so I’m looking for ways to optimize it. Specifically, I’m interested in reducing the computational load without significantly compromising the visual quality.

Does anyone have suggestions or techniques they’ve used to optimize similar effects in Three.js

Thanks in advance for your help!

Here are some screenshots from the game showing the current bloom effect on vehicle lights:

image
image1920×973 187 KB

image
image1920×972 155 KB

2

I used lens flares in this example. They dont use much CPU.

image

Rapier Debug Renderer : SBEDIT : Online Code Editor

5 Likes
3

Thank you for sharing the lens flare example. It’s helpful to know that it doesn’t use much CPU.

4

Nowadays you don’t need to use SelectiveBloom… instead you can use a bloom threshold higher than 1 (or higher than the highest light level in your scene, doesn’t have to be 1), and on the object, use an emissive color higher than 1 to push it over the bloom threshold. … like material.emissive.set( 2., 0, 0 ) // Make it bloom Red
This way you get the best of both worlds… object with emissive less than one will still look “bright” (but not glow) (like perhaps tv screens and stuff) and emissive > 1 will actually trigger the bloom… (like headlights and LEDs)

Selective bloom was only really neccesary in the olden days when the color pipeline clamped colors to 0 to 1 range iirc.

Here’s an example: logic lab simulator by thrax

2 Likes
5

Thank you very much for your help!