我试图理解从世界中的 3D 点 (x, y, z) 到 2D 图像上的虚拟表示的公式。
我以这个页面为例:
http://dynamic.pulselive.com/dynamic/client/espn/tennis/presets/
如何从球的真实 (x, y, z) 位置获得 (a, b) 位置?
如果你检查页面,会有很多有趣的信息:
该页面使用此 3D 库http://raphaeljs.com/
球由 (x,y,0) 位置表示,例如“VR 相机 [1-4]”视图:
this.graphs['vr-2'].setData( {"names":["PLAYER A","PLAYER B"],"sets":[0,0],"data":{"1.1.1":{ "serverIndex":0, "serveType":"f", "servePlacement":{"x":0,"y":0}, "returnStrike":{"z":0.9144,"x":0,"y":0}, "placements":[[ {"x":0,"y":0}, {"x":-6.4008,"y":0}, {"x":-11.8872,"y":5.4864}, {"x":-11.8872,"y":-5.4864}, {"x":11.8872,"y":5.4864}, {"x":11.8872,"y":-5.4864} ],[]],"strikes":[[],[]]},}} );
网的中间似乎是 (0, 0, 0)
在上面的例子中,四个球是:
-11.8872, 5.4864, 0 (the ball on the tennis double line) 0, 0, 0 (the ball in the middle of the net) 6.4008, 0, 0 (the ball at the T serve line) -11.8872,-5.4864, 0 (the ball on the other tennis double line)
文件 projection.js 具有以下内容:
onProjections([{ "sp":{"height":290,"width":288,"y":1.57271656153463,"p":-2.37960648536682,"tx":44.8464085506826,"ty":0.072299872443644,"tz":43.6183372879028,"r":0.0,"ar":1.0,"fl":1876.41418457031,"cx":144,"cy":145}, "rsp":{"height":290,"width":288,"y":1.56934654388598,"p":-2.26160676579457,"tx":32.6921108381257,"ty":0.227987701481753,"tz":19.2898811340332,"r":0.0,"ar":1.0,"fl":557.320129394531,"cx":144,"cy":145}, "p":{"height":290,"width":288,"y":1.57234654402847,"p":-2.01060693582986,"tx":40.2668354447684,"ty":0.0886826017731878,"tz":15.4698811340333,"r":0.0,"ar":1.0,"fl":1027.31091308594,"cx":144,"cy":145}, "vr-4":{"height":290,"width":578,"y":-3.14002369728572,"p":-3.14159274101257,"tx":0.0720691962205988,"ty":-0.237841598739008,"tz":144.869881134034,"r":0.0,"ar":1.0,"fl":1735.24694824219,"cx":289,"cy":145}, "vr-3":{"height":290,"width":578,"y":3.13971663596315,"p":-1.80660665035248,"tx":-0.0380399327222413,"ty":21.4384628442103,"tz":8.04833728790282,"r":0.0,"ar":1.0,"fl":333.111877441406,"cx":289,"cy":145}, "vr-2":{"height":290,"width":578,"y":2.14571658875068,"p":-1.86560642719269,"tx":27.0765197103578,"ty":16.2179742216193,"tz":10.4983372879028,"r":0.0,"ar":1.0,"fl":445.122161865234,"cx":289,"cy":145}, "vr-1":{"height":290,"width":578,"y":1.56571656120214,"p":-1.88360643386841,"tx":37.1591340096487,"ty":-0.0542132391350438,"tz":10.9683372879027,"r":0.0,"ar":1.0,"fl":787.308471679688,"cx":289,"cy":145}, "rhp":{"height":290,"width":288,"y":1.57134654398098,"p":-2.25760674476624,"tx":31.4921270358275,"ty":0.153327426083581,"tz":18.0298811340332,"r":0.0,"ar":1.0,"fl":557.320129394531,"cx":144,"cy":145} }]);
我认为我的问题归结为如何使用 projection.js 中的数据从 (x, y, z) 位置计算 (a, b) 位置?请注意,我正在尝试获取公式,并且我对 javascript 库不太感兴趣,因为我将不得不使用不同的工具进行实现。
编辑#1:
视图数据似乎包括:height,width,y (yaw), p (pan), tx, ty, tz (camera position), r (roll), ar (???, always 1), fl (focal length ???), cx, cy (图像中心????)。
此页面提供了一个公式,但它不包括偏航:
http://freespace.virgin.net/hugo.elias/routines/3d_to_2d.htm
procedure 3Dto2D (x, y, z, pan, centre, position)
x = x + position.x
y = y + position.y
z = z + position.z
new.x = x*cos(pan.x) - z*sin(pan.x)
new.z = x*sin(pan.x) + z*cos(pan.x)
new.y = y*cos(pan.y) - new.z*sin(pan.y)
z = new.y*cos(pan.y) - new.z*sin(pan.y)
x = new.x*cos(pan.z) - new.y*sin(pan.z)
y = new.x*sin(pan.z) + new.y*cos(pan.z)
if z > 0 then
screen.x = x / z * zoom + centre.x
screen.y = y / z * zoom + centre.y
end if
如果我考虑 VR Camera 2 网球双线上的球,我有以下信息:
REAL WORLD POSITION (from html source)
X: -11.8872
Y: -5.4864
Y: 0.0
VR CAMERA 2 INFORMATION (from javascript projection.js)
height: 290
width: 578
y: 2.14571658875068
p: -1.86560642719269
tx: 27.0765197103578
ty: 16.2179742216193
tz: 10.4983372879028
r: 0.0
ar: 1.0
fl: 445.122161865234
cx: 289
cy: 145
2D LOCATION (from live inspection of page in browser inspector)
A: 121.9715646498276
B: 193.3313740587937
函数 (A, B) = f(X, Y, Z, height, width, y, p, tx, ty, tz, r, ar, fl, cx, cy) 是什么?