屏幕空间中投影球体的半径 [英] Radius of projected sphere in screen space

问题描述

我试图在投影到屏幕空间后找到一个以像素为单位的球体的可见大小.球体以原点为中心，相机正对着球.因此，投影球体应该是二维的理想圆.我知道这个进行的小型演示.可以分别使用 n / f ， m / p 和 s / w 对密钥.屏幕空间中呈现的黄线段显示了屏幕空间中球体半径的计算结果.此计算是在函数 computeProjectedRadius()中完成的.

projected-sphere.js :

 使用严格"；函数compactProjectedRadius(fovy，d，r){var fov;fov = fovy/2 * Math.PI/180.0;//返回1.0/Math.tan(fov)* r/d;//错误的返回1.0/Math.tan(fov)* r/Math.sqrt(d * d-r * r);//对}函数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容器；this.width = window.innerWidth;this.height = window.innerHeight;//世界场景方面= this.width/this.height;this.camera =新的THREE.PerspectiveCamera(this.fovy，Aspect，0.1，100.0);this.scene =新的THREE.Scene();this.scene.add(THREE.AmbientLight(0x1F1F1F));light =新的THREE.DirectionalLight(0xFFFFFF);light.position.set(1.0，1.0，1.0).normalize();this.scene.add(light);//屏幕场景this.screenCamera =新的THREE.OrthographicCamera(-aspect，aspect，-1.0、1.0，0.1，100.0);this.screenScene =新的THREE.Scene();this.updateScenes();this.renderer =新的THREE.WebGLRenderer({抗锯齿:正确});this.renderer.setSize(this.width，this.height);this.renderer.domElement.style.position =相对";this.renderer.autoClear = false;容器= 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几何；this.camera.fov = this.fovy;this.camera.updateProjectionMatrix();如果(this.mesh){this.scene.remove(this.mesh);}this.mesh =新的THREE.Mesh(新的THREE.SphereGeometry(this.r，16，16)，新的THREE.MeshLambertMaterial({颜色:0xFF0000}));this.mesh.position.z = -this.d;this.scene.add(this.mesh);this.pr = computeProjectedRadius(this.fovy，this.d，this.r);如果(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 =新的THREE.Line(几何学，新的THREE.LineBasicMaterial({颜色:0xFFFF00}));this.screenScene =新的THREE.Scene();this.screenScene.add(this.screenLine);}Demo.prototype.onKeyDown = function(event){console.log(event.keyCode)开关(event.keyCode){案例78://'n'this.d/= 1.1;this.updateScenes();休息;案例70://'f'this.d * = 1.1;this.updateScenes();休息;案例77://'m'this.r/= 1.1;this.updateScenes();休息;案例80://'p'this.r * = 1.1;this.updateScenes();休息;案例83://'s'this.fovy/= 1.1;this.updateScenes();休息;案例87://'w'this.fovy * = 1.1;this.updateScenes();休息;}}Demo.prototype.onResize = function(event){var Aspect;this.width = window.innerWidth;this.height = window.innerHeight;this.renderer.setSize(this.width，this.height);方面= this.width/this.height;this.camera.aspect =外观；this.camera.updateProjectionMatrix();this.screenCamera.left = -aspect;this.screenCamera.right =外观;this.screenCamera.updateProjectionMatrix();}函数onLoad(){var demo;demo = new Demo();demo.init();函数animationLoop(){demo.render();window.requestAnimationFrame(animationLoop);}函数onResizeHandler(event){demo.onResize(event);}函数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>投影球体</title>< style>身体 {背景颜色:#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> 

I'm trying to find the visible size of a sphere in pixels, after projection to screen space. The sphere is centered at the origin with the camera looking right at it. Thus the projected sphere should be a perfect circle in two dimensions. I am aware of this 1 existing question. However, the formula given there doesn't seem to produce the result I want. It is too small by a few percent. I assume this is because it is not correctly taking perspective into account. After projecting to screen space you do not see half the sphere but significantly less, due to perspective foreshortening (you see just a cap of the sphere instead of the full hemisphere 2).

How can I derive an exact 2D bounding circle?

解决方案

Indeed, with a perspective projection you need to compute the height of the sphere "horizon" from the eye / center of the camera (this "horizon" is determined by rays from the eye tangent to the sphere).

Notations:

d: distance between the eye and the center of the sphere
r: radius of the sphere
l: distance between the eye and a point on the sphere "horizon", l = sqrt(d^2 - r^2)
h: height / radius of the sphere "horizon"
theta: (half-)angle of the "horizon" cone from the eye
phi: complementary angle of theta

h / l = cos(phi)

but:

r / d = cos(phi)

so, in the end:

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

Then once you have h, simply apply the standard formula (the one from the question you linked) to get the projected radius pr in the normalized viewport:

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

with z the distance from the eye to the plane of the sphere "horizon":

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

so:

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

And finally, multiply pr by height / 2 to get the actual screen radius in pixels.

What follows is a small demo done with three.js. The sphere distance, radius and the vertical field of view of the camera can be changed by using respectively the n / f, m / p and s / w pairs of keys. A yellow line segment rendered in screen-space shows the result of the computation of the radius of the sphere in screen-space. This computation is done in the function 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>

这篇关于屏幕空间中投影球体的半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！