Composer and Renderer

by orion_prime

HTML

<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/shaders/CopyShader.js"></script>a

CSS

body {
	  margin: 0;
}

JavaScript

let scene, camera, renderer, controls
let gui = new dat.GUI();
let finalComposer
const params = {
  exposure: 1,
  bloomStrength: 5,
  bloomThreshold: 0.5,
  bloomRadius: 0,
  scene: "Composer"
};

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);



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

  finalComposer = new THREE.EffectComposer(renderer);
  const gammaCorrectionPass = new THREE.ShaderPass(THREE.GammaCorrectionShader)

  const renderScene = new THREE.RenderPass(scene, camera);
  finalComposer.addPass(renderScene)
  finalComposer.addPass(gammaCorrectionPass);
}

function addOrbitCam() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.25,
    1000
  );
  camera.position.set(-1.8, 0.6, 2.7);
  controls = new THREE.OrbitControls(camera, renderer.domElement);
}

function loadHDRI() {
  const pmremGenerator = new THREE.PMREMGenerator(renderer);
  pmremGenerator.compileEquirectangularShader();
  let hdri = new THREE.RGBELoader()
    .setDataType(THREE.UnsignedByteType)
    .load(
      "https://threejs.org/examples/textures/equirectangular/quarry_01_1k.hdr",
      function(texture) {
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.background = envMap;
        scene.environment = envMap;
        texture.dispose();
        pmremGenerator.dispose();
      }
    );
}

function loadGLTF() {
  const loader = new THREE.GLTFLoader();
  loader.load(
   ...