three.js利用gpu选取物体并计算交点位置的方法示例

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove(event) {
 // 计算鼠标所在位置的设备坐标
 // 三个坐标分量都是-1到1
 mouse.x = event.clientX / window.innerWidth * 2 - 1;
 mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

function pick() {
 // 使用相机和鼠标位置更新选取光线
 raycaster.setFromCamera(mouse, camera);

 // 计算与选取光线相交的物体
 var intersects = raycaster.intersectObjects(scene.children);
}

let maxHexColor = 1;

// 更换选取材质
scene.traverseVisible(n => {
 if (!(n instanceof THREE.Mesh)) {
 return;
 }
 n.oldMaterial = n.material;
 if (n.pickMaterial) { // 已经创建过选取材质了
 n.material = n.pickMaterial;
 return;
 }
 let material = new THREE.ShaderMaterial({
 vertexShader: PickVertexShader,
 fragmentShader: PickFragmentShader,
 uniforms: {
  pickColor: {
  value: new THREE.Color(maxHexColor)
  }
 }
 });
 n.pickColor = maxHexColor;
 maxHexColor++;
 n.material = n.pickMaterial = material;
});

let renderTarget = new THREE.WebGLRenderTarget(width, height);
let pixel = new Uint8Array(4);

// 绘制并读取像素
renderer.setRenderTarget(renderTarget);
renderer.clear();
renderer.render(scene, camera);
renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel); // 读取鼠标所在位置颜色

// 还原原来材质，并获取选中物体
const currentColor = pixel[0] * 0xffff + pixel[1] * 0xff + pixel[2];

let selected = null;

scene.traverseVisible(n => {
 if (!(n instanceof THREE.Mesh)) {
 return;
 }
 if (n.pickMaterial && n.pickColor === currentColor) { // 颜色相同
 selected = n; // 鼠标所在位置的物体
 }
 if (n.oldMaterial) {
 n.material = n.oldMaterial;
 delete n.oldMaterial;
 }
});

const depthMaterial = new THREE.ShaderMaterial({
 vertexShader: DepthVertexShader,
 fragmentShader: DepthFragmentShader,
 uniforms: {
 far: {
  value: camera.far
 }
 }
});

precision highp float;

uniform float far;

varying float depth;

void main() {
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 depth = gl_Position.z / far;
}

precision highp float;

varying float depth;

void main() {
 float hex = abs(depth) * 16777215.0; // 0xffffff

 float r = floor(hex / 65535.0);
 float g = floor((hex - r * 65535.0) / 255.0);
 float b = floor(hex - r * 65535.0 - g * 255.0);
 float a = sign(depth) >= 0.0 "external nofollow" target="_blank" href="https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js">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 )
6. gl_Position = projectionMatrix * modelViewMatrix * position

                      = projectionMatrix * camera.matrixWorldInverse * matrixWorld * position

                      = projectionMatrix * viewMatrix * modelMatrix * position
参考资料：
1. 完整实现代码：https://gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/event/GPUPickEvent.js
2. OpenGL中使用着色器绘制深度值：https://stackoverflow.com/questions/6408851/draw-the-depth-value-in-opengl-using-shaders
3. 在glsl中，获取真实的片元着色器深度值：https://gamedev.stackexchange.com/questions/93055/getting-the-real-fragment-depth-in-glsl
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。