Comment écrire un moteur graphique 3D utilisable en JavaScript? [fermé]

Question

Je me suis récemment concentré sur le dessin de formes intéressantes dans un canevas HTML 5.0. Et je veux écrire un moteur graphique 3D utilisable en JavaScript. J'ai déjà fini un cube en rotation. Et je veux terminer les formes comme suit: http://gyu.que.jp/jscloth /touch.html .

Qui a déjà essayé dans ce domaine?

Answer 1

Edit: Cette question a été posée il y a de nombreuses années. Depuis lors, tous les navigateurs sauf IE ( pour l'instant? ) a ajouté la prise en charge de Webgl. Vous pouvez voir de nombreux exemples ici: http://www.chromeexperiments.com/webgl/

Je ne veux vraiment pas vous décourager, mais pour écrire un 3D moteur en JavaScript, vous devez être extrêmement bien versé et intime dans le domaine mathématique / logique du rendu 3D.

Puisque vous n’avez pas précisé votre expertise actuelle, je suppose que vous ne le faites pas. Dans ce cas, je vous suggère fortement de commencer ailleurs. Par exemple, XNA Game Studio . Vous écrivez le code en C #, et il existe déjà de nombreuses API bien écrites qui résument la plupart (mais certainement pas toutes) les parties les plus difficiles. Mais c’est un excellent moyen d’apprendre beaucoup de concepts et de mathématiques derrière le rendu 3D.

Cependant, si vous êtes prêt à commencer par JavaScript, il existe déjà de nombreuses ressources sur Internet à ce sujet. Par exemple celui-ci :-)
http://dev.opera.com / articles / vue / partie-jeux-3d-avec-toile-et-raycasting /

Bonne chance!

Answer 2

J'ai écrit un moteur Javascript en 3D il y a environ un an, à peu près au moment où Google a publié son navigateur Chrome avec le moteur Javascript ultra-rapide V8. Malheureusement, comme aucun navigateur n'expose une API graphique 3D (telle que OpenGL ou Direct3D), ce moteur convertit les images bitmap sur la page Web afin d'obtenir des triangles à texture affinée affinés (qui sont inférieurs aux triangles à texture appliquée mappés en perspective). assez lent.

J'ai utilisé mon moteur Javascript Javascript pour créer une bibliothèque de modèles 3D . (Astuce: ne regardez pas le premier modèle - c'est le plus grand et le plus lent à voir!). Les performances sont d'environ 10 images par seconde pour un modèle 3D avec environ 1000 triangles dans Google Chrome sur mon PC.

J'ai envisagé d'ouvrir le source à la recherche du code source de ce moteur, mais je n'ai jamais réussi à le faire. Si l'intérêt est suffisant, je mettrai le code source dans Google Code.

Mon projet animalier actuel est un moteur Silverlight 3D et une visionneuse de modèle , qui est un logiciel. Moteur 3D (mon code C # contrôle la couleur de chaque pixel). Silverlight 3 est bien plus rapide que Javascript, mais il est non standard, il s’ajoute au navigateur et ne prend toujours pas en charge les graphismes accélérés 3D (sans trop de temps système).

Mise à jour: depuis que j'ai écrit ce billet pour la première fois, j'ai mis à jour le visualiseur de modèles Silverlight mentionné ci-dessus pour utiliser Silverlight 5 et la 3D à accélération matérielle.

Answer 3

Pourquoi ne pas lier une bibliothèque 3D préexistante à JavaScript? Comme OpenGL.

V8-GL expose 80% de l'API OpenGL en JavaScript:

Answer 4

Je ne sais pas comment cela irait en en écrivant un. Mais voici quelques exemples.

• Le moteur de rendu
• Tourner en rotation

Answer 5

Pour en écrire un, vous devez d'abord décider si vous allez soutenir Excanvas, afin que IE puisse l'utiliser ou non.

Cela fixera certaines limites à ce que vous pouvez faire si vous supportez IE.

La meilleure chose à faire est de commencer par créer des formes principales. Il est fort probable que vous souhaitiez disposer de certaines primitives sur lesquelles tout le reste peut être construit. Par conséquent, vous voudrez peut-être examiner OpenGL ou DirectX, ainsi que leurs primitives.

Une fois que vous avez cela et que vous pouvez les déplacer dans l'espace 3D, vous voudrez commencer à ajouter des caméras, mais cela sera relativement facile comparé à l'étape 1.

Malheureusement, tout cela est très lourd en maths, vous allez donc perdre beaucoup de performances si vous créez plusieurs objets 3D qui doivent être déplacés fréquemment.

Je pense que le mieux est d’attendre, car à la fin de l’année 2007, il existait des blogs sur Firefox et Opera afin de disposer de la 3D sur la toile: http://starkravingfinkle.org/blog/2007/11/animating-with-canvas/

La raison en est que s'il est intégré dans le navigateur, la majeure partie du travail sera fastidieuse, en particulier s'il prend en charge certaines versions d'OpenGL.