时间戳

首页 > 解决方案 > Three.js 检测对象何时被部分和完全遮挡

javascript - Three.js 检测对象何时被部分和完全遮挡

问题描述

我试图检测 Three.js 中的对象何时被部分和完全遮挡（隐藏在）另一个对象。

我当前的简单解决方案将单条射线投射到对象的中心：

function getScreenPos(object) {
  var pos = object.position.clone();
  camera.updateMatrixWorld();
  pos.project(camera);
  return new THREE.Vector2(pos.x, pos.y);
}

function isOccluded(object) {
  raycaster.setFromCamera(getScreenPos(object), camera);
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects[0] && intersects[0].object === object) {
    return false;
  } else {
    return true;
  }
}

但是，它不考虑对象的尺寸（宽度、高度、深度）。

不被遮挡（因为物体的中心不在后面） 物体未被遮挡

被遮挡（因为物体的中心在后面） 对象被遮挡

查看工作演示：

https://jsfiddle.net/kmturley/nb9f5gho/57/

目前认为我可以计算对象框的大小，并为框的每个角投射光线。但这可能还是有点太简单了：

var box = new THREE.Box3().setFromObject(object);
var size = box.getSize();

我想找到一种更强大的方法，它可以给出partially occluded布尔fully occluded值，甚至可能percentage occluded？

标签： javascriptthree.js3docclusionocclusion-culling

解决方案

在 Stack Overflow 和 Three.js 示例中搜索“GPU Picking”。这个概念可以分为三个基本步骤：

  1. 将每个形状的材质更改为独特的平面 ( MeshBasicMaterial) 颜色。
  2. 使用独特的材质渲染场景。
  3. 读取渲染帧的像素以收集颜色信息。

您的方案允许您提出一些警告。

  1. 只给你正在测试的形状一个独特的颜色——其他的都可以是黑色的。
  2. 您不需要渲染整个场景来测试一个形状。您可以调整视口以仅渲染相关形状周围的区域。
  3. 因为您只为您的测试部分提供了一种颜色，所以其余数据应该为零，从而更容易找到与您的独特颜色匹配的像素。

现在您有了像素数据，您可以确定以下内容：

  • 如果没有像素匹配独特的颜色，则形状被完全遮挡。
  • 如果某些像素与独特的颜色匹配，则该形状至少部分可见。

第二个项目符号表示该形状“至少部分”可见。这是因为您无法使用当前拥有的信息测试完全可见性。

我要做的（其他人可能有更好的解决方案）是第二次渲染相同的视口，但只有测试形状可见，这相当于部分完全可见。有了这些信息，将像素与第一次渲染进行比较。如果两者都具有相同数量（可能在公差范围内）的唯一颜色像素，那么您可以说该部分是完全可见/未遮挡的。

推荐阅读