有没有办法从 WebGLRenderTarget 读取深度值到缓冲区（js）？

Question

我正在尝试将帧缓冲区/WebGLRenderTarget 中的深度值读取到数组中。我可以找到将深度渲染到深度纹理的信息，但无法将深度读取到缓冲区。使用 readpixels 我只能获取 rbga 值。理想情况下，我试图从深度和光线中获取世界位置。

我尝试过读取像素，但不知道如何读取 Threejs 中的深度。

Answer 1

在我的脑海中，不可能直接读取深度值。

您可以将 a 设置DepthTexture为您的WebGLRenderTarget属性depthTexture。然后，您可以将该深度纹理的全部或部分渲染到另一个渲染目标并读取结果。

'use strict';

/* global THREE */

const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});

const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.01;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 0.7;

const scene = new THREE.Scene();
const geometry = new THREE.BoxBufferGeometry();
const material = new THREE.MeshBasicMaterial({color: 'red'});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = 0.25;
cube.rotation.y = Math.PI * 0.25;
 
const depthTexture = new THREE.DepthTexture(canvas.width, canvas.height);
const rt = new THREE.WebGLRenderTarget(canvas.width, canvas.height, {
  depthTexture,
});

renderer.setRenderTarget(rt);
renderer.render(scene, camera);

const planeScene = new THREE.Scene();
const planeGeo = new THREE.PlaneBufferGeometry(2, 2);
const planeMat = new THREE.MeshBasicMaterial({map: depthTexture});
const plane = new THREE.Mesh(planeGeo, planeMat);
planeScene.add(plane);
const ortho = new THREE.OrthographicCamera(-1, 1, 1, -1, -1, 1)
const planeRT = new THREE.WebGLRenderTarget(canvas.width, canvas.height, {type: THREE.FloatType});
renderer.setRenderTarget(planeRT);
renderer.render(planeScene, ortho);

const depths = new Float32Array(canvas.width * canvas.height * 4);
renderer.readRenderTargetPixels(planeRT, 0, 0, canvas.width, canvas.height, depths);

console.log(depths);

<canvas id="c" width="4" height="4"></canvas>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>