2016-03-30 2 views
0

Ich habe eine oddball Frage ... Es ist wahrscheinlich weniger mit WebGL und mehr zu tun mit nur gerade 3D-Geometrie und Matrixmultiplikation zu tun .. aber hier geht:WebGL - wie Vektorraum auf Bildschirm unproject

I benutze eine Javascript-Bibliothek von Drittanbietern, um WebGL-Rendering durchzuführen. Mit dieser Bibliothek möchte ich einen Punkt im 3D-Raum (x, y, z) auf den 2D-Bildschirmbereich des HTML-Canvas, auf dem die Szene gerendert wird, "projizieren".

Die Bibliothek bietet keine in Methoden gebaut, dies zu tun ... und es ist nicht Open Source ...

Die Bibliothek jedoch zwei nützliche Funktionen bietet. Eine für das Abrufen der "Ansicht" - und "Projektions" -Matrizen der aktuellen Kamera. Und ein weiteres zum Berechnen eines Trefferpunktes - ein bisschen wie ein Raycast. Um einen Trefferpunkt zu berechnen, übergeben Sie die Bildschirmkoordinaten (Xs, Ys) und wenn es ein Objekt trifft, gibt es den 3D-Welt-Raum-Punkt (Xw, Yw, Zw) zurück

Ich hoffe damit Informationen, jemand kann mir helfen, die Lösung zurück zu entwickeln, um von (Xw, Yw, Zw) zu (Xs, Ys) zu gehen - angesichts der Kameramatrixinformation.

Hier einige Beispieldaten:

TestPoint = 
{ 
    ScreenCoordinateX: 1098, 
    ScreenCoordinateY: 998 
} 

HitPoint = 
{ 
    WorldCoordinateX: 12082.2, 
    WorldCoordinateY: 200.18, 
    WorldCoordinateZ: -5848 
} 

CameraViewMatrix = 
{ 
    0: -0.817419, 1: -0.130593, 2: 0.561045, 3: 0, 
    4: 0.57542, 5: -0.139804, 6: 0.805821, 7: 0, 
    8: -0.0267983, 9: 0.981529,  10: 0.189425, 11: 0, 
    12: 7844.46, 13: 6482.28,  14: -17852.8, 15: 1 
} 

CameraProjectionMatrix = 
{ 
    0: 1.9222,  1: 0,   2: 0,   3: 0,  
    4: 0,   5: 3.73205, 6: 0,   7: 0, 
    8: 0,   9: 0,   10: -1.58869, 11: -1, 
    12: 0,   13: 0,  14: -13901.6, 15: 0 
} 

Vielen Dank im Voraus für jede Hilfe Sie

+0

Mögliche Duplikat zu screenen [Wie Objekt in WebGL 3D-Raum von einer Maus erhalten klicken Sie koordinieren] (http://stackoverflow.com/questions/7364693/how-to -get-object-im-webgl-3d-raum-von-a-maus-click-koordinate) –

Antwort

1

Unproject oder Projekt zur Verfügung stellen kann? Normalerweise bedeutet unproject, dass Sie eine Bildschirmposition einnehmen (wie die Maus) und in eine 3D-Position (wie ein durch den Kegelstumpf gehender Strahl) verwandeln.

Um einen Vektor auf Bildschirmfläche zu projizieren, benötigen Sie eine Ansicht Projektionsmatrix. In Ihrem Fall haben Sie nur eine Ansicht und eine Projektion, also multiplizieren Sie sie zusammen, um eine Ansicht zu erhaltenProjektion, dann multiplizieren Sie Ihren Vektor mit dieser Matrix. Das Ergebnis sollte ein 4d-Vektor sein. Teilen Sie den xyz-Anteil durch den w-Anteil. (Beachten Sie, dass einige Bibliotheken bereits eine Matrix * Vektorfunktion haben, die durch w geteilt wird).

Sie haben jetzt Clipspace-Koordinaten (-1 bis +1). Skalieren der Raum

zeroToOne = (clipSpace + 1)/2 
screenSpace = zeroToOne * screenDimension 

There's examples here for positioning HTML text to match WebGL

+0

Ja, ich meine eigentlich Projekt eher als unproject. Ich bin oft verwirrt zwischen den beiden –

+0

Verwalten, um dies mit der Matrix-Multiplikation, die Sie vorgeschlagen ... zusammen mit meiner eigenen Konvertierung von Clipspace zu screenspace zu arbeiten –