three.js dev template - module

HTML

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

void main() {

	vUv = position.xy * 0.5 + 0.5;
	gl_Position = vec4(position.xy, 1.0, 1.0);

}
</script>

<script id="frag" type="x-shader/x-fragment">
#include <packing>

uniform sampler2D tDiffuse;
uniform sampler2D tDepth;
uniform float cameraNear;
uniform float cameraFar;

varying vec2 vUv;

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() {

	float depth = readDepth(tDepth, vUv);
	gl_FragColor = vec4(vec3(1.0 - depth), 1.0);

}
</script>

CSS

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

JavaScript

import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";

const {
	DepthStencilFormat,
	DepthTexture,
	Mesh,
	MeshBasicMaterial,
	NearestFilter,
	OrthographicCamera,
	PerspectiveCamera,
	PlaneBufferGeometry,
	RGBFormat,
	Scene,
	ShaderMaterial,
	TorusKnotBufferGeometry,
	Uniform,
	UnsignedIntType,
	UnsignedInt248Type,
	//WebGLMultisampleRenderTarget,
	WebGLRenderer,
	WebGLRenderTarget
} = THREE;

// Create the renderer, camera and controls.

const canvas = document.createElement("canvas");
const context = canvas.getContext("webgl2", {
	antialias: false,
	depth: false,
	alpha: false
});

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

const aspectRatio = window.innerWidth / window.innerHeight;
const camera = new PerspectiveCamera(70, aspectRatio, 0.1, 10);
camera.position.z = 3.3;

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

// Setup post processing.

const postCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);

const renderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight);
renderTarget.texture.format = RGBFormat;
renderTarget.texture.minFilter = NearestFilter;
renderTarget.texture.magFilter = NearestFilter;
renderTarget.texture.generateMipmaps = false;
renderTarget.stencilBuffer = true;
renderTarget.depthBuffer = true;
renderTarget.depthTexture = new DepthTexture();
renderTarget.depthTexture.type = UnsignedIntType;
//renderTarget.depthTexture.format = DepthStencilFormat;	// This doesn't seem to
//renderTarget.depthTexture.type = UnsignedInt248Type;		// work in WebGL 2.

var fullscreenMaterial = new ShaderMaterial({

	vertexShader:...