Apprentissage WebGL et three.js
Je suis nouveau et je 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 ceux qui ont appris à la fois WebGL et three.js ...
Est-il nécessaire de connaître WebGL pour utiliser three.js?
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 savoir ce que vous apprenez d’abord - vous pouvez les apprendre simultanément si vous le souhaitez. (C'est ce que j'ai fait.)
Cela signifie que vous devez comprendre:
- Concepts WebGL
- Three.js
- Les concepts mathématiques sous-jacents
Three.js. Three.js fait un excellent travail pour résumer de nombreux détails de WebGL, donc personnellement, je suggérerais d'utiliser Three.js. pour votre projet. Mais rappelez-vous, Three.js est dans alpha, et il change fréquemment, vous devez donc vous y préparer. La plupart des gens apprennent le Three.js en étudiant les exemples. Évitez les livres et les didacticiels obsolètes et évitez les exemples tirés d'Internet qui renvoient à d'anciennes versions de la bibliothèque.
WebGL. Si vous utilisez Three.js, vous n'avez pas besoin de savoir programmer, mais vous devez simplement comprendre les concepts de WebGL. Cela signifie que vous devez simplement être capable de lire le code WebGL de quelqu'un d'autre et comprendre ce que vous lisez. C'est beaucoup plus facile que de devoir écrire un programme WebGL à partir de rien. Vous pouvez maîtriser suffisamment les concepts WebGL en utilisant l’un des didacticiels en ligne, tels que le didacticiel pour débutant à l’adresse WebGLFundamentals.org et Learning WebGL .
Math. Encore une fois, vous devez au moins comprendre les concepts. Trois bons livres sont:
Introduction aux mathématiques 3D pour le graphisme et le développement de jeux par Fletcher Dunn et Ian Parberry
Mathématiques au quotidien pour les jeux et les applications interactives: Guide du programmeur par James M. Van Verth et Lars M. Bishop
Mathématiques pour la programmation de jeux 3D et l'infographie par Eric Lengyel
J'espère que ça t'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 des travaux visant également à acquérir une expérience pratique. Il couvre tous les concepts de base de Three.js et Computer Graphics
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 au niveau Three.js.
- Pour un premier projet 3D, les experts suggèrent d'utiliser une bibliothèque telle que Three.js afin de s'habituer aux termes et au modèle 3D général.
Quelle que soit la direction que vous choisissez, je vous suggère d’approfondir vos connaissances en algèbre linéaire . Continuez ensuite et apprenez ou peaufinez votre compréhension des dimensions MVP (projection de vue modèle) . Three.JS peut en résumer une bonne partie, mais je pense qu’il est essentiel de bien comprendre ces concepts avant de s’intéresser sérieusement à tout développement 3D.
J'ai écrit un article d'introduction sur MVP lorsque j'ai appris la programmation 3D avec OpenGL. Je me suis rendu compte que jusqu'à ce que je sois capable d'expliquer ce que sont ces matrices de transformation et leur relation avec les différentes dimensions/espaces, je ne savais pas aucune programmation en 3D, bien que je puisse rendre des objets à l'écran.
Étant donné que votre objectif est de créer des jeux, je pense que vous bénéficierez beaucoup de l'apprentissage préalable de quelques WebGL bruts, même si vous finissez par utiliser un framework tel que Three.js pour vous aider à écrire votre code ultérieurement.
"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 telles que three.js.
Ce qui a fait mon choix entre WebGL ou Three.js une évidence.
Je venais d'un passé d'Unity3D et de Papervision3D à l'époque, alors je comprenais bien comment gérer l'espace 3D. Three.js est la voie à suivre pour votre premier pas dans l'apprentissage de la gestion des projets WebGL. L'API est très bonne, très puissante et si vous venez d'une autre technologie 3D, vous serez opérationnel avec très peu de temps.
J'ai passé beaucoup de temps avec les exemples de Threejs.org - ils en contiennent une tonne et ils sont très doués pour vous aider à partir dans la bonne direction. Les documents sont assez corrects, surtout si vous les comparez à d'autres api WebGL 3D.
Vous pouvez également envisager d'obtenir la version gratuite d'Unity3D et l'exportateur gratuit de collada (c'était gratuit lorsque je l'ai eu) à partir de leur magasin d'applications (Fenêtre> Magasin d'applications). 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 et 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 pour une utilisation dans votre projet. Des choses comme DrawAllAxis () sont inestimables lors du débogage de votre scène, etc.
Three.js est toutefois un excellent moyen de procéder. Il est suffisamment flexible pour vous permettre d'écrire vos propres shaders/objets, etc., et suffisamment puissant pour vous aider à atteindre vos objectifs.
J'ai pris trois.js, mais j'ai aussi sauté dans GLSL et beaucoup expérimenté avec le shaderMaterial three.js. Une façon de s'y prendre - three.js fait toujours abstraction de l'essentiel pour vous, mais cela vous donne également un accès très propre et de bas niveau à toutes les fonctionnalités de rendu (projection, animation).
De cette façon, vous pouvez même suivre quelque chose comme ce tutoriel génial en open-gl . Vous n'avez pas besoin de configurer les matrices, les tableaux typés, car trois les configurent déjà pour vous, en les mettant à jour si nécessaire. Le shader cependant, vous pouvez écrire à partir de zéro - un simple rendu de couleur 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 créer les effets, mais le shader peut être très simple au début.
Comme les shaders programmables sont l’essence des graphismes 3D modernes, j’espère que ma réponse n’est pas en reste :) Tôt ou tard, quiconque le fera devra au moins comprendre ce qui se passe sous le capot, c’est la nature de la bête. Aussi, comprendre la 4ème dimension dans un espace homogène est probablement important aussi.
Je viens d’apprendre un peu des deux et j’ai l’impression de comprendre les bases de Webgl. Je pense qu’une introduction à Webgl est suffisante et que je passe ensuite à trois js. Ce sera assez facile une fois que vous aurez compris les concepts sous-jacents de WebGL. Liens utiles:
- Meilleure introduction que j'ai lue: http://dev.opera.com/articles/view/an-inintroduction-to-webgl/
- Didacticiels complets: http://www.johannes-raida.de/tutorials.htm