PixPart ist der vorläufige Name meiner JavaScript Engine für Partikel im dreidimensionalen Raum, die mit Pixeln in die Canvas gezeichnet werden. Etwas unglücklich erklärt und vorläufig deshalb, weil die Engine, bzw. das ganze Projekt noch sehr am Anfang steht.
Der aktuelle Stand erlaubt aber eine kleine Demo und genau die möchte ich euch nicht vorenthalten.
Per Klick (einfach auf die untere Fläche mit dem Gesicht klicken) könnt ihr zwischen verschiedenen Modellen hin und her switchen und mit „Open Controls“ gibt es noch ein paar Einstellungsmöglichkeiten um die Anzeige zu justieren.
Der aktuelle Stand erlaubt aber eine kleine Demo und genau die möchte ich euch nicht vorenthalten.
Per Klick (einfach auf die untere Fläche mit dem Gesicht klicken) könnt ihr zwischen verschiedenen Modellen hin und her switchen und mit „Open Controls“ gibt es noch ein paar Einstellungsmöglichkeiten um die Anzeige zu justieren.
Seit dem wir Zugriff auf die Pixel der Canvas haben ist das Canvas Element noch einmal ein ganzes Stück interessanter geworden. Denn, die „Pixel manipulation with canvas“ ist unglaublich schnell. In ersten Tests konnte ich 200000 Partikel über die Canvas „huschen“ lassen und hatte immer noch satte 60 FPS!
Seb Lee-Delisle hatte dazu bereits 2012 einen sehr schönen Artikel geschrieben.
Als ich vor kurzem wieder über den Artikel gestolpert bin war er meine Inspiration für die PixPart Engine. In seinem Artikel erklärt Seb auch sehr schön und vor allem auch für Anfänger verständlich, wie er die 3D Koordinaten in 2D Koordinaten umrechnet und diese dann in die Canvas zeichnet. Hier und da ist der Code aus den Beispielen nicht optimal, aber insgesamt sehr gut lesbar und verständlich. Zum Einstieg in die Thematik Partikel, Canvas und 3D also besonders lesenswert. Cheers Seb!
Für meine Engine habe ich aber die setPixel und getPixel Funktionen anders geschrieben und vor allem das „clearRect“ zum löschen der Canvas weggelassen und durch eine deutlich schnellere Lösung ersetzt. Die Rotationen habe ich mit Hilfe einer stark modifizierten Matrix4 und Vector3 Klasse aus der three.js Engine von Mr.doob realisiert. Beide Klassen zusammen sind jetzt nur noch 10KB schwer. Vor allem aber kann man mit Hilfe der Matrix Klasse viel komplexere Berechnungen durchführen als das in Sebs Beispielen der Fall ist. Lediglich die Berechnung von 3D in 2D Koordinaten hab ich nicht wirklich abgeändert. Aber die Berechnung mit FOV hat ja auch nicht der Seb erfunden. Ich glaub ich hatte diesen „Trick“ mit FOV schon zu Flash5 Zeiten bei Keith Peters gesehen.
Ich will jetzt aber noch gar nicht zu viele technische Details verraten, da das ganze Projekt noch ganz am Anfang steht und sich noch vieles ändern kann.
Demnächst dann habe ich hoffentlich mehr zu berichten. Bis dahin viel Spaß mit der Demo.
Und noch ein kleiner Tipp zum Schluss. Um noch mehr Perfomance rauszukitzeln und besonders wenn ihr im Fullscreen-Modus seid, schaltet am besten unter „Open Controls“ „Multiply“ aus und „Clear ImageData“ ein.
Seb Lee-Delisle hatte dazu bereits 2012 einen sehr schönen Artikel geschrieben.
Als ich vor kurzem wieder über den Artikel gestolpert bin war er meine Inspiration für die PixPart Engine. In seinem Artikel erklärt Seb auch sehr schön und vor allem auch für Anfänger verständlich, wie er die 3D Koordinaten in 2D Koordinaten umrechnet und diese dann in die Canvas zeichnet. Hier und da ist der Code aus den Beispielen nicht optimal, aber insgesamt sehr gut lesbar und verständlich. Zum Einstieg in die Thematik Partikel, Canvas und 3D also besonders lesenswert. Cheers Seb!
Für meine Engine habe ich aber die setPixel und getPixel Funktionen anders geschrieben und vor allem das „clearRect“ zum löschen der Canvas weggelassen und durch eine deutlich schnellere Lösung ersetzt. Die Rotationen habe ich mit Hilfe einer stark modifizierten Matrix4 und Vector3 Klasse aus der three.js Engine von Mr.doob realisiert. Beide Klassen zusammen sind jetzt nur noch 10KB schwer. Vor allem aber kann man mit Hilfe der Matrix Klasse viel komplexere Berechnungen durchführen als das in Sebs Beispielen der Fall ist. Lediglich die Berechnung von 3D in 2D Koordinaten hab ich nicht wirklich abgeändert. Aber die Berechnung mit FOV hat ja auch nicht der Seb erfunden. Ich glaub ich hatte diesen „Trick“ mit FOV schon zu Flash5 Zeiten bei Keith Peters gesehen.
Ich will jetzt aber noch gar nicht zu viele technische Details verraten, da das ganze Projekt noch ganz am Anfang steht und sich noch vieles ändern kann.
Demnächst dann habe ich hoffentlich mehr zu berichten. Bis dahin viel Spaß mit der Demo.
Und noch ein kleiner Tipp zum Schluss. Um noch mehr Perfomance rauszukitzeln und besonders wenn ihr im Fullscreen-Modus seid, schaltet am besten unter „Open Controls“ „Multiply“ aus und „Clear ImageData“ ein.
