円の形をパースペクティブにする実践的な方法は？

Question

これはスタックオーバーフローに属している必要があるかどうかは完全にはわかりませんが、ここに入ります。

私はHTML5 <canvas>オブジェクトを使用して、tic-tac-toeの簡単なバージョンを3Dで作成しています。第1プレイヤーは十字記号を使用し、第2プレイヤーは円記号を使用します。ポイントは、円形の図形をどのようにパースペクティブに配置するかわからないということです。

現在のところ、私が使用している方法は、それらの点の間に直線を描くことによって円を偽造するためにできるだけ多くの角度（ある程度まで）を持つ正多角形を作成することです。これらの点の座標（角度）は、正弦/余弦を使用して計算されています。これはうまく動作しますが、それはポイントのかなり多くを必要と

：50件の角度を（十分の円のように見えます）を使用して

：6つの角度を使用して

円をうまく模倣する。さらに、私がボールを作るならば、私はもっと困っているだろう。たとえば、Wikipediaの画像では、かなりの点があっても、まだ「ばらばらの」サーフェスが残っていることがわかります。http://en.wikipedia.org/wiki/File:Sphere_wireframe.svg

円をより効果的に配置する方法があるかどうか疑問に思っていましたおそらくポイントなしで、より現実的な形で現実的に見える円形の形状を作り出すことができる。

ご意見ありがとうございます。

Answer 1

円の多角形近似が実用的な方法です。座標を計算し、それらに透視変換を適用するのは非常に簡単です。おそらくその解決策に固執すべきです。

しかし、あなたが考えるウサギの穴は、あなたが数学的なものになっていると非常に涼しいです。球や楕円を含むすべての2次曲面は4×4行列で表現できることが分かりました。それだけでなく、一度4x4に変換すると、標準的な4x4変換行列をすべて適用できます（単なる乗算ではありません）。 IIRCを使用すると、透視変換を適用することもでき、結果はまだ二次曲面です。今は、3D世界で2Dシェイプであなたを助けてくれません。しかし、円は円柱と平面の交点であり、両者は変形することができるので、問題の解決策があるはずです。

Here is a link describing the representation and transformations of quadrics

あなたが示されているように、地面上の円の透視投影は、多くの場合、スクリーン空間に回転楕円形です。私は変換方法を持っていませんが、私は存在すると信じて、あなたが今持っているものより複雑です。

Answer 2

円は、遠近法で見ると楕円です。 Here's an explanation。

Answer 3

それは私に数時間かかりましたが、私はfinnallyすべての方程式とSVGコードのデモを開発しました： http://jsfiddle.net/6b8oLhz0/9/ 私はそれが唯一の方程式だ与えセンター、半径、および軸の回転を計算するためにhttp://mathworld.wolfram.com/Ellipse.htmlを使用しましたが。 コードの最も興味深い部分はおそらくこれです：

function ellipseBy3DCircle(circle){ 
    var r=circle.radius; 
    var n=circle.normal; 
    var c=circle.center; 
    //Let (u,v) be a point of the Ellipse. 
    //Which point of the circle it represents? 
    //This 3-D point must have a form of (u*z,v*z,z) for some z, 
    //bacause it lays on a ray from observer (0,0,0) through (u,v,1) on the screen. 
    //A circle is an intersection of a plane with a sphere. 
    //So we have two conditions for our point : 
    //1) it has to belong to the plane given by the center and normal of the circle: 
    //(u*z-c.x)*n.x+ (v*z-c.y)*n.y + (z-c.z)*n.z = 0 
    //2) it has to belong to the sphere given by the center and radius 
    //(u*z-c.x)^2 + (v*z-c.y)^2 + (z-c.z)^2 = 0 
    //The first equation alows us to express z in terms of u,v and constants: 
    //z = (c.x*n.x+c.y*n.y+c.z*n.z)/(u*n.x+v*n.y+n.z) 
    //  ^^^^^^^^^^^^ s ^^^^^^^^^ ^^^^ t(u,v) ^^^^ 
    var s=c.x*n.x+c.y*n.y+c.z*n.z; 
    //t(u,v)=u*n.x+v*n.y+n.z 
    //The second equation gives us: 
    //zz(uu+vv+1)-2z(u*c.x+v*c.y+z*c.z)+c.x^2+c.y^2+c.z^2-r^2 = 0 
    //         ^^^^^^^^ H ^^^^^^^^^ 
    var H=c.x*c.x+c.y*c.y+c.z*c.z-r*r; 
    //Recall however, that z has u and v in denominator which makes it hard to solve/simplify. 
    //But z=s/t(u,v), so let us multiply both sides by t(u,v)^2 : 
    //ss*(uu+vv+1)-2*s*t(u,v)*(u*c.x+v*c.y+c.z)+t(u,v)^2*H=0 
    //ss*uu+ss*vv+ss-2*s*(u*n.x+v*n.y+n.z)*(u*c.x+v*c.y+c.z)+(u*n.x+v*n.y+n.z)*(u*n.x+v*n.y+n.z)*H=0 
    //By regrouping terms so as to match the ax^2+2bxy+cy^2+2dx+2fy+g = 0 formula, we get: 
    var A=s*s+H*n.x*n.x-2*s*n.x*c.x; 
    var B=H*n.x*n.y-s*n.x*c.y-s*n.y*c.x; 
    var C=s*s+H*n.y*n.y-2*s*n.y*c.y; 
    var D=H*n.x*n.z-s*n.x*c.z-s*n.z*c.x; 
    var F=H*n.y*n.z-s*n.y*c.z-s*n.z*c.y; 
    var G=s*s+H*n.z*n.z-2*s*n.z*c.z; 

    return ellipseByEquation(A,B,C,D,F,G); 
}