Dreidimensionale Grafiken können im Browser nicht nur mithilfe von WebGL oder
auf WebGL basierenden Bibliotheken implementiert werden , sondern auch durch einfaches Rendern auf einer 2D- Leinwand mit den Funktionen von HTML5 Canvas .
Im Internet gibt es viele Bücher, Artikel und Informationen zur Verwendung von
HTML5 Canvas zum Anzeigen von Zeichnungen, Grafiken und sogar Animationen in einigen Browsergames.
Die Möglichkeit, die Leinwand direkt zur Anzeige dreidimensionaler Objekte zu verwenden, wird jedoch fast nie in Betracht gezogen.
Lassen Sie uns näher darauf eingehen.
Wenn ein dreidimensionales Computerspiel erstellt wird, beispielsweise ein 3D- Shooter, versuchen die Entwickler, es so realistisch wie möglich zu gestalten und verwenden dafür Grafikbeschleuniger. In diesem Fall kann auf die entsprechenden Softwaretools nicht verzichtet werden. Für solche Spiele im Browser ist es sinnvoll, WebGL und Three.js zu verwenden . Am wichtigsten ist, dass Sie mit Hilfe von Shadern, die für diese Softwaretools entwickelt wurden, eine realistische Beleuchtung der Szene und der Objekte in der Szene erzielen können.
Wenn Sie jedoch nur ein dreidimensionales Objekt von allen Seiten anzeigen müssen, können Sie auf WebGL und Shader verzichten . Beispielsweise sollen einige CAD / CAM- Programme nur die Form von Objekten modellieren und beinhalten keine realistische Beleuchtung.
Auf der Canvas and Geometry- Website erkläre ich konsequent und ausführlich, wie Sie mit ausschließlich HTML5 Canvas Bilder von 3D- Polyedermodellen erstellen können .
Three.js , 30 () Three.js
3D- three.js. HTML5 Canvas. . .
— three.js . .
, -:
- , ..
- .
- .
- ( three.js RayCaster').
- .
- . / .
- 3D- . three.js .
- .
- .
- .
WebGL/three.js — Z-.
Canvas ( ) .
online- JavaScript.
, prototype WebGeometry, . prototype. JavaScript. «», . .
C/C++ JavaScript .
, ( Chrome Firefox) Notepad++ JavaScript — —
.
, .
.
( ) Visual Studio.
, ,
Visul C++ . Chrome Firefox .
JavaScript React, Angular, Vue.
. . ( ) ES6.
.
online- . , , , ( ) .
Die
Canvas2D Bibliothek wurde gemacht , um die Modelle und die Größe sie auf die Leinwand zu machen ,
die sich um tatsächlich eine kleine Wrapper ist HTML5 Canvas - Funktionen .
Gleichzeitig werden die in der canvas2D- Bibliothek enthaltenen Funktionen so erstellt, dass sie zusammen mit den in der WebGeometry- Bibliothek enthaltenen Funktionen am bequemsten zu verwenden sind
.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry . Wenn Sie solche Transformationen durchführen müssen, finden Sie die entsprechenden Funktionen, wenn Sie three.js verwenden , in dieser Bibliothek selbst oder in der beliebten glMatrix- Bibliothek
Diese beiden genannten Bibliotheken haben jedoch praktisch keine Funktionen zur Lösung analytischer Geometrieprobleme.
Daher wurde die Funktionsbibliothek WebGeometry erstellt . Die
Sylvester- Bibliothek verfügt über einige (aber nicht alle erforderlichen) solcher Funktionen. Daher habe ich beschlossen, eine Bibliothek basierend auf den vorhandenen Funktionen in C / C ++ von Grund auf für meine Aufgaben vollständig geeignet zu machen .
, three.js.
OpenGL OpenGL .
, , .
, ,
:
Three.js 16 WebGeometry ( ), three.js.
Diamond Cuts 7 WebGeometry three.js. .
three.js.
Diamond Cuts collection in environments
Diamond Cuts with Dispersion Light .
three.js.
Visual C++ . (three.js API WebGL).
Seiten können Sie zu den Seiten dieser Site gehen, die 36 Modelle verschiedener Schnitte enthalten.
Die Anzeige auf diesen Seiten erfolgt über die reine WebGL-API .
Von hier aus können Sie auch diein C / C ++ und OpenGL erstellte Datei meines Programms für Windows herunterladen, um Schnittmodelle anzuzeigen . DLL- Dateien mehrerer Modelle werden von derselben Seite heruntergeladen.
- Auf Seiten
Scheine auf dich Verrückter Diamant! Auf derselben Seite können Siesich auf der Bühnezur Musik von Pink Floyd und anderen Musikgruppen bewegen und sich die geschnittenen Modelle ansehen. Bewegungssteuerung - Maus und Tastatur (←, →, ↑, ↓, <,>) wie bei Computerspielen. Die Anzeige erfolgt mit three.js .
Meiner Meinung nach war es sehr interessant. Vergessen Sie nicht, den Ton beim Anschauen einzuschalten!
Ich hoffe, dass meine Websites denjenigen helfen, die 3D-Grafiken und Computergeometrie studieren und verwenden. Sie können nicht nur Websites durchsuchen, sondern auch mein Repository aufrufen .
Vielen Dank an alle, die meinen Artikel gesehen haben!