Rotation um Z-Achse Vector3 - Mathematik dahinter?
Hallöchen.
Ich versuche gerade, mittels eigenst geschriebener Vector-klassen (3D und 2D) eine Visualisierung einer Sternen-Wolke zu realisieren.
index.php -> https://pastebin.com/3j7RpGKe
main.js -> https://pastebin.com/ySE4UWpY
libs/vectors.js -> https://pastebin.com/UL3AKmPj
libs/seededrandom.js -> https://pastebin.com/bT3kLavZ
Wer kann mir nun helfen, dass sich diese Kugel um die Z-Achse "dreht" (es handelt sich technisch gesehen um eine 3-dimensionale kugel aus punkten)
Warum mittels Div's?
Wollte dafür keine Canvas-Umgebung vorerst aufbauen. Erst das Mathe, dann die Visualisierung.
Und ja: Ich könnte das viel schneller mit THREE.js umsetzen. ABER ich brauche eine 2-dimensionale koordinatenmatrix, um mit der maus mit den einzelnen punkten mathematisch interagieren zu können.
Wer kann mir da etwas mathematisch unter die Arme greifen?
1 Antwort
Am besten schaust du dir mal an, wie man das mit Graphik-APIs wie OpenGL macht.
Da werden 4x4-Matrizen verwendet, um Projektion und soetwas darzustellen und um Transformationen (e.g. Rotationen) der Geometrie darzustellen.
Außerdem kannst du das, wenn du das so baust, später evtl. auch leicht in WebGL portieren.
https://en.wikipedia.org/wiki/Rotation_matrix
https://en.wikipedia.org/wiki/Projection_matrix
In folgendem Link siehst du, was in OpenGL getan wird, um die 3D-Punkte auf eine 2D-Ebene zu projezieren:
Ich möchte nicht auf Libraries zurückgreifen. Egal welcher art. Auch möchte ich nicht auf OpenGL (was im grunde eine Schnittstelle zur Grafikkarte ist) zurückgreifen. Ich möchte schlicht die gesamte Mathematik dahinter begreifen.
Schon klar. Ging ja nur darum, sich von da etwas abzuschauen...
Somit wäre eine 3D-Umgebung dafür gänzlich ungeeignet.
Äh...wieso das? Da kann man das genauso implementieren. Für alle Punkte im Radius berechnest du die Entfernung zum Klickpunkt und wählst den, mit der niedrigsten Entfernung. Evtl. kann man da sogar etwas mit dem Depth-Test tricksen und das somit beschleunigen.
ich habe es inzwischen gelöst mittels Sin, Cos, Atan2 und einiger offset-berechungen.
Na dann ist's ja gut...
Das ganze soll letztendlich für ein Browsergame herhalten. [...]
Klingt ja recht komplex. Ob du das ohne Bibliotheken, noch dazu in Javascript, performant hinbekommst ist aber eine andere Sache. Heißt aber nicht, dass es nicht funktionieren könnte. Gab ja schon vor Jahrzehnten ähnliche Spiele (Elite), die liefen ja auch auf den damaligen Rechner.
Ich habe das schonmal als Browsergame umgesetzt gehabt, jedoch nie fertiggestellt. Und das mit den Galaxieclustern, Galaxien, Sternen, Planeten, Monden, Bevölkerung, Habitablen Zonen usw. war alles schon implementiert. Jedoch nur in 2D ... Da alles vollständig prozedural generiert wurde, habe ich die Speicherung der Informationen NUR für die einzelnen Spieler vornehmen lassen. Kurzum: Besuchte ein Spieler einen Planeten, wurden dessen Daten "generiert" auf basis der prozeduralen berechnungen (SeededRandom). Das geschah dann serverseitig. Die Informationen waren letztendlich für ALLE spieler identisch. Diese "Besichtigten" daten habe ich dann in die Datenbanktabelle speichern lassen und in einer weiteren Datenbanktabelle dem Spieler diese Informationen "freigegeben". Somit war dieser Planet also "bekannt", jedoch für Spieler, die dort noch nicht waren, nach wie vor "unbekannt". Das war einer der wichtigen Punkte, die ich im Spiel mit drin haben wollte, da man nicht nur durch kämpfen, rauben, missionen und produktion geld verdienen können sollte, sondern anderen spielern auch mittels freiem Handel die möglichkeit geben wollte, sternenkarten zu handeln. PS: Raumschiffgeschwindigkeiten und Handelsrouten waren ebenso wichtig. Man sollte von einem bewohnten planeten sachen kaufen können und auf einem anderen planeten gewinnbringend verkaufen können. Wobei es auch schmuggelware gab, welche von der npc- oder spielergesteuerten polizei überwacht und geahndet werden könnte. Es gibt verschiedene Raumschiffklassen, welche unterschiedliche Geschwindigkeiten erreichen können, wodurch man entsprechend darauf basierend auch länger braucht, um zum nächsten Stern zu gelangen. Was Sternenkarten durchaus lukrativ macht. Dazu noch Treibstoff, Raumschiffwartung, eventuelle Räuberbanden (Ja. Man kann auch einen Piraten spielen, wenn man will) und und und. Und das soll alles als Browsergame agieren.
Ich werde die SeededRandom-Funktion noch auf PHP um-konfigurieren, dass sie in PHP UND in JavaScript die exakt selben Resultate liefern. Dadurch kann ich die meißte "nicht-essentielle" berechnung den Clienten überlassen und nur, wenn es darum geht, daten von Spielern speichern zu lassen, diese dann Serverseitig berechnen bzw. gegenrechnen zu lassen.
Nebenbei: Man soll auf einer Mission die Andromeda bergen und daraus den Slipstreamantrieb erforschen können, um zwischen Galaxieclustern springen zu können ;) *räusper* :D Und später sogar noch einen Interdimensionalen Spaltantrieb, welcher zwischen ganzen Universen springen lässt. :D
Ja. Ich habe mir SEHR viel vorgenommen. ABER ich weiß auch, dass ich dieser Aufgabe gewachsen bin.
Zum ersten Absatz:
Kennst du "Elite"? Das ist ein Weltraumspiel, das genau so abläuft. Gibt es auch schon ewig.
Also klar, das ist nunmal die Grundlage eines Weltraumspieles, was man dann darauf aufbaut macht es dann einzigartiger.
Aber falls du Ideen brauchst könnte dir das evtl. etwas liefern. (Sieht aber nicht so aus, als bräuchtest du Ideen.)
Ja. Ich habe mir SEHR viel vorgenommen. ABER ich weiß auch, dass ich dieser Aufgabe gewachsen bin.
Das glaube ich dir. Wobei das, je nach Beschäftigungsstand, eine zeitliche Frage sein könnte, wie weit du mit der Entwicklung kommst.
Aber solange du Spaß daran hast. Ich habe bei meinen Projekten meist das Problem, dass ich irgendwann die lust daran verliere und die Projekte dnan versanden.
Und, dass ich alles perfekt machen möchte, was dann entsprechend viel Arbeit benötigt.
Wenn dein Spiel fertig ist oder im Testbetrieb kannst du es mir ja mal verlinken, dann kann ich mir das ansehen.
Oder wenn du das mal vermarkten möchtest und jemanden brauchst, der sich mit Grafikprogrammierung auskennt.
Ich habe das ganze mal mit Zahlen versehen. Um genau zu sein. 1. und 2. Zeile pro Punkt = X und Y auf dem Canvas. Die Zeile darunter = Zugrundeliegende Vector3-Koordinate *450 (da sie nur zwischen 0 und 1 als fließkomma definiert sind aktuell noch)
Ich möchte nicht auf Libraries zurückgreifen. Egal welcher art. Auch möchte ich nicht auf OpenGL (was im grunde eine Schnittstelle zur Grafikkarte ist) zurückgreifen. Ich möchte schlicht die gesamte Mathematik dahinter begreifen.
Außerdem wollte ich, dass wenn man auf das canvas klickt, die klickposition dem innerhalb eines "trigger-radius" befindlichen nächstgelegenen punkt an der aktuell projezierten position der grundkoordinate zugewiesen werden kann. (Reverse Detection). Somit wäre eine 3D-Umgebung dafür gänzlich ungeeignet.
Zuguterletzt: ich habe es inzwischen gelöst mittels Sin, Cos, Atan2 und einiger offset-berechungen. Diese lassen sich letztendlich auch zurückverfolgen zur eigentlichen grund-vector3-quelle der jeweiligen positionen.
Das ganze soll letztendlich für ein Browsergame herhalten. Kurzum: Das Browsergame wird ein Weltraum-Setting haben und ich wollte keine 2-Dimensionale "Galaxie" haben. Wie man an der SeededRandom-Klasse (selbst geschrieben. Kann gern auf wiederholende muster getestet werden. Selbst nach 7mio Durchgängen keine wiederholenden ergebnisse.) sehen kann, soll es letztendlich prozedural sein. Und damit meine ich das GESAMTE universum. Von den Galaxieclustern bis hin zu der Farbe der Pflanzen eines Planeten, insofern dieser sich innerhalb der habitablen Zone eines Sterns innerhalb einer Galaxie befindet und alt genug ist. Diese mathematische Sache hier ist grundlegend nur die Navigationskarte innerhalb der Galaxie. *räusper*
Warum ich nicht auf libraries zugreifen will? Ich HASSE es, die Kontrolle abzugeben ... Und manchmal ist die Kontrolle, die man nur "umformuliert", komplexer als das eigentliche Problem. Daher ... Keine Libraries und kein OpenGL ;) (Was ja im grunde auch eine Library ist)
Danke dennoch :) PS: Mit THREE.js habe ich das ganze schon ohne weiteres visualisiert bekommen, stieß dann aber auf das problem mit dem "Auswählen"/Anklicken.