import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(0, 10, 10);

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.id = 'perspective';
renderer.domElement.style.float = 'left';

const controls = new OrbitControls(camera, renderer.domElement);

const bgTexture = new THREE.TextureLoader().load("https://unsplash.it/1024/1024");
const floorGeometry = new THREE.PlaneGeometry(10, 10);
const material = new THREE.MeshBasicMaterial({ map: bgTexture });
const floor = new THREE.Mesh(floorGeometry, material);
floor.position.set(0, 0, 0);
floor.rotation.set(-Math.PI / 2, 0, 0);
scene.add(floor);

const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cube = new THREE.Mesh(cubeGeometry, material);
cube.position.set(3, 1, -2);
scene.add(cube);

const ortho = new THREE.OrthographicCamera(-5, 5, 5, -5, -4.1, 0.1);
//ortho.position.y = 4;
ortho.rotation.set(-Math.PI / 2, 0, 0);
scene.add(ortho);

const orthoHelper = new THREE.CameraHelper(ortho);
//scene.add(orthoHelper);

// create render target

const rt = new THREE.WebGLRenderTarget(16, 16, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat });

// show render target texture on a quad

const mesh = new THREE.Mesh(
	new THREE.PlaneGeometry(10, 10),
	new THREE.MeshBasicMaterial({ map: rt.texture })
);
mesh.position.x = 10;
scene.add(mesh);

const pixels = new Uint8Array(16 * 16 * 4);

const dmat = new THREE.MeshDepthMaterial();
const renderDepth = (rend, scene, camera, outputRT) => {
	scene.overrideMaterial = dmat;
  rend.setRenderTarget(outputRT);
  rend.render(scene, camera);
  rend.readRenderTargetPixels(outputRT, 0, 0, 16, 16, pixels);
  rend.setRenderTarget(null);
  scene.overrideMaterial = null;
  
  //console.debug(pixels);
};

function animate() {
    renderer.render(scene, camera);
    
    renderDepth(renderer, scene, ortho, rt);
    
    requestAnimationFrame(animate);
}

animate();