Composer + Alpha + Correct colors

by orion_prime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js webgl - glTF loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>

  <body>

    <div>
          <script src="https://threejs.org/build/three.js"></script>
      <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
      <script src=" https://threejs.org/examples/js/loaders/RGBELoader.js"></script>
      <script src=" https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

      <script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>
      <script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
      <script src="https://threejs.org/examples/js/shaders/GammaCorrectionShader.js"></script>
      <script src="https://threejs.org/examples/js/postprocessing/LUTPass.js"></script>

      <script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>



      <script type="x-shader/x-vertex" id="vertexshader">

        varying vec2 vUv;
    
                void main() {
    
                    vUv = uv;
    
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    
                }
    
            </script>

      <script...

CSS

body {
	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: #ffffff;
		border: 0;
		color: #000000;
		padding: 16px 20px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

JavaScript

let scene, camera, renderer, controls
let gui = new dat.GUI();
const bloomLayer = new THREE.Layers();
let bloomPass, bloomComposer, finalComposer

const params = {
  exposure: 1,
  bloomStrength: 5,
  bloomThreshold: 0.5,
  bloomRadius: 0,
  scene: "Scene with Glow"
};

init();
animate();


function init() {
  const container = document.createElement("div");
  document.body.appendChild(container);

  renderer = new THREE.WebGLRenderer({
    alpha: true,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(0x00ff00, 0);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.toneMapping = THREE.LinearToneMapping;
  container.appendChild(renderer.domElement);
  // renderer.outputEncoding = THREE.sRGBEncoding;


  scene = new THREE.Scene();
  addOrbitCam()
  loadHDRI();
  loadGLTF();
  addGUI();
  window.addEventListener("resize", onWindowResize, false);

  finalComposer = new THREE.EffectComposer(renderer);

  addBloom()
  addBloomGUI()

  const gammaCorrectionPass = new THREE.ShaderPass(THREE.GammaCorrectionShader)
  finalComposer.addPass(gammaCorrectionPass);
}

function addBloom() {

  const renderScene = new THREE.RenderPass(scene, camera);
  bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
  bloomPass.threshold = params.bloomThreshold;
  bloomPass.strength = params.bloomStrength;
  bloomPass.radius = params.bloomRadius;

  bloomComposer = new THREE.EffectComposer(renderer);
  bloomComposer.renderToScreen = false;
  bloomComposer.addPass(renderScene);
  bloomComposer.addPass(bloomPass);

  const finalPass = new THREE.ShaderPass(
    new THREE.ShaderMaterial({
      uniforms: {
        baseTexture: {
          value: null
        },
        bloomTexture: {
          value: bloomComposer.renderTarget2.texture
        }
      },
      vertexShader: document.getElementById('vertexshader').textContent,
      fragmentShader:...