Les graphiques en trois dimensions peuvent être implémentés dans le navigateur non seulement en utilisant WebGL ou des
bibliothèques basées sur WebGL , mais également par un simple rendu sur un canevas 2D en utilisant les fonctions de HTML5 Canvas pour cela .
Il existe de nombreux livres, articles et informations sur Internet sur la façon d'utiliser
HTML5 Canvas pour afficher des dessins, des graphiques et même des animations dans certains jeux par navigateur.
Cependant, la possibilité d'utiliser directement le canevas pour afficher des objets en trois dimensions n'est presque jamais envisagée.
Attardons-nous là-dessus plus en détail.
Si un jeu vidéo en trois dimensions est en cours de création, par exemple un jeu de tir 3D , les développeurs essaient de le rendre aussi réaliste que possible et utilisent des accélérateurs graphiques pour cela. Dans ce cas, il ne sera pas possible de se passer des outils logiciels appropriés. Pour de tels jeux dans le navigateur, il est logique d'utiliser WebGL et Three.js . Plus important encore, avec l'aide de shaders conçus pour ces outils logiciels, vous pouvez obtenir un éclairage réaliste de la scène et des objets sur la scène.
Mais si vous avez juste besoin d'afficher un objet en trois dimensions de tous les côtés, vous pouvez vous passer de WebGL et de shaders . Par exemple, certains programmes CAD / CAM sont destinés uniquement à modéliser la forme des objets et n'impliquent pas l'utilisation d'un éclairage réaliste.
Sur le site Canvas and Geometry , j'explique de manière cohérente et détaillée comment en utilisant exclusivement HTML5 Canvas, vous pouvez créer des images de modèles de polyèdres 3D .
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- . , , , ( ) .
La bibliothèque
canvas2D a été conçue pour rendre les modèles et les dimensionner sur le canevas ,
qui est en fait un petit wrapper autour des fonctions HTML5 Canvas .
Dans le même temps, les fonctions incluses dans la bibliothèque canvas2D sont conçues de manière à être plus pratiques à utiliser avec les fonctions incluses dans la bibliothèque
WebGeometry.
WebGeometry. , , 3D- . , . WebGeometry
, , .
. WebGeometry . Si vous avez besoin d'effectuer de telles transformations, les fonctions correspondantes peuvent être trouvées, si vous utilisez three.js , puis dans cette bibliothèque elle-même ou dans la bibliothèque glMatrix populaire
Cependant, ces deux bibliothèques mentionnées n'ont pratiquement aucune fonction pour résoudre les problèmes de géométrie analytique.
Par conséquent, la bibliothèque de fonctions WebGeometry a été créée . La bibliothèque
Sylvester a certaines (mais pas toutes requises) de telles fonctions, et j'ai donc décidé de créer une bibliothèque complètement adaptée à mes tâches à partir de zéro, basée sur les fonctions existantes en C / C ++ .
, 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).
Pages, vous pouvez aller sur les pages de ce site qui contiennent 36 modèles de différentes coupes.
L'affichage sur ces pages se fait à l'aide de l' API WebGL pure.
Ici aussi, vous pouvez télécharger lefichier exe de mon programme pour Windows réalisé en C / C ++
et OpenGL pour visualiser les modèles de coupe. Les fichiers DLL de plusieurs modèles sont téléchargés à partir de la même page.
- Sur les pages
Brille sur toi Crazy Diamond! sur le même site, vous pouvez vousdéplacer sur la scèneau son de la musique de Pink Floyd et d'autres groupes de musique et regarder les modèles coupés. Contrôle de mouvement - souris et clavier (←, →, ↑, ↓, <,>) comme dans les jeux informatiques. L'affichage se fait à l'aide de three.js .
À mon avis, cela s'est avéré très intéressant. N'oubliez pas d'activer le son lorsque vous regardez!
J'espère que mes sites aideront ceux qui étudient et utilisent les graphiques 3D et la géométrie informatique. En plus de la navigation sur les sites, vous pouvez accéder à mon référentiel .
Merci à tous d'avoir regardé mon article!