Wie eine 3D-Grafik-Engine zu schreiben, die in JavaScript verwendet werden können? [geschlossen]

Question

Ich habe vor kurzem konzentrierten sich auf einige coole Formen in einer HTML 5.0 Leinwand zeichnen. Und ich will eine 3D-Grafik-Engine schreiben, die in JavaScript verwendet werden können. Ich habe schon fertig einen rotierenden Würfel. Und ich möchte die Formen wie in diesem Beispiel beenden: http://gyu.que.jp/jscloth /touch.html .

Wer hat in diesem Bereich schon einmal versucht haben?

Answer 1

Edit: Diese Frage wurde vor vielen Jahren gefragt. Seitdem jeder Browser mit Ausnahme von IE ( jetzt? ) hat die Unterstützung für WebGL hinzugefügt. Sie können viele Proben sehen hier: http://www.chromeexperiments.com/webgl/

ich Sie wirklich wollen nicht entmutigen, sondern um eine 3D zu schreiben Motor in JavaScript, müssen Sie sehr gut auskennen und intim in der Mathematik / Logik hinter 3D-Rendering sein.

Da Sie nicht Ihr aktuelles Fachwissen angeben, ich nehme an, Sie tun nicht ... in diesem Fall empfehle ich, dass Sie woanders starten. Zum Beispiel XNA Game Studio . Sie schreiben den Code in C #, und es gibt bereits eine Menge von gut geschrieben APIs, die abstrakt den meisten (aber definitiv nicht alle) der harten Teile. Aber es ist eine gute Möglichkeit, viele der Konzepte und Mathematik hinter 3D-Rendering zu lernen.

Wenn Sie jedoch tot Satz mit JavaScript auf Start, gibt es bereits eine Menge von Ressourcen im Internet darüber. Zum Beispiel dieses :-)
http://dev.opera.com / articles / view / 3D-Spiele-mit-Leinwand-and-Ray-Casting-Teil /

Viel Glück!

Answer 2

schrieb ich eine Javascript-3D-Engine vor etwa ein Jahr, um die Zeit, die Google ihren Chrome-Browser mit der superschnellen V8 Javascript-Engine veröffentlicht. Leider, da kein Browser eine 3D-Grafik-API (wie OpenGL oder Direct3D) aussetzt, verzieht sich dieser Motor Bitmap-Bilder auf der Webseite, um affine Textur-mapped Dreiecke (die perspektivisch korrekte Textur-mapped Dreiecke minderwertig sind) zu erreichen, das ist ganz langsam.

Ich habe meine Javascript 3D-Engine eine 3D-Modellbibliothek zu bauen. (Hinweis: Sie sehen nicht das erste Modell - es ist die größte und am langsamsten zu sehen!). Die Leistung ist um 10 Frames pro Sekunde für ein 3D-Modell mit rund einem 1000 Dreiecke in Google Chrome auf meinem PC.

Ich habe als offen zu diesem Motor, den Quellcode der Beschaffung, aber ich habe nie um dies zu tun. Wenn es genug Interesse besteht, werde ich den Quellcode auf Google Code setzen.

Mein aktuelles Lieblingsprojekt ist ein Silverlight 3D-Engine und Modell-Viewer , die eine Software, 3D-Engine (dh meine C # -Code hat die Kontrolle über die Farbe jeden Pixel). Silverlight 3 ist viel schneller als Javascript, aber es ist nicht-Standard, ein Browser-Add-on und noch keine 3D-Hardware-beschleunigte Grafik unterstützt (ohne viel Overhead).

Update: In der Zeit, da ich diesen Beitrag ursprünglich geschrieben hätte, ich den Silverlight-Modell-Viewer oben erwähnt aktualisiert verwenden Silverlight 5 und Hardware-beschleunigten 3D

.

Answer 3

Wie wäre es eine bereits bestehende 3D-Bibliothek für JavaScript-Bindung? Wie OpenGL.

V8-GL macht 80% der OpenGL API JavaScript:

Answer 4

Ich weiß nicht, wie durch das Schreiben eines gehen würde. Aber hier sind ein paar, die vorhanden sind.

• Die Render-Engine
• Rotierende Torus

Answer 5

Um einen schreiben müssen Sie zunächst entscheiden, ob Sie excanvas unterstützen wird, so IE sie verwenden kann, oder nicht.

Das wird einige Grenzen gesetzt, was Sie tun können, wenn Sie IE unterstützen.

Ihre beste Wette ist, um nur mit der Erstellung einige primäre Formen zu beginnen, und die meisten wahrscheinlich, dass Sie bestimmte Grundelemente haben wollen, die alles andere von gebaut werden kann, so kann man bei OpenGL oder DirectX aussehen wollen, auf ihre Grundelemente.

Wenn Sie das haben, und Sie können sie um im 3D-Raum bewegen, dann werden Sie auf Hinzufügen von Kameras zu Beginn der Suche, aber das wird relativ einfach im Vergleich zu Schritt 1.

Leider dies alles ist sehr schwer in Mathematik, so dass Sie eine enormen Leistungseinbußen nehmen, wenn Sie mehr 3D-Objekte erstellen, die häufig bewegen müssen.

Ich denke, die beste Wette zu warten ist, wie Ende 2007 gibt es Blogs für Firefox und Opera war in Leinwand 3D-Unterstützung zu haben: http://starkravingfinkle.org/blog/2007/11/animating-with-canvas/

Der Grund dafür ist, dass, wenn es in den Browser integriert werden, dann werden die meisten der schweren Arbeit getan werden, besonders wenn es etwas Aroma von OpenGL unterstützt.