Composer + SAOPass

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/libs/stats.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/shaders/GammaCorrectionShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/SAOShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/SSAOShader.js"></script>

<script src="https://threejs.org/examples/js/shaders/DepthLimitedBlurShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/UnpackDepthRGBAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/SAOPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/SSAOPass.js"></script>
<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/math/SimplexNoise.js"></script>

JavaScript

let scene, camera, renderer, controls,stats
let gui = new dat.GUI();
let saoPass,ssaoPass, composer

const params = {

};











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

  stats= new Stats()
  document.body.appendChild(stats.dom)
  scene = new THREE.Scene();
  addOrbitCam()
  loadHDRI();
  loadGLTF();

  window.addEventListener("resize", onWindowResize, false);
  const parameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    type: THREE.FloatType
  };
  const size = renderer.getDrawingBufferSize(new THREE.Vector2());
  const webGL1renderTarget = new THREE.WebGLRenderTarget(size.width, size.height, parameters);

    composer = new THREE.EffectComposer(renderer, webGL1renderTarget);

    const renderPass = new THREE.RenderPass(scene, camera)
    composer.addPass(renderPass);

    // ssaoPass = new THREE.SSAOPass(scene, camera, window.innerWidth, window.innerHeight)
    // ssaoPass.enabled = false
    // composer.addPass(ssaoPass)

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

    saoPass = new THREE.SAOPass(scene, camera, false, true)
    saoPass.enabled = true
    composer.addPass(saoPass)
    saoPass.params.saoIntensity=1
    saoPass.params.saoScale=50
    saoPass.params.saoKernelRadius=16
    saoPass.params.saoMinResolution=0.00001

 


    addGUI();
}










function addOrbitCam() {
  camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.25,
   ...