Apprentissage de WebGL et three.js [fermé]

Je suis nouveau et commence à en apprendre davantage sur l'infographie 3D dans les navigateurs Web. Je suis intéressé par la création de jeux 3D dans un navigateur. Pour tous ceux qui ont appris à la fois WebGL et three.js ...

1. La connaissance de WebGL est-elle nécessaire pour utiliser three.js?

2. Quels sont les avantages de l'utilisation de three.js par rapport à WebGL?

Puisque vous avez de grandes ambitions, vous devez investir du temps pour apprendre les fondamentaux. Ce n'est pas une question de ce que vous apprenez en premier - vous pouvez les apprendre simultanément si vous le souhaitez. (C'est ce que j'ai fait.)

Cela signifie que vous devez comprendre:

1. Concepts WebGL
2. Three.js
3. Les concepts mathématiques sous-jacents

Three.js. Three.js fait un excellent travail d'abstraction de nombreux détails de WebGL, donc personnellement, je vous suggère d'utiliser Three.js pour votre projet. Mais rappelez-vous, Three.js est en alpha , et il change fréquemment, vous devez donc vous y préparer. La plupart des gens apprennent Three.js en étudiant les exemples. Évitez les livres et les didacticiels obsolètes, et évitez les exemples du net qui renvoient aux anciennes versions de la bibliothèque.

WebGL. Si vous utilisez Three.js, vous n'avez pas besoin de savoir programmer en WebGL, vous avez juste besoin de comprendre les concepts WebGL. Cela signifie que vous avez juste besoin de pouvoir lire le code WebGL de quelqu'un d'autre et de comprendre ce que vous lisez. C'est beaucoup plus facile que prévu d'écrire vous-même un programme WebGL à partir de zéro. Vous pouvez apprendre suffisamment bien les concepts WebGL en utilisant l'un des didacticiels sur le net, tels que le didacticiel pour débutants sur WebGLFundamentals.org et Learning WebGL .

Math. Encore une fois, vous devez au moins comprendre les concepts. Trois bons livres sont:

1. Introduction aux mathématiques 3D pour le développement graphique et de jeux par Fletcher Dunn et Ian Parberry

2. Mathématiques essentielles pour les jeux et les applications interactives: un guide du programmeur par James M. Van Verth et Lars M. Bishop

3. Mathématiques pour la programmation de jeux 3D et l'infographie par Eric Lengyel

J'espère que cela vous aide. Bonne chance.

Il existe un très bon cours en ligne - Graphiques 3D interactifs à https://www.udacity.com/course/cs291 sur THREE.js. Ce cours comprend également des devoirs pour acquérir une expérience pratique. Il couvre tous les concepts de base de Three.js et de l'infographie

Mes pensées personnelles sont les suivantes:

• Si vous avez suffisamment de temps, vous pouvez apprendre les deux, mais notez que WebGL est bien inférieur à Three.js.
• Pour un premier projet 3D, les experts suggèrent d'utiliser une bibliothèque comme Three.js afin de s'habituer aux termes et au modèle 3D général.

Quelle que soit la direction dans laquelle vous choisissez d'aller, je vous suggère d'apprendre / de perfectionner vos compétences en algèbre linéaire . Ensuite, apprenez ou affinez votre compréhension des dimensions MVP (Model View Projection) . Troisièmement, JS peut résumer une grande partie de cela, mais je pense qu'il est essentiel de bien comprendre ces concepts avant de se lancer sérieusement dans tout développement 3D.

J'ai écrit un article d'introduction sur MVP lorsque j'ai appris la programmation 3D avec OpenGL. J'ai réalisé que jusqu'à ce que je sois capable d'expliquer ce que sont ces matrices de transformation et comment elles se rapportent aux différentes dimensions / espaces, je ne connaissais vraiment aucune programmation 3D, même si je pouvais rendre des objets à l'écran.

Puisque votre objectif est de créer des jeux, je pense que vous bénéficierez beaucoup d'apprendre d'abord du WebGL brut, même si vous finissez par utiliser un framework comme Three.js pour vous aider à écrire votre code plus tard.

"WebGL est une API 2D et non une API 3D"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

Cet article décrit les différences fondamentales entre les bibliothèques WebGL et 3D comme three.js.
Ce qui a fait de mon choix entre WebGL ou Three.js une évidence.

Je venais d'un milieu Unity3D ainsi que Papervision3D à l'époque, donc j'avais une bonne compréhension de la façon de gérer l'espace 3D. Three.js est la voie à suivre pour votre premier saut dans l'apprentissage de la gestion des projets WebGL. L'API est très bonne, elle est très puissante et si vous venez d'une autre technologie 3D, vous serez opérationnel en très peu de temps.

J'ai passé beaucoup de temps avec les exemples de Threejs.org - il y en a une tonne et ils sont très bons pour vous faire partir et courir dans la bonne direction. Les documents sont assez décents, surtout si vous les comparez à d'autres API webGL 3D.

Vous pouvez également envisager d'obtenir la version gratuite de Unity3D et l'exportateur gratuit collada (était gratuit quand je l'ai eu) à partir de leur boutique d'applications (Fenêtre> App Store). J'ai trouvé assez facile de configurer ma scène dans Unity et de l'exporter vers Collada pour l'utiliser avec Three.js.

De plus, j'ai posté cette classe que j'utilise avec Three.js appelée neo ( http://rockonflash.com/webGL/three/neo.js ). Ajoutez-le simplement à votre projet, puis appelez Neo.JackIntoThree () et il ajoutera les méthodes / propriétés à Object3D à utiliser dans votre projet. Des choses comme DrawAllAxis () sont inestimables lors du débogage de votre scène, etc.

Cependant, Three.js est une excellente façon de procéder - il est suffisamment flexible pour vous permettre d'écrire vos propres shaders / objets, etc., et assez puissant dès la sortie de la boîte pour vous aider à atteindre vos objectifs.

J'ai choisi three.js, mais j'ai également sauté dans GLSL et j'ai beaucoup expérimenté avec three.js shaderMaterial. Une façon de procéder - three.js résume encore beaucoup de choses pour vous, mais il vous donne également un accès très propre et de bas niveau à toutes les capacités de rendu (projection, animation).

De cette façon, vous pouvez suivre même quelque chose comme ce super tutoriel open-gl . Vous n'avez pas à configurer les matrices, les tableaux typés, car trois le configurent déjà pour vous, les mettant à jour si nécessaire. Le shader cependant, vous pouvez écrire à partir de zéro - un simple rendu des couleurs serait deux lignes de GLSL. Il existe également un plug-in de post-traitement pour three.js qui configure tous les tampons, les quads plein écran et tout ce dont vous avez besoin pour faire les effets, mais le shader peut être très simple pour commencer.

Puisque les shaders programmables sont l'essence même du graphisme 3D moderne, j'espère que ma réponse ne manque pas le point :) Tôt ou tard, quiconque fait cela doit au moins comprendre ce qui se passe sous le capot, c'est la nature de la bête. De plus, la compréhension de la 4ème dimension dans un espace homogène est probablement également importante.

Ce livre est bon pour WebGL.

Je viens d'apprendre un peu des deux et je pense que comprendre les bases de webgl, je pense qu'une introduction sur webgl est suffisante et ensuite sauter dans trois js. Ce sera assez facile une fois que vous aurez compris les concepts sous-jacents de WebGL. Liens utiles:

1. Meilleure introduction que j'ai lue: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. Tutoriels complets: http://www.johannes-raida.de/tutorials.htm