Würfel darstellen mit verschiedenen Perspektiven

Plexian · 18. Oktober 2015, 16:41

Hey Community,

ich brauche etwas Hilfe bei der 3D-Programmierung.
Ich möchte einen einfachen Würfel (später mehrere) darstellen, aber richtig. Das heißt: Ich habe eine AnimationLoop die mit 30fps rendert und updatet. Bevor ich aber zum Würfel komme, wollte ich einfach die drei Koordinatenachsen darstellen (siehe Axes3D.cs).
Diese Klasse wird einmalig instantiiert (mit nem Scaling von (20, 20, 20)) und der AnimationLoop hinzugefügt, sodass halt die Render- und Update-Methode aufgerufen wird.
Interessant ist jetzt in Axes3D.cs die erste Zeile in der Render-Methode, da wird von alle Ecken (Vertices, Typ ist Point3D) eine Methode ToProjectionSpace aufgerufen, die soll halt 3D in 2D umwandeln, unter Berücksichtigung der Zielposition, Skalierung und Rotation der Achsen und des Weiteren der definierten Kamera und Dingen wie FOV und sowas.
Mein Problem ist, dass das ganze vllt richtig aussieht, aber bei Variation der Werte für Rotation und Position falsche Dinge rauskommen. Ich habs mal versucht darzustellen, da sollte sich eig alles um die X-Achse drehen, siehe Anhang.
Gerichtet hab ich mich dabei nach dem MVP Konzept (Model-View-Projection), seit bitte nachsichtig, ich habe wahrscheinlich irgendwas vergessen anzuhängen, fragt dann einfach.

Axes3D.cs

C#-Quellcode

public class Axes3D : RenderEntity
{
public Axes3D()
{
Vertices = new[] {new Point3D(0, 0, 0), new Point3D(1, 0, 0), new Point3D(0, 1, 0), new Point3D(0, 0, 1)};
Axes = new[] {new[] {0, 1}, new[] {0, 2}, new[] {0, 3}};
}
public Point3D[] Vertices { get; set; }
public int[][] Axes { get; }
public Point3D TargetPosition
{ get; set; } = Point3D.Origin;
public Vector3D Scaling
{ get; set; } = Vector3D.One;
public Vector3D Rotation
{ get; set; } = Vector3D.Zero;
public override void Update()
{
}
public override void Render(Graphics g)
{
//Convert 3D Vertices to ProjectedPoints
var ver = Vertices.Select(v => v.ToProjectionSpace(TargetPosition, Scaling, Rotation));
//Converts ProjectedPoints to (positioned) 2DPoints
var pt2D = ver.Select(v => new Point2D(v.X + ProjectionSettings.CanvasSize.Width / 2f, v.Y + ProjectionSettings.CanvasSize.Height / 2f)).ToArray();
//EDGES
var edges = Axes.Select(e => e.Select(i => pt2D[i])).ToArray();
var pens = new [] {new Pen(Color.Red, 2f), new Pen(Color.Blue, 2f), new Pen(Color.Green, 2f)};
for(var i = 0; i < edges.Count(); i++)
g.DrawLine(pens[i], (PointF)edges[i].ToArray()[0], (PointF)edges[i].ToArray()[1]);
g.FillEllipse(Brushes.Black, pt2D[0].X - 3, pt2D[0].Y - 3, 6, 6);
}
}

Camera.cs

ProjectionSettings.cs

ToProjectionSpace

C#-Quellcode

/// <summary>
/// Turns a 3DPoint into a 2DPoint based on all projection factors
/// </summary>
/// <param name="p">The 3DPoint in model space</param>
/// <param name="dest">The destination point in world space</param>
/// <param name="scale">The scaling</param>
/// <param name="rot">The rotation</param>
/// <returns></returns>
public static ProjectedPoint ToProjectionSpace(this Point3D p, Point3D dest, Vector3D scale, Vector3D rot)
{
var model = GetModelMatrix(dest, scale, rot);
var view = GetViewMatrix();
var proj = GetProjectionMatrix();
var mvp = proj * view * model;
var res = mvp * p;
return new ProjectedPoint(res.X, res.Y, res.Z);
}
/// <summary>
/// Creates a model matrix based on the model vertices the entity and all transformations to be done
/// </summary>
/// <returns>The model matrix.</returns>
private static Matrix4X4 GetModelMatrix(Point3D destPoint, Vector3D scaling, Vector3D rot)
{
//Model matrix
var translation = Matrix4X4.CreateTranslation(destPoint.X, destPoint.Y, destPoint.Z);
var scale = Matrix4X4.CreateScale(scaling.X, scaling.Y, scaling.Z);
var rotation = Matrix4X4.CreateRotationX(rot.X) * Matrix4X4.CreateRotationY(rot.Y) * Matrix4X4.CreateRotationZ(rot.Z);
var matrix = translation * scale * rotation;
return matrix;
}
/// <summary>
/// Creates a view (camera) matrix based on the camera position and target and the definition of "up".
/// </summary>
/// <returns>The view matrix.</returns>
private static Matrix4X4 GetViewMatrix()
{
var zaxis = Point3D.Connect(Camera.Target, Camera.Position).Normalize();
var xaxis = (Vector3D.Cross(Camera.UpVector, zaxis)).Normalize();
var yaxis = Vector3D.Cross(zaxis, xaxis);
var result = Matrix4X4.Identity;
result.M11 = xaxis.X;
result.M12 = yaxis.X;
result.M13 = zaxis.X;
result.M14 = 0.0f;
result.M21 = xaxis.Y;
result.M22 = yaxis.Y;
result.M23 = zaxis.Y;
result.M24 = 0.0f;
result.M31 = xaxis.Z;
result.M32 = yaxis.Z;
result.M33 = zaxis.Z;
result.M34 = 0.0f;
result.M41 = -Vector3D.Dot(xaxis, (Vector3D)Camera.Position);
result.M42 = -Vector3D.Dot(yaxis, (Vector3D)Camera.Position);
result.M43 = -Vector3D.Dot(zaxis, (Vector3D)Camera.Position);
result.M44 = 1.0f;
return result;
}
/// <summary>
/// Creates a perspective projection matrix based on a field of view, aspect ratio, and near and far view plane distances.
/// </summary>
/// <returns>The perspective projection matrix.</returns>
private static Matrix4X4 GetProjectionMatrix()
{
var yScale = 1.0f / (float)Math.Tan(ProjectionSettings.FieldOfView * 0.5f);
var xScale = yScale / ProjectionSettings.AspectRatio;
var result = Matrix4X4.Identity;
result.M11 = xScale;
result.M12 = result.M13 = result.M14 = 0.0f;
result.M22 = yScale;
result.M21 = result.M23 = result.M24 = 0.0f;
result.M31 = result.M32 = 0.0f;
result.M33 = ProjectionSettings.FarPlane / -ProjectionSettings.Depth;
result.M34 = -1.0f;
result.M41 = result.M42 = result.M44 = 0.0f;
result.M43 = ProjectionSettings.NearPlane * ProjectionSettings.FarPlane / -ProjectionSettings.Depth;
return result;
}

Plexian · 19. Oktober 2015, 22:51

Grundlage für die Mathematik ist diese Seite, soweit ich mich errinnern kann :whistling:

rodrigo-silveira.com/3d-progra…ormation-matrix-tutorial/

Die Matrix-Rechnungen an sich sollten stimmen, die Matrix4x4-Klasse stammt aus dem Framework selbst, wurde von mir nur angepasst.

Niko Ortner · 20. Oktober 2015, 00:59

Sowas hab ich schon mal von Hand gebastelt, aber nur relativ einfach.
Ich würde Dir da WPF empfehlen. Das macht es gaaanz einfach:

XML-Quellcode

<Border
Background="#01FFFFFF"
MouseDown="Viewport3D_MouseDown"
MouseUp="Viewport3D_MouseUp"
MouseMove="Viewport3D_MouseMove"
MouseWheel="Viewport3D_MouseWheel"
>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera
x:Name="ViewportCamera"
FarPlaneDistance="200"
LookDirection="-2 2 -2"
UpDirection="0,0,1"
NearPlaneDistance="0.1"
Position="2 -2 2"
FieldOfView="70"
/>
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<!--<DirectionalLight
Color="White"
Direction="0,0,-1"
/>-->
<AmbientLight Color="White"/>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D>
<MeshGeometry3D.Positions>
<Point3D X="0" Y="0" Z="0"/>
<Point3D X="1" Y="0" Z="0"/>
<Point3D X="0" Y="1" Z="0"/>
<Point3D X="1" Y="1" Z="0"/>
<Point3D X="0" Y="0" Z="1"/>
<Point3D X="1" Y="0" Z="1"/>
<Point3D X="0" Y="1" Z="1"/>
<Point3D X="1" Y="1" Z="1"/>
</MeshGeometry3D.Positions>
<MeshGeometry3D.TriangleIndices>
<!--
Das sind die Indices der Punkte oben. Man muss Dreiecke bilden.
Die Reihenfolge der einzelnen Indices pro Dreieck müssen stimmen, sonst sieht man die Fläche "von innen". In welcher Reihenfolge die Dreiecke stehen ist egal.
-->
0 2 1, 1 2 3
</MeshGeometry3D.TriangleIndices>
</MeshGeometry3D>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<MaterialGroup>
<!--
Das ist das Material dieser Seite. Diffuse Material ist das einfachste. Hat eine ganz einfache Farbe.
MaterialGroup kann man sich bei einem einzigen Material sparen, aber so kann man mehrere Materialien kombinieren (z.B. SpecularMaterial).
-->
<DiffuseMaterial Brush="Red"/>
</MaterialGroup>
</GeometryModel3D.Material>
</GeometryModel3D>
<!--
Hier weitere GeometryModel3D für die übrigen Seiten einfügen. Die Ecken sind die selben, aber die Indices sind anders:
0 1 4, 4 1 5
1 3 5, 5 3 7
3 2 7, 7 2 6
2 0 4, 2 4 6
und
4 5 6, 6 5 7
Natürlich macht es nur Sinn, die einzelnen Flächen in mehrere GeometryModel3D aufzuteilen, wenn man unterschiedliche Materialien haben möchte. Wenn alles ein Material ist, kann man alle Dreiecke in eine Liste packen.
-->
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Border>

Und für die Kamerasteuerung noch ein bisschen Code:

VB.NET-Quellcode

Imports System.Windows.Media.Media3D
Class MainWindow 'Das Fenster halt, in dem Du arbeitest.
Dim HorizontalAngle As Double = (45 - 90) / 180 * Math.PI
Dim VerticalAngle As Double = 45 / 180 * Math.PI
Dim Zoom As Double = 5
Dim MouseIsDown As Boolean = False
Dim LastMousePosition As Point
Public Sub New()
InitializeComponent()
ActualizeCamera()
End Sub
Private Sub Viewport3D_MouseDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
MouseIsDown = True
LastMousePosition = e.GetPosition(Me)
End Sub
Private Sub Viewport3D_MouseUp(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs)
MouseIsDown = False
End Sub
Private Sub Viewport3D_MouseMove(sender As System.Object, e As System.Windows.Input.MouseEventArgs)
If MouseIsDown Then
Dim CurrentPosition = e.GetPosition(Me)
Dim Delta = CurrentPosition - LastMousePosition
HorizontalAngle -= Delta.X / 100
VerticalAngle = Clamp(VerticalAngle + Delta.Y / 100, -Math.PI / 2, Math.PI / 2)
LastMousePosition = CurrentPosition
ActualizeCamera()
End If
End Sub
Private Function Clamp(Target As Double, Min As Double, Max As Double) As Double
If Target < Min Then
Return Min
End If
If Target > Max Then
Return Max
End If
Return Target
End Function
Private Sub Viewport3D_MouseWheel(sender As System.Object, e As System.Windows.Input.MouseWheelEventArgs)
Dim Delta = e.Delta
If Delta > 0 Then
Do While Delta > 0
Zoom /= 1.05
Delta -= 120
Loop
ElseIf Delta < 0 Then
Do While Delta < 0
Zoom *= 1.05
Delta += 120
Loop
End If
ActualizeCamera()
End Sub
Private Sub ActualizeCamera()
Dim Z = Math.Sin(VerticalAngle)
Dim ZCos = Math.Cos(VerticalAngle)
Dim X = Math.Cos(HorizontalAngle) * ZCos
Dim Y = Math.Sin(HorizontalAngle) * ZCos
ViewportCamera.Position = New Point3D(X * Zoom, Y * Zoom, Z * Zoom)
ViewportCamera.LookDirection = New Vector3D(-X, -Y, -Z)
End Sub
End Class

Plexian · 20. Oktober 2015, 14:31

Okay, ich danke dir @Niko Ortner , dann werde ich mich wohl mal mit WPF befassen (ist eh schon längst überfällig).

Magst du mir den Gefallen tun und ein Bildchen anhängen bevor ich alles bei mir anpasse, und mir erklären woher die Werte aus der ActualizeCamera-Methode kommen.
Achja, bis jetzt habe ich ein ganzes Projekt was für die Darstellung gedacht war - sprich die AnimationLoop, sämtliche Klassen für die Mathematik (Matrix4x4, Point und Vector in 2D und 3D) etc., ist das damit alles überfällig ?

Niko Ortner · 21. Oktober 2015, 19:50

Gerne doch:

Im Visual Studio Designer sieht man die Standardansicht. Im Fenster hab ichs dann ca. 180° gedreht.
Zum besseren Verständnis hab ich die Achsen eingezeichnet.

Mit WPF fällt fast die ganze Mathematik weg, denn WPF verwendet ja die Grafikkarte, und die kann selbst 3D rendern

Du musst nur noch selbst berechnen, wo sich die Kamera befindet (Position-Property), wo sie hin schaut (LookDirection-Property) und wo bei der Kamera oben ist (UpDirection-Property), denn man kann die Kamera auch z.B. kopfüber oder schräg halten.
Bei UpDirection hab ich ein bisschen gecheatet. Da ich festgelegt habe, dass Z positiv immer nach oben zeigen soll (man kann den Würfel nicht kopfüber anzeigen), reicht es, 0,0,1 anzugeben.
Der Rest ist simple Trigonometrie. Horizontale Mausbewegungen verändern den horizontalen Winkel (HorizontalAngle), vertikale den vertikalen Winkel (VerticalAngle). Mit dem Mausrad wird eingestellt, wie weit die Kamera vom Mittelpunkt weg ist (Zoom). Die Berechnung in der ActualizeCamera-Methode ist eine simple Berechnung mit Kugelkorrdinaten. Ist etwas schwer in Worten zu erklären. Vielleicht hilft das: de.wikipedia.org/wiki/Kugelkoordinaten

Würfel darstellen mit verschiedenen Perspektiven

Würfel darstellen mit verschiedenen Perspektiven

C#-Quellcode

C#-Quellcode

C#-Quellcode

C#-Quellcode

XML-Quellcode

VB.NET-Quellcode

Benutzer online 1

Ähnliche Themen

2 Benutzer haben hier geschrieben