c. 不能使用屏幕空间中的深度，透视投影后，深度变为-1~1，大部分非常接近1（0.9多），不是线性的，几乎不变，输出的颜色几乎不变，非常不准确。
d. 在片元着色器中获取深度方法：相机空间深度为gl_FragCoord.z，屏幕空间深度为gl_FragCoord.z / gl_FragCoord.w。
e. 上述描述都是针对透视投影，正投影中gl_Position.w为1，使用相机空间和屏幕空间深度都是一样的。
f. 为了尽可能准确输出深度，采用rgb三个分量输出深度。gl_Position.z/far范围在0~1，乘以0xffffff，转换为一个rgb颜色值，r分量1表示65535，g分量1表示255，b分量1表示1。
完整实现代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js
2. 读取鼠标所在位置的颜色，将读取到的颜色值还原为相机空间深度值。
a. 将“加密”处理后的深度绘制在WebGLRenderTarget上。读取颜色方法
let renderTarget = new THREE.WebGLRenderTarget(width, height); let pixel = new Uint8Array(4); scene.overrideMaterial = this.depthMaterial; renderer.setRenderTarget(renderTarget); renderer.clear(); renderer.render(scene, camera); renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel);
说明：offsetX和offsetY是鼠标位置，height是画布高度。readRenderTargetPixels一行的含义是选取鼠标所在位置（offsetX, height - offsetY），宽度为1，高度为1的像素的颜色。
pixel是Uint8Array(4)，分别保存rgba颜色的四个通道，每个通道取值范围是0~255。
b. 将“加密”后的相机空间深度值“解密”，得到正确的相机空间深度值。
if (pixel[2] !== 0 || pixel[1] !== 0 || pixel[0] !== 0) { let hex = (this.pixel[0] * 65535 + this.pixel[1] * 255 + this.pixel[2]) / 0xffffff; if (this.pixel[3] === 0) { hex = -hex; } cameraDepth = -hex * camera.far; // 相机坐标系中鼠标所在点的深度（注意：相机坐标系中的深度值为负值） }
3. 根据鼠标在屏幕上的位置和相机空间深度，插值反算交点世界坐标系中的坐标。
let nearPosition = new THREE.Vector3(); // 鼠标屏幕位置在near处的相机坐标系中的坐标 let farPosition = new THREE.Vector3(); // 鼠标屏幕位置在far处的相机坐标系中的坐标 let world = new THREE.Vector3(); // 通过插值计算世界坐标 // 设备坐标 const deviceX = this.offsetX / width * 2 - 1; const deviceY = - this.offsetY / height * 2 + 1; // 近点 nearPosition.set(deviceX, deviceY, 1); // 屏幕坐标系：(0, 0, 1) nearPosition.applyMatrix4(camera.projectionMatrixInverse); // 相机坐标系：(0, 0, -far) // 远点 farPosition.set(deviceX, deviceY, -1); // 屏幕坐标系：(0, 0, -1) farPosition.applyMatrix4(camera.projectionMatrixInverse); // 相机坐标系：(0, 0, -near) // 在相机空间，根据深度，按比例计算出相机空间x和y值。 const t = (cameraDepth - nearPosition.z) / (farPosition.z - nearPosition.z); // 将交点从相机空间中的坐标，转换到世界坐标系坐标。 world.set( nearPosition.x + (farPosition.x - nearPosition.x) * t, nearPosition.y + (farPosition.y - nearPosition.y) * t, cameraDepth ); world.applyMatrix4(camera.matrixWorld);
完整代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js
相关应用
使用gpu选取物体并计算交点位置，多用于需要性能非常高的情况。例如：
1. 鼠标移动到三维模型上的hover效果。
2. 添加模型时，模型随着鼠标移动，实时预览模型放到场景中的效果。
3. 距离测量、面积测量等工具，线条和多边形随着鼠标在平面上移动，实时预览效果，并计算长度和面积。
4. 场景和模型非常大，光线投射法选取速度很慢，用户体验非常不好。
这里给一个使用gpu选取物体和实现鼠标hover效果的图片。红色边框是选取效果，黄色半透明效果是鼠标hover效果。
看不明白？可能你不太熟悉three.js中的各种投影运算。下面给出three.js中的投影运算公式。
three.js中的投影运算
1. modelViewMatrix = camera.matrixWorldInverse * object.matrixWorld
2. viewMatrix = camera.matrixWorldInverse
3. modelMatrix = object.matrixWorld
4. project = applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix )
5. unproject = applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld )