Afficher les images et autres formes plates dans les pages Web est assez facile. Cependant, quand il s'agit d'afficher des formes 3D, les choses deviennent moins faciles, car la géométrie 3D est plus complexe que la géométrie 2D. Pour ce faire, vous pouvez utiliser des technologies et des bibliothèques dédiées, comme Webgl et Three.js par exemple.
Cependant, ces technologies ne sont pas nécessaires si vous voulez simplement afficher des formes de base, comme un cube. De plus, ils ne vous aideront pas à comprendre comment ils fonctionnent et comment nous pouvons afficher les formes 3D sur un écran plat.
Le but de ce tutoriel est d'expliquer comment nous pouvons créer un moteur 3D simple pour le Web, sans WebGL. Nous verrons d'abord comment nous pouvons stocker des formes 3D. Ensuite, nous verrons comment afficher ces formes, dans deux vues différentes.
Le monde virtuel diffère du vrai de manière majeure: rien n'est continu et tout est discret. Par exemple, vous ne pouvez pas afficher un cercle parfait sur un écran. Vous pouvez l'aborder en dessinant un polygone ordinaire avec beaucoup de bords: plus vous avez de bords, plus vous «parfait» est votre cercle.
En 3D, c'est la même chose et chaque forme doit être approchée avec l'équivalent 3D d'un polygone: un polyèdre (une forme 3D dans laquelle nous ne trouvons que des faces plates comme des côtés non incurvés comme dans une sphère). Ce n'est pas surprenant lorsque nous parlons d'une forme qui est déjà un polyèdre, comme un cube, mais c'est quelque chose à garder à l'esprit lorsque nous voulons afficher d'autres formes, comme une sphère.
Pour deviner comment stocker un polyèdre, nous devons nous rappeler comment une telle chose peut être identifiée en mathématiques. Vous avez sûrement déjà fait de la géométrie de base pendant vos années scolaires. Pour identifier un carré, par exemple, vous l'appelez ABCD, avec A, B, C et D se référant à des sommets qui composent chaque coin du carré.
Pour notre moteur 3D, ce sera le même. Nous commencerons par stocker chaque sommet de notre forme. Ensuite, cette forme répertorie ses visages, et chaque visage répertorie ses sommets.
Pour représenter un sommet, nous avons besoin de la bonne structure. Ici, nous créons une classe pour stocker les coordonnées du sommet.
<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span> <span>this.x = parseFloat(x);
</span> <span>this.y = parseFloat(y);
</span> <span>this.z = parseFloat(z);
</span><span>};
</span>Maintenant, un sommet peut être créé comme tout autre objet:
<span>var A = new Vertex(10, 20, 0.5); </span>
Ensuite, nous créons une classe représentant notre polyèdre. Prenons un cube comme exemple. La définition de la classe est ci-dessous, avec l'explication juste après.
<span>var <span>Cube</span> = function(center<span>, size</span>) {
</span> <span>// Generate the vertices
</span> <span>var d = size / 2;
</span>
<span>this.vertices = [
</span> <span>new Vertex(center.x - d, center.y - d, center.z + d),
</span> <span>new Vertex(center.x - d, center.y - d, center.z - d),
</span> <span>new Vertex(center.x + d, center.y - d, center.z - d),
</span> <span>new Vertex(center.x + d, center.y - d, center.z + d),
</span> <span>new Vertex(center.x + d, center.y + d, center.z + d),
</span> <span>new Vertex(center.x + d, center.y + d, center.z - d),
</span> <span>new Vertex(center.x - d, center.y + d, center.z - d),
</span> <span>new Vertex(center.x - d, center.y + d, center.z + d)
</span> <span>];
</span>
<span>// Generate the faces
</span> <span>this.faces = [
</span> <span>[this.vertices[0], this.vertices[1], this.vertices[2], this.vertices[3]],
</span> <span>[this.vertices[3], this.vertices[2], this.vertices[5], this.vertices[4]],
</span> <span>[this.vertices[4], this.vertices[5], this.vertices[6], this.vertices[7]],
</span> <span>[this.vertices[7], this.vertices[6], this.vertices[1], this.vertices[0]],
</span> <span>[this.vertices[7], this.vertices[0], this.vertices[3], this.vertices[4]],
</span> <span>[this.vertices[1], this.vertices[6], this.vertices[5], this.vertices[2]]
</span> <span>];
</span><span>};
</span>En utilisant cette classe, nous pouvons créer un cube virtuel en indiquant son centre et la longueur de ses bords.
<span>var cube = new Cube(new Vertex(0, 0, 0), 200); </span>
Le constructeur de la classe du cube commence par générer les sommets du cube, calculé à partir de la position du centre indiqué. Un schéma sera plus clair, donc voir ci-dessous les positions des huit sommets que nous générons:
Ensuite, nous énumérons les visages. Chaque visage est un carré, nous devons donc indiquer quatre sommets pour chaque visage. Ici, j'ai choisi de représenter un visage avec un tableau mais, si vous en avez besoin, vous pouvez créer une classe dédiée pour cela.
Lorsque nous créons un visage, nous utilisons quatre sommets. Nous n'avons pas besoin d'indiquer à nouveau leur position, car ils sont stockés dans l'objet this.vertices [i]. C'est pratique, mais il y a une autre raison pour laquelle nous l'avons fait.
Par défaut, JavaScript essaie d'utiliser le moins de mémoire possible. Pour y parvenir, il ne copie pas les objets qui sont passés sous forme d'arguments de fonctions ou même stockés en tableaux. Pour notre cas, c'est un comportement parfait.
En fait, chaque sommet contient trois nombres (leurs coordonnées), plus plusieurs méthodes si nous devons les ajouter. Si, pour chaque visage, nous stockons une copie du sommet, nous utiliserons beaucoup de mémoire, ce qui est inutile. Ici, tout ce que nous avons, ce sont les références: les coordonnées (et autres méthodes) sont stockées une fois, et une seule fois. Comme chaque sommet est utilisé par trois faces différentes, en stockant des références et non des copies, nous divisons la mémoire requise par trois (plus ou moins)!
Si vous avez déjà joué avec 3D (avec des logiciels comme Blender par exemple, ou avec des bibliothèques comme WebGL), vous avez peut-être entendu dire que nous devrions utiliser des triangles. Ici, j'ai choisi de ne pas utiliser de triangles.
La raison de ce choix est que cet article est une introduction au sujet et nous afficherons des formes de base comme les cubes. L'utilisation de triangles pour afficher les carrés serait plus une complication que toute autre chose dans notre cas.
Cependant, si vous prévoyez de construire un rendu plus complet, vous devez savoir que, en général, les triangles sont préférés. Il y a deux raisons principales à cela:
Il y a un autre avantage dans le stockage des références au lieu de copies. Lorsque nous voulons modifier un polyèdre, l'utilisation d'un tel système divisera également le nombre d'opérations nécessaires de trois.
pour comprendre pourquoi, rappelons-nous encore une fois notre cours de mathématiques. Lorsque vous voulez traduire un carré, vous ne le traduisez pas vraiment. En fait, vous traduisez les quatre sommets et vous rejoignez les traductions.
Ici, nous ferons de même: nous ne toucherons pas les visages. Nous appliquons l'opération recherchée sur chaque sommet et nous avons terminé. Au fur et à mesure que les visages utilisent les références, les coordonnées des faces sont automatiquement mises à jour. Par exemple, voyez comment nous pouvons traduire notre cube précédemment créé:
<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span> <span>this.x = parseFloat(x);
</span> <span>this.y = parseFloat(y);
</span> <span>this.z = parseFloat(z);
</span><span>};
</span>Nous savons comment stocker des objets 3D et comment agir sur eux. Il est maintenant temps de voir comment les voir! Mais, nous avons d'abord besoin d'un petit contexte dans la théorie, afin de comprendre ce que nous allons faire.
Actuellement, nous stockons les coordonnées 3D. Cependant, un écran ne peut afficher que des coordonnées 2D, nous avons donc besoin d'un moyen de transformer nos coordonnées 3D en 2D: c'est ce que nous appelons une projection en mathématiques. La projection 3D à 2D est une opération abstraite réalisée par un nouvel objet appelé appareil photo virtuel. Cette caméra prend un objet 3D et convertit ses coordonnées en 2D, pour les envoyer au rendu qui les affichera à l'écran. Nous supposerons ici que notre appareil photo est placé à l'origine de notre espace 3D (donc ses coordonnées sont (0,0,0)).
Depuis le début de cet article, nous avons parlé de coordonnées, représentées par trois nombres: X, Y et Z. Mais pour définir les coordonnées, nous avons besoin d'une base: Z est-elle la coordonnée verticale? Est-ce que cela va en haut ou en bas? Il n'y a pas de réponse universelle et pas de convention, car le fait est que vous pouvez choisir ce que vous voulez. La seule chose que vous devez garder à l'esprit, c'est que lorsque vous agissez sur des objets 3D, vous devez être cohérent, car les formules changeront en fonction de cela. Dans cet article, j'ai choisi la base que vous pouvez voir dans le schéma du cube ci-dessus: x de gauche à droite, y de l'arrière en avant et z du bas en haut.
Maintenant, nous savons quoi faire: nous avons des coordonnées dans la base (x, y, z) et, pour les afficher, nous devons les convertir en coordonnées dans la base (x, z): comme c'est un avion , nous serons en mesure de les afficher.
Il n'y a pas une seule projection. Pire, il existe un nombre infini de projections différentes! Dans cet article, nous verrons deux types de projection différents, qui sont en pratique les plus utilisés.
Avant de projeter nos objets, écrivons la fonction qui les affichera. Cette fonction accepte comme paramètres un tableau répertoriant les objets à rendre, le contexte de la toile qui doit être utilisé pour afficher les objets et d'autres détails nécessaires pour dessiner les objets au bon endroit.
Le tableau peut contenir plusieurs objets à rendre. Ces objets doivent respecter une chose: avoir une propriété publique nommée faces qui est un tableau répertoriant tous les visages de l'objet (comme notre cube précédemment créé). Ces visages peuvent être n'importe quoi (carré, triangle ou même un dodécagon, si vous le souhaitez): ils ont juste besoin d'être des tableaux énumérant leurs sommets.
Regardons le code de la fonction, suivi de l'explication:
<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span> <span>this.x = parseFloat(x);
</span> <span>this.y = parseFloat(y);
</span> <span>this.z = parseFloat(z);
</span><span>};
</span>Cette fonction mérite une explication. Plus précisément, nous devons expliquer quelle est cette fonction Project () et quels sont ces arguments DX et DY. Le reste n'est essentiellement rien d'autre que de répertorier les objets, puis de dessiner chaque visage.
Comme son nom l'indique, la fonction Project () est là pour convertir les coordonnées 3D en 2D. Il accepte un sommet dans l'espace 3D et renvoie un sommet dans le plan 2D que nous pourrions définir comme ci-dessous.
<span>var A = new Vertex(10, 20, 0.5); </span>
Au lieu de nommer les coordonnées x et z j'ai choisi ici pour renommer la coordonnée Z en y, pour maintenir la convention classique que nous trouvons souvent en géométrie 2D, mais vous pouvez conserver Z si vous préférez.
Le contenu exact de Project () est ce que nous verrons dans la section suivante: cela dépend du type de projection que vous choisissez. Mais quel que soit ce type, la fonction render () peut être conservée telle qu'elle est maintenant.
Une fois que nous avons des coordonnées dans l'avion, nous pouvons les afficher sur la toile, et c'est ce que nous faisons… avec un petit truc: nous ne dessinons pas vraiment les coordonnées réelles renvoyées par la fonction Project ().
En fait, la fonction Project () renvoie les coordonnées sur un plan 2D virtuel, mais avec la même origine que celle que nous avons définie pour notre espace 3D. Cependant, nous voulons que l'origine soit au centre de notre toile, c'est pourquoi nous traduisons les coordonnées: le sommet (0,0) n'est pas au centre de la toile, mais (0 dx, 0 dy) est, si nous Choisissez sagement dx et dy. Comme nous le souhaitons (dx, dy) au centre de la toile, nous n'avons pas vraiment le choix et nous définissons dx = toile.width / 2 et dy = toile.height / 2.
Enfin, le dernier détail: pourquoi utilisons-nous -y et non y directement? La réponse est dans notre choix de base: l'axe Z est dirigé vers le haut. Ensuite, dans notre scène, un verti avec une coordonnée Z positive montera. Cependant, sur la toile, l'axe y est dirigé vers le bas: un vertici avec une coordonnée y positive se déplacera. C'est pourquoi nous devons définir la coordonnée Y de la toile sur la toile comme inverse de la coordonnée Z de notre scène.
Maintenant que la fonction Render () est claire, il est temps d'examiner Project ().
Commençons par la projection orthographique. Comme c'est le plus simple, il est parfait pour comprendre ce que nous ferons.
Nous avons trois coordonnées, et nous n'en voulons que deux. Quelle est la chose la plus simple à faire dans un tel cas? Retirez l'une des coordonnées. Et c'est ce que nous faisons en opinion orthographique. Nous supprimerons la coordonnée qui représente la profondeur: la coordonnée y
<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span> <span>this.x = parseFloat(x);
</span> <span>this.y = parseFloat(y);
</span> <span>this.z = parseFloat(z);
</span><span>};
</span>Vous pouvez maintenant tester tout le code que nous avons écrit depuis le début de cet article: Cela fonctionne! Félicitations, vous venez d'afficher un objet 3D sur un écran plat!
Cette fonction est implémentée dans l'exemple en direct ci-dessous, où vous pouvez interagir avec le cube en le tournant avec votre souris.
Voir la vue orthographique 3D PEN par SitePoint (@SitePoint) sur Codepen.
Parfois, une vision orthographique est ce que nous voulons, car il a l'avantage de préserver les parallèles. Cependant, ce n'est pas la vision la plus naturelle: nos yeux ne voient pas comme ça. C'est pourquoi nous verrons une deuxième projection: la vue en perspective.
La vue en perspective est un peu plus complexe que celle orthographique, car nous devons faire des calculs. Cependant, ces calculs ne sont pas si compliqués et il vous suffit de savoir une chose: comment utiliser le théorème d'interception.
pour comprendre pourquoi, regardons un schéma représentant la vue orthographique. Nous avons projeté nos points dans un avion d'une manière orthogonale.
mais, dans la vraie vie, nos yeux agissent davantage sur le schéma suivant.
Fondamentalement, nous avons alors deux étapes:
Contrairement à la vue orthographique, l'emplacement exact de l'avion ici est important: si vous placez l'avion loin de la caméra, vous n'obtiendrez pas le même effet que si vous le placez près. Ici, nous le plaçons à la distance D de la caméra.
À partir d'un sommet M (x, y, z) dans l'espace 3D, nous voulons calculer les coordonnées (x ', z') de la projection m 'sur le plan.
pour deviner comment nous allons calculer ces coordonnées, prenons un autre point de vue et voyons le même schéma que ci-dessus, mais vu du haut.
Nous pouvons reconnaître une configuration utilisée dans le théorème d'interception. Sur le schéma ci-dessus, nous connaissons certaines valeurs: x, y et d, entre autres. Nous voulons calculer x 'afin que nous appliquons le théorème d'interception et obtenons cette équation: x' = d / y * x.
Maintenant, si vous regardez la même scène d'un côté, vous obtenez un schéma similaire, vous permettant d'obtenir la valeur de Z 'grâce à z, y et d: z' = d / y * z.
Nous pouvons maintenant écrire la fonction Project () en utilisant la vue Perspective:
<span>var <span>Vertex</span> = function(x<span>, y, z</span>) {
</span> <span>this.x = parseFloat(x);
</span> <span>this.y = parseFloat(y);
</span> <span>this.z = parseFloat(z);
</span><span>};
</span>Cette fonction peut être testée dans l'exemple en direct ci-dessous. Encore une fois, vous pouvez interagir avec le cube.
Voir la vue en perspective de Pen 3D par SitePoint (@SitePoint) sur Codepen.
Notre moteur 3D (très basique) est maintenant prêt à afficher toute forme 3D que nous voulons. Il y a certaines choses que vous pourriez faire pour l'améliorer. Par exemple, nous voyons chaque visage de nos formes, même ceux à l'arrière. Pour les cacher, vous pouvez implémenter une réduction de la face back-face.
De plus, nous n'avons pas parlé de textures. Ici, toutes nos formes partagent la même couleur. Vous pouvez changer cela, par exemple, en ajoutant une propriété de couleur dans vos objets, pour savoir comment les dessiner. Vous pouvez même choisir une couleur par visage sans changer beaucoup de choses. Vous pouvez également essayer d'afficher des images sur les visages. Cependant, il est plus difficile et détaillant comment faire une telle chose prendrait un article entier.
D'autres choses peuvent être modifiées. Nous avons placé l'appareil photo à l'origine de l'espace, mais vous pouvez le déplacer (un changement de base sera nécessaire avant de projeter les sommets). De plus, les sommets placés derrière la caméra sont ici dessinés, et ce n'est pas une chose que nous voulons. Un plan de coupure peut résoudre ce problème (facile à comprendre, moins facile à implémenter).
Comme vous le voyez, le moteur 3D que nous avons construit ici est loin d'être complet, et c'est aussi ma propre interprétation. Vous pouvez ajouter votre propre contact avec d'autres classes: par exemple, Three.js utilise une classe dédiée pour gérer l'appareil photo et la projection. De plus, nous avons utilisé des mathématiques de base pour stocker les coordonnées, mais si vous souhaitez créer une application plus complexe et si vous avez besoin, par exemple, de faire pivoter beaucoup de sommets pendant un cadre, vous n'aurez pas une expérience fluide. Pour l'optimiser, vous aurez besoin de mathématiques plus complexes: coordonnées homogènes (géométrie projective) et quaternions.
Si vous avez des idées pour vos propres améliorations au moteur, ou si vous avez construit quelque chose de cool en fonction de ce code, veuillez me le faire savoir dans les commentaires ci-dessous!
Pour construire un moteur 3D en JavaScript, vous avez besoin d'une solide compréhension de JavaScript et de ses concepts. La familiarité avec HTML et CSS est également bénéfique. La connaissance des mathématiques 3D, y compris les vecteurs, les matrices et les quaternions, est cruciale. Comprendre les bases des graphiques informatiques, tels que les pipelines de rendu, les shaders et la cartographie de la texture, seront également utiles.
Il y a Plusieurs ressources disponibles en ligne pour apprendre les mathématiques 3D. Des sites Web comme Khan Academy proposent des cours sur l'algèbre linéaire et le calcul vectoriel, qui sont fondamentaux pour comprendre les mathématiques 3D. Des livres comme «3D Math Primer for Graphics and Game Development» peuvent également être utiles.
trois.js et babylon.js sont Deux des bibliothèques les plus populaires pour la construction de moteurs 3D en JavaScript. Les deux bibliothèques fournissent une interface de haut niveau à WebGL, ce qui facilite la création de scènes 3D complexes. Ils offrent également une documentation approfondie et un support communautaire.
Il existe plusieurs façons d'optimiser votre moteur 3D pour de meilleures performances. Une façon consiste à minimiser le nombre d'appels de dessin en utilisant des techniques comme l'instanciation et le lot. Une autre façon consiste à réduire la quantité de données envoyées au GPU en utilisant des textures compressées et une géométrie. Vous pouvez également optimiser vos shaders pour de meilleures performances.
Gestion de la saisie des utilisateurs dans un moteur 3D JavaScript implique généralement l'écoute des événements du clavier et de la souris . Vous pouvez utiliser la méthode «addEventListener» fournie par le navigateur pour écouter ces événements. Vous pouvez ensuite utiliser les données de l'événement pour contrôler l'appareil photo ou d'autres éléments de votre scène 3D.
L'ajout d'éclairage à un moteur 3D JavaScript implique la création de sources lumineuses et la mise en œuvre d'un modèle d'ombrage. Les sources lumineuses peuvent être directionnelles, pointes ou projecteurs. Le modèle d'ombrage, qui détermine comment les surfaces réagissent à la lumière, peuvent être simples (comme l'ombrage lambertien) ou le complexe (comme le rendu à base physique).
L'ajout de textures à un moteur 3D JavaScript consiste à charger des fichiers d'image, à créer des objets de texture et à les cartographier sur la géométrie. Vous pouvez utiliser l'objet «Image» fourni par le navigateur pour charger des images. Vous pouvez ensuite créer des objets de texture à l'aide de la méthode 'GL.CreateTexture' fournie par WebGl.
Ajout d'animations à un moteur 3D JavaScript implique de modifier les propriétés des objets au fil du temps. Vous pouvez utiliser la méthode «RequestanimationFrame» fournie par le navigateur pour créer une boucle qui met à jour les propriétés des objets à un rythme cohérent. Vous pouvez ensuite utiliser des techniques d'interpolation pour transformer en douceur entre différents états.
Les collisions de manipulation dans un moteur 3D JavaScript implique généralement la mise en œuvre d'un algorithme de détection de collision. . Cela peut être aussi simple que de vérifier les chevauchements entre les boîtes de délimitation ou aussi complexes que la vérification des intersections entre les géométries complexes. Une fois qu'une collision est détectée, vous pouvez ensuite réagir en modifiant les propriétés des objets en collision.
Le débogage d'un moteur 3D JavaScrip La complexité des graphiques 3D. Cependant, des outils comme l'inspecteur Webgl et le Chrome Devtools peuvent être très utiles. Ces outils vous permettent d'inspecter l'état du contexte WebGL, de consulter le contenu des tampons et des textures et de parcourir vos shaders.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment utiliser l'expression de point d'interrogation en langage C
Historique des opérations de la table de vue Oracle
Quel logiciel est Twitter ?
Comment créer une page Web réactive
Méthode d'implémentation de la fonction js barrage
Quelles informations privées les amis proches de Douyin verront-ils ?
Qu'est-ce qu'ECharts
Comment trader sur Binance
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
