屏幕空间中投影球体的半径

Question

我试图在投影到屏幕空间后找到球体的可见尺寸（以像素为单位）。球体以原点为中心，相机正对着它。因此，投影球体在二维上应该是一个完美的圆。我知道这个1现有问题。然而，那里给出的公式似乎并没有产生我想要的结果。它太小了几个百分点。我认为这是因为它没有正确考虑观点。投影到屏幕空间后，由于透视缩短，您看不到半个球体，但看到的球体明显更少（您只能看到球体的一个帽，而不是整个半球2）。

如何导出精确的 2D 边界圆？

Answer 1

事实上，使用透视投影，您需要计算球体“地平线”距相机眼睛/中心的高度（该“地平线”由眼睛与球体相切的光线确定）。

注释：

d

：眼睛与球体中心之间的距离

r

：球体半径

l

：眼睛与球体“地平线”上的点之间的距离，

l = sqrt(d^2 - r^2)

h

：球体“地平线”的高度/半径

theta

：“地平线”锥体与眼睛的（半）角

phi

：theta 的余角

h / l = cos(phi)

但是：

r / d = cos(phi)

所以，最后：

h = l * r / d = sqrt(d^2 - r^2) * r / d

然后，一旦您有了

h

，只需应用标准公式（您链接的问题中的公式）即可在标准化视口中获得投影半径

pr

：

pr = cot(fovy / 2) * h / z

与

z

从眼睛到球体“地平线”平面的距离：

z = l * cos(theta) = sqrt(d^2 - r^2) * h / r

所以：

pr = cot(fovy / 2) * r / sqrt(d^2 - r^2)

最后，将

pr

乘以

height / 2

即可获得实际屏幕半径（以像素为单位）。

接下来是使用 Three.js 完成的一个小演示。可以分别使用

n

/

f

、

m

/

p

和

s

/

w

键对球体距离、半径和垂直视野进行更改。在屏幕空间中渲染的黄色线段显示了屏幕空间中球体半径的计算结果。该计算是在函数

computeProjectedRadius()

中完成的。

projected-sphere.js

：

"use strict";

function computeProjectedRadius(fovy, d, r) {
  var fov;

  fov = fovy / 2 * Math.PI / 180.0;

//return 1.0 / Math.tan(fov) * r / d; // Wrong
  return 1.0 / Math.tan(fov) * r / Math.sqrt(d * d - r * r); // Right
}

function Demo() {
  this.width = 0;
  this.height = 0;

  this.scene = null;
  this.mesh = null;
  this.camera = null;

  this.screenLine = null;
  this.screenScene = null;
  this.screenCamera = null;

  this.renderer = null;

  this.fovy = 60.0;
  this.d = 10.0;
  this.r = 1.0;
  this.pr = computeProjectedRadius(this.fovy, this.d, this.r);
}

Demo.prototype.init = function() {
  var aspect;
  var light;
  var container;

  this.width = window.innerWidth;
  this.height = window.innerHeight;

  // World scene
  aspect = this.width / this.height;
  this.camera = new THREE.PerspectiveCamera(this.fovy, aspect, 0.1, 100.0);

  this.scene = new THREE.Scene();
  this.scene.add(THREE.AmbientLight(0x1F1F1F));

  light = new THREE.DirectionalLight(0xFFFFFF);
  light.position.set(1.0, 1.0, 1.0).normalize();
  this.scene.add(light);

  // Screen scene
  this.screenCamera = new THREE.OrthographicCamera(-aspect, aspect,
                                                   -1.0, 1.0,
                                                   0.1, 100.0);
  this.screenScene = new THREE.Scene();

  this.updateScenes();

  this.renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  this.renderer.setSize(this.width, this.height);
  this.renderer.domElement.style.position = "relative";
  this.renderer.autoClear = false;

  container = document.createElement('div');
  container.appendChild(this.renderer.domElement);
  document.body.appendChild(container);
}

Demo.prototype.render = function() {
  this.renderer.clear();
  this.renderer.setViewport(0, 0, this.width, this.height);
  this.renderer.render(this.scene, this.camera);
  this.renderer.render(this.screenScene, this.screenCamera);
}

Demo.prototype.updateScenes = function() {
  var geometry;

  this.camera.fov = this.fovy;
  this.camera.updateProjectionMatrix();

  if (this.mesh) {
    this.scene.remove(this.mesh);
  }

  this.mesh = new THREE.Mesh(
    new THREE.SphereGeometry(this.r, 16, 16),
    new THREE.MeshLambertMaterial({
      color: 0xFF0000
    })
  );
  this.mesh.position.z = -this.d;
  this.scene.add(this.mesh);

  this.pr = computeProjectedRadius(this.fovy, this.d, this.r);

  if (this.screenLine) {
    this.screenScene.remove(this.screenLine);
  }

  geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0.0, 0.0, -1.0));
  geometry.vertices.push(new THREE.Vector3(0.0, -this.pr, -1.0));

  this.screenLine = new THREE.Line(
    geometry,
    new THREE.LineBasicMaterial({
      color: 0xFFFF00
    })
  );

  this.screenScene = new THREE.Scene();
  this.screenScene.add(this.screenLine);
}

Demo.prototype.onKeyDown = function(event) {
  console.log(event.keyCode)
  switch (event.keyCode) {
    case 78: // 'n'
      this.d /= 1.1;
      this.updateScenes();
      break;
    case 70: // 'f'
      this.d *= 1.1;
      this.updateScenes();
      break;
    case 77: // 'm'
      this.r /= 1.1;
      this.updateScenes();
      break;
    case 80: // 'p'
      this.r *= 1.1;
      this.updateScenes();
      break;
    case 83: // 's'
      this.fovy /= 1.1;
      this.updateScenes();
      break;
    case 87: // 'w'
      this.fovy *= 1.1;
      this.updateScenes();
      break;
  }
}

Demo.prototype.onResize = function(event) {
  var aspect;

  this.width = window.innerWidth;
  this.height = window.innerHeight;

  this.renderer.setSize(this.width, this.height);

  aspect = this.width / this.height;
  this.camera.aspect = aspect;
  this.camera.updateProjectionMatrix();

  this.screenCamera.left = -aspect;
  this.screenCamera.right = aspect;
  this.screenCamera.updateProjectionMatrix();
}

function onLoad() {
  var demo;

  demo = new Demo();
  demo.init();

  function animationLoop() {
    demo.render();
    window.requestAnimationFrame(animationLoop);
  }

  function onResizeHandler(event) {
    demo.onResize(event);
  }

  function onKeyDownHandler(event) {
    demo.onKeyDown(event);
  }

  window.addEventListener('resize', onResizeHandler, false);
  window.addEventListener('keydown', onKeyDownHandler, false);
  window.requestAnimationFrame(animationLoop);
}

index.html

：

<!DOCTYPE html>
<html>
  <head>
    <title>Projected sphere</title>
      <style>
        body {
            background-color: #000000;
        }
      </style>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
      <script src="projected-sphere.js"></script>
    </head>
    <body onLoad="onLoad()">
      <div id="container"></div>
    </body>
</html>

Answer 2

让球体的半径为

r

，并且在距观察者

d

的距离处可见。投影平面与观察者的距离为

f

。

在半角

asin(r/d)

下看到球体，因此视半径为

f.tan(asin(r/d))

，可写为

f . r / sqrt(d^2 - r^2)

。 [错误的公式是

f . r / d

。]

Answer 3

上面所示的公认答案非常好，但我需要一个不知道视场的解决方案，只是一个在世界和屏幕空间之间转换的矩阵，所以我必须调整它。

1. 我们对地平线圆的中心点感兴趣。这是另一个答案中图中线

   h

   与线

   d

   的交点。计算这一点的方法有很多，但我认为最简单的是：

    horizonCenter = lerp(sphereCenter, cameraPosition, (r / d)^2)
   

   其中

   lerp

   函数是简单的线性插值，在本例中是两点之间：

    lerp(a, b, alpha) = a + ((b - a) * alpha)
   

2. 将此点变换到屏幕空间：

    horizonCenter2 = matrix.transform(horizonCenter)
   

3. 向

   x

   坐标添加一个像素（或任何选定的数量）：

    horizonCenter2.x += 1
   

4. 变回世界空间：

    horizonCenter2 = matrix.inverse().transform(horizonCenter2)
   

5. 测量原始点和新点之间的距离，然后除以之前添加的量以获得比例因子：

    screenScale = 1 / horizonCenter.distance(horizonCenter2)
   

6. 将该比例因子乘以地平线半径

   h

   即可获得可见屏幕半径（以像素为单位）：

    h = sqrt(d^2 - r^2) * (r / d)
    screenRadius = h * screenScale