Cet article explore l'évolution de la simulation de vol, en se concentrant sur la création d'un terrain réaliste à grande échelle dans le vol basé sur le Web Arcade.

Développements de clés dans la simulation de vol:

• Genesis: The Original Flight Simulator (1980) a été révolutionnaire, rendant un monde 3D manuellement sans frameworks 3D, présentant une compétence de programmation remarquable.
• Reimaginage sur le Web: Flight Arcade tire parti des capacités du nouveau navigateur Microsoft Edge et du moteur de rendu Edgehtml, offrant une vision moderne de la simulation de vol.
• Génération de terrains de la map de hauteur: Un terrain réaliste est réalisé en utilisant des photos de hauteur, des images 2D représentant des données d'élévation, une technique également utilisée dans le SIG. Cette méthode offre un stockage de données compact et une conception / édition intuitive dans des outils comme Photoshop.
• Shaders WebGL pour le détail: Les shaders WebGL améliorent le réalisme du terrain en ajoutant des textures détaillées, en particulier notables à bout portant. Un shader personnalisé mélange une texture de base avec le bruit pour des détails accrus.

(Remarque: le code interactif et les exemples sont disponibles à: http://m.miracleart.cn/link/291925ddbc6e2d194d0c22d268e0f865 )

Highmaps de hauteur: une technique simple mais puissante

L'article détaille l'utilisation de hauteurs pour créer le terrain 3D. Le noir représente le point le plus bas, le blanc le plus élevé, avec des échelles de gris indiquant des élévations intermédiaires. Cette approche simple fournit des détails suffisants pour Flight Arcade, tandis que des applications plus complexes peuvent utiliser le spectre de couleurs complet pour une plus grande précision. Highmaps offre des avantages par rapport aux maillages polygonaux traditionnels en raison de leur taille compacte et de leur facilité d'édition dans le logiciel de manipulation d'image.

(démo interactive disponible)

Le vol de hauteur d'arcade de vol, créé dans Photoshop, est basé sur une cha?ne de l'?le de l'océan Pacifique. L'image montre clairement des zones "plates" pour la piste et le village.

(Flight Arcade's Heightmap)

(texture mappée sur le maillage 3D)

de la taille de hauteur à la maillage 3D en utilisant babylon.js

babylon.js simplifie la conversion de l'image de hauteur en un maillage 3D. Le paramètre subdivisions contr?le le niveau de détail, impactant considérablement le nombre de sommets. Une texture filaire aide à visualiser le processus de conversion de hauteur-masse.

(Les extraits de code illustrant le décodage de hauteur de hauteur et l'application de texture filaire sont omises pour la concision mais sont disponibles dans l'article d'origine.)

Améliorer les détails de la texture avec les shaders webgl

Une grande image de texture (initialement 4096x4096, réduite plus tard à 2048x2048) a été utilisée, mais pour améliorer les détails, en particulier à bout portant, un shader personnalisé a été implémenté. Ce shader mélange la texture de base avec une texture de bruit, créant une apparence plus réaliste.

(avant et après l'application de shader)

Le shader se compose de vertex et de shaders de fragments écrits en GLSL. Le vertex shader gère la cartographie de la texture standard, tandis que le shader de fragment mélange les textures de base et de bruit, incorporant également des effets de brouillard en fonction de la distance de la caméra.

(Les extraits de code pour le sommet et les shaders de fragments sont omis pour la concision mais sont disponibles dans l'article d'origine.)

Conclusion

Flight Arcade montre comment Highmaps et WebGL Shaders peuvent créer un terrain à grande échelle réaliste dans des environnements 3D basés sur le Web. Cette approche offre des avantages en termes d'efficacité des données et de flux de travail de conception, présentant la puissance des technologies Web modernes. L'article met également en évidence diverses ressources Microsoft pour apprendre le développement JavaScript et Web. Une section FAQ aborde les questions courantes sur les simulateurs de vol en général.

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!