Increasing blue color of all objects in a THREE.JS Scene

Question

What is the best way to increase the blue color of all of the objects in a scene?

In my THREE.JS Scene there is a blue object that randomly pops up... I would like it to be more noticeable...

I have tried altering the colors with a frameBuffer...

I have also tried some post-processing filters...

Answer 1

A possible solution for this issue is to use a color correction post processing pass. Depending on how you configure the uniforms of ColorCorrectionShader, you end up with different color values. One approach to increase the blue values is to configure the mulRGB uniform with a value of e.g. (1, 1, 10).

Below is a complete live example:

import * as THREE from 'three';

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { ColorCorrectionShader } from 'three/addons/shaders/ColorCorrectionShader.js';

let container;

let camera, scene, renderer, composer;

let mesh;

init();
animate();

function init() {

  container = document.getElementById( 'container' );

  //

  camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
  camera.position.z = 2750;

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x050505 );
  scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );

  //

  scene.add( new THREE.AmbientLight( 0xcccccc ) );

  const light1 = new THREE.DirectionalLight( 0xffffff, 1.5 );
  light1.position.set( 1, 1, 1 );
  scene.add( light1 );

  const light2 = new THREE.DirectionalLight( 0xffffff, 4.5 );
  light2.position.set( 0, - 1, 0 );
  scene.add( light2 );

  //

  const triangles = 160000;

  const geometry = new THREE.BufferGeometry();

  const positions = [];
  const normals = [];
  const colors = [];

  const color = new THREE.Color();

  const n = 800, n2 = n / 2;    // triangles spread in the cube
  const d = 12, d2 = d / 2; // individual triangle size

  const pA = new THREE.Vector3();
  const pB = new THREE.Vector3();
  const pC = new THREE.Vector3();

  const cb = new THREE.Vector3();
  const ab = new THREE.Vector3();

  for ( let i = 0; i < triangles; i ++ ) {

    // positions

    const x = Math.random() * n - n2;
    const y = Math.random() * n - n2;
    const z = Math.random() * n - n2;

    const ax = x + Math.random() * d - d2;
    const ay = y + Math.random() * d - d2;
    const az = z + Math.random() * d - d2;

    const bx = x + Math.random() * d - d2;
    const by = y + Math.random() * d - d2;
    const bz = z + Math.random() * d - d2;

    const cx = x + Math.random() * d - d2;
    const cy = y + Math.random() * d - d2;
    const cz = z + Math.random() * d - d2;

    positions.push( ax, ay, az );
    positions.push( bx, by, bz );
    positions.push( cx, cy, cz );

    // flat face normals

    pA.set( ax, ay, az );
    pB.set( bx, by, bz );
    pC.set( cx, cy, cz );

    cb.subVectors( pC, pB );
    ab.subVectors( pA, pB );
    cb.cross( ab );

    cb.normalize();

    const nx = cb.x;
    const ny = cb.y;
    const nz = cb.z;

    normals.push( nx, ny, nz );
    normals.push( nx, ny, nz );
    normals.push( nx, ny, nz );

    // colors

    const vx = ( x / n ) + 0.5;
    const vy = ( y / n ) + 0.5;
    const vz = ( z / n ) + 0.5;

    color.setRGB( vx, vy, vz );

    const alpha = Math.random();

    colors.push( color.r, color.g, color.b, alpha );
    colors.push( color.r, color.g, color.b, alpha );
    colors.push( color.r, color.g, color.b, alpha );

  }

  function disposeArray() {

    this.array = null;

  }

  geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
  geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
  geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ).onUpload( disposeArray ) );

  geometry.computeBoundingSphere();

  const material = new THREE.MeshPhongMaterial( {
    color: 0xd5d5d5, specular: 0xffffff, shininess: 250,
    side: THREE.DoubleSide, vertexColors: true, transparent: true
  } );

  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  //

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );

  //

  window.addEventListener( 'resize', onWindowResize );
  
  //
  
  const renderPass = new RenderPass( scene, camera );
  const colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
  const outputPass = new OutputPass();
  
  colorCorrectionPass.uniforms[ 'powRGB' ].value.set( 1, 1, 1 );
    colorCorrectionPass.uniforms[ 'mulRGB' ].value.set( 1, 1, 10 );

  composer = new EffectComposer( renderer );
  composer.addPass( renderPass );
  composer.addPass( colorCorrectionPass );
  composer.addPass( outputPass );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );
  composer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {

  requestAnimationFrame( animate );

  render();

}

function render() {

  const time = Date.now() * 0.001;

  mesh.rotation.x = time * 0.25;
  mesh.rotation.y = time * 0.5;

  composer.render();

}

Live example: https://jsfiddle.net/cg5eyj3b/4/