MBR

MBR

关注
发信
关注(28)粉丝(399)

javascript - Three.js:如何计算摄像机图像中对象的最小边界矩形？

我想计算并绘制相机图像(2D投影)中对象的最小边界矩形(MBR)。
下图显示了下面提供的示例的cube对象的MBR。
我拍摄了相机图像的屏幕截图，并用肉眼手动绘制了MBR(红色矩形)。
如何以编程方式计算MBR(摄像机图像中的大小和位置)并将其绘制在摄像机图像的 Canvas 中(实时)？

javascript - Three.js:如何计算摄像机图像中对象的最小边界矩形？-LMLPHP

编辑:我基于此相关的solution在示例中添加了MBR，但是我将MBR绘制在2D覆盖 Canvas 上。在您移动相机(使用鼠标)之前，它可以正常工作。那么MBR是不正确的(移位和错误的大小)。计算是否不适合我的示例，或者实现中存在错误？

注意:我不仅要绘制MBR，还要找出相机图像上的2D坐标和尺寸。

function computeScreenSpaceBoundingBox(mesh, camera) {
  var vertices = mesh.geometry.vertices;
  var vertex = new THREE.Vector3();
  var min = new THREE.Vector3(1, 1, 1);
  var max = new THREE.Vector3(-1, -1, -1);

  for (var i = 0; i < vertices.length; i++) {
    var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld);
    var vertexScreenSpace = vertexWorldCoord.project(camera);
    min.min(vertexScreenSpace);
    max.max(vertexScreenSpace);
  }

  return new THREE.Box2(min, max);
}

function normalizedToPixels(coord, renderWidthPixels, renderHeightPixels) {
  var halfScreen = new THREE.Vector2(renderWidthPixels/2, renderHeightPixels/2)
  return coord.clone().multiply(halfScreen);
}

const scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 0.5 ).normalize();
scene.add( light );
scene.add(new THREE.AmbientLight(0x505050));

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const renderWidth = window.innerWidth;
const renderHeight = window.innerHeight;
const camera = new THREE.PerspectiveCamera( 75, renderWidth / renderHeight, 0.1, 1000 );
camera.position.z = 10;

const controls = new THREE.OrbitControls( camera );
controls.update();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const clock = new THREE.Clock();

const overlayCanvas = document.getElementById('overlay');
overlayCanvas.width = renderWidth;
overlayCanvas.height = renderHeight;
const overlayCtx = overlayCanvas.getContext('2d');
overlayCtx.lineWidth = 4;
overlayCtx.strokeStyle = 'red';


const animate = function () {
  const time = clock.getElapsedTime() * 0.5;

  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  cube.position.x = Math.sin(time) * 5

  controls.update();
  renderer.render( scene, camera );

  const boundingBox2D = computeScreenSpaceBoundingBox(cube, camera);
  // Convert normalized screen coordinates [-1, 1] to pixel coordinates:
  const {x: w, y: h} = normalizedToPixels(boundingBox2D.getSize(), renderWidth, renderHeight);
  const {x, y} =
    normalizedToPixels(boundingBox2D.min, renderWidth, renderHeight)
      .add(new THREE.Vector2(renderWidth / 2, renderHeight / 2));

  overlayCtx.clearRect(0, 0, renderWidth, renderHeight);
  overlayCtx.strokeRect(x, y, w, h);
};

animate();
body {
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#overlay {
  position: absolute;
}
<body>
    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <canvas id="overlay"></canvas>
</body>


注意:如果我的问题不清楚，请写评论，以便我知道要详细描述。

最佳答案

感谢WestLangley向我指出了solution的相关Holger L，也感谢manthrax修复了该解决方案中的一个错误，使我错过了自己的错误。在我的示例中，我只是将y坐标从WebGL 2D屏幕坐标(原点在 Canvas 的中心，y轴指向上方)错误地转换为常规2D Canvas 坐标(原点在 Canvas 的左上角)和y轴指向下方)。我不认为y轴是反向的。下面是该示例的固定版本:

const computeScreenSpaceBoundingBox = (function () {
  const vertex = new THREE.Vector3();
  const min = new THREE.Vector3(1, 1, 1);
  const max = new THREE.Vector3(-1, -1, -1);
  return function computeScreenSpaceBoundingBox(box, mesh, camera) {
    box.set(min, max);
    const vertices = mesh.geometry.vertices;
    const length = vertices.length;
    for (let i = 0; i < length; i++) {
      const vertexWorldCoord =
        vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld);
      const vertexScreenSpace = vertexWorldCoord.project(camera);
      box.min.min(vertexScreenSpace);
      box.max.max(vertexScreenSpace);
    }
  }
})();

const renderWidth = window.innerWidth;
const renderHeight = window.innerHeight;
const renderWidthHalf = renderWidth / 2;
const renderHeightHalf = renderHeight / 2;

const scene = new THREE.Scene();
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 0.5).normalize();
scene.add(light);
scene.add(new THREE.AmbientLight(0x505050));

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const camera = new THREE.PerspectiveCamera(75, renderWidth / renderHeight, 0.1, 1000);
camera.position.z = 10;

const controls = new THREE.OrbitControls(camera);
controls.update();

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const clock = new THREE.Clock();

const overlayCanvas = document.getElementById('overlay');
overlayCanvas.width = renderWidth;
overlayCanvas.height = renderHeight;
const overlayCtx = overlayCanvas.getContext('2d');
overlayCtx.lineWidth = 4;
overlayCtx.strokeStyle = 'red';

const boundingBox2D = new THREE.Box2();

const animate = function () {
  const time = clock.getElapsedTime() * 0.5;

  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  cube.position.x = Math.sin(time) * 5;

  controls.update();
  renderer.render(scene, camera);

  computeScreenSpaceBoundingBox(boundingBox2D, cube, camera);
  // Convert normalized screen coordinates [-1, 1] to pixel coordinates:
  const x = (boundingBox2D.min.x + 1) * renderWidthHalf;
  const y = (1 - boundingBox2D.max.y) * renderHeightHalf;
  const w = (boundingBox2D.max.x - boundingBox2D.min.x) * renderWidthHalf;
  const h = (boundingBox2D.max.y - boundingBox2D.min.y) * renderHeightHalf;

  overlayCtx.clearRect(0, 0, renderWidth, renderHeight);
  overlayCtx.strokeRect(x, y, w, h);
};

animate();
body {
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#overlay {
  position: absolute;
}
<body>
    <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <canvas id="overlay"></canvas>
</body>

07-24 17:27
Powered by LMLPHP ©2024 MBR 0.027684