Composer Disposal

by YinCognito

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="importmap">
      {
        "imports":
        {
          "three": "https://threejs.org/build/three.module.js",
          "BufferGeometryUtils": "https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js",
          "ArcballControls": "https://threejs.org/examples/jsm/controls/ArcballControls.js",
          "EffectComposer": "https://threejs.org/examples/jsm/postprocessing/EffectComposer.js",
          "RenderPass": "https://threejs.org/examples/jsm/postprocessing/RenderPass.js",
          "ShaderPass": "https://threejs.org/examples/jsm/postprocessing/ShaderPass.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="container">
    </div>
    <div id="leftpanel" class="left panel">
      <label id="itemlabel" class="label">Label</label>
    </div>
    <div id="rightpanel" class="right panel">
      <label id="itemvalue" class="value">Value</label>
    </div>
  </body>
</html>

CSS

body
{
  margin: 0;
}
canvas
{
  width: 100%;
  height: 100%
}
.panel
{
  position: absolute;
  border: 2px outset white;
  width: 100px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label, .value
{
  color: white;
}
.left
{
  left: 0px;
}
.right
{
  right: 0px;
}

JavaScript

import * as THREE from "three";
import * as BufferGeometryUtils from "BufferGeometryUtils";
import {ArcballControls} from "ArcballControls";
import {EffectComposer} from "EffectComposer";
import {RenderPass} from "RenderPass";
import {ShaderPass} from "ShaderPass";

const depthVertexShader =
`
varying vec2 UV;
void main()
{
  UV = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const depthFragmentShader =
`
uniform sampler2D colorSampler;
uniform sampler2D depthSampler;
varying vec2 UV;
void main()
{
  vec4  color = texture2D(colorSampler, UV).rgba;
  float depth = texture2D(depthSampler, UV).x;
  gl_FragColor = vec4(color.rgb * (1.0 - vec3(0.5, 0.0, 0.0)) + vec3(0.5, 0.0, 0.0), 1.0);
}
`;
const depthShader =
{
  uniforms: {colorSampler: {value: null}, depthSampler: {value: null}},
  vertexShader: depthVertexShader,
  fragmentShader: depthFragmentShader
};
var container = document.getElementById("container"), label = document.getElementById("itemlabel"), value = document.getElementById("itemvalue");
var renderer, scene, depthrender, composer, camera, light, amesh, controls;
var speedx = 0, speedy = 1, speedz = 0, key = 0, paused = true, reqid, camup, mincam, docompose = true;
var radius = 6371, v = {radius: radius, eye: 6.62 * radius, fov: 17, near: 0.000001, far: 720000 * radius};

function createcomposer()
{
  depthrender = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {depthTexture: new THREE.DepthTexture({type: THREE.FloatType})});
  composer = new EffectComposer(renderer);
  composer.setSize(window.innerWidth, window.innerHeight);
  var renderpass = new RenderPass(scene, camera);
  composer.addPass(renderpass);
  var depthpass = new ShaderPass(depthShader);
  depthpass.uniforms.colorSampler.value = depthrender.texture;
  depthpass.uniforms.depthSampler.value = depthrender.depthTexture;
  composer.addPass(depthpass);
};

function createcontrols()
{
  controls = new ArcballControls(camera,...