three.js dev template - module

HTML

<script id="post-vert" type="x-shader/x-vertex">
			varying vec2 vUv;

			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
			}
</script>
<script id="post-frag" type="x-shader/x-fragment">
			#include <packing>

			varying vec2 vUv;
			uniform sampler2D tDiffuse;
			uniform sampler2D tDepth;
			uniform float cameraNear;
			uniform float cameraFar;


			float readDepth( sampler2D depthSampler, vec2 coord ) {
				float fragCoordZ = texture2D( depthSampler, coord ).x;
				float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
				return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
			}

			void main() {
				//vec3 diffuse = texture2D( tDiffuse, vUv ).rgb;
				float depth = readDepth( tDepth, vUv );

				gl_FragColor.rgb = 1.0 - vec3( depth );
				gl_FragColor.a = 1.0;
			}
</script>

CSS

body {
	margin: 0px;
}
canvas {
	display: block;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var camera, scene, renderer, controls;
var target;
var postScene, postCamera;

init();
animate();

function init() {

	var canvas = document.createElement( 'canvas' );
	var context = canvas.getContext( 'webgl2', { alpha: false, antialias: false } );

	renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 50 );
	camera.position.z = 4;

	controls = new OrbitControls( camera, renderer.domElement );
	controls.enableDamping = true;
	controls.dampingFactor = 0.05;

	// setup of mutlisample FBO

	target = new THREE.WebGLMultisampleRenderTarget( window.innerWidth, window.innerHeight );
	target.texture.format = THREE.RGBFormat;
	target.texture.minFilter = THREE.NearestFilter;
	target.texture.magFilter = THREE.NearestFilter;
	target.texture.generateMipmaps = false;
	target.stencilBuffer = false;
	target.depthBuffer = true;
	target.depthTexture = new THREE.DepthTexture();
	target.depthTexture.type = THREE.UnsignedShortType;

	scene = new THREE.Scene();
	setupScene();

	setupPost();

	onWindowResize();
	window.addEventListener( 'resize', onWindowResize, false );

}

function setupPost() {

	// Setup post processing stage
	postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
	var postMaterial = new THREE.ShaderMaterial( {
		vertexShader: document.querySelector( '#post-vert' ).textContent.trim(),
		fragmentShader: document.querySelector( '#post-frag' ).textContent.trim(),
		uniforms: {
			cameraNear: { value: camera.near },
			cameraFar: { value: camera.far },
			tDiffuse: { value: target.texture },
			tDepth: { value:...